@charset "UTF-8";

/* =========================================================
   1. 基本設定・リセット
   ========================================================= */
:root {
    --suzuki-blue: #004B87;
    --suzuki-red: #E60012;
    --bg-light-gray: #F5F5F5;
    --bg-panel: #F8F9FA;
    --text-main: #333333;
    --text-gray: #666666;
    --border-color: #DDDDDD;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-main);
    background-color: #FFFFFF;
    line-height: 1.6;
}

a { color: var(--suzuki-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 最も安定していた1280px中央寄せ（余計な高さ指定を排除） */
.wrapper {
    width: 100%; max-width: 1280px; margin: 0 auto;
    min-height: 100vh;
    display: flex; flex-direction: column;
}

/* =========================================================
   2. ヘッダー・フッター
   ========================================================= */
.global-header {
    padding: 15px 30px; border-bottom: 1px solid var(--border-color); background-color: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.logo-img { height: 35px; width: auto; }

.header-nav-area {
    display: flex; justify-content: flex-start; flex-grow: 1; gap: 10px; margin-left: 30px;
}
.header-nav-link {
    font-size: 13px; font-weight: 700; color: var(--text-main); text-decoration: none;
    white-space: nowrap; padding: 5px 15px 5px 0; border-right: 1px solid #ccc; position: relative;
}
.header-nav-link:last-child { border-right: none; }

/* ヘッダーのアクティブバー */
.header-nav-link.is-active::after {
    content: ''; position: absolute; left: 0; bottom: -22px; width: calc(100% - 15px); height: 4px; background-color: #666;
}

.header-user-area {
    display: flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer; position: relative;
}
.user-dropdown {
    display: none; position: absolute; top: 100%; right: 0; background: #fff;
    border: 1px solid var(--border-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 180px; z-index: 1000;
}
.user-dropdown.is-active { display: block; }
.user-dropdown a { display: block; padding: 12px 20px; font-size: 13px; border-bottom: 1px solid var(--border-color); color: var(--text-main); }

.global-footer {
    background-color: var(--bg-light-gray); padding: 20px 40px; border-top: 1px solid var(--border-color); margin-top: auto;
}
.footer-inner-dashboard { display: flex; justify-content: space-between; align-items: center; }
.footer-left { font-size: 12px; color: var(--text-gray); display: flex; flex-direction: column; gap: 8px; }
.footer-manuals { display: flex; gap: 15px; margin-right: 150px; }
.manual-btn { background-color: #666; color: #fff; padding: 8px 25px; border-radius: 50px; font-size: 12px; }

/* =========================================================
   3. メインエリア・ボタン
   ========================================================= */
main { flex-grow: 1; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 40px; text-align: center; width: 100%; }

.btn-primary, .btn-secondary, .btn-outline, .btn-outline-blue {
    display: inline-flex; justify-content: center; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 50px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all 0.3s; text-decoration: none; width: 100%; max-width: 300px;
}
.btn-primary { background-color: var(--suzuki-blue); color: #fff; border: 2px solid var(--suzuki-blue); }
.btn-primary:hover { background-color: #fff; color: var(--suzuki-blue); }
.btn-secondary { background-color: #8F8F8F; color: #fff; border: 2px solid #8F8F8F; }
.btn-secondary:hover { background-color: #fff; color: #8F8F8F; }
.btn-outline { background-color: #fff; color: var(--text-main); border: 1px solid #999; }
.btn-outline-blue { background-color: #fff; color: var(--suzuki-blue); border: 1px solid var(--suzuki-blue); }

/* =========================================================
   4. ログイン・OTP・各種フォーム・動作環境用
   ========================================================= */
.auth-panel { display: flex; width: 100%; max-width: 950px; background-color: var(--bg-panel); border-radius: 16px; margin-bottom: 30px; }
.auth-col { flex: 1; padding: 40px 50px; display: flex; flex-direction: column; }
.login-col { border-right: 1px solid var(--border-color); }

/* LPボタンの下揃え調整 */
.login-col form { display: flex; flex-direction: column; flex-grow: 1; }
.login-col .btn-primary, .register-col .btn-secondary { margin-top: auto; }

.form-group { margin-bottom: 15px; width: 100%; text-align: left; }
.form-group label { display: block; font-size: 13px; margin-bottom: 5px; color: var(--text-gray); font-weight: 700; }
.form-group input, .form-input { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; outline: none; }
.input-blue { background-color: #E8F0FE; border-color: #b3d4ff; }
.input-gray { background-color: #F1F3F4; border-color: #d1d5db; }

.password-wrapper { position: relative; width: 100%; }
.pass-eye { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #aaa; cursor: pointer; padding: 5px; z-index: 10;}

.register-desc { font-size: 13px; margin-bottom: 90px; line-height: 1.6; }
.link-wrap { margin-bottom: 30px; font-size: 13px; }

.otp-container { width: 100%; max-width: 600px; text-align: center; }
.otp-message { margin-bottom: 30px; font-size: 15px; }
.input-bordered { width: 100%; max-width: 400px; padding: 12px; border: 1px solid #999; border-radius: 6px; font-size: 14px; margin: 20px auto 30px; display: block; }

.form-container { width: 100%; max-width: 800px; margin: 0 auto; text-align: left; }
.form-section-title { font-size: 22px; font-weight: 700; border-bottom: 1px solid #333; padding-bottom: 15px; margin-bottom: 40px; }
.form-row { margin-bottom: 30px; width: 100%; }
.form-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.form-note-red { color: var(--suzuki-red); font-size: 12px; margin-top: 8px; line-height: 1.5;}
.name-inputs { display: flex; gap: 20px; }
.name-inputs .form-input { flex: 1; }
.form-actions { display: flex; justify-content: center; gap: 20px; margin-top: 40px; width: 100%; }

.confirm-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; font-size: 15px; }
.confirm-table th, .confirm-table td { border: 1px solid #ccc; padding: 18px 20px; }
.confirm-table th { background-color: #f9f9f9; width: 35%; text-align: left; }

.thanks-container { width: 100%; max-width: 700px; margin: 0 auto; padding-top: 40px; display: flex; flex-direction: column; align-items: center;}
.thanks-text { font-size: 18px; margin-bottom: 25px; width: 100%; text-align: left; }
.thanks-note { font-size: 15px; margin-top: 40px; width: 100%; text-align: left; }

.env-container { width: 100%; max-width: 800px; margin: 0 auto; text-align: left; }
.env-title { font-size: 20px; font-weight: 700; margin-bottom: 40px; }
.env-box { margin-bottom: 40px; padding-left: 20px; font-size: 14px; }
.browser-list { display: flex; flex-wrap: wrap; gap: 30px; margin: 20px 0; }
.browser-item { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; }
.browser-item img { width: 60px; height: 60px; object-fit: contain; }

/* =========================================================
   5. TOP画面（ダッシュボード）専用
   ========================================================= */
.top-container { width: 100%; max-width: 1000px; margin: 0 auto; }

.top-menu-list { 
    display: flex; justify-content: flex-start; margin-bottom: 50px; border-right: 1px solid #ccc; width: fit-content; 
}
.top-menu-item { 
    flex: 0 0 160px; max-width: 160px; display: flex; flex-direction: column; align-items: center; 
    border-left: 1px solid #ccc; padding: 20px 10px; color: var(--text-main); 
}
.top-menu-icon { margin-bottom: 15px; height: 60px; display: flex; align-items: center; justify-content: center; }
.top-menu-icon img { width: 55px; height: 55px; object-fit: contain; }
.top-menu-text { font-size: 14px; font-weight: 700; text-align: center; }

.section-title { font-size: 16px; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; width: 100%; text-align: left; }
.section-title::before { content: "■"; color: var(--text-main); }

/* お知らせ枠（全文表示＋はみ出た時だけスクロール） */
.notice-box { 
    border: 1px solid #999; height: 152px; overflow-y: auto; margin-bottom: 40px; background-color: #fff; width: 100%;
}
.notice-item { border-bottom: 1px solid #ccc; padding: 12px 20px; font-size: 13px; text-align: left; min-height: 50px; display: flex; flex-direction: column; justify-content: center; }
.notice-date { font-weight: 700; margin-bottom: 5px; }

.links-grid { display: flex; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; width: 100%; justify-content: flex-start; }
.link-btn { 
    flex: 0 0 187px; display: flex; justify-content: center; align-items: center; text-align: center; 
    padding: 15px; border: 1px solid #999; border-radius: 50px; color: var(--text-main); font-size: 13px; font-weight: 700; 
}

/* =========================================================
   6. 下層ページ共通（パンくず、ページTOPなど）
   ========================================================= */
.breadcrumb { width: 100%; max-width: 1000px; margin: 0 auto 20px; font-size: 13px; font-weight: 700; color: var(--text-gray); text-align: left; }
.breadcrumb a { color: var(--text-gray); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; color: var(--suzuki-blue); }

.content-container { width: 100%; max-width: 1000px; margin: 0 auto; flex-grow: 1; }

.page-top { width: 100%; max-width: 1000px; margin: 0 auto 10px; text-align: right; }
.page-top a { font-size: 13px; font-weight: 700; color: var(--suzuki-blue); text-decoration: none; }

/* =========================================================
   7. 部品用品情報画面（parts_info.html）専用
   ========================================================= */
.parts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; margin-bottom: 50px; }
.parts-card { display: flex; flex-direction: column; }

/* 青いボタンの高さ固定とデザイン */
.btn-parts {
    background-color: #0066CC; color: #fff; font-size: 16px; font-weight: 700; text-align: center; 
    padding: 15px 10px; border-radius: 6px; text-decoration: none; transition: opacity 0.3s; 
    display: flex; align-items: center; justify-content: center; line-height: 1.4;
    min-height: 90px; /* ここで高さを揃える */
}
.btn-parts:hover { opacity: 0.8; text-decoration: none; }
.parts-desc { font-size: 12px; font-weight: 700; color: var(--text-main); margin-top: 15px; line-height: 1.5; }

/* =========================================================
   8. テスト用UI
   ========================================================= */
.role-switcher { position: fixed; bottom: 20px; left: 20px; background: rgba(0,0,0,0.8); color: #fff; padding: 10px 15px; border-radius: 8px; z-index: 9999; font-size: 12px; }

/* =========================================================
   【追加】用品リスト画面（parts_list.html）専用
   ========================================================= */
.parts-list-category {
    font-size: 16px;
    font-weight: 700;
    margin: 30px 0 15px;
    width: 100%;
    text-align: left;
}

.car-model-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列に分割 */
    gap: 15px;
    margin-bottom: 20px;
}

.btn-car-model {
    background-color: #0066CC;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 15px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    box-sizing: border-box;
}

.btn-car-model:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* タブレット・スマホ用の最適化（画面が狭いときは列数を減らす） */
@media screen and (max-width: 768px) {
    .car-model-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
    .car-model-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   【追加】ニュース一覧画面（news_4w.html / news_2w.html）専用
   ========================================================= */

/* ヘッダーエリア（タイトルとページネーションの並び） */
.news-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.pagination-info {
    font-size: 12px;
    color: #333;
}

/* 検索フィルターエリア */
.search-filter-area {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.search-inputs-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.search-row {
    display: flex;
    align-items: center;
}

.search-label {
    font-size: 13px;
    width: 170px;
}

.search-input {
    width: 300px;
    padding: 8px 10px;
    border: 1px solid #333;
    font-size: 13px;
}

.date-input {
    width: 130px;
    padding: 8px 10px;
    border: 1px solid #333;
    font-size: 13px;
}

.search-buttons-group {
    display: flex;
    gap: 10px;
}

.btn-search, .btn-clear {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 45px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-search:hover, .btn-clear:hover {
    opacity: 0.8;
}

/* データテーブル（一覧表） */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.data-table th, .data-table td {
    border: 2px solid #fff; /* 白い境界線 */
    padding: 15px 12px;
    font-size: 12px;
    vertical-align: middle;
    color: #333;
    line-height: 1.5;
}

.data-table th {
    background-color: #A6A6A6; /* ヘッダーの濃いグレー */
    text-align: center;
    font-weight: normal;
}

.data-table tr:nth-child(odd) td {
    background-color: #BFBFBF; /* 奇数行のグレー */
}

.data-table tr:nth-child(even) td {
    background-color: #D9D9D9; /* 偶数行の薄いグレー */
}

/* カラム幅の目安（画像に基づく） */
.col-date { width: 8%; text-align: center; }
.col-id { width: 8%; text-align: center; }
.col-title { width: 35%; }
.col-attach { width: 28%; }
.col-memo { width: 21%; }

.attach-link {
    color: #0066CC;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}
.attach-link:hover {
    text-decoration: underline;
}

/* タブレット・スマホ用の最適化 */
@media screen and (max-width: 768px) {
    .search-filter-area {
        flex-direction: column;
    }
    .search-row {
        flex-wrap: wrap;
        gap: 10px;
    }
    .search-row.offset-row {
        margin-left: 0 !important;
    }
    .search-input {
        width: 100%;
    }
    .data-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* =========================================================
   【追加】ヘッダーの固定表示（スクロール追従）
   ========================================================= */
.global-header {
    position: sticky;
    top: 0;
    z-index: 1000; /* テーブルや他の要素の下に隠れないように最前面に出す設定 */
}

/* =========================================================
   【追加】ニュース一覧など、幅を広く取りたい画面用のコンテナ
   ========================================================= */
.content-container.wide-container {
    /* フッターの幅より少し短いくらい（広め）に設定 */
    max-width: 1100px; 
    width: 95%;
}

/* テーブル内の余白を少し調整して、文字が一行に入るスペースを増やす */
.data-table th, .data-table td {
    padding: 12px 10px; /* 以前の 15px 12px から少しスッキリさせました */
}

/* 検索エリアの入力欄も、画面が広くなった分少しだけ広げます */
.search-input {
    width: 400px;
}

/* =========================================================
   【追加】安全データシート（SDS）画面用（sds.html）
   ========================================================= */

/* 検索エリアのレイアウト */
.sds-search-area {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.sds-search-inputs {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sds-search-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sds-input-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sds-label {
    font-size: 13px;
    width: 70px; /* ラベルの幅を揃える */
    text-align: center;
}

.sds-select, .sds-input {
    padding: 8px 10px;
    border: 1px solid #333;
    font-size: 13px;
    width: 240px;
}

.sds-btn-search {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 70px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.sds-btn-search:hover {
    opacity: 0.8;
}

/* サブカテゴリのタイトル（【タッチアップペイント】など） */
.sds-category-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* SDSテーブル用のカラム幅設定 */
.sds-table .col-id { width: 15%; text-align: center; }
.sds-table .col-name { width: 40%; }
.sds-table .col-pdf { width: 15%; text-align: center; }
.sds-table .col-date { width: 15%; text-align: center; }

/* PDFダウンロードリンクの装飾 */
.pdf-download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0066CC;
    text-decoration: none;
    font-size: 13px;
}

.pdf-download-link:hover {
    text-decoration: underline;
}

.pdf-icon {
    color: #D20000; /* 赤色 */
    font-size: 18px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .sds-search-area {
        flex-direction: column;
    }
    .sds-search-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .sds-input-group {
        width: 100%;
    }
    .sds-select, .sds-input {
        width: 100%;
    }
}

/* =========================================================
   【追加】その他資料（other.html）など、リンクカード型メニュー用
   ========================================================= */
/* セクションごとの見出し */
.section-title-sub {
    font-size: 20px;
    font-weight: bold;
    margin: 50px 0 20px;
    color: #333;
}
/* 最初の見出しの上部余白を消す */
.content-container .section-title-sub:first-child {
    margin-top: 0;
}

/* カードを3列に並べるグリッドレイアウト */
.link-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 20px;
}

/* カード全体のリンク設定 */
.link-card {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ホバー時に青い箱を少し半透明にする */
.link-card:hover .link-card-box {
    opacity: 0.8;
}
.link-card:hover .link-card-box-1 {
    opacity: 0.8;
}


/* 青い箱部分のデザイン */
.link-card-box {
    background-color: #0066CC; /* スズキブルーに近い色 */
    color: #fff;
    border-radius: 6px;
    padding: 20px 10px;
    min-height: 85px; /* 高さを揃える */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    transition: opacity 0.3s;
}
.link-card-box-1 {
    background-color: #e4bb4e; /* スズキブルーに近い色 */
    color: #fff;
    border-radius: 6px;
    padding: 20px 10px;
    min-height: 85px; /* 高さを揃える */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
    transition: opacity 0.3s;
}


/* 箱の下の説明文 */
.link-card-desc {
    font-size: 13px;
    line-height: 1.5;
}

/* スマホ対応（1列表示） */
@media screen and (max-width: 768px) {
    .link-card-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   【追加】純正部品価格表（jyunsei_kakaku.html）
   ========================================================= */

/* 純正部品価格表テーブル用のカラム幅設定 */
.jyunsei-table th.col-name {
    width: 75%;
    text-align: center; /* 見出しは中央揃え */
}

.jyunsei-table td.col-name {
    text-align: left; /* データは左揃え */
}

.jyunsei-table .col-pdf {
    width: 25%;
    text-align: center;
}

/* =========================================================
   【追加】発電機パーツカタログ（hatsudenki_parts.html）
   ========================================================= */

/* 発電機パーツカタログテーブル用のカラム幅設定 */
.hatsudenki-table th {
    text-align: center; /* 見出しは中央揃え */
}

.hatsudenki-table td {
    text-align: center; /* データも基本は中央揃え */
}

/* モデル名カラムのみ左揃え */
.hatsudenki-table .col-model {
    width: 35%;
    text-align: left;
}

.hatsudenki-table .col-date {
    width: 15%;
}

.hatsudenki-table .col-partno {
    width: 20%;
}

.hatsudenki-table .col-pdf {
    width: 15%;
}

/* =========================================================
   【追加】スズキ純正部品ロゴ（suzuki_parts_logo.html）
   ========================================================= */

/* テーブルのカラム幅とテキスト配置 */
.suzuki-logo-table th {
    text-align: center; /* 見出しは中央揃え */
}

.suzuki-logo-table td {
    text-align: center;
    vertical-align: middle; /* 画像とテキストを縦方向の中央に揃える */
}

.suzuki-logo-table .col-logo-name {
    width: 40%;
    text-align: left; /* 名称のみ左揃え */
}

.suzuki-logo-table .col-logo-img {
    width: 40%;
}

.suzuki-logo-table .col-logo-dl {
    width: 20%;
}

/* サンプルロゴ画像のサイズ調整 */
.logo-sample-img {
    max-width: 100%;
    height: auto;
    max-height: 45px; /* 大きくなりすぎないように制限 */
    display: block;
    margin: 0 auto;
}

/* =========================================================
   【追加】帳票アップロード画面（cyohyo_up.html）用フォーム
   ========================================================= */

/* 「■」がつかないシンプルな見出し */
.page-main-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 40px;
}

/* フォーム全体を囲むコンテナ */
.upload-form-container {
    width: 100%;
    max-width: 650px;
    margin: 0 auto 50px;
}

/* 1行ごとのレイアウト（左にラベル、右に入力欄） */
.upload-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

/* ラベルのデザイン（左側の縦線を表現） */
.upload-form-label {
    width: 180px;
    font-size: 15px;
    font-weight: bold;
    flex-shrink: 0;
    border-left: 2px solid #333;
    padding-left: 8px;
    line-height: 1.1;
}

.upload-form-label .required {
    color: var(--suzuki-red);
}

.upload-form-input-wrap {
    flex-grow: 1;
    text-align: left;
}

.upload-form-text {
    font-size: 15px;
    color: #333;
    padding-left: 10px;
}

/* 入力欄（テキスト・セレクトボックス） */
.upload-form-input, .upload-form-select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* ファイルアップロード部分のカスタムデザイン */
.file-upload-wrap {
    display: flex;
    border: 1px solid #333;
    border-radius: 4px;
    background-color: #fff;
    align-items: stretch;
    cursor: pointer;
}

.file-upload-btn-fake {
    background-color: #C0C0C0;
    padding: 8px 15px;
    font-size: 13px;
    color: #333;
    border-right: 1px solid #333;
    display: flex;
    align-items: center;
    margin: 2px;
}

.file-upload-text {
    padding: 10px 15px;
    font-size: 13px;
    color: #999;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.file-input-hidden {
    display: none;
}

/* ボタンエリア */
.upload-form-actions {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.btn-upload-submit {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 60px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    min-width: 220px;
}
.btn-upload-submit:hover { opacity: 0.8; }

.btn-upload-reset {
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 60px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    min-width: 220px;
}
.btn-upload-reset:hover { opacity: 0.8; }

/* スマホ対応（縦並びに変更） */
@media screen and (max-width: 768px) {
    .upload-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .upload-form-label {
        width: 100%;
    }
    .upload-form-input-wrap {
        width: 100%;
    }
    .upload-form-actions {
        flex-direction: column;
        gap: 15px;
    }
    .btn-upload-submit, .btn-upload-reset {
        width: 100%;
    }
}

/* =========================================================
   【追加】活用資材（katsuyou_shizai.html）
   ========================================================= */

/* 活用資材テーブル用のカラム幅設定 */
.katsuyou-table th.col-name {
    width: 70%;
    text-align: center; /* 見出しは中央揃え */
}

.katsuyou-table td.col-name {
    text-align: left; /* データは左揃え */
}

.katsuyou-table .col-pdf {
    width: 30%;
    text-align: center;
}

/* =========================================================
   【追加】適合表示ラベル（tekigou_label.html）
   ========================================================= */

/* 適合表示ラベルテーブル用のカラム幅設定 */
.tekigou-table th.col-name {
    width: 70%;
    text-align: center; /* 見出しは中央揃え */
}

.tekigou-table td.col-name {
    text-align: left; /* データは左揃え */
}

.tekigou-table .col-pdf {
    width: 30%;
    text-align: center;
}

/* =========================================================
   【追加】資材発注依頼トップ（materials_order.html）用
   ========================================================= */

/* 矢印を挟んだ横並びレイアウト */
.flow-card-container {
    display: flex;
    align-items: flex-start; /* 上端を揃える */
    gap: 20px;
    margin-bottom: 50px;
}

.flow-card-container .link-card {
    flex: 0 0 280px; /* カードの幅を固定 */
}

/* オレンジ色の矢印 */
.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DE933C; /* 画像に近い落ち着いたオレンジ色 */
    font-size: 50px;
    height: 85px; /* 青い箱の高さに合わせて縦の中央に配置 */
}

/* スマホ対応（縦並びにして矢印を下に向ける） */
@media screen and (max-width: 768px) {
    .flow-card-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .flow-card-container .link-card {
        width: 100%;
        flex: auto;
    }
    .flow-arrow {
        transform: rotate(90deg); /* 矢印を下向きに回転 */
        height: auto;
        padding: 10px 0;
    }
}

/* =========================================================
   【修正】全ページのリンクカード（青いボタン）のサイズ完全統一
   ========================================================= */

/* グリッドのカラム幅を固定（画面幅に合わせて間延びさせない） */
.link-card-grid {
    grid-template-columns: repeat(3, 280px) !important;
    justify-content: flex-start !important; /* 全体を左寄せで固定 */
}

/* 青いボタン（箱）のサイズを完全に固定 */
.link-card-box {
    height: 90px !important;     /* 高さを完全に固定 */
    min-height: auto !important; /* 以前の曖昧な設定を無効化 */
    width: 100%;
    box-sizing: border-box;
}
.link-card-box-1 {
    height: 90px !important;     /* 高さを完全に固定 */
    min-height: auto !important; /* 以前の曖昧な設定を無効化 */
    width: 100%;
    box-sizing: border-box;
}


/* 下段の矢印フローカードの幅も上段と完全に統一 */
.flow-card-container .link-card {
    flex: 0 0 280px !important;
    width: 280px !important;
}

/* スマホ等で画面が狭くなった時だけ1列に戻す安全装置 */
@media screen and (max-width: 768px) {
    .link-card-grid {
        grid-template-columns: 1fr !important;
    }
    .flow-card-container .link-card {
        flex: auto !important;
        width: 100% !important;
    }
}

/* =========================================================
   【追加】案内出荷登録（shipping_entry.html）用
   ========================================================= */

/* 説明文 */
.page-description {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* テーブルのカラム幅設定 */
.shipping-table .col-name {
    width: 40%;
    text-align: left;
}
.shipping-table .col-input {
    width: 30%;
    text-align: center;
}
.shipping-table .col-unit {
    width: 15%;
    text-align: center;
}
.shipping-table .col-price {
    width: 15%;
    text-align: center;
}

/* テーブル内の入力ボックス */
.shipping-table-input {
    width: 90%;
    padding: 8px 10px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 14px;
    text-align: left;
    box-sizing: border-box;
}

/* 入力欄があるセルは、少しパディングを小さくしてバランスを取る */
.shipping-table td.col-input {
    padding: 8px 12px;
}

/* =========================================================
   【追加】カレンダー入力欄（.date-input）の微調整
   ========================================================= */
.date-input {
    cursor: pointer; /* マウスオーバー時に指マークにしてクリックできることを明示 */
    background-color: #fff !important; /* ライブラリ適用時も背景を白に固定 */
}

/* =========================================================
   【追加】問い合わせ過去事例（past_cases.html）用
   ========================================================= */

/* タイトル下のサブタイトル */
.faq-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
}

/* 検索エリアのレイアウト（2カラムグリッド） */
.faq-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 40px;
    margin-bottom: 10px;
}

.faq-search-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-search-row {
    display: flex;
    align-items: center;
}

.faq-search-label {
    width: 110px; /* ラベルの幅を固定 */
    font-size: 14px;
    flex-shrink: 0;
}

.faq-search-input, .faq-search-select {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

.faq-search-hint {
    color: #E60012; /* 赤色 */
    font-size: 12px;
    margin-left: 100px; /* ラベルの幅分だけ右にずらす */
    margin-top: -10px; /* 少し上に詰める */
}

/* 検索ボタンエリア */
.faq-search-buttons {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    gap: 15px;
    margin-bottom: 20px;
}

.btn-faq-search, .btn-faq-clear {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 60px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-faq-search:hover, .btn-faq-clear:hover { opacity: 0.8; }

/* 赤字の注意書き */
.faq-notice {
    color: #E60012;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* 過去事例テーブルのカラム幅と配置 */
.faq-table th { text-align: center; padding: 12px 5px; font-size: 13px; }
.faq-table td { text-align: left; padding: 10px 8px; font-size: 12px; }
.faq-table td.text-center { text-align: center; }

.faq-table .col-no { width: 6%; }
.faq-table .col-date { width: 8%; }
.faq-table .col-car { width: 8%; }
.faq-table .col-model { width: 7%; }
.faq-table .col-part { width: 11%; }
.faq-table .col-cat1 { width: 14%; }
.faq-table .col-cat2 { width: 14%; }
.faq-table .col-content { width: 25%; }
.faq-table .col-detail { width: 7%; }

/* 確認ボタン */
.btn-detail {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 15px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-detail:hover { opacity: 0.8; }

/* ページ下部のお問合せ案内エリア */
.faq-bottom-guide {
    text-align: center;
    margin: 40px 0;
}
.faq-bottom-text {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}
.btn-inquiry {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 60px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-inquiry:hover { opacity: 0.8; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .faq-search-grid { grid-template-columns: 1fr; gap: 15px; }
    .faq-search-buttons { justify-content: stretch; }
    .btn-faq-search, .btn-faq-clear { flex: 1; padding: 10px; text-align: center; }
}

/* =========================================================
   【追加】お問合せ詳細（past_cases_detail.html）用
   ========================================================= */

/* 詳細テーブルのカラム幅とテキスト配置 */
.faq-detail-table th {
    text-align: center;
    padding: 15px;
}
.faq-detail-table td {
    text-align: left;
    padding: 15px 20px; /* 少しゆったりと余白をとる */
    line-height: 1.5;
}
.faq-detail-table .col-label {
    width: 25%;
}
.faq-detail-table .col-data {
    width: 75%;
}

/* 中央揃えのボタンラッパー */
.btn-center-wrap {
    text-align: center;
    margin: 40px 0 60px;
}

/* 「閉じる」などの横幅の広い青ボタン */
.btn-close-large {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 15px 120px; /* 横幅を広く見せる */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s;
}
.btn-close-large:hover {
    opacity: 0.8;
}

/* 添付ファイルリンク */
.attach-file-link {
    color: #0066CC;
    text-decoration: none;
}
.attach-file-link:hover {
    text-decoration: underline;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .btn-close-large {
        width: 100%;
        padding: 15px 0;
        box-sizing: border-box;
    }
}

/* =========================================================
   【追加】問い合わせフォーム（past_cases_form.html）用
   ========================================================= */

/* 赤字の注意事項エリア */
.form-notice {
    color: #E60012;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* フォーム用テーブル（枠線あり） */
.form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.form-table td {
    border: 1px solid #ccc; /* 薄いグレーの枠線 */
    padding: 15px;
    font-size: 14px;
    vertical-align: middle;
}

/* 左側のラベル列 */
.form-table td.col-label {
    width: 25%;
    background-color: #fff;
    color: #333;
}

/* 右側の入力列 */
.form-table td.col-input {
    width: 75%;
    background-color: #fff;
}

/* 入力部品の基本スタイル */
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

/* テキストエリアの高さ */
textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

/* 必須項目のピンク背景（!importantで強制適用） */
.input-required {
    background-color: #F8C6D9 !important; 
    border: 1px solid #b38b9c; /* 枠線も少し濃いピンクグレーに */
}

/* 必須マークの赤星 */
.text-danger {
    color: #E60012;
}

/* 入力欄の下の赤字ヒント */
.form-hint {
    color: #E60012;
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.4;
}

/* 下部のボタンエリア */
.form-actions-center {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px 0 60px;
}

.btn-form-back {
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    width: 220px;
    text-align: center;
    transition: opacity 0.3s;
}

.btn-form-submit {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 220px;
    text-align: center;
    transition: opacity 0.3s;
}

.btn-form-back:hover, .btn-form-submit:hover {
    opacity: 0.8;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .form-table td.col-label, .form-table td.col-input {
        display: block;
        width: 100%;
    }
    .form-actions-center {
        flex-direction: column;
        gap: 15px;
    }
    .btn-form-back, .btn-form-submit {
        width: 100%;
    }
}

/* =========================================================
   【追加】確認画面（past_cases_confirm.html）用
   ========================================================= */

/* 確認画面用のテキスト表示スタイル（改行なども綺麗に表示） */
.confirm-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    padding: 5px 0;
    word-wrap: break-word; /* 長い英数字の折り返し */
}

/* =========================================================
   【追加】チラシ系ページ共通レイアウト＆カード（order_recommend.html等）
   ========================================================= */

/* 2カラムレイアウトコンテナ */
.leaflet-page-container {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    align-items: stretch;
}

/* 左側：サイドバー（検索エリア） */
.leaflet-sidebar {
    width: 250px;
    background-color: #E2E4E6; /* プレースホルダーのグレー色 */
    min-height: 800px; /* 見た目を合わせるための仮の高さ。中身が入れば自動で伸びます */
    flex-shrink: 0;
    padding: 20px;
    box-sizing: border-box;
}

/* 右側：メインコンテンツ（チラシ一覧） */
.leaflet-main-content {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列に分割 */
    gap: 15px;
    align-content: start;
}

/* チラシカードのデザイン */
.leaflet-card {
    border: 1px solid #999;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
}

/* チラシ画像ラッパー */
.leaflet-img-wrap {
    width: 100%;
    background-color: #F8F8F8;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaflet-img-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* チラシタイトル */
.leaflet-title {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #333;
}

/* メタ情報（カテゴリ・コードなど） */
.leaflet-meta {
    font-size: 11px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 15px;
}

/* ボタンエリア（PDF・注文） */
.leaflet-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-leaflet-pdf {
    flex: 1;
    background-color: #0066CC;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-leaflet-order {
    flex: 1;
    background-color: #D20000; /* スズキレッド */
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.btn-leaflet-pdf:hover, .btn-leaflet-order:hover {
    opacity: 0.8;
    color: #fff;
    text-decoration: none;
}

/* デザインコンセプト部分 */
.leaflet-divider {
    border-top: 1px solid #999;
    margin: 0 0 10px 0;
}

.leaflet-concept-title {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.leaflet-concept-text {
    font-size: 11px;
    line-height: 1.4;
    color: #333;
}

/* スマホ・タブレット対応 */
@media screen and (max-width: 1024px) {
    .leaflet-main-content { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
    .leaflet-page-container { flex-direction: column; }
    .leaflet-sidebar { width: 100%; min-height: 100px; }
    .leaflet-main-content { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
    .leaflet-main-content { grid-template-columns: 1fr; }
}

/* =========================================================
   【追加】管理・登録トップ（admin_top.html）用 4列グリッド
   ========================================================= */

.admin-card-grid {
    display: grid;
    /* 4列で表示し、カード幅を調整して画面内に収める */
    grid-template-columns: repeat(4, 250px); 
    gap: 40px 20px; /* 縦の余白40px、横の余白20px */
    margin-bottom: 50px;
    justify-content: flex-start;
}

/* スマホ・タブレット等の画面幅が狭い場合の安全装置 */
@media screen and (max-width: 1100px) {
    .admin-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 768px) {
    .admin-card-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   【追加】用品ニュース管理（admin_news系）全ページ共通
   ========================================================= */

/* --- 1. 一覧画面の検索エリア --- */
.admin-news-search-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 15px 20px;
    align-items: center;
    margin-bottom: 30px;
}

.admin-search-label {
    font-size: 14px;
    font-weight: bold;
    text-align: right;
}

.admin-search-input {
    padding: 8px 10px;
    border: 1px solid #333;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

.admin-search-date-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-search-btn-group {
    display: flex;
    gap: 10px;
}

.btn-admin-gray {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}
.btn-admin-gray:hover { opacity: 0.8; }

.btn-admin-add {
    width: 100%; /* 新規追加ボタンは幅を合わせる */
}

/* --- 2. 一覧画面のテーブル --- */
.admin-news-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px; /* 行の間に隙間を空ける */
}
.admin-news-table th {
    background-color: #C0C0C0;
    text-align: center;
    padding: 12px 5px;
    font-size: 13px;
    border: none;
}
.admin-news-table td {
    background-color: #E2E4E6;
    text-align: center;
    padding: 12px 8px;
    font-size: 12px;
    vertical-align: middle;
}
.admin-news-table td.text-left { text-align: left; }

.btn-action-change {
    background-color: #0066CC;
    color: #fff;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}
.btn-action-delete {
    background-color: #E60012;
    color: #fff;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-action-change:hover, .btn-action-delete:hover { opacity: 0.8; }

/* --- 3. 削除確認用モーダル --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; /* 初期は非表示 */
    justify-content: center; align-items: center; z-index: 9999;
}
.modal-overlay.is-active { display: flex; }

.modal-content {
    background: #fff;
    padding: 25px 30px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.modal-domain { font-weight: bold; font-size: 16px; margin-bottom: 15px; }
.modal-text { font-size: 14px; margin-bottom: 25px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.btn-modal-ok {
    background-color: #0044CC; color: #fff; border: 2px solid #0044CC;
    padding: 8px 30px; border-radius: 50px; cursor: pointer; font-weight: bold;
}
.btn-modal-cancel {
    background-color: #DDE5F4; color: #0044CC; border: none;
    padding: 8px 20px; border-radius: 50px; cursor: pointer; font-weight: bold;
}
.btn-modal-ok:hover, .btn-modal-cancel:hover { opacity: 0.8; }

/* --- 4. 入力・更新フォーム --- */
.admin-form-table { width: 100%; margin-bottom: 40px; }
.admin-form-table td { padding: 10px 5px; vertical-align: top; }
.admin-form-table .col-label { width: 120px; font-weight: bold; font-size: 15px; padding-top: 15px; }
.admin-form-table .col-input { width: calc(100% - 120px); }

.admin-form-input {
    width: 100%; padding: 8px; border: 1px solid #999; font-size: 14px; box-sizing: border-box;
}
.admin-form-input.short { width: 300px; }
.admin-form-textarea {
    width: 100%; padding: 8px; border: 1px solid #999; font-size: 14px; box-sizing: border-box;
    height: 200px; resize: vertical;
}
.file-upload-row { display: flex; align-items: center; gap: 15px; margin-bottom: 5px; }
.file-current-link { color: #0044CC; text-decoration: none; font-size: 13px; }
.file-current-link:hover { text-decoration: underline; }

.form-actions-bottom { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; }
.btn-form-blue { background-color: #0066CC; color: #fff; border: none; padding: 10px 40px; font-size: 14px; cursor: pointer; }
.btn-form-gray { background-color: #666; color: #fff; border: none; padding: 10px 40px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-form-blue:hover, .btn-form-gray:hover { opacity: 0.8; }

/* --- 5. 完了画面 --- */
.comp-message { font-size: 18px; margin: 40px 0 80px; text-align: left; color: #333; }
.comp-btn-wrap { text-align: center; margin-bottom: 50px; }
.btn-comp-back {
    background-color: #666; color: #fff; border: none; padding: 12px 100px; border-radius: 50px;
    font-size: 16px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn-comp-back:hover { opacity: 0.8; }

/* =========================================================
   【追加】案内出荷情報登録（admin_shipping.html）用
   ========================================================= */

/* 行追加ボタン */
.btn-add-row {
    background-color: #666;
    color: #fff;
    border: none;
    padding: 10px 40px;
    font-size: 15px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: opacity 0.3s;
}
.btn-add-row:hover { opacity: 0.8; }

/* 案内出荷用テーブル */
.admin-shipping-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}
.admin-shipping-table th {
    background-color: #B3B3B3; /* 画像に合わせた濃いグレー */
    color: #333;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid #fff;
    font-weight: normal;
}
.admin-shipping-table td {
    background-color: #E2E4E6;
    padding: 8px 10px;
    border: 1px solid #fff;
    vertical-align: middle;
    color: #333;
}
.admin-shipping-table td.col-name {
    width: 35%;
    text-align: left;
    padding-left: 15px;
}

/* ドラッグ＆ドロップ時のカーソル変更 */
.admin-shipping-table tbody tr {
    cursor: grab;
}
.admin-shipping-table tbody tr:active {
    cursor: grabbing;
}
/* ドラッグ中の要素の見た目（半透明化） */
.sortable-ghost {
    opacity: 0.4;
    background-color: #f0f0f0;
}

/* 単位付き入力欄（ flexboxで横並びに ） */
.input-with-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.input-with-unit input {
    width: 90px;
    padding: 8px 10px;
    border: 1px solid #999;
    box-sizing: border-box;
    text-align: left;
}

/* =========================================================
   【追加】SDS情報登録（admin_sds系）用
   ========================================================= */

/* SDSトップの青いメニューボタン */
.sds-menu-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}
.sds-menu-item {
    display: flex;
    flex-direction: column;
    width: 250px;
}
.sds-menu-btn {
    background-color: #0066CC;
    color: #fff;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.3s;
}
.sds-menu-btn:hover {
    opacity: 0.8;
    color: #fff;
}
.sds-menu-desc {
    font-size: 12px;
    margin-top: 10px;
    color: #333;
    font-weight: bold;
}

/* =========================================================
   【追加】SDS商品管理（admin_sds_item.html）検索エリア用
   ========================================================= */
.sds-item-search-wrapper {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch;
}
.sds-item-search-grid {
    display: grid;
    grid-template-columns: 80px 250px 60px 250px;
    gap: 15px 20px;
    align-items: center;
}
.btn-sds-search {
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 180px;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.3s;
}
.btn-sds-search:hover { opacity: 0.8; }

/* =========================================================
   注文入力画面（order_recommend_entry.html）用
   ========================================================= */
.order-entry-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 50px;
}
.order-entry-left {
    width: 250px;
    background-color: #e8ecef;
    padding: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.order-entry-right {
    flex: 1;
    min-width: 0;
}
.order-item-image {
    width: 100%;
    height: auto;
    border: 1px solid #aaa;
    background-color: #fff;
    margin-bottom: 15px;
    display: block;
}
.order-item-info {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    font-weight: bold;
}
.step-indicator {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}
.step-box {
    padding: 8px 10px;
    border: 2px solid #999;
    background-color: #fff;
    color: #999;
    font-weight: bold;
    text-align: center;
    width: 150px;
    box-sizing: border-box;
    font-size: 14px;
}
.step-box.is-active {
    background-color: #f39c12; /* オレンジ */
    color: #fff;
    border-color: #f39c12;
}
.step-arrow {
    color: #999;
    font-size: 24px;
    font-weight: bold;
}
.note-red {
    color: #d32f2f;
    font-size: 13px;
    margin: 10px 0;
    line-height: 1.5;
    font-weight: bold;
}
.order-entry-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.order-entry-table thead th {
    background-color: #b3b3b3;
    color: #333;
    font-weight: bold;
    text-align: center;
    border: 1px solid #fff;
    padding: 10px 15px;
    font-size: 14px;
}
.order-entry-table tbody th,
.order-entry-table tbody td {
    border: 1px solid #fff;
    padding: 10px 15px;
    vertical-align: middle;
    font-size: 14px;
}
.order-entry-table tbody th {
    width: 25%;
    text-align: left;
    font-weight: normal;
    color: #333;
}
.order-entry-table tbody td {
    width: 75%;
    color: #333;
}
/* 偶数・奇数行で背景色を交互に変更 */
.order-entry-table tbody tr:nth-child(odd) th,
.order-entry-table tbody tr:nth-child(odd) td {
    background-color: #e6e6e6;
}
.order-entry-table tbody tr:nth-child(even) th,
.order-entry-table tbody tr:nth-child(even) td {
    background-color: #d9d9d9;
}
.order-entry-input {
    width: 250px;
    padding: 6px;
    border: 1px solid #777;
    box-sizing: border-box;
    font-family: inherit;
}
.order-entry-input.wide {
    width: 100%;
}
.radio-group-inline {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.radio-group-inline label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.radio-group-inline input[type="radio"] {
    transform: scale(1.3);
    margin: 0;
}

/* =========================================================
   完了画面（サンクス画面）用
   ========================================================= */
.order-complete-print-area {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}
.btn-print {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 150px;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.3s;
}
.btn-print:hover {
    opacity: 0.8;
}
.order-complete-desc {
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    font-weight: bold;
    flex: 1;
}
.order-complete-preview {
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}
.order-complete-preview img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   チラシ注文 一覧画面（order_service_new.html等）用
   ========================================================= */
.flyer-order-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch;
}
.flyer-sidebar {
    width: 220px;
    background-color: #e8ecef;
    padding: 15px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.flyer-content {
    flex: 1;
    min-width: 0;
}
.flyer-sidebar-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 10px 0;
}
.flyer-sidebar-title:first-child {
    margin-top: 0;
}
.flyer-sidebar-title::before {
    content: "■";
    margin-right: 5px;
    color: #666;
}
.flyer-sidebar-input {
    width: 100%;
    padding: 6px;
    border: 1px solid #777;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-family: inherit;
}
.flyer-sidebar-btn {
    background-color: #0066CC;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-weight: bold;
    cursor: pointer;
    width: 100px;
    font-size: 14px;
    text-align: center;
}
.flyer-sidebar-btn:hover { opacity: 0.8; }
.flyer-sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.flyer-sidebar-links li {
    margin-bottom: 10px;
}
.flyer-sidebar-links a {
    color: #0066CC;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}
.flyer-sidebar-links a:hover { text-decoration: underline; }
.flyer-sidebar-note {
    color: #d32f2f;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 20px;
}
.flyer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.flyer-card {
    border: 1px solid #999;
    background-color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.flyer-card-img-wrap {
    background-color: #e6e6e6;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}
.flyer-card-img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    background-color: #fff;
}
.flyer-card-title {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}
.flyer-card-info {
    font-size: 11px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
    font-weight: bold;
}
.flyer-card-actions {
    display: flex;
    gap: 10px;
}
.btn-flyer-pdf,
.btn-flyer-order {
    flex: 1;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 0;
    border-radius: 4px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}
.btn-flyer-pdf { background-color: #0066CC; }
.btn-flyer-order { background-color: #d32f2f; }
.btn-flyer-pdf:hover, .btn-flyer-order:hover { opacity: 0.8; }

/* =========================================================
   特別装備品テーブル（order_service_new_entry.html等）用
   ========================================================= */
.equipment-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.equipment-table thead th {
    background-color: #b3b3b3;
    color: #333;
    font-weight: bold;
    text-align: center;
    border: 1px solid #fff;
    padding: 10px 15px;
    font-size: 14px;
}
.equipment-table tbody td {
    border: 1px solid #fff;
    padding: 10px 15px;
    vertical-align: middle;
}
.equipment-table tbody tr:nth-child(odd) td {
    background-color: #e6e6e6;
}
.equipment-table tbody tr:nth-child(even) td {
    background-color: #d9d9d9;
}

/* =========================================================
   サイドバーの区切り線用
   ========================================================= */
.flyer-sidebar-divider {
    border: none;
    border-top: 1px solid #999;
    margin: 15px 0;
}
.center {
  display: flex;
  justify-content: center; /* Horizontally centers the button */
  align-items: center;     /* Vertically centers if .center has a defined height */
}

.right {
  display: flex;
  justify-content: flex-end; /* Aligns the button to the right */
  align-items: center;       /* Vertically centers if right has a defined height */
}
.btn-text {
  background: none;
  border: none;
  padding: 0;
  font: inherit;       /* Inherits font-family, size, weight, and line-height from parent */
  color: inherit;      /* Inherits text color from parent */
  cursor: pointer;     /* Shows pointer cursor on hover */
  outline: inherit;
}