/*************************************************************************************/
/* 共通スタイルシート
/*************************************************************************************/
/***********************************************/
/* HTML要素に対するスタイル定義
/***********************************************/
html {
    /*    font-size: 62.5%;*/
    font-size: 16px;
    /* 単位指定なしの場合はフォントサイズをかけたものになる（"1" の場合はフォントサイズと同じ） */
    line-height: 1;
}

body {
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif;
    /*    background-color: #1E3C91;
    display: flex;
    flex-direction: column;
    width: 100%;*/
    background-color: #EEE;
    margin-bottom: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333 !important;
}

/** リンクの色 */
a, a:hover {
    text-decoration: none;
}
/* 未訪問 */
a:link {
    /* color: #4F54B0;*/
    color: #00f;
}
/* 訪問済 */
a:visited {
    /* color: #9E480E;*/ 
    color: #00f;
}

h2 {
    font-size: 2rem;
}

h3 {
/*    font-size: 1.75rem;*/
    font-size: 1.5rem;
}

/***********************************************/
/* 基本レイアウト部分
/***********************************************/
.sw-wrapper {
/*    position: relative;
    top: 0;*/
    height: 100vh;
    width: 100vw;
    display:flex;
    flex-direction:column;
}

/** ヘッダー  */
.sw-header {
    /*    position: fixed;
    top: 0;*/
    width: 100%;
    height: 4.2rem;
    /*    border-top: 5px solid #C2143D;*/
    /*   border-top: 5px solid #0cf;*/
    background-color: #fff;
    z-index: 1200;
}
    .sw-header, .sw-header a {
        color: #000;
    }

    /* ヘッダーアイコン */
    .sw-header i {
        font-size: 1.2rem;
        vertical-align: -3px !important; /*テキストと上下位置を揃える */
    }
    /* 言語切替 */
    .sw-header #Language {
        display: block;
    }
    /* 利用区分 テキストの高さを揃える*/
    .sw-header #UserFunctionType {
        display: block;
        /* padding-top: 8px;*/
        padding-top: 5px;
    }

    /* ログインユーザ テキストの高さを揃える*/
    .sw-header #LoginUser {
        display: block;
        padding-top: 5px;
    }

/**　ボディ  */
.sw-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/** メイン     */
.sw-main {
    /*padding-top: 67px;*/ /* ヘッダーの高さ */
    /** Viewportの高さからフッターの高さ(border含む)を引く */
    /*min-height: calc(100vh - 67px);
    margin-left: 15rem;*/
    flex: 1;
    overflow-y: auto;
}

/** コンテンツ */
.sw-main-container {
    padding: 2.5rem 2rem;               /* トップの高さをサイドメニューと揃える */
    min-height: calc(100% - 4.2rem);   /** フッターの高さを引く */
}

/** フッター */
.sw-footer {
    height: 4.2rem;
    background-color: #8ed1fc;
    color: #fff !important;
    z-index: 1030;
    padding: 0.7rem;
    text-align: center;
}
.sw-footer a {
    color: #fff !important;
}

/***********************************************/
/* ヘッダー関連
/***********************************************/
/** ヘッダー部　通知アイコン部分 */
.sw-notice-icon {
    padding: 4px;
    position: relative;
}

.sw-notice-img {
    aspect-ratio: 0.83;
    object-fit: cover;
    object-position: center;
    width: 20px;
    overflow: hidden;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
}

.sw-notice-icon span {
    position: absolute;
    top: -10px;
    left: calc(100% - 10px);
    color: #FFF;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    background: #E68031;
    border-radius: 10px;
    min-width: 20px;
    padding: 0 3px;
    box-sizing: border-box;
}

/* レイアウト調整  */
.sw-navbar {
    padding :15px 10px;
}

/* ヘッダー左側（ロゴとタイトル） */
.sw-header-left {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    gap: 1.5rem;
    width: 630px;
}
    .sw-header-left a {
        margin-right: 0;
        margin-top: auto;
        margin-block: auto;
    }
    /* ヘッダーロゴ */
    .sw-logo-img {
        aspect-ratio: 6.9;
        object-fit: cover;
        object-position: center;
        width: 280px;
        overflow: hidden;
    }

    /* タイトルの大きさ指定 */
