@charset "MS932";
/*-------------------------------------------------------------------------------------
  CSS変数の定義
-------------------------------------------------------------------------------------*/
:root{
    --size1:4px;
    --size2:8px;
    --size3:12px;
    --size4:16px;
    --size5:20px;
    --size6:24px;
    --size7:32px;
    --size8:40px;
    --size9:48px;
    --size10:56px;
    --size11:64px;
    --layoutChassisInfoDt:195px;
    --textareaRow:3;
}
/*-------------------------------------------------------------------------------------
  背景画像の定義
-------------------------------------------------------------------------------------*/
.menu{
    background-image:url("../images/icon_menu.svg"),url("../images/icon_menu_hover.svg");
}
.user{
    background-image:url("../images/icon_user.svg"),url("../images/icon_user_hover.svg");
}
.user:disabled{
    filter:none !important;
    background-image:url("../images/icon_user_disabled.svg");
}
.omit{
    background-image:url("../images/icon_omit.svg"),url("../images/icon_omit_hover.svg");
}
.toggle{
    background-image:url("../images/icon_toggle.svg"),url("../images/icon_toggle_hover.svg");
}
.filter{
    background-image:url("../images/icon_filter.svg"),url("../images/icon_filter_hover.svg");
}
tr.filter{
    background-image: none;
    background-color: #F7F8F9;
}
.filter.activated{
    background-image:url("../images/icon_filter_filtered.svg"),url("../images/icon_filter_hover.svg");
}
.info{
    background-image:url("../images/icon_info.svg"),url("../images/icon_info_hover.svg");
}
.info:disabled{
    filter:none !important;
    background-image:url("../images/icon_info_disabled.svg");
}
.close{
    background-image:url("../images/icon_close.svg"),url("../images/icon_close_hover.svg");
}
.warning{
    background-image:url("../images/icon_warning.svg");
    color:#995D00;
}
.error{
    background-image:url("../images/icon_error.svg");
    color:#980000;
}
.asc{
    background-image:url("../images/icon_sort_asc.svg");
}
.desc{
    background-image:url("../images/icon_sort_desc.svg");
}
.supplement{
    background-image:url("../images/icon_supplement.svg"),url("../images/icon_supplement_hover.svg");
}
.orange, td.orange, .orange th, .orange td,.orange::before{
    background-color:#FFCFBE;
}
.red,td.red,.red th,.red td,.red::before{
    background-color:#FFDADF;
}
.yellow,td.yellow,.yellow td,.yellow th,.yellow::before{
    background-color:#FFFACD;
}
.purple,td.purple,.purple td,.purple th,.purple::before{
    background-color:#DBD8FA;
}
.blue,td.blue,.blue td,.blue th,.blue::before{
    background-color:#D9F6FF;
}
.gray,td.gray,.gray td,.gray th,.gray::before{
    background-color:#D3D3D3;
}
.copy{
    background-image:url("../images/icon_copy.svg"),url("../images/icon_copy_hover.svg");
}
.hidden{
    background-image: 
        url(../images/icon_toggle_down.svg),
        url(../images/icon_toggle_down_hover.svg);
}
/*-------------------------------------------------------------------------------------
  html,bodyのstyle
-------------------------------------------------------------------------------------*/
html,body{
    width: 100vw;
    min-width: 1280px;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    color: #222222;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
    font-size: 14px;
    scroll-behavior: smooth;
    overflow: auto;
}
html{
    background-color: #FBFBF7;
}
body{
    height: 100vh;
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3,min-content) 1fr;
    gap: 0px 0px;
    overflow: hidden;
}
/*-------------------------------------------------------------------------------------
  調整用のdiv
-------------------------------------------------------------------------------------*/
.d-none{
    display: none !important;
}
.invisible{
    visibility: hidden;
}
/*-------------------------------------------------------------------------------------
  リンクのstyle
-------------------------------------------------------------------------------------*/
a{
    background: none no-repeat left center / var(--size6) auto transparent;
}
a:link,
a:visited,
a:hover,
a:active{
    color: #006159;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
a:active{
    color: #006159;
    text-decoration: underline;
}
a.disabled{
    color: #BCBCBC;
    pointer-events: none;
}
a.beforeIcon{
    display:inline-flex;
    padding-left:calc(var(--size6) + var(--size2));
}
a.scrollTop{
    position:static;
    right:var(--size4);
    bottom:var(--size4);
    display:inline-flex;
    width:auto;
    height:auto;
    margin:0 var(--size4) 0 auto;
    padding-left:20px;
    overflow:visible;
    text-indent:0;
    white-space:normal;
    background-size:12px 12px;
    background-image:url("../images/icon_top_sp.svg");
}
/*-------------------------------------------------------------------------------------
  inputフィールド等の共通style
-------------------------------------------------------------------------------------*/
p,ul,ol,li,dl,dt,dd,figure,h1{
    margin: 0;
    padding: 0;
    list-style: none;
}
input,button,textarea,select,option,h1{
    font-family: inherit;
    font-size: inherit;
}
/* テキストボックス、ラジオボタン、チェックボックス等の共通style */
input{
    height: var(--size7);
    border: 1px solid #A7A9BC;
    border-radius: 2px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 var(--size2);
    color: #222222;
}
/* ラジオボタン、チェックボックスの共通style */
input[type="radio"],
input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: var(--size4);
    height: var(--size4);
    background-color: #FFFFFF;
    vertical-align: middle;
}
/* ラジオボタンのstyle */
input[type="radio"]{
    border-radius: 50%;
}
input[type="radio"]:active,
input[type="radio"]:checked{
    background-color: #006159;
    box-shadow: 0 0 0 3px #FFFFFF inset;
}
/* チェックボックスのstyle */
input[type="checkbox"]{
    background: url("../images/icon_checkbox.svg") no-repeat left 200% center / 100% auto #FFFFFF;
}
input[type="checkbox"]:active,
input[type="checkbox"]:checked{
    background-position: center center;
    background-color: #006159;
    border-color: #006159;
}
/* セレクトボックスのstyle */
select{
    -webkit-appearance: none;
    appearance: none;
    background: url("../images/icon_pulldown.svg") no-repeat right 6px center / 12px auto #FFFFFF;
    border: 1px solid #A7A9BC;
    border-radius: 2px;
    height: var(--size7);
    padding: 0 var(--size6) 0 var(--size3);
    color: #222222;
}
select:disabled{
    background-color: #F2F2F2;
    border-color: #BCBCBC;
}
/* テキストエリアのstyle */
textarea{
    display: block;
    width: 100%;
    height: calc((var(--size2) * 2) + ((1rem * 1.5) * var(--textareaRow)));
    padding: var(--size2);
    border: 1px solid #A7A9BC;
    border-radius: 2px;
    box-sizing: border-box;
    resize: none;
}
textarea[readOnly]{
    padding: 0;
    border: 0 none;
}
/* フォーカス時のstyle */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus{
    border-color: #008C70;
    outline: none;
}
/* 非活性のstyle */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
textarea:disabled{
    background-color: #F2F2F2;
    border-color: #BCBCBC;
    pointer-events: none;
}

