@charset "MS932";
/*-------------------------------------------------------------------------------------
  スマホ版のスタイル
-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------
コンテンツ一覧エリア
-------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    :root{
        --layoutChassisInfoDt:150px;
        --textareaRow:9;
    }
    /* 構成要素の非表示スタイル（デザイン調整に使用） */
    .d-none-smart{
        display: none !important;
    }
    /*-------------------------------------------------------------------------------------
     html,bodyのstyle
    -------------------------------------------------------------------------------------*/
    html, body{
        min-width: unset;
        display: contents;
    }
    /*-------------------------------------------------------------------------------------
     リンクのstyle
    -------------------------------------------------------------------------------------*/
    a.scrollTop {
        position: fixed;
        width: var(--size8);
        height: var(--size8);
        padding: 0;
        overflow: hidden;
        text-indent: calc(var(--size8) * 2);
        white-space: nowrap;
        background-size: cover;
        display: inline-flex !important;
    }
    /*-------------------------------------------------------------------------------------
     dlのstyle
     -------------------------------------------------------------------------------------*/
    dt {
        padding: 8px 8px 8px 16px !important;
    }
    dd {
        padding: 8px 16px 8px 8px !important;
    }
    /*-------------------------------------------------------------------------------------
    tableのstyle
    -------------------------------------------------------------------------------------*/
    th, td {
        padding: var(--size4) var(--size4) var(--size4) var(--size2) !important;
        line-height: 1;
        box-shadow: none !important;
        background: none no-repeat left var(--size2) center / var(--size6) auto transparent;
    }
    td {
        max-width: 100%;
    }
    th {
        display: table-cell;
        vertical-align: inherit;
        font-weight: bold;
        text-align: -internal-center;
    }
    .content > div .scrollTable .check,
    .content > div .scrollTable th.check,
    .content > div .scrollTable td.check {
	    padding: var(--size4) !important;
    }
    table.table-card>tbody>tr:not(.red, .purple, .orange)>td>.th-in-td>:last-child{
        border-bottom: 1px solid lightgrey;
    }
    .d-none-smart{
        display: none !important;
    }
    .d-init-smart{
        display: initial !important;
    }
    .d-block-smart{
        display: block !important;
    }
    .d-flex-smart{
        display: flex !important;
    }
    /* > を使って、直下の子を指定する。<table>の子要素の<table>の<td>を誤って選択することを避けるため */
    .table-card>tbody>tr>td{
        display: flex !important;
    }
    table.table-card .th-in-td{
        display: block;
    }
    .table-card>tbody>tr>td.col-0-checkbox{
        display: none !important;
    }
    .table-card>tbody>tr>td{
        --th-in-td: 35%;
    }
    .table-card>tbody>tr>td>.th-in-td{
        /* width: 35%; */
        width: var(--th-in-td);
    }
    .table-card>tbody>tr>td:last-child{
        border-bottom: 5px solid darkgray;
    }
    .table-card>tbody>tr>td>.real-td{
        /* width: 65%; */
        width: calc( 100% - var(--th-in-td) );
        padding: var(--size4) 0;
        border-bottom: 1px solid white;
    }
    .table-card>tbody>tr>td:last-child>.real-td{
        border-bottom: none;
    }
    .table-card>tbody>tr:not(.orange, .red, .purple)>td>.real-td{
        border-bottom: 1px solid rgb( 200, 200, 200);
    }
    .table-card>tbody>tr:not(.orange, .red, .purple)>td:last-child>.real-td{
        border-bottom: none;
    }
    .table-card>tbody>tr>td>.th-in-td{
        display: block;
    }
    .table-card>thead{
        display: none;
    }
    .table-card>caption{
        margin: 1rem auto;
    }
    .table-card>tbody>tr>td>.th-in-td{
        display: flex;
        --th-checkbox: 24px;
        --th-sort: 0px;
    }
    .table-card>tbody>tr>td>.th-in-td>*{
        box-sizing: border-box;
    }
    .table-card>tbody>tr>td>.th-in-td>:first-child,
    .table-card>tbody>tr>td>.th-in-td>.th-checkbox{
        width: var(--th-checkbox);
        padding: var(--size4) 0 var(--size4) var(--size2);
    }
    .table-card>tbody>tr>td>.th-in-td>.th-sort{
        width: var(--th-checkbox);
        padding: var(--size4) 0;
    }
    .table-card>tbody>tr>td>.th-in-td>:last-child,
    .table-card>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 white;
        border-right: 1px solid white;
    }
    .table-card>tbody>tr>td:last-child>.th-in-td>.th-text{
        border-bottom: none;
    }
    .table-card>tbody>tr:not(.orange, .red, .purple)>td>.th-in-td>.th-text{
        border-bottom: 1px solid rgb(200, 200, 200);
        border-right: 1px solid rgb(200, 200, 200);
    }
    .table-card>tbody>tr:not(.orange, .red, .purple)>td:last-child>.th-in-td>.th-text{
        border-bottom: none;
    }
    table.onFilter>caption .card-filter{
        display: flex;
        justify-content: center;
        width: 90%;
        --filter-button-width: 36px;
        margin: 0 var(--size4) var(--size4) var(--size4);
    }
    table.onFilter>caption .card-filter .filter-block{
        display:block;
        width: calc( 100% - var(--filter-button-width));
    }
    table.onFilter>caption .card-filter .filter-block>.filter-block-kid{
        margin-top: 1rem;
        border: 1px solid lightgray;
        border-radius: 2px;
        margin-right: var(--size2);
    }
    table.onFilter>caption .card-filter .filter-block>.filter-block-kid:first-child{
        margin-top: 0rem;
    }
    table.onFilter>caption .card-filter .filter-block>*>*{
        display:block;
        width: 100%;
    }
    table.onFilter>caption .card-filter .filter-block>.filter-block-kid input.keyword{
        /* background-image: url(../images/icon_search.svg); */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
    }
    table.onFilter>caption .card-filter .filter-block>*>select.col{
        border: none;
        border-bottom: 1px solid lightgray;
    }
    table.onFilter>caption .card-filter .filter-block>*:not(:first-child)>select.col{
        border-top: 1px solid lightgray;
    }
    .table-card>caption .card-filter .filter-block>*>select:not(.col){
        border: none;
    }
    table.onFilter>caption .card-filter .filter-block>*>.input-container{
        --search-width: 36px;
        border:none;
    }
    table.onFilter>caption .card-filter .filter-block>*>.input-container>:first-child{
        width: 100%;
        border: none;
    }
    table.onFilter>caption .card-filter .add-remove-filter-column{
        display:block;
        width: var(--filter-button-width);
        position: relative;
    }
    table.onFilter>caption .card-filter .add-remove-filter-column>.add-remove-filter-column-button{
        background-color: #006159;
        color: white;
        width: var(--filter-button-width);
        height: var(--filter-button-width);
        line-height: var(--filter-button-width);
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 20px;
        border-radius: 2px;
    }
    table.onFilter>caption .card-filter .add-remove-filter-column>.add-remove-filter-column-button:disabled{
        background-color: gray;
    }
    table.table-card>thead>tr>th,
    table.table-card>tbody>tr>td{
        padding: 0 !important;
    }
    /* テキストボックス、ラジオボタン、チェックボックス等の共通style */
    input[type="text"],button,select{
        height: var(--size8) !important;
    }

    /*-------------------------------------------------------------------------------------
    ナビゲーションエリアのスタイル
    -------------------------------------------------------------------------------------*/
    /*ヘッダエリア*/
    body > header > div > .balloon{
        left: var(--size4);
        right: var(--size4);
    }
    body > header > div {
        padding: 0 var(--size4);
    }
    body > header > div > .balloon header{
        display: block;
    }
    body > header > div > .balloon dd span{
        max-width: unset;
        overflow-wrap: anywhere;
    }
    body > header > div > figure > figcaption{
        display: none;
    }
    /*XXXC3040_スマホ大項目ナビスタイル*/
    .navi > select.majorItems{ 
        width: 92%;
        display: block;
        border: 2px solid #006159;
        height: var(--size8);
        font-size: 18px;
        margin: 0 var(--size4);
        color: #006159;
        font-weight: bold;
    }
    .navi > .breadCrumbsList{
        padding: var(--size4);
    }
    .navi > .middleItems > ul:not(.floatList){
        margin: 0 var(--size4);
    }
    .navi > ul.majorItems{
        display: none;
    }
    /*中項目ナビスタイル*/
    .navi > .middleItems{
        margin-top: var(--size4);
    }
    .navi > .middleItems > ul > li > label > span{
        padding: var(--size2);
    }
    .navi > .middleItems > ul br,
    .navi > .middleItems > .omit{
        display: block;
    }
    .navi > .middleItems > .omit{
        height: auto !important;
    }
    .navi > .middleItems > .floatList{
        margin-top: 18px;
    }
    .navi > .middleItems > .floatList button{
        height: 14px !important;
    }
    /*-------------------------------------------------------------------------------------
    メッセージエリアのstyle
    -------------------------------------------------------------------------------------*/
    .information{
        margin: var(--size2) var(--size4) 0 var(--size4);
    }
    .information > header .close{
        width: 14px;
        height: 14px !important;
    }
    /*-------------------------------------------------------------------------------------
    コンテンツエリアのstyle
    -------------------------------------------------------------------------------------*/
    /* 小項目 */
    .content > div .minorItems > ul{
        gap: var(--size4);
    }
    .middle3 .toggleSection .rightAlignCommands{
        margin:0 !important;
    }
    .content > div .toggleSection{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .content > div .toggleSection > div > section:not(.toggleSection) > *{
		padding: 0 var(--size4) !important;
	}
    /* 基本レイアウトスタイル */
    /* 説明リスト(dl)が1つ*/
    .content > div .toggleSection > div > section > div > .layoutdl_1,
    .content > div .toggleSection > div > section > div > .layoutdl_2,
    .content > div .toggleSection > div > section > div > .layoutdl_3,
    .content > div .toggleSection > div > section > div > .layoutdl_4,
    .content > div .toggleSection > div > section > div > .layoutdl_5{
        grid-template-columns: var(--layoutChassisInfoDt) 1fr;
        grid-template-rows: 1fr;
    }
    /* ページネーションのstyle */
    .content > div .pager button > span {
        display: none;
    }
    .content > div .pager button{
        height: var(--size7) !important;
    }
    .content > div .pager > button:nth-child(1), 
    .content > div .pager > button:nth-last-child(1) {
        min-width: var(--size7);
    }

    /* スマホ用ページネーションのstyle */
    .content > div .pager {
        display: none;
    }
    
    .content > div .pager-min{
        display: flex;
        align-items: center;
        justify-content: center;
        justify-items: center;
        margin-top: var(--size2);
        max-width: 100vw;
    }
    
    .content > div .pager-min > button {
        min-width: var(--size8);
        height: var(--size8);
        margin: 0 var(--size1) 0 var(--size1);
        padding: 0;
    }
    .content > div .pager-min > span {
        margin: 0 var(--size3) 0 var(--size3);
        padding: 0;
    }

    .content > div .commonPager{
        display: none;
    }
    .content > div .smartPager{
        display: block;
    }
    /* モック＿サンプルのstyle */
    .content > div.mock_sample th, .content > div.mock_sample td{
        padding: var(--size1) var(--size2) !important;
    }
    .content > div.mock_sample td{
        background-color: #FFFFFF;
    }
    .content > div .dispTable tr th,
    .content > div .searchTable tr th,
    .content > div .dispTable tr td,
    .content > div .searchTable tr td{
        box-shadow: 0 -1px 0 0 #A7A9BC inset !important;
    }
    .content > div .dispTable .borderNone,
    .content > div .searchTable .borderNone{
        box-shadow: none !important;
    }
    .content > div .dispTable td.borderRight,
    .content > div .searchTable td.borderRight{
        box-shadow: -1px -1px 0 0 #A7A9BC inset !important;
    }
    .content > div .dispTable{
        margin-left: -8px;
        min-width: 1100px;
    }
    .content > div .toggleSection > header + div > .dispTable,
    .content > div .toggleSection > header + div > .searchTable{
        margin-left: 0px;
    }
    .content > div.mock_sample .toggleSection .borderNone input[type="text"]{
        width: 669px !important;
    }
    /* 小項目 */
    .content > div .minorItems{
        flex-wrap: wrap;
    }
    .content > div .minorItems > ol{
        margin: 0 var(--size4) var(--size5) var(--size4);
    }
    .content > div .minorItems > ul{
        margin: 0 var(--size4) var(--size5) var(--size4);
        display: block;
    }
    .content > div .minorItems > ol a{
        width: 40px;
        text-indent: 100px;
        overflow: hidden;
        white-space: nowrap;
    }
    .content > div .minorItems > ol a:not(.current){
        display: block;
    }
    .content > div .minorItems > ul a{
        padding: 0 10px;
    }
    .content > div .minorItems > ol a.current::before{
        position: static;
    }
    .content > div .minorItems > ol a::before{
        position: absolute;
    }
    .major2 > div .rightAlignCommands{
        flex: 1 0 100%;
        padding: var(--size4) var(--size6) 0 var(--size6);
        gap: 0px var(--size2);
    }
    /* コンテンツ一覧 */
    .scrollTable > .scroll thead,
    .scrollTable > .scroll tbody td,
    .legendWrapper .legend{
        display: none !important;
    }
    .scrollTable tr > th:nth-of-type(1), 
    .scrollTable tr > th:nth-of-type(1) + td, 
    .scrollTable tr > th:nth-of-type(2), 
    .scrollTable tr > th:nth-of-type(2) + td{
        border-bottom: 1px solid #A7A9BC;
    }
    .scrollTable tr > th:nth-of-type(1) {
        grid-area: th1;
    }
    .scrollTable tr > th:nth-of-type(1) + td {
        grid-area: td1;
    }
    .scrollTable tr > th:nth-of-type(2) {
        grid-area: th2;
    }
    .scrollTable tr > th:nth-of-type(2) + td {
        grid-area: td2;
    }
    .scrollTable tr > th:nth-of-type(3) {
        grid-area: th3;
    }
    .scrollTable tr > th:nth-of-type(3) + td {
        grid-area: td3;
    }
    .scrollTable input[type="checkbox"]{
        width: var(--size7) !important;
        height: var(--size7) !important;
    }
    .scrollTable tr > th:last-of-type, .scrollTable tr > th:last-of-type + td {
        border-bottom-width: 0;
    }
    .scrollTable.onCheck > .scroll tbody tr {
        grid-template-columns: max-content repeat(2, 1fr);
        grid-template-areas:
            "check th1 td1"
            "check th2 td2"
            "check th3 td3";
    }
    .scrollTable > .scroll tbody tr {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-template-rows: repeat(3, max-content);
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "th1 td1"
            "th2 td2"
            "th3 td3";
        border-bottom: 2px solid #A7A9BC;
    }
    .scrollTable.onCheck tr > td:first-child {
        grid-area: check;
    }
    .scrollTable > .scroll tbody td:first-child,
    .scrollTable > .scroll tbody th + td,
    .content > div > .column2Section > .toggleSection .toggle,
    .content > div > .toggleSection .layoutBusinessOperatorIinformation br,
    .content > div > .toggleSection .layoutOfficeCode2 br{
        display: block !important;
    }
    .content > div .rightAlignCommands .info,
    .scrollTable tr > td:first-child, .scrollTable tbody th + td{
        display: block;
    }
    .content > div .legend,
    .rightAlignCommands .toggle,
    .rightAlignCommands .hidden{
        display: none;
    }
    .scrollTable > .scroll tbody th {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    .content > div .legend, .content > div .legend + .scrollTable{
        margin: var(--size2) 0 0 0;
    }

    input[type="checkbox"],
    input[type="radio"]{
        width: var(--size7) !important;
        height: var(--size7) !important;
    }

    .content > div .toggleSection .toggleSection > header {
        padding-left: var(--size4);
        padding-right: var(--size4);
    }
}
/*-------------------------------------------------------------------------------------
  タブレット版のスタイル
-------------------------------------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1279px) {
    /* root値の設定 */
    :root {
        --layoutChassisInfoDt: 120px;
        --textareaRow: 3;
    }
    /*-------------------------------------------------------------------------------------
     html,bodyのstyle
    -------------------------------------------------------------------------------------*/
    html, body{
        min-width: unset;
    }
    /*-------------------------------------------------------------------------------------
    tableのstyle
    -------------------------------------------------------------------------------------*/
    th, td{
        padding: var(--size1) var(--size2) calc(var(--size1) + 1px) var(--size2);
        white-space: nowrap;
        max-width: unset;
    }
    thead th {
        padding-bottom: calc(var(--size1) + 2px) !important;
        box-shadow: 0 -2px 0 0 #A7A9BC inset;
    }
    td{
        background-size: 23px;
    }
    /* テキストボックス、ボタン等の共通style */
    input[type="text"], button:not(.iconOnly).primary, button:not(.iconOnly).secondary{
        height: var(--size8) !important;
    }
    /* セレクトボックスのstyle */
    select{
        height: var(--size8) !important;
    }
    /*-------------------------------------------------------------------------------------
    ヘッダエリアのstyle
    -------------------------------------------------------------------------------------*/
    body > header > div > figure > figcaption .tooltip .userName {
        max-width: 200px;
    }
    /*-------------------------------------------------------------------------------------
    ナビゲーションエリアのスタイル
    -------------------------------------------------------------------------------------*/
    /*大項目ナビスタイル*/
    .navi > ul.majorItems > li, 
    .navi > ul.majorItems > li > label, 
    .navi > ul.majorItems > li > label > span{
        width: 162px;
        font-size: 14px;
    }
    .navi > ul.majorItems > li{
        margin: 0 var(--size2) 0 0;
    }
    .navi > ul.majorItems > li:first-child{
        margin-left: var(--size2);
    }
    .navi > ul.majorItems > li.moveMajor,
    .navi > ul.majorItems > li.moveMajor > label{
        width: 29px;
        min-width: 29px;
    }
    /*中項目ナビスタイル*/
    .navi > .middleItems > .omit{
        display: block;
        grid-area: unset;
    }
    /*メッセージエリア*/
    .information > header .close{
        width: 14px;
        height: 14px;
    }
    /*-------------------------------------------------------------------------------------
    コンテンツ一覧エリア
    -------------------------------------------------------------------------------------*/
    /* 凡例 */
    .content > div .legendWrapper{
        margin: var(--size2) var(--size4) 0 0;
    }
    /* コンテンツ一覧 */
    .content > div .legend + .scrollTable{
        margin-left: 0;
        margin-right: 0;
    }
    .content > div > .scrollTable{
        margin: 0 !important;
        grid-template-rows: unset;
    }
    /* .scrollTable .scroll { */
    .content > div .scrollTable .scroll{
        margin: var(--size2) 0 0 0 !important;
    }
    .content > div .scrollTable .check, 
    .content > div .scrollTable th.check, 
    .content > div .scrollTable td.check{
        padding-left: 24px !important;
        text-align: left !important;
        padding-right: 8px !important;
    }
    .content > div .scrollTable .check{
        max-width: unset !important;
    }

    input[type="checkbox"],
    input[type="radio"]{
        width: var(--size7) !important;
        height: var(--size7) !important;
    }

    .content > div > .column2Section > .toggleSection > header,
    .content > .detail > .toggleSection > div > .toggleSection > header{
        padding: 0 var(--size4) !important;
    }
    
    /* ページネーションのstyle */
    .content > div .pager > button {
        min-width: var(--size8);
        min-height: var(--size8);
    }
    .content > div .pager > button:nth-child(1),
    .content > div .pager > button:nth-last-child(1){
         min-width: 100px;
    }

    /* paginationjsのページネーションstyle */
    .pager .button-page,
    .pager .button-prev,
    .pager .button-next{
        min-width: var(--size8);
        min-height: var(--size8);
    }
    .pager > .button-prev, 
    .pager > .button-next {
        min-width: 100px;
    } 

    .content > div .dispTable input[type="checkbox"],
    .content > div .dispTable input[type="radio"],
    .content > div .searchTable input[type="checkbox"],
    .content > div .searchTable input[type="radio"]{
        width: var(--size4) !important;
        height: var(--size4) !important;
    }
    .content > div .dispTable input[type="text"],
    .content > div .searchTable input[type="text"]{
        height: var(--size7) !important;
    }

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

    .content > div .toggleSection section > * {
        margin-left: var(--size4);
        margin-right: var(--size4);
    }
}
/*-------------------------------------------------------------------------------------
  PC版とタブレット版だけのスタイル
-------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px), print{
    .d-none-gt-smart {
        display: none;
    }

    /* スマホ用ページネーションのstyle */
    .content > div .pager-min{
        display: none;
    }
    
    .content > div .scrollTable .check,
    .content > div .scrollTable th.check,
    .content > div .scrollTable td.check {
        min-width: 24px !important;
        max-width: 24px;
        width: 24px;
    }
}

/*-------------------------------------------------------------------------------------
  スマホ版とタブレット版だけのスタイル
-------------------------------------------------------------------------------------*/
/* スマホ・タブレットの場合、印刷リンクを非表示にする */
@media screen and (max-width:1279px) {
    .printLink{
        display: none;
    }
}