.sw-appname-label {
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid #000;
    margin-top: 6px;
    width: 20rem;
    height: 2rem;
    padding-top: 4px;
}

/* ヘッダー右側（ドロップダウンと通知アイコン） */
.sw-header-right {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

/***********************************************/
/* サイドバー関連
/***********************************************/
.sw-sidebar {
    /*position: fixed;
    top: 67px;*/ /* ヘッダーの高さ */
    width: 15rem;
/*    min-height: 100%;*/
    background-color: #d5d5d5;
    color: #fff;
    z-index: 1100;

}
.sw-sidebar a {
    color: #000;
    text-decoration: none;
}

/*.sw-slink {
    background-color: #bbb;
    color: #555;
    margin-bottom: 5px;
}*/

.sw-slink {
    margin-top: .375rem;
    margin-bottom: .675rem;
}
.sw-snavi-item:hover,
.sw-slink-item:hover {
    opacity: 0.5;
}
/** 現在表示しているページのメニューの背景設定（管理者） */
.sw-snavi a.sw-snavi-current,
.sw-sidebar-top a.sw-snavi-current {
    background-color: #FFB741;
    color: #000;
}

/** 現在表示しているページのメニューの背景設定（一般） */
.sw-snavi a.sw-snavi-current-judge,
.sw-sidebar-top a.sw-snavi-current-judge {
    background-color: #0693E3;
    color: #fff;
}

.sw-sidebar__inner {
    padding-top: 2.5rem; /* トップメニューの高さをメインコンテンツと揃える */
    /*position: sticky;
    height: calc(100vh - 7rem);*/ /* サイドバーの position-top 3.5rem + サイドバートップ（メニューのHome) height 3.5rem */
/*    overflow-y: auto;*/
    z-index: 1101;
}

/** アイコン　(右余白,サイズ) */
.sw-slink i {
    padding-right: .5rem;
/*    font-size: 1.2rem;*/
}

.sw-slink-item {
    color: #000;
    font-family: Inter, sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    text-wrap: nowrap;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #acacac;
    padding-top: .625rem;
    padding-right: 1.25rem;
    padding-bottom: .625rem;
    padding-left: 1.25rem;
    cursor: pointer;
}

.sw-slink span {
    font-size: 1.25rem;
    font-weight: bold;
    text-wrap: nowrap;
}

/******************************************/
/* メインコンテンツ内部
/******************************************/
.sw-main-inner {
/*    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .5rem;*/
}
.sw-main-inner-contents {
    padding: 1.5rem;
}
.sw-main-contents {
    width: calc(100% - 19rem) !important; /* IEのレイアウト崩れ防止 */
}

/***********************************************/
/* 項目表示用
/***********************************************/
/* コンテナ */
.sw-container {
    width: 700px;
}
.sw-container-lg {
    width: 1250px;   /* printの@pageでマージンを設定する場合、1250px, しない場合1350px推奨 */
}
.sw-container-full {
    width: 100%;
}
/* コンテナ（中央表示） */
.sw-container-center {
    width: 700px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
/* コンテナ（項目横並び） */
.sw-container-flex {
    display: flex;
    flex-wrap: wrap !important;
    gap: .5rem;
}
/* フレームボックス */
.sw-frame-box {
    position: relative;
    padding: .8em 1em;
    border: 1px solid #aaa;
    border-radius: 5px;
}
.sw-frame-caption {
    position: absolute;
    top: 0;
    left: 0;
    font-size: .8em;
    padding: 0 .5em;
    margin: 0;
    background-color: #eee;
    transform: translateY(-50%) translateX(.5em);
}

/* 項目 */
.sw-item {
    display: flex;
    margin-bottom: 1rem;
    min-height: 2.4rem;
    gap: .75rem;
    align-items: center;
}
/* 項目（入力項目を持つもの） */
.sw-item:has(input), .sw-item:has(select), .sw-item:has(textarea) {
    align-items: start !important;
}

/* 項目タイトル */
.sw-item-title, .sw-item-title-sm {
    background-color: #acacac;
    font-weight: bold;
    text-align: center;
    height: 2.3rem;
    padding-top: .4rem;
}
.sw-item-title {
    width: 14rem;
}
/* 項目タイトル（小） */
.sw-item-title-sm {
    width: 6rem;
}
/* 項目タイトルなし */
.sw-item-title-none {
    width: 14rem;
}
/* 項目データ */
.sw-item-data, .sw-item-data-sm, .sw-item-data-end, .sw-item-data-between {
    /*    padding-top: .5rem;*/
}
/* 項目データ（小） */
.sw-item-data-sm {
    width: 10.5rem;
}
/* 項目データ（右寄せ）※主にボタン配置に利用 */
.sw-item-data-end {
    display: flex;
    justify-content: end;
    flex: 1;
    align-items: center;
}
/* 項目データ（左右寄せ）※主にボタン配置に利用 */
.sw-item-data-between {
    display: flex;
    justify-content: space-between;
    flex: 1;
    align-items: center;
}
/* 項目データ（入力項目）※text と select が対象 */
.sw-item-data .form-control {
    width: 20rem;
}

/******************************************/
/* テーブル関連
/******************************************/
/* 見出し */
.sw-table thead {
    --bs-table-bg: #acacac;
    font-weight: bold;
    border-bottom: 1.5px solid #000;
}
.sw-table thead th {
/*    text-align: center;*/
    text-align: left;
}
/* 行のストライプ設定 */
.sw-table tbody tr:nth-child(odd) {
    --bs-table-bg: #eee !important;
}
/* テーブル縦スクロール */
.sw-table-scroll { /* 縦スクロール用外枠（テーブルの外に作成） */
    overflow-y: auto;
    max-height: 24.5rem;
}
.sw-table-scroll thead {
    border-bottom: none;
}
.sw-table-scroll thead th {
    position: sticky;
    top: 0;
    left: 0;
}
.sw-table-scroll thead th::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-top: 1px solid #acacac;
    border-bottom: 1.5px solid #000;
}

/***********************************************/
/* 印刷イメージ用（印刷時のスタイルシートは「sw_print.cssに記載）
/***********************************************/
.sw-print-container {
    background-color: #fff;
    width: 297mm;
    margin: 2rem;
}

/***********************************************/
/* Ajax用読み込みスピナー
/***********************************************/
.sw-ajaxspinner-container {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    background-color: rgba(128,128,128,0.2);
    z-index: 2147483647;
}
.sw-ajaxspinner {
    border: 16px solid #f3f3f3;
/*    border-top: 16px solid #C2143D;*/
    border-top: 16px solid #0cf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 45%;
    left: 40%;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/***********************************************/
/* その他
/***********************************************/
/** フラッシュメッセージ */
.sw-flush-message {
    position: fixed;
    left: 0;
    top: 4.2rem; /* ヘッダーの高さ分を考慮 */
    padding: 1rem 0;
    width: 100%;
    height: 3.5rem;
    color: #fff;
    display: none;
    text-align: center;
    font-weight: bold;
    z-index: 99999;
}

/* レコード情報 */
.sw-record-info {
    font-size: 0.7rem;
    text-align: right;
}

#fjj-modal {
    z-index: 1500;
}
.fjj-modal-cust {
    text-align: center;
}
.fjj-anim-box {
    position: absolute;
    right: 10px;
    min-width: 100px;
    height: 100px;
    animation: poyoyon2 6s ease-in-out forwards;
}
.fjj-anim-box img {
    height: 150px;
}

@keyframes poyoyon2 {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }

    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }

    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }

    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    0%, 100% {
        opacity: 1;
    }
}

.datepicker {
    z-index: 1201 !important;
}

/* チェックボックスの有効／無効でボーダーが見分けにくいので強調 */
.form-check-input {
    border: solid var(--bs-tertiary-color);
}
.form-check-input:disabled {
    border: solid var(--bs-border-color);
}