/* ラジオボタンの非活性風スタイルの追加 */
.submit-radio.inactive {
    /* 非活性の見た目にするための透明度 */
    opacity: 0.5;
    /* クリックやマウスイベントを無効化 */
    pointer-events: none;
}

/*-------------------------------------------------------------------------------------
  リストのstyle
-------------------------------------------------------------------------------------*/
ol{
  counter-reset: olNumber 0;
}
ol > li {
  counter-increment: olNumber 1;
}
ol > li:before,
.content > div .minorItems ol > li a:before {
    content: counter(olNumber) ".";
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}
li{
    background: none no-repeat left center / var(--size4) auto transparent;
}
/*-------------------------------------------------------------------------------------
  dlのstyle
-------------------------------------------------------------------------------------*/
dl{
    display: grid; 
    grid-template-columns: max-content 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 0px;
    border-top: 1px solid #A7A9BC;
    margin-top: var(--size2);
}
dt,dd{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #A7A9BC;
    box-sizing: border-box;
}
dt{
    background-color: #E7EAED;
}
dd{
    vertical-align: middle;
    background-color: #FFFFFF;
}
/*-------------------------------------------------------------------------------------
  イタリック体のstyle
-------------------------------------------------------------------------------------*/
em{
    color: #C00000;
    font-weight: normal;
}
/*-------------------------------------------------------------------------------------
  button
-------------------------------------------------------------------------------------*/
button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: var(--size8);
    padding: 0 var(--size4);
    color: inherit;
    background: none no-repeat center center / cover,
                none no-repeat var(--size8) var(--size8) / cover;
    border: 2px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
}
button.iconOnly{
    justify-content: flex-start;
    width: var(--size7);
    height: var(--size7);
    min-width: 0;
    padding: 0;
    border: 0 none;
    overflow: hidden;
    text-indent: calc(var(--size8) * 2);
    white-space: nowrap;
    transform-origin: 50% 50%;
    transform: rotate(0);
    background-size: 75% auto,75% auto;
}
button.iconOnly:hover{
    background-position: var(--size8) var(--size8) ,center center;
}
button.iconOnly:active,
button.iconOnly.selected{
    background-color: #7FDFC9;
}
button.iconOnly:disabled{
    filter: invert(91%) sepia(10%) saturate(17%) hue-rotate(314deg) brightness(84%) contrast(86%);
    pointer-events: none;
}
/* primaryボタンのstyle */
button.primary{
    min-width: 143px;
    height: var(--size7);
    color: #FFFFFF;
    background-color: #006159;
    border: 1px solid #006159;
    font-size: 16px;
}
/* 共通スタイル(ボタン・XXXC3030_大項目ナビスタイル) */
button.primary:hover,
.navi > ul.majorItems > li > label:hover > span,
.navi > ul.majorItems > li.moveMajor > label:hover > button{
    color: #FFFFFF;
    background-color: #008C70;
    border-color: #008C70;
}
button.primary:active,
.navi > ul.majorItems label:active > span ,
.navi > ul.majorItems label > input:checked + span {
    color: #006159;
    background-color: #FFFFFF;
    border-width: 2px;
    font-weight: bold;
}
button.primary:disabled,
button.primary.inactive,/* 非活性風のスタイル追加 */
.navi > ul.majorItems label > input:disabled + span{
    pointer-events: none;
    color: #E8E8E8;
    background-color: #BCBCBC;
    border-color: #BCBCBC;
}
.navi > ul.majorItems label > input:disabled + span{
    border-width: unset;
    font-weight: unset;
}
/* secondaryボタンのstyle */
button.secondary{
    min-width: 143px;
    height: var(--size7);
    color: inherit;
    background-color: #D8F6F0;
    border: 1px solid #4BAE9A;
}
button.secondary:hover{
    color: #006159;
    background-color: #D8F6F0;
    border-color: #4BAE9A;
}
button.secondary.active,
button.secondary:active{
    color: #006159;
    background-color: #FFFFFF;
    border-color: #4BAE9A;
}
button.secondary.inactive, /* 非活性風のスタイル追加 */
button.secondary:disabled{
    pointer-events: none;
    color: #BCBCBC;
    background-color: #F2F2F2;
    border-color: #BCBCBC;
}
button.secondary.iconOnly{
    min-width: auto;
}
/*-------------------------------------------------------------------------------------
  tableのstyle
-------------------------------------------------------------------------------------*/
table {
    border-collapse: collapse;
}
thead th{
    box-shadow: 0 -2px 0 0 #A7A9BC inset;
    padding-bottom: var(--size1);
}
col{
    display:none;
}
th, td{
    max-width: 500px;
    padding: var(--size1) var(--size2);
    box-shadow: 0 -1px 0 0 #A7A9BC inset;
    white-space: nowrap;
    font-weight: normal;
    text-align: left;
    line-height: 1;
    background: none no-repeat left var(--size2) center / var(--size6) auto transparent;
}
th{
    background-size: var(--size2) auto;
    background-position: right var(--size2) center;
    text-align: center;
    vertical-align: top;
}
th input[type="text"], th select{
    width: 100%;
}
th.borderRight{
    padding-right: var(--size2);
    padding-bottom: var(--size1);
    box-shadow: -1px -2px 0 0 #A7A9BC inset;
}
th.borderRight[colspan]{
    box-shadow: -1px 0 0 0 #A7A9BC inset, 0 -1px 0 0 #FFFFFF inset;
}
td.borderRight{
    padding-right: var(--size2);
    box-shadow: -1px -1px 0 0 #A7A9BC inset;
}
td {
    background-size: 14px 14px;
    white-space: normal;
    background-color: #FFFFFF;
}
table .th-in-td{
    display: none;
}
td.col-0-checkbox{
    text-align: center;
}
table.onSortHover>thead>tr>th[data-col]:hover,
table.onSortHover>thead>tr>th[data-col].asc:hover,
table.onSortHover>thead>tr>th[data-col].desc:hover,
table.onSortHover>thead>tr>th[data-col].not-sorted,
table.onSortHover>thead>tr>th[data-col].asc,
table.onSortHover>thead>tr>th[data-col].desc{
    background-repeat: no-repeat;
    background-position: right center;
}
table.onSortHover>thead>tr>th[data-col].asc,
table.onSortHover>thead>tr>th[data-col]:not(.asc):hover,
table.onSortHover>thead>tr>thth[data-col]:not(.desc):hover{
    background-image: url(../images/icon_sort_asc.svg);
}
table.onSortHover>thead>tr>th[data-col].desc,
table.onSortHover>thead>tr>th[data-col].desc:hover{
    background-image: url(../images/icon_sort_desc.svg);
}
table:not(.onSortHover)>tbody>tr>td .th-sort{
    display: none;
}
table.onSortHover>tbody>tr>td>.th-in-td>.th-sort.asc.previous-col,
table.onSortHover>tbody>tr>td>.th-in-td:hover>.th-sort:not(.desc),
table.onSortHover>tbody>tr>td>.th-in-td:hover>.th-sort.asc,
table.onSortHover>tbody>tr>td>.th-in-td:hover>.th-sort.not-sorted{
    background-image: url(../images/icon_sort_asc.svg);
    background-repeat: no-repeat;
    background-position: center center;
}
table.onSortHover>tbody>tr>td>.th-in-td>.th-sort.desc.previous-col,
table.onSortHover>tbody>tr>td>.th-in-td:hover>.th-sort.desc{
    background-image: url(../images/icon_sort_desc.svg);
    background-repeat: no-repeat;
    background-position: center center;
}
table.onSortHover>tbody>tr>td>.th-in-td{
    --th-checkbox: 24px;
    --th-sort: 16px;
}
table.onSortHover>tbody>tr>td>.th-in-td>.th-checkbox{
    width: var(--th-checkbox);
}
table.onSortHover>tbody>tr>td>.th-in-td>.th-sort{
    width: var(--th-sort);
}
table.onSortHover>tbody>tr>td>.th-in-td>.th-text{
    width: calc( 100% - var(--th-checkbox) - var(--th-sort));
    padding: var(--size4) 0;
    /* border-bottom: 1px solid rgb(200, 200, 200); */
}
table.onFilter tr.filter>th{
    text-align: center;
}
table.onFilter tr.filter>th>input[type=text]{
    display: inline-block;
    box-sizing: border-box;
    width: 90%;
    height: 32px;
}
.activate-filter{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: 
        url(../images/icon_filter.svg), 
        url(../images/icon_filter_hover.svg);
    background-size: contain;
    background-position: center center, 3rem 3rem;
    background-repeat: no-repeat;
    background-color:unset;
    border:none;
}
.activate-filter:hover{
    background-position: 3rem 3rem, center center;
}
.activate-filter.activated{
    background-position: center center, 3rem 3rem;
}
.activate-filter.activated.hover{
    background-position: 3rem 3rem, center center;
}
/*-------------------------------------------------------------------------------------
  sectionのstyle
-------------------------------------------------------------------------------------*/
section header{
    display: flex;
    margin-bottom: var(--size2);
}
section section:not(:first-of-type){
    margin-top: var(--size4);
}
section header em{
    display: inline;
    margin: 0 0 0 var(--size4);
}
section footer{
    display: grid; 
    grid-template-columns: max-content; 
    grid-template-rows: 1fr; 
    gap: 0px var(--size4);
    grid-auto-flow: column;
    grid-auto-columns: max-content; 
    justify-content: center; 
    justify-items: center;
    margin: var(--size4);
}
/*-------------------------------------------------------------------------------------
  ポップアップ固有
-------------------------------------------------------------------------------------*/
.popup{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0 0;
    justify-content: center; 
    align-content: center; 
    justify-items: center; 
    align-items: center;
     background: none rgba(0,0,0,0.65);
    display: grid;
    position: fixed;
    opacity: 1;
    z-index: 3;
    transition: z-index 0.3s step-start, opacity 0.3s ease;
}
.popup > aside{
    position: relative;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr max-content;
    gap: 0 0;
    background-color: #FBFBF7;
    border: 1px solid #A7A9BC;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.35);
    width: calc(100vw - var(--size4));
    max-width: 598px;
    box-sizing: border-box;
}
.popup .title{
    position: absolute;
    left: 8px;
    top: calc(var(--size7) / 2);
    transform: translate(0,-50%);
}
.popup .close{
    position: absolute;
    right: 8px;
    top: calc(var(--size7) / 2);
    width: var(--size6);
    height: var(--size6);
    transform: translate(0,-50%);
}
.popup > aside > div:first-of-type {
    padding: var(--size4) var(--size6) var(--size7) var(--size6);
    border-top: var(--size7) solid #81E3CF;
}
.popup > aside > div:first-of-type h1{
    display: flex;
    align-items: center;
    color: inherit;
    background: none no-repeat center center / cover transparent;
}
.popup > aside > div:first-of-type h1.warning::before{
    content: "";
    display: block;
    width: var(--size6);
    height: var(--size6);
    margin-right: var(--size2);
    background: url("../images/icon_warning.svg") no-repeat center center / cover transparent;
}
.popup footer{
    display:grid;
    grid-template-columns: max-content; 
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
     gap:0 var(--size4);
    justify-content: center; 
    justify-items: center;
    padding: 0 var(--size6) var(--size6) var(--size6);
}
.popup div p{
    margin-top:var(--size4);
}
.popup .close{
    background-image:url("../images/icon_close_popup.svg"),url("../images/icon_close_popup_hover.svg");
}
/*-------------------------------------------------------------------------------------
  カレンダー部品のstyle
-------------------------------------------------------------------------------------*/
/* Number部品スピンボタン */
input[type="number"]::-webkit-inner-spin-button{
    display: none;
}
/* Inputフィールド右詰 */
.amount{
    text-align: right;
}
/* カレンダー部品 */
.calendar{
    margin-left: var(--size4);
    display: flex;
    align-items: center;
}
.calendar>input[type="number"]{
    height: var(--size6);
    padding: 0;
    text-align: right;
    margin: 0 var(--size2);
}
.calendar>input[type="date"]{
    background-color: #fbfbf7;
    border: none;
    transform: translateX(0%);
}
.calendar>input[type="date"]:focus{
    outline: none;
}
.calendar>input[type="date"]::-webkit-datetime-edit {
    display: none;
}
.calendar>input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    z-index: 1;
    transform: translateY(20%);
}
.calendar>input[type="date"]::after {
    content: "";
    background-image: url("../images/icon_calendar.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: var(--size7);
    height: var(--size7);
    background-position: center;
    position: absolute;
    margin-left: -3px;
}
/* 年月部品 */
.otherCalendar{
    margin: var(--size4);
}
.otherCalendar>.year,
.otherCalendar>.month,
.otherCalendar>.day{
    margin: var(--size2);
    padding: 0 20px;
    height: var(--size6);
}
/* コンボボックス部品 */
.comboPrefix,.comboInclude{
    display: inline-block;
}
.comboPrefix>ul,.comboInclude>ul{
    display: none;
    position: absolute;
    max-height:20vh;
    overflow: auto;
    text-align: left;
    background-color: white;
    border: 1px solid #A7A9BC;
    border-top: none;
}
.comboPrefix>ul>li,.comboInclude>ul>li{
    font-family:inherit;
    font-size:inherit;
    height: var(--size6);
    padding-left: var(--size2);
    line-height: var(--size6);
}
.focus{
    color: #ffffff;
    background-color: #767676;
}
.comboPrefix>ul>li.focus,.comboInclude>ul>li.focus,
.comboPrefix>ul>li:hover,.comboInclude>ul>li:hover{
    color: white;
    background-color: #767676;
}
.address>p>input:nth-child(3) ~ input{
    background-color: aqua;
    width: 270px;
}
/*-------------------------------------------------------------------------------------
  ヘッダエリアのstyle
-------------------------------------------------------------------------------------*/
body > header{
    background-image: linear-gradient(to bottom, #81E3CF 0%,#81E3CF 100%);
    background-size:  10px var(--size9);
    background-repeat: repeat-x;
    justify-self: stretch;
}
body > header > div{
    position: relative;
    display: flex;
    align-items: center;
    height: var(--size9);
    padding: 0 var(--size6);
}
body > header > div b{
    flex-grow: 1;
    font-size: 18px;
}
body > header > div > figure{
    display: flex;
    align-items: center;
}
body > header > div > figure > figcaption{
    margin: 0 var(--size5);
    font-weight: bold;
    display: inline-flex;
}
/* ツールチップ */
body > header > div > figure > figcaption .tooltip {
  position: relative;
  display: inline-flex;
}
body > header > div > figure > figcaption .tooltip .userName {
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
body > header > div > figure > figcaption .tooltip .switchColor {
  color: #980000;
}
body > header > div > figure > figcaption .tooltip .tooltiptext {
  visibility: hidden;
  width: 100%;
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  border: 1px solid #A7A9BC;
  word-wrap: break-word;
  /* ツールチップを配置する*/
  position: absolute;
  z-index: 1;
  right: 0%;
  left: 5%;
  /* ツールチップのフェードイン - 不透明度が 0% から 100% になるまでに 1 秒かかります: */
  opacity: 0;
  transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
body > header > div > figure > button{
    order: 1;
}
body > header > div .iconOnly{
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-color: transparent;
    margin: 0 0 0 var(--size4);
}
/* floatListのstyle */
body > header > div > .floatList,
.navi > .middleItems > .floatList{
    position: absolute;
    right: 0;
    display: block;
    border: 1px solid #A7A9BC;
    background-color: #FFFFFF;
    transform-origin: right top;
    transition: 0.3s ease 0s;
    transform: translate(0%,32px) scale(1);
    z-index: 4;
    max-height:50vh;
    max-width:50vw;
    overflow: auto;
}
.navi > .middleItems > .floatList{
    text-align: right;
}
body > header > div > .floatList li,
.navi > .middleItems > .floatList li{
    margin: 0 !important;
    white-space: nowrap;
}
body > header > div > .floatList a,
body > header > div > .floatList label,
.navi > .middleItems > .floatList a,
.navi > .middleItems > .floatList label{
    display: block;
    padding: var(--size1);
}
body > header > div > .floatList br,
.navi > .middleItems > .floatList br{
    display: none;
} 
.navi > .middleItems > .floatList li:hover {
    background-color: #D8F6F0;
}
.navi > .middleItems > .floatList > button{
    width: 14px;
    height: 14px;
    margin: 0 var(--size1);
}
/* balloonのstyle */
body > header > div > .balloon{
    position: fixed;
    top: calc(6px + var(--size9));
    left: auto;
    right: var(--size6);
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3,max-content); 
    gap: 0;
    padding: var(--size4); 
    background-color: #FFFFFF;
    border: 1px solid #A7A9BC;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    z-index: 3;
    display: grid;
    max-height: calc(90vh  - (6px + var(--size9) + var(--size4)));
}
body > header > div > .balloon::before,
body > header > div > .balloon::after{
    content: "";
    position: absolute;
    right: 38px;
    top: 0;
    display: block;
    border: 0 solid transparent;
    border-width: 14px 12px;
    speak: none;
}
body > header > div > .balloon::before{
    border-bottom-color: #A7A9BC;
    transform: translate(0,-100%) translateY(-1px);
}
body > header > div > .balloon::after{
    border-bottom-color: #FFFFFF;
    transform: translate(0,-100%);
}
body > header > div > .balloon .balloonWrapper{
    max-height: calc(90vh  - (6px + var(--size9) + var(--size4)));
    overflow-y: auto;
}
body > header > div > .balloon header{
    margin-bottom: var(--size4);
    display: none;
}
body > header > div > .balloon ul{
    margin-top: var(--size4);
}
body > header > div > .balloon footer{
    margin-top: var(--size4);
}
body > header > div > .balloon dl,
body > header > div > .balloon dt,
body > header > div > .balloon dd{
    margin: 0;
    padding: 0;
    border: 0 none;
    background: none transparent;
}
body > header > div > .balloon h1{
    font-weight: normal;
}
body > header > div > .balloon dt {
    display: flex;
    justify-content: space-between;
}
body > header > div > .balloon dt,
body > header > div > .balloon dd {
    align-items: normal;
}
body > header > div > .balloon dd span{
    display: inline-block;
    word-wrap: break-word;
    max-width: 300px;
}
body > header > div > .balloon dt.alignIndex{
    margin-top: var(--size4);
}
/*-------------------------------------------------------------------------------------
  ナビゲーションエリアのstyle
-------------------------------------------------------------------------------------*/
/* パンくずリスト 【breadcrumbs list】 ブレッドクラムのstyle */
.navi > .breadCrumbsList{
    display: flex;
    flex: 1 0 100%;
    padding: var(--size4) var(--size6);
}
.navi > .breadCrumbsList li::before{
    content: ">";
    margin: 0 var(--size1);
}
.navi > .breadCrumbsList li:first-child::before{
    content: none;
}
/* XXXC3030_大項目ナビスタイル */
.navi > select.majorItems{
    display: none;
}
.navi > ul.majorItems{
    display: flex;
    justify-content: center;
}
.navi > ul.majorItems input[type="radio"]{
    display: none;
}
.navi > ul.majorItems > li{
    margin: 0 var(--size4) 0 0;
}
.navi > ul.majorItems > li:first-child{
    margin-left: var(--size4);
}
.navi > ul.majorItems > li,
.navi > ul.majorItems > li > label,
.navi > ul.majorItems > li > label > span{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    width: 216px;
    min-width: 144px;
    font-size: 18px;
    color: #FFFFFF;
    background: #006159;
    height: var(--size8);
    border-radius: 2px;
    box-sizing: border-box;
    user-select: none;
}
.navi > ul.majorItems > li > label > span{
    border: 1px solid #006159;
}
.navi > ul.majorItems > .moveMajor .arrowLeft{
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 12px solid #fff;
    border-bottom: 8px solid transparent;
}
.navi > ul.majorItems > .moveMajor .arrowRight{
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 12px solid #fff;
    border-bottom: 8px solid transparent;
}
.navi > ul.majorItems > li.moveMajor,
.navi > ul.majorItems > li.moveMajor > label{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    width: 32px;
    min-width: 32px;
    font-size: 18px;
    color: #FFFFFF;
    background: #006159;
    height: var(--size8);
    border-radius: 2px;
    box-sizing: border-box;
}
.navi > ul.majorItems > li.moveMajor > label button{
    width: 100%;
    padding: 0;
}
/* 中項目のstyle */
.navi > .middleItems > .omit {
    grid-area: omit;
    align-self: center;
    margin: 0 var(--size6);
    width: var(--size6);
    height: var(--size6);
}
.navi > .middleItems {
    display: grid;
    margin-top: var(--size6);
    border-bottom: 1px solid #A7A9BC;
    grid-template-columns: 1fr max-content;
    grid-template-rows: max-content 1fr;
    grid-template-areas:
        "tab omit"
        "body body";
    position: relative;
}
.navi > .middleItems > ul:not(.floatList){
    display: flex;
    align-items: stretch;
    margin: 0 var(--size6);
    white-space: nowrap;
}
.navi > .middleItems > ul input[type="radio"]{
    display: none;
}
.navi > .middleItems > ul > li{
    margin: 0 var(--size4) 0 0;
}

.navi > .middleItems > ul > li,
.navi > .middleItems > ul > li > label,
.navi > .middleItems > ul > li > label > span{
    display: flex;
    align-items: stretch;
    text-align: center;
    line-height: 1.2;
    color: #6B6C7E;
    user-select: none;
}

/* 中項目ナビゲーション空白スペースクリック対応(1)*/
/* 親の<li>と同じ幅にする */
.navi > .middleItems > ul > li > label{
    width: 100%;
}

/* 中項目ナビゲーション空白スペースクリック対応(2)*/
/* 親の<label>幅の100％ではない、自分の文字列の長さで決める */
.navi > .middleItems > ul > li > label > span{
    width:max-content;
}

.navi > .middleItems > ul > li > label > span {
    padding: var(--size2) var(--size4);
    font-size: 14px;
}
.navi > .middleItems > ul br{
    display: none;
}
.navi > .middleItems > ul:not(.floatList) > li > label:hover > input + span{
    color: #006159;
}
.navi > .middleItems > ul > li > label > input:checked + span{
    color: #222222;
    box-shadow: 0 -4px 0 0 #006159 inset;
}
.navi > .middleItems > ul > li > label > input:disabled + span{
    color: #BCBCBC;
}
/*-------------------------------------------------------------------------------------
  メッセージエリアのstyle
-------------------------------------------------------------------------------------*/
.information{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0px 0px;
    margin: var(--size4) var(--size6) 0 var(--size6);
    border: 1px solid #81E3CF;
    background-color: #FFFFFF;
    word-break: break-all;
}

.information:not(:has(h1)){
    display: none;
}

.information .info{
    background: url("../images/icon_info.svg") no-repeat var(--size2) var(--size2) / 24px auto transparent;
}
.information .error{
    background: url("../images/icon_error.svg") no-repeat var(--size2) var(--size2) / 24px auto transparent;
}
.information .warning{
    background: url("../images/icon_warning.svg") no-repeat var(--size2) var(--size2) / 24px auto transparent;
}
.information header{
    position: relative;
}
.information header div{
    font-size: 16px;
    font-weight: bold;
}
.information header h1{
    padding: var(--size2) var(--size7) var(--size2) calc(var(--size6) + (var(--size2) * 2));
}
.information > header .close{
    width: 8px;
    height: 8px;
    margin: var(--size2) var(--size2) var(--size2) calc(var(--size6) + (var(--size2) * 2));
    margin-left: var(--size3);
    position: absolute;
    right: 0;
    top: 0;
}
.alert{
    display:grid;
      grid-template-columns: max-content 1fr; 
      grid-template-rows: 1fr;
    gap:0 var(--size2); 
    padding:var(--size2);
    align-items:center;
    margin:var(--size2) var(--size6) var(--size2) var(--size6);
    border:1px solid #E63A53;
    background-color:#FFDADF;
}
.alert p{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    min-height:var(--size6);
    padding-left:calc(var(--size2) + var(--size6));
    background-repeat:no-repeat;
    background-position:left top;
    background-size: var(--size6)  var(--size6);
}
/*-------------------------------------------------------------------------------------
  システムエラーのstyle
-------------------------------------------------------------------------------------*/
.systemError{
    padding: var(--size5) var(--size6) var(--size3) var(--size6);
}
/*-------------------------------------------------------------------------------------
  コンテンツエリアのstyle
-------------------------------------------------------------------------------------*/
/* 共通style */
.content{
    grid-row-start: 4;
    grid-row-end: 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    gap: 0px 0px;
    margin: 0;
    position: relative;
    grid-template-areas: 
    "tab omit"
    "body body";
    overflow:hidden;
}
.content > div {
    display: grid;
    grid-area: body;
    padding-top: var(--size4);
    margin-bottom: var(--size4);
    overflow: auto;
    scroll-behavior: smooth;
}

.content > div.d-block {
    display: block;
}

.content > div .scrollTable {
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: max-content 1fr; 
    gap: 0px 0px;
}
.content > div .rightAlignCommands{
    display: grid; 
    grid-template-columns: max-content; 
    grid-template-rows: 1fr; 
    gap: 0px var(--size4);
    grid-auto-flow: column;
    grid-auto-columns: max-content; 
    justify-content: end; 
    justify-items: end;
    margin: 0 var(--size6) 0 0;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.content > div .rightAlignCommands .info{
    display: none;
}
.content > div .toggleSection section .rightAlignCommands{
    margin: 0 calc(var(--size4) * -1) 0 0;
}
.content > div .toggleSection {
    margin: var(--size4) var(--size6) 0 var(--size6);
}
.content > div .toggleSection > header{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #E7EAED;
    padding: 0 var(--size4);
    min-height: var(--size7);
}
.content > div .toggleSection > header > a{
    order:3;
}
.content > div .toggleSection > header > .toggle{
    order: 1;
    width: var(--size5);
    height: var(--size5);
}
.content > div .toggleSection > header > h1{
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    order: 2;
    margin-left: var(--size4);
    width: calc(100% - var(--size5) - var(--size2) - 1rem);
}
.content > div .toggleSection > header > h1:only-child{
    margin-left: 0;
}
.content > div .toggleSection > header > button + h1{
    margin-left:var(--size2);
    margin-right:1rem;
}

.content > div .toggleSection .toggleSection {
    margin-left: 0;
    margin-right: 0;
}
.content > div .toggleSection .toggleSection > header {
    padding-left: 0;
    padding-right: 0;
}

/* 基本レイアウトスタイル */
/* 説明リスト(dl)が1つ*/
.content > div .toggleSection > div > section > div > .layoutdl_1{
    grid-template-columns: var(--layoutChassisInfoDt) 1fr;
}
/* 説明リスト(dl)が2つ*/
.content > div .toggleSection > div > section > div > .layoutdl_2{
    grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
}
/* 説明リスト(dl)が3つ*/
.content > div .toggleSection > div > section > div > .layoutdl_3{
    grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
}
/* 説明リスト(dl)が4つ*/
.content > div .toggleSection > div > section > div > .layoutdl_4{
    grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
}
/* 説明リスト(dl)が5つ*/
.content > div .toggleSection > div > section > div > .layoutdl_5{
    grid-template-columns: var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr var(--layoutChassisInfoDt) 1fr;
}
/* ページネーションのstyle */
.content > div .pager{
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    margin-top: var(--size2);
    max-width: 100vw;
}
.content > div .pager > span{
    display: flex;
    align-items: center;
    transform: translate(0,-4px);
}
.content > div .pager button span{
    margin: 0 var(--size1);
}
.content > div .pager > button {
    min-width: var(--size7);
    margin: 0 var(--size2) 0 0;
    padding: 0;
}
.content > div .pager > span + button {
    margin-left: var(--size2);
}
.content > div .pager > button:nth-child(1){
    margin-right: var(--size4);
}
.content > div .pager > button:nth-last-child(1) {
    margin-left: var(--size2);
}
.content > div .pager > button:nth-child(1),
.content > div .pager > button:nth-last-child(1){
    min-width: 114px;
}
.content > div .smartPager{
    display: none;
}
/* モック＿サンプルのstyle */
/* 表示用テーブルスタイル */
.content > div .dispTable {
    border-top:1px solid #A7A9BC;
    border-bottom:1px solid #A7A9BC;
}
.content > div .dispTable tr th,
.content > div .dispTable tr td{
    padding-top:var(--size1);
    padding-bottom:var(--size1);
}
.content > div .dispTable th{
    padding:8px var(--size4);
    background-color:#E7EAED;
}
/* 検索条件用テーブルスタイル */
.content > div .searchTable th{
    background-color:#E7EAED;
    border-top:1px solid #A7A9BC;
}
.content > div .searchTable td:not(:first-child){
    border-top:1px solid #A7A9BC;
}
/* 罫線削除 */
.content > div .borderNone{
    border:none !important;
    box-shadow: 0 0 0 0 !important;
    background-color: unset;
}
.content > div .dispTable th[align="center"],
.content > div .searchTable th[align="center"],
.content > div .dispTable td[align="center"],
.content > div .searchTable td[align="center"] {
    text-align: center;
}
/* 小項目 */
.content > div .minorItems{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}
.content > div .minorItems.fixed{
    position: sticky;
    top: 0;
    margin-top: calc(var(--size4) * -1);
    padding-top: var(--size4);
    padding-bottom: var(--size2);
    transform: translate(0,calc(var(--size4) * -1));
    background-color: #FBFBF7;
    z-index: 3;
}
.content > div .minorItems.fixed + .toggleSection{
    margin-top: var(--size2);
}
.content > div .minorItems > ol,
.content > div .minorItems > ul{
    flex-grow: 1;
    display: flex;
    align-items: center;
    margin: 0 0 0 var(--size6);
}
.content > div .minorItems > ol > li::before{
    content: none;
}
.content > div .minorItems > ol a.current::before {
    position: static;
}
.content > div .minorItems > ol a{
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    height: 40px;
    padding: 0 var(--size4);
    border: solid transparent;
    border-width: 0 15px; 
    color: #FFFFFF;
    background:
        url("../images/arrow_rear.svg") no-repeat left top / auto border-box,
        url("../images/arrow_front.svg") no-repeat right top / auto border-box,
        url("../images/arrow_body.svg") repeat-x center top / auto padding-box transparent;
    box-sizing: border-box;
    overflow: auto;
    text-indent: 0;
    white-space: normal;
    transform-origin: top left;
    transform: scale(1);
    text-decoration: none;
    pointer-events: none;
}
.content > div .minorItems > ol li:not(:first-child) a{
    margin-left: -8px;
}
.content > div .minorItems > ol a::before{
    position: static;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 0;
}
.content > div .minorItems > ol a.current{
    color: #008C70;
    width: auto;
    background-image:
        url("../images/arrow_rear_current.svg") ,
        url("../images/arrow_front_current.svg"),
        url("../images/arrow_body_current.svg");
    overflow: auto;
    text-indent: 0;
    white-space: normal;
}
.content > div .minorItems > ol > li:first-child a{
    padding-left: 0;
    background-image:
        url("../images/arrow_rear_first.svg") ,
        url("../images/arrow_front.svg"),
        url("../images/arrow_body.svg");
}
.content > div .minorItems > ol > li:first-child a.current{
    padding-left: 0;
    background-image:
        url("../images/arrow_rear_current_first.svg") ,
        url("../images/arrow_front_current.svg"),
        url("../images/arrow_body_current.svg");
}
.content > div .minorItems > ul{
    gap: var(--size2);
}
.content > div .minorItems > ul a{
    display: flex;
    align-items: center;
    width: auto;
    height: 40px;
    padding: 0 30px;
    border: solid transparent;
    border-width: 2px;
    color: #FFFFFF;
    background: #006159;
    box-sizing: border-box;
    white-space: nowrap;
}
.content > div .minorItems > ul a.current{
    color: #008C70;
    background: #FFFFFF;
    border-color: #0F876C;
}
/* 凡例 */
.content > div .legendWrapper{
    display: flex;
    justify-content: flex-end;
}
.content > div .legendWrapper > .legend{
    flex-grow: 1;
    margin-right: 0 !important;
}
.content > div[data-tab="middle2"] .legendWrapper > *:first-child{
	margin-right: var(--size6);
}
.content > div[data-tab="middle2"] .legendWrapper > *{
	margin-right: var(--size2);
}
.content > div .legend{
    display: flex;
    justify-content: flex-end;
    margin-top: var(--size2);
}
.content > div .legend ul{
    flex-grow:1;
}
.content > div .legend li{
    display: flex;
    align-items: center;
    margin-left: var(--size6);
    color: inherit;
    background-color: transparent !important;
    font-size: var(--size3);
}
.content > div .legend li[class]::before{
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    margin-right: 6px;
    box-sizing: border-box;
    speak: none;
}
.content > div .legend li.orange::before,
.content > div .legend li.red::before,
.content > div .legend li.yellow::before,
.content > div .legend li.purple::before,
.content > div .legend li.blue::before,
.content > div .legend li.gray::before{
    border-style: solid;
    border-width: thin;
}
/* コンテンツ一覧 */
.content > div .scrollTable {
    margin: var(--size2) 0 0 0;
}
.content > div .scrollTable .scroll{
    border-top: 1px solid #A7A9BC;
    overflow: auto;
}
.content > div .scrollTable table{
    display: table;
    table-layout: fixed;
    min-width: 100%;
}
.content > div .scrollTable thead{
    position: sticky;
    top: 0;
    z-index: 2;
    display: table-header-group;
    background-color: #E7EAED;
}
.content > div .scrollTable tr{
    display: table-row;
}
.content > div .scrollTable .check,
.content > div .scrollTable th.check,
.content > div .scrollTable td.check{
    vertical-align: middle;
    padding: var(--size1) var(--size2);
    text-align: center;
}
.content > div .scrollTable thead .filter{
    display: table-row;
}
.content > div .scrollTable tbody{
    display: table-row-group;
    overflow: auto;
}
.content > div .scrollTable tbody th{
    display: none;
}
@media print {
    body{
        -webkit-print-color-adjust: exact;
    }
}

/* ファイルアップロードモジュールのスタイル・始まり */
dl.file-dragdrop-container-info{
    display: block !important;
    border: none;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    min-height: 40px;
    min-width: 200px;
    width: 70%;
    margin: 0 auto;
    --input-delete-background: #D8F6F0;
    --container-default-background: transparent;
    --container-before-background:  #D8F6F0;
    --container-after-background:  transparent;
}
dl.file-dragdrop-container-info.default-background{
    background-color: var(--container-default-background);
}
dl.file-dragdrop-container-info.before{
    background-color: var(--container-before-background);
}
dl.file-dragdrop-container-info.after{
    background-color: var(--container-after-background);
}
dl.file-dragdrop-container-info>dd{
    display: flex !important;
    justify-content: flex-start;
    --input-container-width: 5.5em;
    border:none;
    padding: 2px;
}
dl.file-dragdrop-container-info.before>dd{
    background-color: var(--container-before-background);
}
dl.file-dragdrop-container-info.after>dd{
    background-color: var(--container-after-background);
}
dl.file-dragdrop-container-info>dd>.dd-input-container{
    width: var(--input-container-width);
    padding: 0;
}
dl.file-dragdrop-container-info>dd>.upload-file-name{
    width: calc( 100% - var(--input-container-width));
    word-break: break-all;
    box-sizing: border-box;
    color: #006159; /*現行の＜画面設計基準書＞に適当な青色の番号はない*/
    color: blue;
}
input.delete-this-input-file{
    background: var(--input-delete-background);
    padding: 0 1.5rem;
    font-size: smaller;
    background-color: #D8F6F0;
    border: 1px solid #4BAE9A;
}
label.drop-input-file-label{
    background-color: #D8F6F0;
    border: 1px solid #4BAE9A;
    font-size: small;
    padding: 0.1rem 1em;
    padding-top: 0.7em;
    display: inline-block; /*デフォルトはinlineのため、これは無ければ、下の高さ設定は有効化できません。*/
    height: var(--size7); /*common.css のinputのデフォルト高さと一緒にする*/
    text-align: center;
    box-sizing: border-box;
}
label.drop-input-file-label::after,
label.drop-input-file-label::before{
    display: inline-block;
    width: 0.3rem;
    height: 1rem;
}
.input-type-file-container{
    text-align: center;
    padding-bottom: 5px;
}
input.file-dragdrop-inputfile{
    display: none;
}
/* ファイルアップロードモジュールのスタイル・終わり */

/* 画面ID */
.content > .screenid{
    font-size: 14px;
    color: #808080;
    position: absolute;
    left: var(--size4);
    padding:0;
    bottom:0px;
}
/* 画面IDと１個前のコンテンツが被らないようにするための余白 */
.content > :nth-last-child(2) > :last-child {
    margin-bottom: var(--size8);
}

.content:has(.screenid){
    overflow: auto !important;
}

.content:has(.screenid) > div{
    overflow: unset !important;
}

/* チェックボックスのdisabledスタイル */
input[type="radio"]:disabled,
input[type="checkbox"]:disabled{
    background: none;
    background-color: #BCBCBC;
    border-color: #BCBCBC;
}

/* 表示用テーブルのスペーサー */
.dispTable tr th.spacer,
.dispTable tr td.spacer{
    padding-top: var(--size1);
    padding-bottom: var(--size1);
    height: var(--size1);
}

/* クライアントチェックエラー時のスタイル */
.failed{
    background-color: #ffdadf !important;
    border: #980000 !important;
    color: #980000 !important;
}

/*-------------------------------------------------------------------------------------
  ページネーションのstyle (paginationjs利用時)
-------------------------------------------------------------------------------------*/
.pager .button-page,
.pager .button-prev,
.pager .button-next{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: var(--size7);
    padding: 0 var(--size4);
    color: inherit;
    background: none no-repeat center center / cover,
                none no-repeat var(--size8) var(--size8) / cover;
    background-color: #D8F6F0;
    border: 1px solid #4BAE9A;
    border-radius: 2px;
    box-sizing: border-box;
    margin: 0 8px 0 0;
}

.pager .button-page:hover,
.pager .button-prev:hover,
.pager .button-next:hover{
    color: #006159;
    background-color: #D8F6F0;
    border-color: #4BAE9A;
}
.pager .button-page.active,
.pager .button-prev.active,
.pager .button-next:active{
    color: #006159;
    background-color: #FFFFFF;
    border-color: #4BAE9A;
}
.pager .button-page.disabled,
.pager .button-prev.disabled,
.pager .button-next.disabled{
    pointer-events: none;
    color: #BCBCBC;
    background-color: #F2F2F2;
    border-color: #BCBCBC;
}

.pager .button-page {
    min-width: var(--size7);
    margin: 0 var(--size2) 0 0;
    padding: 0;
}

.pager > .button-prev, 
.pager > .button-next {
    min-width: 114px;
}

.pager > .button-prev {
    margin-right: var(--size4);
}

.pager > .button-next {
    margin-left: var(--size2);
}

.pager .paginationjs-ellipsis.disabled{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: var(--size8);
    padding-right: 8px;
    color: inherit;
    background: none no-repeat center center / cover,
                none no-repeat var(--size8) var(--size8) / cover;
    border: 2px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
}

.pager .paginationjs-ellipsis.disabled a{
    display: flex;
    align-items: center;
    transform: translate(0,-4px);
    text-decoration: none;
}

.pager .button-page a,
.pager .button-prev a,
.pager .button-next a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.pager {
    /* 文字の選択を不可にする */
    user-select: none;
}

/* スマホ用のページネーションは非表示 */
.content > div .pager-min {
    display: none;
}