/* -------------------- 要素共通定義 -------------------- */
/* 全要素 */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 10px;
}
/* 入力フィールド */
input[type="text"],
input[type="password"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
textarea,
select {
    height: 2.5rem;
    line-height: 2;
    padding: 0.5rem;
    box-sizing: border-box;
}
/* span要素 */
span{
    line-height: 1.5;
}
/* a要素 */
a {
    cursor: pointer;
}

/* -------------------- 汎用定義 -------------------- */
/* メイン要素 */
.center {
    flex-direction: column;
    margin: 0 1rem;
}

/* ---------- 上余白 ---------- */
/* 上余白 - 小 */
.margin-top-low{
    margin-top:0.5rem;
    padding:0;
}
/* 上余白 - 中 */
.margin-top-middle{
    margin-top:1rem;
    padding:0;
}
/* 上余白 - 大 */
.margin-top-high{
    margin-top:3rem;
    padding:0;
}

/* ---------- 左余白 ---------- */
/* 左余白 - 5px相当 */
.ml-5px{
    margin-left:0.5rem;
}
/* 左余白 - 10px相当 */
.ml-10px{
    margin-left:1rem;
}
/* 左余白 - 20px相当 */
.ml-20px{
    margin-left:2rem;
}

/* ---------- フォント関連 ---------- */
/* 太文字 */
.bold{
    font-weight:bold;
}
/* 文字色 - 赤 */
.font-red{
    color: red;
}
/* 文字色 - 青 */
.font-blue{
    color: blue;
}
/* リンク */
.link{
    color:blue;
    text-decoration:underline;
}
/* 無効時リンク */
.link-invalid{
    color:black;
    pointer-events: none;
}
/* 永続無効リンク */
.link-permanently-invalid{
    color:black;
    pointer-events: none;
}
/* 配置位置 - 中央 */
.text-center{
    text-align: center;
}
/* 罫線色 - 赤（必須項目バリデーションエラー用） */
.requiredError{
    border-color: red;
}
/* 折り返し設定 - 折り返しあり */
.break{
    word-wrap: break-word;
    white-space: normal;
}
/* 折り返し設定 - 改行コード折り返し */
.linefeed{
    white-space: pre-wrap !important; 
}

/* ---------- フィールド ---------- */
/* 背景色 - グレー（読取フィールド用） */
.readonly{
    background-color:#ccc;
}
/* 表示切替用 - 非表示 */
.display-none{
    display:none !important;
}
/* 表示切替用 - 表示（flex） */
.display-flex{
    display:flex !important;
}
/* 表示切替用 - 表示（block） */
.display-block{
    display:block !important;
}
/* 配置位置 - 右寄せ */
.right-align {
    margin-left: auto;
}
/* お知らせ用複数行span */
.notice-span {
    display: block;
    width: auto;
    height: auto;
    padding: 0.2rem 0.5rem;
}


/* ---------- 汎用フィールド幅（固定） ---------- */
/* 検索フィールド幅 - 60px相当 */
.text-width-60px{
    width: 6rem;
}
/* 検索フィールド幅 - 80px相当 */
.text-width-80px{
    width: 8rem;
}
/* 検索フィールド幅 - 180px相当 */
.text-width-180px{
    width: 18rem;
}
/* 検索フィールド幅 - 400px相当 */
.text-width-400px{
    width: 40rem;
}


/* -------------------- サブメニュー部品 -------------------- */
/* サブメニュー（アカウント管理） */
.submenu-account{
    display: inline-block;
    padding: 0.5rem 0;
    color: white;
    background-color: rgb(204, 124, 244);
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 12rem;
    font-weight:normal;
}
/* サブメニュー用ドロップダウン領域 */
.dropdown {
    position: relative;
    display: inline-block;
}
/* サブメニュー用ドロップダウン部品 */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 16rem;
    box-shadow: 0 0.8rem 1.6rem 0 rgba(0,0,0,0.2);
    z-index: 2;
    right: 0;
}
/* サブメニュー用ドロップダウン部品 - ホバー */
.dropdown:hover .dropdown-content {
    display: block;
}
/* サブメニュー用ドロップダウン項目 */
.dropdown-content a {
    color: black;
    padding: 1.2rem 1.6rem;
    text-decoration: none;
    display: block;
}
/* サブメニュー用ドロップダウン項目 - ホバー */
.dropdown-content a:hover {
    background-color: #e1e1e1;
}


