@charset "shift_jis";

/*↓全体構成↓------------------------------------------------------------*/
body {
    overflow-y:auto;
    overflow-x:hidden;
}

#mainContainer {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    vertical-align: top;
}
#mainContents {
    margin:0;
    padding:0;
}
#mainPageScroll {
    overflow-y:auto;
}
#mainPageInner {
    padding-left :0.7rem;
    padding-right:0.7rem;
    margin       :0rem;
}
#mainBody {
    padding      : 0;
    margin-top   : 1.5rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    #mainPageInner {
        width:98%;
        padding-left :0;
        padding-right:0;
    }
    #mainBody {
        padding:0 1.5rem;
        margin-top:2rem;
    }
}
/*↑全体構成↑------------------------------------------------------------*/

/*↓ヘッダー部↓----------------------------------------------------------*/
#header {
    font-size   : 2rem;
    font-weight : bold;
}
#headerTitle {
    vertical-align:middle;
}

@media (min-width: 768px) {
    #header {
        font-size   : 2.5rem;
        padding-left: 0.5rem;
    }
}
/*↑ヘッダー部↓----------------------------------------------------------*/

/*↓システム名↓----------------------------------------------------------*/
#mainTitleBar {
    font-weight:bold;
    font-size:1.6rem;
    width:100%;
    margin-top: 0; 
    margin-bottom: 0.5rem; 
    padding: 0.3rem 1rem;
}

@media (min-width: 768px) {
    #mainTitleBar {
        margin:1rem 0 0 0; 
    }
}
/*↑システム名↑----------------------------------------------------------*/

/*↓ナビゲーション↓----------------------------------------------------------*/
#navigation{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    margin-top:0;
    width:100%;
}

#navigation > .ns_navi_item{
    display:flex;
    align-items:center;
    margin:0;
    margin-top:-0.15rem;
    font-weight:bold;
    line-height: 1rem;
    border-style: solid;
    border-width: 0.15rem 0.1rem;
    padding:0.2rem 0.2rem 0.2rem 0.7rem ;
    position: relative;
    min-height:3rem;
    width:20%;
    font-size:0.8rem;
}

@media (min-width: 768px) {
    #navigation{
        margin-top:1rem;
    }
    
    #navigation > .ns_navi_item{
        font-size:1rem;
        line-height: 1.2rem;
        padding:0.5rem 1rem;
    }
}

@media (min-width: 992px) {
    #navigation > .ns_navi_item{
        width:11.1%;
    }
}

#navigation > .ns_navi_item:not(:last-child)::after{
    position: absolute;
    content: '';
    top    : 0;
    bottom : 0;
    right  :-0.5rem;
    z-index:10;
    margin: auto;
    width: 1rem;
    height: 1rem;
    border-width: 0.15rem;
    border-style: solid;
    border-bottom-color: transparent;
    border-left-color  : transparent;
    transform: rotate(45deg);
}

#navigation > .ns_navi_item:nth-child(5)::after{
    display:none;
}

@media (min-width: 992px) {
    #navigation > .ns_navi_item:nth-child(5)::after{
        display:block;
    }
}


.ns_navi_inner{
    z-index:20;
}
/*↑ナビゲーション↑----------------------------------------------------------*/

/*↓中見出し・項目↓----------------------------------------------------------*/
.ns_mid_item_title {
    font-size:1.2rem;
    border-bottom-width : 0.1rem;
    border-bottom-style : solid;
    line-height: 2rem;
    font-weight:bold;
}

.ns_mid_item_title *{
    vertical-align:middle;
}

.ns_mid_item_contents {
    padding-left :0.5rem;
    padding-right:0.5rem;
}
@media (min-width: 768px) {
    .ns_mid_item_contents {
        padding-left :1rem;
        padding-right:1rem;
    }
}
/*↑中見出し・項目↑----------------------------------------------------------*/

/*↓フッター部↓----------------------------------------------------------*/
.ns_footer_line{
    margin:0;
}

#footer {
    padding: 1rem 0;
    text-align: center;
    width:100%;
}
/*↑フッター部↓----------------------------------------------------------*/

/*↓ModelNotExist↓----------------------------------------------------------*/
.ns_result_error {
    color:red;
    font-weight:bold;
}
/*↑ModelNotExist↓----------------------------------------------------------*/

/*↓blockUI↓----------------------------------------------------------*/
div.blockMsg {
    padding: 20px;
    margin: 0;
    width: 98%;
    top: 30%;
    left: 1%;
    text-align: center;
    color: #0C9BDC;
    border: 3px solid #aaa;
    background-color: #fff;
}
@media (min-width: 768px) {
	div.blockMsg {
		width: 35%;
		top: 40%;
		left: 30%;
	}
}
/*↓blockUI↓----------------------------------------------------------*/

/*↓共通部品↓------------------------------------------------------------*/
/*ボタン*/
.ns_btn {
    width  :98%;
    display:block;
    margin-top   :1rem;
    margin-bottom:1rem;
}
@media (min-width: 768px) {
    .ns_btn {
        width:auto;
        min-width:12rem;
        display:inline-block;
        padding-left :2rem;
        padding-right:2rem;
    }
}

/*文字リスト*/
.ns_wd_lst .ns_wd_lst_title {
    font-size:1.2rem;
    font-weight:bold;
}

.ns_wd_lst .ns_wd_lst_item {
    padding-left: 1.5rem;
}


/*テーブル*/
.ns_table {
    margin-bottom:0;
}
.ns_table thead th,.ns_table thead td,
.ns_table tbody th,.ns_table tbody td,
.ns_table tfoot th,.ns_table tfoot td  {
    padding:0.2rem 0.4rem;
    font-size:0.9rem;
    border-top-width : 1px;
    border-top-style : solid;
    border-bottom: none;
    vertical-align:middle;
}

