/*********************************************
* original layout
*********************************************/

html, body, main {
    width: 100%;
}
main {
    min-height: calc(100vh - 80px);
}

/* flexレイアウト系 */
.flex-center-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.is-yoko {
    display: flex;
}
.is-yoko-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    flex-grow: 0;
    /* max-width: 1280px; */
}
.section {
    padding: 2rem;
    border-bottom: 1px solid rgba(0,0,0,25%);
}
.section:last-of-type {
    border: none;
}

.err_section {
    padding: 2rem;
}

/* 残りの縦いっぱい */
.basic-table form {
    display: flex;
    flex-direction: column;
}
.basic-table-container {
    flex: 1;
}

/* set width */
.w30 { width: 30%; }
.w50 { width: 49%; }
.w75 { width: 75%; }
.w100 { width: 100%; }

/* text-center */
.text-center {
    text-align: center!important;
}

/*********************************************
* parts layout
*********************************************/

/* タイトル */
.title.left-border {
    padding: 2px 6px;
    font-size: 1.25rem;
    font-weight: 400;
    border-left: 5px solid #48c78e;
}

.title.triangle {
    position: relative;
    padding: 2px 0 2px 18px;
    font-size: 1.1rem;
    font-weight: 400;
}
.title.triangle::before {
    position: absolute;
    top: 7px;
    left: 0;
    display: block;
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 12px solid rgba(0,0,0,25%);
}

/* ヘッダー */
.header-title {
    position: relative;
    height: 80px;
}
.header-title .columns {
    margin: 0;
}
.header-title .column {
    padding: 0;
}

/* ヘッダー | 縦長でもタイトルとボタンが横並びになるように */
.header-title .columns:not(.is-desktop) {
    display: flex;
}
.header-title .column.is-10, .column.is-10-tablet {
    flex: none;
    width: 83.33333%;
}
.header-title .column.is-2, .column.is-2-tablet {
    flex: none;
    width: 16.66667%;
}
.is-yoko .column.is-5, .column.is-5-tablet {
    flex: none;
    width: 41.66667%;
}
.header-title .logo {
    float: left;
    display: flex;
}
.header-title .logo .title {
    margin: 0 0 0 10px;
    padding: 0;
}
.header-title .logo .header-logo {
    width: 40px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* ヘッダー | 右のユーザー情報 */
.header-title .card {
    /* position: absolute;
    top: -5px; */
    float: right;
    margin-top: -14px;
    font-size: .8rem;
    font-weight: bold;
    width:35%;
}
.header-title .card-content {
    padding: .4rem .6rem;
}
#user, #header-btn {
    height: 22px;
}
#user {
    font-size: .9rem;
}
#header-btn {
    color: #485fc7;
}
#user-type {
    margin-right: 16px;
}

.mypage {
    padding-right: 1rem;
}

/* メニュー */
.menu {
    min-width: 200px;
    padding: 15px;
    border-right: 1px solid rgba(0,0,0,25%);
    box-sizing: content-box;
}
.menu-list > li:last-child {
    border-bottom: 1px solid #dbdbdb;
}
.menu-list > li > a {
    padding: .5em 1.5em .5em .5em;
    border-top: 1px solid #dbdbdb;
}
.accordion-title {
    position: relative;
}
.accordion-title::after {
    border-right: solid 2px #333;
    border-top: solid 2px #333;
    content: "";
    display: block;
    height: 8px;
    position: absolute;
    right: 10px;
    top: 30%;
    transform: rotate(135deg);
    transition: transform .3s ease-in-out, top .3s ease-in-out;
    width: 8px;
}
.accordion-title.open::after {
    top: 45%;
    transform: rotate(-45deg);
}
.accordion-content {
    display: none;
}
.accordion-content li a {
    border-top: 1px dashed #dbdbdb;
}
.accordion-content li:last-child a {
    border-bottom: 1px dashed #dbdbdb;
}

/* フッター */
footer {
    border-top: 1px solid rgba(0,0,0,25%);
}

/* ラベル */
label.label {
    font-weight: 400;
}
.yoko-label {
    display: flex;
    align-items: center;
    margin-right: 10px;
    white-space: nowrap;
}

/* フォーム用テーブル */
.form-table td {
    vertical-align: middle;
    border: none;
    /* text-align: center !important; */
    padding : 10px .75em 20px;
}
.form-table td:first-child {
    width : 20%;
}
.form-table td.has-label {
    width: 15%;
}
.form-table td.has-input {
    width: 35%;
}
.form-table td label.label {
    text-align: right;
}
.buttons {
    text-align: center;
    width: 50%;
}

.next-button {
    text-align: right;
    margin-bottom: 10px;
}

.import-table td{
    vertical-align: middle;
    border: none;
}

.file-choice {
    margin-top: 30px;
    margin-bottom: 10px;
}

.import-button {
    text-align: left;
    margin-top: 10px;
}

/* bluma.css lightボタン色変更 */
.button.is-light {
    background-color: #e5e5e5;
}

/* selectやinputの後に文字追加したとき横並びにして上下中央揃えにする */
.flex-input {
    display: flex;
    align-items: center;
}
.flex-input .select,
.flex-input .input {
    margin-right: 5px;
}
.flex-input .select + .select,
.flex-input .input + .input {
    margin-left: 5px;
}

/* チェックボックス同士の間に隙間を設ける */
.checkbox {
    margin-right: 1rem;
}

/* テーブル */
.basic-table th,
.basic-table td {
    vertical-align: middle;
}
.basic-table th {
    text-align: center !important;
    font-weight: 400;
}
.basic-table th.has-label {
    width: 15%;
    min-width: 140px;
}
.basic-table th.has-input {
    width: 35%;
}
/* td直下の要素が縦に並ぶ時余白を設ける */
.basic-table td > *:not(:last-child) {
    margin-bottom: .25em;
}

.basic-table td label.checkbox{
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}

.is-no-bordered {
    border: 1px solid #dbdbdb;
}
.is-no-bordered th,
.is-no-bordered td {
    border: none;
}

.basic-table .icon {
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-size: 1.4em;
}
.basic-table .icon i {
    font-style: normal !important;
}

/* ページネーション */
.pagination {
    justify-content: left;
}
.pagination-list {
    flex-grow: inherit;
}

/* エラーメッセージ等 */
.warning {
    color:red;
}
/* エラーメッセージ（親要素の下余白を消し、その分のエラーメッセージボックスを埋め込む） */
td:has(.error_msg) {
    padding-bottom: 0 ;
}
.error_msg {
    color: #f33;
    display: block;
    height: 20px;
}

.authority_error {
    color: #f33;
}

/* 成功時のフラッシュメッセージ等 */
.success {
    color:blue;
}


/* ホーム画面 */
.homeLinks dl {
    display : inline-block;
    vertical-align: top;
    width : 200px;
}
.homeLinks dl dt {
    margin-top : 10px;
    font-weight: bold;
}
.homeLinks dl dd {
    padding-left : 20px;
}