/* -------------------- トースト部品 -------------------- */
/* トースト部品 */
.toast {
    visibility: hidden;
    min-width: 25rem;
    margin-left: -12.5rem;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0.5rem;
    padding: 1.6rem;
    position: fixed;
    z-index: 99;
    left: 50%;
    top: 30px;
    font-size: 17px;
}
/* トースト部品表示スタイル */
.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* フェードインスタイル */
@keyframes fadein {
    from {top: 0; opacity: 0;}
    to {top: 30px; opacity: 1;}
}
/* フェードアウトスタイル */
@keyframes fadeout {
    from {top: 30px; opacity: 1;}
    to {top: 0; opacity: 0;}
}

/* -------------------- モーダル画面 -------------------- */
/* モーダルのスタイル */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}
/* モーダルコンテンツのスタイル */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 0 2rem 1rem 0;
    border: 0.1rem solid #888;
    width: 72.5rem;
}
/* モーダル用フッター */
.modal-footer {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

/* -------------------- スピナー -------------------- */
/* 最前面パネル */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
/* スピナー部品 */
.spinner {
    position: absolute;
    top: 45%;
    left: 45%;
    display: inline-block;
    width: 10rem;
    height: 10rem;
    border: 1rem solid #ccc;
    border-top-color: #007bff;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
/* スピナー動作 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* -------------------- 強調表示 -------------------- */
/* 警告領域 */
.caution-emphasis-area {
    color: #c82333;
    background-color: #ffd0d0;
    border: 1px solid #ebccd1;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
/* 警告領域 - アイコン表示 */
.caution-emphasis-area .icon {
    margin-right: 5px;
}

/* 通知領域 */
.caution-notice-area {
    color: #2333c8;
    background-color: #d0d0ff;
    border: 1px solid #ccd1eb;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
/* 通知領域 - アイコン表示 */
.caution-notice-area .icon {
    margin-right: 5px;
}


/* -------------------- セクション定義 -------------------- */
/* タイトル領域 */
.section-title { 
    margin: 0;
    display: flex;
    justify-content :space-between;
}
/* ---------- キックセット確認 ---------- */
/* キックセット確認 - 検索条件領域 */
.section-store-condition {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 6.5rem;
    white-space: nowrap;
}
/* キックセット確認（店舗） - 一覧表領域 */
.section-store-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 14rem;
}
/* キックセット確認（POSレジ） - 一覧表領域 */
.section-posreg-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 34rem;
}
/* ---------- 保守部品確認 ---------- */
/* 保守部品確認 - 検索条件領域 */
.section-device-condition {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 4rem;
    white-space: nowrap;
}
/* 保守部品確認 - 一覧表領域 */
.section-parts-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 53rem;
}
/* ---------- CE所課確認 ---------- */
/* CE所課確認 - 検索条件領域 */
.section-cesection-condition {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 4rem;
    white-space: nowrap;
}
/* CE所課確認 - 一覧表領域 */
.section-cesection-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 53rem;
}
/* ---------- アップロード ---------- */
/* アップロード - 検索条件領域 */
.section-upload-operation {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 5rem;
    white-space: nowrap;
}
/* アップロード - 履歴領域 */
.section-upload-history {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 8.35rem;
}
/* アップロード - サーバ状況領域 */
.section-upload-status {
    display: flex;
    justify-content: start;
    white-space: nowrap;
}
/* アップロード - 移行結果領域 */
.section-upload-transfer {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 33rem;
}