@media (min-width: 768px) {
    .ns_table thead th,.ns_table thead td,
    .ns_table tbody th,.ns_table tbody td,
    .ns_table tfoot th,.ns_table tfoot td
    {
        font-size:1rem;
    }
}
/*内部スクロールバー設定（iOS safariでバーが出ないため。Chromeにも適用される）*/
.ns_inner_scroll::-webkit-scrollbar {
    /*明示的にpixel指定にする*/
    width : 18px;
    height: 18px;
}
.ns_inner_scroll::-webkit-scrollbar-thumb{
    border-radius: 5px;
}

/*グリッド状テーブル*/
.ns_grid_table > div {
    border: solid;
    border-width: 0.15rem;
    border-bottom-width:0;
}
.ns_grid_table > div:not(.row) {
    min-height:3rem;
}
.ns_grid_table > div:last-of-type {
    border-bottom-width:0.15rem;
}
.ns_grid_table > div > * {
    padding:0.5rem 0.5rem 0.5rem 1rem !important;
}
.ns_grid_table > .row > div {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    border-right-style: solid;
    border-right-width: 0.15rem;
}
.ns_grid_table > .row > div:nth-of-type(2n) {
    border-right-width: 0;
}
.ns_grid_table > .row > div:nth-of-type(n+3) {
    border-top-style: solid;
    border-top-width: 0.15rem;
}
/*PC版のときのみ*/
@media (min-width: 768px) {
    .ns_grid_table > .row > div:nth-of-type(n+3) {
        border-top-width: 0;
    }
}

/*枠囲いエリア*/
div.ns_border_area{
    border-width :0.1rem;
    border-style :solid;
    padding:0.2rem;
}

/*四角アイコン*/
.ns_square_number {
    display:inline-block;
    font-weight:bold;
    font-size  :1.2rem;
    line-height:1.6rem;
    text-align:center;
    padding:0;
    height:2rem;
    min-width:2rem;
    border-width: 0.2rem;
    border-style: solid;
    border-radius: 20%;
}

/*三角アイコン（右向き）*/
div.ns_triangle_right{
    display:inline-block;
    margin-left:-0.8rem;
    margin-right:1rem;
    width : 0;
    height: 0;
    border-width: 0.8rem;
    border-style: solid;
    border-bottom-color: transparent !important;
    border-left-color  : transparent !important;
    border-top-right-radius   : 0.5rem;
    border-top-left-radius    : 0.3rem;
    border-bottom-right-radius: 0.3rem;
    transform: rotate(45deg) skew(-20deg,-20deg);
}

/*矢印アイコン（下向き）*/
[class*="ns_icon_arrow_under_"] {
    /*外枠部分*/
    display:inline-block;
    vertical-align: middle;
    width : 0;
    height: 0;
    border-width: 1.0rem;
    border-style: solid;
    border-radius: 100%;
    position:relative;
}
[class*="ns_icon_arrow_under_"]::before{
    /*三角部分*/
    content: '';
    width : 0;
    height: 0;
    position:absolute;
    top : 0;
    left:-0.8rem;
    border-width: 0.8rem;
    border-style: solid;
    border-bottom-color: transparent;
    border-left-color  : transparent;
    border-right-color : transparent;
}
[class*="ns_icon_arrow_under_"]::after{
    /*四角部分*/
    content: '';
    width : 0;
    height: 0;
    border-width: 0.4rem;
    border-style: solid;
    border-left-width :0.3rem;
    border-right-width:0.3rem;
    position:absolute;
    top :-0.6rem;
    left:-0.3rem;
}

/*↓閉じるアイコン（バツ印アイコン）↓*/
div.ns_close_icon_area{
    position: absolute;
    right: 1.5rem;
    top: 0.7rem;
}
[class*="ns_icon_close_"] {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    border-width: 0.2rem;
    border-style: solid;
    cursor:pointer;
}
[class*="ns_icon_close_"]::before {
    position: absolute;
    top: 0.05rem;
    left: 0.9rem;
    width: 0.3rem;
    height: 2rem;
    content: "";
    transform: rotate(45deg);
}
[class*="ns_icon_close_"]::after {
    position: absolute;
    top: 0.05rem;
    left: 0.9rem;
    width: 0.3rem;
    height: 2rem;
    content: "";
    transform: rotate(-45deg);
}
/*↑閉じるアイコン（バツ印アイコン）↑*/

/*↓四角枠アイコン（丸印）↓*/
[class*="ns_icon_square_"] {
    position:relative;
    display:inline-block;
    padding:0;
    height:1.3rem;
    width:1.3rem;
    border-width: 0.2rem;
    border-style: solid;
    border-radius: 20%;
}

[class*="ns_icon_square_circle_"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    width : 0.9rem;
    height: 0.9rem;
    border-width: 0.2rem;
    border-style: solid;
    border-radius: 100%;
}
/*↑四角枠アイコン（丸印）↑*/

/*↓四角枠アイコン（三角印）↓*/
[class*="ns_icon_square_triangle_"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    width : 0rem;
    height: 0rem;
    border-width:  0 0.48rem 0.9rem 0.48rem ;
    border-style: solid;
}
/*↑四角枠アイコン（三角印）↑*/

/*↓四角枠アイコン（バツ印）↓*/
[class*="ns_icon_square_closs_"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    width : 0.2rem;
    height: 1.1rem;
    border:none;
    transform: rotate(-45deg);
}
[class*="ns_icon_square_closs_"]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    width : 0.2rem;
    height: 1.1rem;
    border:none;
    transform: rotate(45deg);
}
/*↑四角枠アイコン（バツ印）↑*/

/*↑共通部品↑------------------------------------------------------------*/