.month_button {
    color: var(--text-color);
    font-weight: normal;
    text-decoration: none;
    border: 1px solid var(--normal-border-color);
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
.month_button .count {
    padding-right: 10px;
}

.motoukekouji_input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* フォーム全体を囲う枠線と余白 */
.motoukekouji_form_container {
    margin-bottom: 40px;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 5px;
}

/* 各入力項目のまとまり（標準の余白） */
.motoukekouji_form_group {
    margin-bottom: 15px;
}

/* 一番下の入力項目（ボタンとの間隔を少し広げる） */
.motoukekouji_form_group_last {
    margin-bottom: 20px;
}

/* 項目の見出し（ラベル） */
.motoukekouji_form_label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 登録ボタンの配置（中央寄せ） */
.motoukekouji_form_submit {
    text-align: center;
}



/* =========================================
   元請工事 月別リスト（toplist.php）用のスタイル 
========================================= */
.motoukekouji_list_container {
    margin-bottom: 30px;
}

/* 各工事データの枠 */
.motoukekouji_list_item {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #fff;
}

/* 工事の名称（タイトル部分） */
.motoukekouji_list_title {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.2rem;
    color: #333;
}

/* 詳細情報を表示するテーブル */
.motoukekouji_list_table {
    width: 100%;
    border-collapse: collapse;
}

.motoukekouji_list_table th {
    text-align: left;
    padding: 8px 0;
    width: 130px;
    font-weight: bold;
    color: #555;
    vertical-align: top;
}

.motoukekouji_list_table td {
    padding: 8px 0;
    color: #333;
    line-height: 1.5;
}

/* データがない場合の表示 */
.motoukekouji_nodata {
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #666;
}

/* 編集・削除ボタン周り（※将来用） */
.motoukekouji_list_actions {
    text-align: right;
    margin-top: 10px;
}

.motoukekouji_action_btn {
    display: inline-block;
    padding: 6px 20px;
    background-color: #eee;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
}

.motoukekouji_action_btn:hover {
    background-color: #e0e0e0;
}



/* =========================================
   元請工事 アコーディオン中身のスタイル
========================================= */
/* 初期状態を非表示（折りたたんだ状態）にする */
.motoukekouji_item_content {
    display: none;
    padding: 10px 10px 15px 10px;
    border-top: 1px solid #eee; /* タイトルと詳細の間にうすい区切り線を入れると綺麗です */
}

/* アコーディオンが開かれた（JSでクラスが付与された）時の表示設定 */
/* ※ accordion.js の仕様（.active や .open が付与される場合）に備えた記述です */
.accordion-item.active .motoukekouji_item_content,
.accordion-item.open .motoukekouji_item_content,
.motoukekouji_item_content.open {
    display: block;
}

/* =========================================
   元請工事 アコーディオンリスト用スタイル
   （スクリーンショットデザイン対応版）
========================================= */

/* アコーディオン全体 */
.motoukekouji_accordion_container {
    width: 100%;
    margin-bottom: 20px;
}

/* 1件のデータ全体を囲う枠 */
.motoukekouji_accordion_item {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    background-color: #fff;
}

/* ① グレーのヘッダー帯（No.と印刷） */
.motoukekouji_item_top {
    background-color: #777; /* ダークグレー */
    color: #fff;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.motoukekouji_item_no {
    font-weight: bold;
    font-size: 1rem;
}

/* 印刷チェックボックス */
.motoukekouji_print_check {
    background-color: #fff;
    color: #333;
    padding: 3px 8px;
    font-size: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.motoukekouji_print_check input[type="checkbox"] {
    margin-right: 5px;
}

/* ② タイトル帯（工事名と矢印） */
.motoukekouji_item_title {
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #fff;
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #eee; /* タイトル下の薄い線 */
}
.motoukekouji_item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 10px;
    align-items: center;
}
.motoukekouji_item .print-checkbox {
    width: 1.5rem;
    height: 1.5rem;
}

/* 矢印（アコーディオントリガー） */
.motoukekouji_arrow {
    color: #888;
    font-size: 0.9rem;
    font-weight: normal;
}

/* ③ 開いた中の詳細部分（★デフォルトは非表示でたたんだ状態にする★） */
.motoukekouji_item_content.accordion-content {
    display: none; /* デフォルトで閉じる */
    padding: 15px 10px;
    background-color: #fff;
}

/* JSによって開かれた時の表示設定 */
.accordion-item.active .motoukekouji_item_content.accordion-content,
.accordion-item.open .motoukekouji_item_content.accordion-content {
    display: block;
}

/* 詳細の各入力項目（縦積みの表デザイン） */
.motoukekouji_detail_row {
    margin-bottom: 0;
}

/* ラベル：背景グレー、文字小さめ */
.motoukekouji_detail_label {
    background-color: #f5f5f5;
    color: #666;
    font-size: 0.75rem;
    padding: 8px 10px;
    font-weight: bold;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* 値：背景白 */
.motoukekouji_detail_value {
    background-color: #fff;
    color: #333;
    font-size: 0.95rem;
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

/* 共通ボタンレイアウト（縦並び） */
.motoukekouji_btn_group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* 角丸ボタンスタイル */
.motoukekouji_btn_yellow,
.motoukekouji_btn_white {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    border-radius: 30px; /* スクリーンショットに合わせた角丸 */
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    box-sizing: border-box;
    cursor: pointer;
}

/* 黄色ボタン（編集、印刷用） */
.motoukekouji_btn_yellow {
    background-color: #ffcc00;
    color: #333;
    border: none;
}

/* 白抜きボタン（削除、戻る用） */
.motoukekouji_btn_white {
    background-color: #ffffff;
    color: #555;
    border: 1px solid #aaa;
}