/* ---------- フッター ---------- */
/* フッター（左寄せ、最前面固定） */
.section-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(160,160,160,0.5);;
    z-index: 1000;
    text-align: center;
    padding: 0.5rem;
}
/* フッター（フッター高さ分の空白） */
.section-footer-blank {
    height:3rem;
}
/* フッター領域（中央寄せ） */
.section-centering-footer {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}
/* フッター領域（中央寄せ、最前面固定） */
.section-centering-footer-fix {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(160,160,160,0.5);;
    z-index: 1000;
    text-align: center;
    padding: 0.5rem;
}

/* ---------- テーブル領域 ---------- */
/* テーブル領域 */
.table-section {
    flex: 1;
    overflow-y: scroll;
    white-space: normal;
    border:0.1rem solid #CCCCCC;
}
/* テーブルタイトル領域 */
.table-title-section {
    display: flex;
    justify-content: space-between;
}
/* テーブルタイトル部品 */
.table-title-section span{
    margin-top:0;
    margin-bottom:0;
    line-height: 1;
}
/* テーブル領域（管理機能用） */
.table-section-foradmin {
    flex: 1;
    overflow-y: scroll;
    white-space: normal;
}

/* ---------- テーブル部品 ---------- */
/* テーブル部品 - 全体 */
.list-table {
    table-layout: fixed;
    border-collapse: collapse;
    min-width: 60rem;
    width:100%;
}
/* テーブル部品 - thead */
.list-table thead {
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* テーブル部品 - th */
.list-table th{
    border-left: 0.1rem solid #fff;
    border-right: 0.1rem solid #fff;
    border-bottom: 0.1rem solid #fff;
    height: 2.93rem;
}
/* テーブル部品 - td */
.list-table td{
    border: 0.1rem solid #fff;
    overflow-wrap: break-word;
}
/* テーブル部品 - 先頭th */
.list-table th:first-child {
    border-left: none;
}
/* テーブル部品 - 最終th */
.list-table th:last-child {
    border-right: none;
}
/* テーブル部品 - 先頭td */
.list-table td:first-child {
    border-left: none;
}
/* テーブル部品 - 最終td */
.list-table td:last-child {
    border-right: none;
}

/* テーブル部品（管理機能用） - 全体 */
.list-table-foradmin {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 60rem;
    width:100%;
}
/* テーブル部品（管理機能用） - thead */
.list-table-foradmin thead {
    border: 0.5rem solid #000;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* テーブル部品（管理機能用） - th */
.list-table-foradmin th{
    border-top: 0.1rem solid #000;
    border-bottom: 0.1rem solid #000;
    border-right: 0.1rem solid #000;
    height: 2.93rem;
}
/* テーブル部品（管理機能用） - 先頭th */
.list-table-foradmin th:first-child {
    border-left: 0.1rem solid #000;
}

/* テーブル部品（管理機能用） - td */
.list-table-foradmin td{
    border-bottom: 0.1rem solid #000;
    border-right: 0.1rem solid #000;
}
/* テーブル部品（管理機能用） - 先頭td */
.list-table-foradmin td:first-child {
    border-left: 0.1rem solid #000;
}

/* -------------------- テーブル行高さ -------------------- */
/* 通常の高さ */
.td-height-middle{
    height: 3.1rem;
}

/* -------------------- テーブル列幅 -------------------- */
/* ---------- 共通 ---------- */
/* 選択 */
.th-width-radio{
    width: 3rem;
}
/* 表内ボタン */
.th-width-2word-button{
    width: 3rem;
}

/* ---------- キックセット確認（店舗） ---------- */
/* 店舗コード */
.th-width-store01{
    width:7rem;
}
/* 店舗名 */
.th-width-store02{
    width:25rem;
}
/* 店舗住所 */
.th-width-store03{
    width:20rem;
}
/* 店舗連絡先 */
.th-width-store04{
    width:10rem;
}
/* 店舗営業時間 */
.th-width-store05{
    width:10rem;
}
/* 所課名 */
.th-width-store06{
    width:20rem;
}
/* 備考 */
.th-width-store07{
    width:20rem;
}
/* カンパニー */
.th-width-store08{
    width:20rem;
}
/* 店名（ふりがな） */
.th-width-store09{
    width:20rem;
}
/* ヤマト拠点 */
.th-width-store10{
    width:15rem;
}
/* ヤマト距離 */
.th-width-store11{
    width:4rem;
}
/* ヤマト時間 */
.th-width-store12{
    width:4rem;
}
/* 導入機器TP7000A（1人制） */
.th-width-store13{
    width:10rem;
}
/* 導入機器TP7000M（2人制） */
.th-width-store14{
    width:10rem;
}
/* 導入機器TP7000A（登録機） */
.th-width-store15{
    width:10rem;
}
/* 導入機器TP7000M（精算機） */
.th-width-store16{
    width:10rem;
}
/* 導入日Aタイプ登録機 */
.th-width-store17{
    width:8rem;
}
/* 導入日標準機 */
.th-width-store18{
    width:7rem;
}
/* スキャナ種別 */
.th-width-store19{
    width:15rem;
}

/* ---------- キックセット確認（POSレジ） ---------- */
/* レジNO */
.th-width-pos01{
    width: 8rem;
}
/* 装置名 */
.th-width-pos02{
    width:10rem;
}
/* 機種 */
.th-width-pos03{
    width:10rem;
}
/* 階層 */
.th-width-pos04{
    width:3rem;
}
/* 売場名 */
.th-width-pos05{
    width:18rem;
}
/* コメント */
.th-width-pos06{
    width:15rem;
}

/* ---------- キックセット確認（CE所課確認子画面） ---------- */
/* 項目タイトル列幅 */
.th-width-cesection-confirm{
    width:20%;
}

/* ---------- 保守部品確認（保守部品） ---------- */
/* ベース機種 */
.th-width-parts01{
    width: 10rem;
}
/* 部品名 */
.th-width-parts02{
    width: 18rem;
}
/* 仕様 */
.th-width-parts03{
    width: 10rem;
}
/* ヤマトデポ */
.th-width-parts04{
    width: 4rem;
}
/* 配置 */
.th-width-parts05{
    width: 5rem;
}
/* 有償価格 */
.th-width-parts06{
    width: 5rem;
}
/* 備考 */
.th-width-parts07{
    width: 16rem;
}

/* ---------- キックセット（店舗）確認照会（CE所課情報用） ---------- */
/* テーブルタイトル行 */
.table-title-container {
    display: flex;
    align-items: center;
}
/* テーブルタイトル幅 */
.table-title-width-copy{
    min-width:12rem;
}
/* 項目タイトル列幅 */
.th-width-copytitle{
    width:25%;
}


/* ---------- CE所課照会 ---------- */
/* ＣＥ所課コード */
.th-width-cesection01{
    width:8rem;
}
/* 会社名 */
.th-width-cesection02{
    width:14rem;
}
/* 所課名 */
.th-width-cesection03{
    width:15rem;
}
/* 電話番号 */
.th-width-cesection04{
    width:7rem;
}
/* 平日時間内 */
.th-width-cesection05{
    width:7rem;
}
/* 平日時間外 */
.th-width-cesection06{
    width:7rem;
}
/* 休日 */
.th-width-cesection07{
    width:7rem;
}

/* ---------- 社員情報照会 ---------- */
/* 社員コード */
.th-width-staff01{
    width:7rem;
}
/* 名前 */
.th-width-staff02{
    width:11rem;
}
/* 緊急連絡先 */
.th-width-staff03{
    width:7rem;
}
/* 緊急連絡先 */
.th-width-staff04{
    width:2rem;
}

/* ---------- アップデート ---------- */
/* アップデート日時 */
.th-width-update-history01{
    width: 6rem;
}
/* アップデートファイル */
.th-width-update-history02{
    width: 15rem;
}
/* アップロード実施者 */
.th-width-update-history03{
    width: 7rem;
}
/* 処理状態 */
.th-width-update-status01{
    width: 4rem;
}
/* 前回実施日時 */
.th-width-update-status02{
    width: 15rem;
}
/* 実施日時 */
.th-width-update-result01{
    width: 4rem;
}
/* 実施結果 */
.th-width-update-result02{
    width: 5rem;
}
/* 実施結果（詳細） */
.th-width-update-result03{
    width: 12rem;
}

/* -------------------- テーブル配色 -------------------- */
/* 薄い青（表ヘッダ） */
.light-blue{
    background-color: #B0C4DE;
    padding: 0;
    font-weight: normal;
}
/* 薄い緑（未選択行） */
.light-green{
    background-color: #CCFFCC;
    padding: 0;
    font-weight: normal;
}
/* 薄い黄色（選択行） */
.light-yellow{
    background-color: #FFFFCC;
    padding: 0;
    font-weight: normal;
}
/* 薄いグレー */
.light-gray{
    background-color: #cccccc;
    padding: 0;
    font-weight: normal;
}

/* -------------------- メニュー部品 -------------------- */
/* メニュー全体 */
.menu-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #f8f9fa;
    margin-bottom: 0.5rem;
}
/* メニューボタン（表示中） */
.menu-button-current {
    border-bottom: 0.3rem solid #3367ff;
    pointer-events: none;
}

/* -------------------- タイトル部品 -------------------- */
/* タイトル要素（ボタンあり） */
.title {
    background-color: #7fffd4;
    width: 100%;
    padding: 0 0.5rem;
    text-align: left;
    font-weight:bold;
    align-items: center; 
}
/* タイトル要素（ボタンなし） */
.title-nobutton {
    background-color: #7fffd4;
    width: 100%;
    padding: 0;
    text-align: left;
    font-weight:bold;
    align-items: center; 
}
/* タイトル要素（ログイン前） */
.title-caption {
    font-weight: bold;
}
/* 中タイトル要素 */
.field-title{
    margin-top:1rem;
    margin-bottom:0.5rem;
    font-weight:bold;
}

/* -------------------- ボタン部品 -------------------- */
/* 遷移ボタン（横置き） */
.button {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 12rem;
    font-weight:normal;
}
/* 遷移ボタン（横置き） - ホバー */
.button:hover {
    background-color: #0056b3;
}
/* 遷移ボタン（横置き） */
.button-wide {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 20rem;
    font-weight:normal;
}
/* 遷移ボタン（横置き） - ホバー */
.button-wide:hover {
    background-color: #0056b3;
}
/* 遷移ボタン（押下不可）※ホバーなし */
.button-restricted {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: black;
    background-color: #999999;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 12rem;
    font-weight:normal;
    pointer-events: none;
}
/* 遷移ボタン（縦置き） */
.vertical-button {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
    padding: 0.5rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 0.5rem;
    text-align: right;
    padding-right: 0.8rem;
    text-decoration: none;
    transition: background-color 0.3s;
    line-height: 1.0; /* ボタンの高さに合わせて調整 */
    margin:0 auto;
}
/* 遷移ボタン（縦置き） - ホバー */
.vertical-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}
/* 遷移ボタン（縦置き、押下不可）※ホバーなし */
.vertical-button-restricted {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
    padding: 0.5rem;
    color: black;
    background-color: #999999;
    border: none;
    border-radius: 0.5rem;
    text-align: right;
    padding-right: 0.8rem;
    text-decoration: none;
    transition: background-color 0.3s;
    line-height: 1.0; /* ボタンの高さに合わせて調整 */
    margin:0 auto;
    pointer-events: none;
}

/* 戻るボタン */
.button-gray {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: white;
    background-color: gray;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 12rem;
    font-weight:normal;
}
/* 戻るボタン - ホバー */
.button-gray:hover {
    background-color: #505050;
}
/* ログアウトボタン */
.button-logout {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: transparent; /* 背景色なし */
    color: white; /* 文字色 */
    background-color: #FF4C4C;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 12rem;
    font-weight:normal;
}
/* ログアウトボタン - ホバー */
.button-logout:hover {
    background-color: #FF6D6D;
}
/* 処理用ボタン（小） */
.proc-button-narrow {
    background-color: #FFA500;
    width: 10rem;
    display: inline-block;
    padding: 0.5rem 2rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
/* 処理用ボタン（小） - ホバー */
.proc-button-narrow:hover {
    background-color: #FF8C00;
}
/* 処理用ボタン（中） */
.proc-button-middle {
    background-color: #FFA500;
    width: 12rem;
    display: inline-block;
    padding: 0.5rem 2rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
/* 処理用ボタン（中） - ホバー */
.proc-button-middle:hover {
    background-color: #FF8C00;
}
/* 処理用ボタン（大） */
.proc-button-wide {
    background-color: #FFA500;
    width: 25rem;
    display: inline-block;
    padding: 0.5rem 2rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
/* 処理用ボタン（大） - ホバー */
.proc-button-wide:hover {
    background-color: #FF8C00;
}
/* キャンセルボタン */
.cancel-button {
    background-color: #d3d3d3;
    width: 10rem;
    display: inline-block;
    padding: 0.5rem 2rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
}
/* キャンセルボタン - ホバー */
.cancel-button:hover {
    background-color: #a9a9a9;
}
/* メニューボタン */
.header-menu-button {
    flex: 1;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    color: black;
    background-color: #b3e5fc;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 0.1rem;
}
/* メニューボタン（ホバー） */
.header-menu-button:hover {
    background-color: #81d4fa;
}
/* メニューボタン（子機能画面用） */
.header-menu-button-child {
    flex: 1;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    color: black;
    background-color: #b3e5fc;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 0.1rem;
}
/* メニューボタン（ホバー） */
.header-menu-button-child:hover {
    background-color: #81d4fa;
}

/* メニューボタン（押下不可）※ホバーなし */
.header-menu-button-restricted{
    flex: 1;
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.4rem;
    color: black;
    background-color: #999999;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 0 0.1rem;
    pointer-events: none;
}
/* マスタ用メニューボタン */
.master-menu-button {
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 20rem;
    margin: 0.5rem 0;
}
/* マスタ用メニューボタン（押下不可）※ホバーなし */
.master-menu-button-restricted {
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
    color: black;
    background-color: #999999;
    border: none;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s;
    width: 20rem;
    margin: 0.5rem 0;
    pointer-events: none;
}
/* マスタ用メニューボタン - ホバー */
.master-menu-button:hover {
    background-color: #0056b3;
}

/* -------------------- 詳細系画面用 -------------------- */
/* フォーム全体 */
.form-parent {
    width: 100%;
}
/* フォームグループ */
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}
/* フォーム - ラベル */
.form-group label {
    width: 20rem;
    text-align: left;
    margin-right: 1rem;
    align-self: center;
}
/* フォーム - 入力フィールド */
.form-group input[type="text"],
.form-group input[type="datetime-local"],
.form-group input[type="date"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
    flex: 1;
    width: calc(100% - 17rem);
}
/* フォーム - テキストエリア */
.form-group textarea {
    height: 5rem;
    padding-left: 0.65rem;
}
/* フォーム - ドロップダウン */
.form-group select {
    padding-left: 0.15rem;
}
/* フォーム - ボタン */
.form-group button {
    margin-left: 1rem;
}