/*
 * ========================================
 * BIDOOR EC-CUBE カスタムスタイル
 * Phase 1: ヘッダー/フッター/ナビ レイアウト変更
 * ベースカラー: #005FBD (ビドーブルー)
 * Updated: 2026-03-22
 * ========================================
 */

/* ========================================
   1. カラー変数定義
======================================== */
:root {
    /* メインカラー */
    --bidoor-blue: #005FBD;
    --bidoor-blue-dark: #003d7a;
    --bidoor-blue-light: #BFDFFF;
    --bidoor-blue-hover: #004a94;
    /* 背景色 */
    --bidoor-bg-light: #f0f6fc;
    --bidoor-bg-body: #f5f9fd;
    /* テキスト・ボーダー */
    --bidoor-gray: #f5f5f5;
    --bidoor-text: #333333;
    --bidoor-text-light: #666666;
    --bidoor-border: #d0e2f2;
    --bidoor-border-light: #e0e0e0;
    /* ステータスカラー */
    --bidoor-success: #28a745;
    --bidoor-warning: #ffc107;
    --bidoor-danger: #dc3545;
}

/* ========================================
   2. 全体的なフォントとベーススタイル
======================================== */
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, sans-serif;
    color: var(--bidoor-text);
    line-height: 1.8;
    background-color: var(--bidoor-bg-body);
}

/* リンクカラー */
a {
    color: var(--bidoor-blue);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--bidoor-blue-dark);
    text-decoration: none;
}

/* ========================================
   3. ヘッダー
======================================== */
/* --- ヘッダー全体（白ベース） --- */
.ec-layoutRole__header {
    background: #ffffff;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.08);
    /*position: sticky;*/
    top: 0;
    z-index: 100;
}

/* --- ロゴエリア --- */
.ec-headerTitle .ec-headerTitle__title {
    text-align: left;
}
.ec-headerTitle .ec-headerTitle__title img {
    width: 110px;
    transition: opacity 0.3s ease;
}
.ec-headerTitle .ec-headerTitle__title img:hover {
    opacity: 0.75;
}
.ec-headerTitle .ec-headerTitle__title a {
    margin-bottom: 0px;
}

/* --- ナビゲーション（白ベース） --- */
.ec-headerNaviRole {
    padding-top: 0px;
    background: #ffffff;
    border-bottom: 0px solid var(--bidoor-border);
}

/* ヘッダー内リンク共通（ダークテキスト） */
.ec-headerRole a,
.ec-headerNaviRole a {
    color: var(--bidoor-text);
    transition: all 0.3s ease;
    text-decoration: none;
}
.ec-headerRole a:hover,
.ec-headerNaviRole a:hover {
    color: var(--bidoor-blue);
}

/* ヘッダー内テキスト（会員名等） */
.ec-headerNaviRole .ec-headerNaviRole__nav,
.ec-headerNaviRole .ec-headerNav {
    color: var(--bidoor-text-light);
}

/* ヘッダー内ボタン・アイコン */
.ec-headerNaviRole .ec-cartNaviWrap .ec-cartNavi {
    color: var(--bidoor-blue);
    background: var(--bidoor-bg-light);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.ec-headerNaviRole .ec-cartNaviWrap .ec-cartNavi:hover {
    background: var(--bidoor-blue-light);
}
.ec-cartNavi--badge {
    background: var(--bidoor-danger) !important;
}

/* カテゴリナビ（ブルーアクセント） */
.ec-headerCategoryArea {
    background: var(--bidoor-blue);
    border-bottom: none;
}
.ec-headerCategoryArea a {
    color: white;
}
.ec-headerCategoryArea a:hover {
    background: var(--bidoor-blue-hover);
}
.ec-itemNav__nav li ul {
    background: white;
    border: 1px solid var(--bidoor-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.ec-itemNav__nav li ul a {
    color: var(--bidoor-text);
}
.ec-itemNav__nav li ul a:hover {
    background: var(--bidoor-bg-light);
    color: var(--bidoor-blue);
}

/* ページヘッダー（パンくず下のタイトル） */
.ec-pageHeader h1 {
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: var(--bidoor-blue-dark);
}

/* 検索バーのスタイル（白ベース用） */
.ec-headerSearch .ec-headerSearch__keyword input {
    border: 2px solid var(--bidoor-border);
    background: #ffffff;
    color: var(--bidoor-text);
    border-radius: 4px;
}
.ec-headerSearch .ec-headerSearch__keyword input::placeholder {
    color: #aaa;
}
.ec-headerSearch .ec-headerSearch__keyword input:focus {
    border-color: var(--bidoor-blue);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 95, 189, 0.1);
}

/* ========================================
   4. ボタン
======================================== */
/* プライマリボタン（検索、購入など） */
.ec-blockBtn--action,
.ec-inlineBtn--action {
    background: var(--bidoor-blue);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 95, 189, 0.25);
    padding: 10px 20px;
    height: auto;
    line-height: 1.5;
    display: inline-block;
}

.ec-blockBtn--action:hover,
.ec-inlineBtn--action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.35);
    background: var(--bidoor-blue-hover);
}

/* キャンセルボタン */
.ec-blockBtn--cancel {
    background: #6c757d;
    border: none;
    border-radius: 6px;
    color: white;
    transition: all 0.3s ease;
    width: 150px;
    padding: 0px;
    height: 40px;
    margin: 10px;
    line-height: 2.5em;
    float:right;
}

.ec-blockBtn--cancel:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* ========================================
   5. マイページ
======================================== */
/* サイドメニュー */
.ec-mypageRole__nav {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ec-mypageRole__mainWithColumn div{width:100%;margin:auto;overflow-x: hidden!important;border-radius: 0px!important;}
.ec-navlistRole__item a {
    color: var(--bidoor-text);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.ec-navlistRole__item a:hover,
.ec-navlistRole__item a.is-active {
    background: rgba(0, 95, 189, 0.08);
    border-left-color: var(--bidoor-blue);
    color: var(--bidoor-blue);
}

/* ウェルカムメッセージ */
.ec-welcomeMsg {
    background: var(--bidoor-blue);
    color: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.2);
    display:none;
}

.ec-welcomeMsg p {
    margin: 5px 0;
}

.ec-welcomeMsg strong {
    color: #ffd700;
    font-size: 1.1em;
}

/* ========================================
   6. 書類一覧ページ（請求書管理）
======================================== */
/* テーブルヘッダー */
.invoice-table thead tr {
    background: var(--bidoor-blue-dark);
    color: white;
}

.invoice-table thead th {
    color: white;
    font-weight: bold;
    padding: 15px;
    border: none;
}

/* テーブルボディ */
.invoice-table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--bidoor-border);
}

.invoice-table tbody tr:hover {
    background-color: rgba(0, 95, 189, 0.05);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 95, 189, 0.1);
}

/* 種別バッジ */
.invoice-badge-seikyu {
    background: var(--bidoor-blue);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 95, 189, 0.3);
}

.invoice-badge-nouhin {
    background: #198754;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.3);
}

.invoice-badge-ryoshu {
    background: #fd7e14;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(253, 126, 20, 0.3);
}

/* 表示ボタン */
.invoice-view-btn {
    background: var(--bidoor-blue);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 95, 189, 0.3);
}

.invoice-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.4);
    background: var(--bidoor-blue-hover);
    color: white;
}

/* 検索フォームエリア */
.invoice-search-area {
    background: var(--bidoor-bg-light);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ========================================
   7. フッター
======================================== */
/* --- フッター全体 --- */
.ec-layoutRole__footer {
    background: var(--bidoor-blue-dark);
    color: rgba(255, 255, 255, 0.85);
    margin-top: 60px;
}
.ec-layoutRole__footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.3s ease;
}
.ec-layoutRole__footer a:hover {
    color: #ffffff;
}

/* フッターロール */
.ec-footerRole {
    border-top: none;
    margin-top: 0;
    background: var(--bidoor-blue-dark);
    padding: 40px 0 20px;
}

/* フッターナビ（EC-CUBEデフォルトの構造） */
.ec-footerNavi {
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.ec-footerNavi .ec-footerNavi__link {
    border-top: none;
}
.ec-footerNavi .ec-footerNavi__link a {
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 0;
    font-size: 14px;
}
.ec-footerNavi .ec-footerNavi__link a:hover {
    color: white;
    background: transparent;
}

/* フッタータイトル */
.ec-footerTitle {
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 20px;
}
.ec-footerTitle__copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    text-align: center;
}

/* フッター内のコンテンツエリア */
.ec-layoutRole__footer .ec-footerRole__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   8. 商品一覧・詳細ページ
======================================== */
/* 商品価格 */
.ec-price__price {
    color: var(--bidoor-blue);
    font-weight: bold;
    font-size: 1.3em;
}
.pname{
	color: var(--bidoor-blue);
}

/* カートボタン */
.ec-productRole__btn .ec-blockBtn--action {
    background: var(--bidoor-blue);
}
.ec-layoutRole .ec-layoutRole__contents {
    max-width: 100% !important;
}
@media only screen and (min-width: 768px) {
    .ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
        display: block;
        width: 20%;
    }
    .ec-layoutRole .ec-layoutRole__mainWithColumn {
        width: 80%;
        padding:0 20px;
    }
    .ec-productRole {
    padding-left: 0px;
    }
    .ec-searchnavRole,.ec-shelfRole,.ec-searchnavRole .ec-searchnavRole__infos{
    max-width: 100% !important;
    }
}
/* ========================================
   9. フォーム要素
======================================== */
/* セレクトボックス */
.ec-select select,
.ec-input input,
.ec-numberInput input {
    border: 2px solid var(--bidoor-border);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.ec-select select:focus,
.ec-input input:focus,
.ec-numberInput input:focus {
    border-color: var(--bidoor-blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 189, 0.1);
    outline: none;
}

/* ========================================
   10. アラート・通知
======================================== */
.ec-alert-warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 0;
}

.ec-alert-success {
    background: #d4edda;
    border-left: 4px solid #28a745;
    border-radius: 0;
}

/* ========================================
   11. レスポンシブ対応
======================================== */
@media screen and (max-width: 768px) {
    /* モバイルでのボタン調整 */
    .ec-blockBtn--action,
    .ec-blockBtn--cancel {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* テーブルのフォントサイズ調整 */
    .invoice-table {
        font-size: 14px;
    }
    
    .invoice-table thead th,
    .invoice-table tbody td {
        padding: 10px;
    }
}

/* ========================================
   12. プレビューページ
======================================== */
/* PDF画像 */
.invoice-preview-image {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--bidoor-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.invoice-preview-image:hover {
    box-shadow: 0 6px 20px rgba(0, 95, 189, 0.2);
    transform: scale(1.02);
}

/* プレビューページの書類情報エリア */
.invoice-info-area {
    background: var(--bidoor-bg-light);
    border-left: 4px solid var(--bidoor-blue);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ========================================
   13. アニメーション
======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-orderRole__detail,
.invoice-table tbody tr {
    animation: fadeIn 0.4s ease;
}

/* ========================================
   14. ページトップボタン
======================================== */
.ec-blockTopBtn {
    background: var(--bidoor-blue);
    color: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.4);
    transition: all 0.3s ease;
}

.ec-blockTopBtn:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 95, 189, 0.5);
}

/* ========================================
   書類一覧ページ - 追加スタイル
======================================== */

/* 検索エリア */
.invoice-search-area {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
}

.invoice-search-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.invoice-search-input {
    flex: 1;
    min-width: 150px;
}

.invoice-select {
    width: 100%;
    padding: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.invoice-select:focus {
    border-color: var(--bidoor-blue);
    box-shadow: 0 0 0 3px rgba(0, 95, 189, 0.1);
    outline: none;
}

.invoice-search-buttons {
    /*display: flex;*/
    gap: 10px;
}

/* 件数表示 */
.invoice-count {
    margin-bottom: 15px;
    font-weight: bold;
    color: var(--bidoor-text);
}

/* テーブルラッパー */
.invoice-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* テーブル本体 */
.invoice-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

/* テーブルヘッダー */
.invoice-th-date,
.invoice-th-type,
.invoice-th-count,
.invoice-th-action {
    padding: 15px;
    font-weight: bold;
}

.invoice-th-date {
    text-align: left;
}

.invoice-th-type,
.invoice-th-count,
.invoice-th-action {
    text-align: center;
}

/* テーブル行 */
.invoice-row {
    /* アニメーションはすでに定義済み */
}

/* テーブルセル */
.invoice-td-date {
    padding: 15px;
}

.invoice-td-type,
.invoice-td-count,
.invoice-td-action {
    padding: 15px;
    text-align: center;
}

.invoice-td-count {
    font-weight: bold;
}

/* その他のバッジ */
.invoice-badge-other {
    display: inline-block;
    background: #6c757d;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3);
}

/* データなし表示 */
.invoice-no-data {
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.invoice-no-data-icon {
    margin-right: 15px;
    font-size: 24px;
}

.invoice-no-data-text {
    font-size: 14px;
}
ul {
    list-style-type: none;
}
ul.bnrBox{width:241px;font-size: 86%;}
ul.bnrBox li{margin:0 0 10px 0;}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .invoice-search-inputs {
        flex-direction: column;
    }
    
    .invoice-search-input {
        width: 100%;
    }
    
    .invoice-search-buttons {
        flex-direction: column;
    }
    
    .ec-blockBtn--action,
    .ec-blockBtn--cancel {
        width: 100%;
        height:56px;
    }
    .ec-headerNavSP{
    top: 58px!important;
    left: 17px!important;
    }
    .ec-headerNavSP .ec-headerNavSP__itemIcon {
        color: var(--bidoor-blue);
    }
    .ec-headerRole {
    padding-top: 0px;
    }
    .ec-headerTitle .ec-headerTitle__title img {
    width: 80px;
    }
    /* モバイルヘッダーの背景確認 */
    .ec-layoutRole__header {
        position: sticky;
    }
}

/* ========================================
   テーブルのレスポンシブ対応（スマホ）
======================================== */

/* タブレット以下（768px未満） */
@media screen and (max-width: 768px) {
    /* テーブルを縦並びカードレイアウトに変更 */
    .invoice-table-wrapper {
        overflow-x: visible;
    }
    
    .invoice-table {
        border: none;
    }
    
    /* ヘッダーを非表示 */
    .invoice-table thead {
        display: none;
    }
    
    /* 各行をカードとして表示 */
    .invoice-table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 2px solid var(--bidoor-border);
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* 各セルをブロック表示 */
    .invoice-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border: none;
        text-align: left !important;
    }
    
    /* ラベルを追加（疑似要素） */
    .invoice-table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--bidoor-blue);
        min-width: 80px;
        flex-shrink: 0;
    }
    
    /* 最後のセル以外に下線 */
    .invoice-table tbody td:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* ボタンを全幅表示 */
    .invoice-td-action {
        display: block !important;
        padding-top: 15px !important;
    }
    
    .invoice-td-action::before {
        display: none;
    }
    
    .invoice-view-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }
    .yscrl{
    	overflow:auto;
    }
    .yscrl::before {
    content: "← 横にスクロールできます →";
    display: block;
    font-size: 13px;
    color: #666;
    text-align: center;
    margin-bottom: 5px;
  }
  /* Webkitブラウザ（Chrome, Safari）用 */
.yscrl::-webkit-scrollbar {
  height: 8px; /* 横スクロールバーの高さ */
}

.yscrl::-webkit-scrollbar-thumb {
  background: #ccc; /* スクロールバーの色 */
  border-radius: 4px;
}

.yscrl::-webkit-scrollbar-track {
  background: #f1f1f1; /* バーの通り道の背景色 */
}
.ec-newsRole__cardImage {
    width: 100%;
    height: 120px!important;
}
.ec-newsRole__cardImage img {
    width: auto!important;
    height: 100%!important;
}
}

/* スマホ（480px未満） */
@media screen and (max-width: 480px) {
    .invoice-search-inputs {
        flex-direction: column;
    }
    
    .invoice-search-input {
        width: 100%;
    }
    
    .invoice-search-buttons {
        flex-direction: column;
    }
    
    .ec-blockBtn--action,
    .ec-blockBtn--cancel {
        width: 100%;
        padding: 12px;
    }
    
    /* バッジのサイズ調整 */
    .invoice-badge-seikyu,
    .invoice-badge-nouhin,
    .invoice-badge-ryoshu,
    .invoice-badge-other {
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ========================================
   新着情報（News）スタイル
======================================== */

/* タブ */
.ec-newsRole__tabs {
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    clear:both;
}

.ec-newsRole__tabList {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.ec-newsRole__tabItem {
    margin-right: 2px;
    background: #eee;
    width: 120px;
}

.ec-newsRole__tabItem a {
    display: block;
    padding: 12px 0px;
    color: #666;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    text-align:center;
}

.ec-newsRole__tabItem a:hover {
    color: #333;
    background-color: #f8f8f8;
}

.ec-newsRole__tabItem.is-active a {
    color: #333;
    font-weight: bold;
    border-bottom-color: var(--bidoor-blue);
}

.ec-newsRole__tabItem .badge {
    font-size: 0.85em;
    color: #999;
}

/* カード型一覧 */
.ec-newsRole__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.ec-newsRole__card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
    background: #fff;
}

.ec-newsRole__card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.ec-newsRole__cardLink {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ec-newsRole__cardImage {
    width: 100%;
    height: 170px;
    overflow: hidden;
    /*background-color: #f5f5f5;*/
    text-align: center;
}

.ec-newsRole__cardImage img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.ec-newsRole__cardImagePlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #ccc;
}

.ec-newsRole__cardBody {
    padding: 20px;
}

.ec-newsRole__badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.85em;
    font-weight: bold;
    border-radius: 4px;
    color: #fff;
    margin-bottom: 10px;
}

.ec-newsRole__badge--latest { background-color: var(--bidoor-blue); }
.ec-newsRole__badge--new-products { background-color: #28a745; }
.ec-newsRole__badge--publicity { background-color: #9a01f9; }
.ec-newsRole__badge--price-change { background-color: #ffc107; color: #333; }
.ec-newsRole__badge--discontinued { background-color: #dc3545; }
.ec-newsRole__badge--others { background-color: #449ed3; }
.ec-productRole__description{width:75%;text-align: justify;}
.ec-productRole__description h3{color:#005fbd;font-weight: 800;margin:2em auto 10px;}
.ec-productRole__description h4{color:#043566;font-weight: 800;margin:2em auto 10px;}
.ec-productRole__description ul {
    list-style-type: disc;
    margin:2em auto;
}
.ec-productRole__description P{margin:1em 0;}

.ec-newsRole__cardTitle {
    font-size: 1.1em;
    font-weight: bold;
    margin: 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ec-newsRole__cardExcerpt {
    font-size: 0.9em;
    color: #666;
    margin: 10px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.ec-newsRole__cardDate {
    font-size: 0.85em;
    color: #999;
    margin-top: 15px;
}

/* 詳細ページ */
.ec-newsRole__article {
    /*max-width: 800px;*/
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.ec-newsRole__articleHeader {
    margin-bottom: 30px;
}

.ec-newsRole__articleTitle {
    font-size: 2em;
    font-weight: bold;
    margin: 15px 0;
    line-height: 1.4;
}

.ec-newsRole__articleDate {
    color: #999;
    font-size: 0.9em;
}

.ec-newsRole__articleThumbnail {
    margin-bottom: 30px;
}

.ec-newsRole__articleThumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.ec-newsRole__articleContent {
    font-size: 1em;
    line-height: 1.8;
    margin-bottom: 40px;
}

.ec-newsRole__articleContent img {
    max-width: 100%;
    height: auto;
}
.ec-newsRole__articleContent > table {
	width:100%;
}

/* 空の状態 */
.ec-newsRole__empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .ec-newsRole__list {
        grid-template-columns: 1fr;
    }
    
    .ec-newsRole__tabList {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* 検索フォーム */
.ec-newsRole__header {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ec-newsRole__header img{width:100%;}
.ec-newsRole{padding:0;}
.ec-newsRole__searchForm {
    flex-shrink: 0;
    display: block;
    float: right;
    margin: 10px 13px 15px 0;
}

/* リスト（ol）をFlexboxにして横並びにするパンくず */
.ec-newsRole__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;   /* 画面幅が狭いときに折り返す設定 */
  list-style: none;  /* リストの・を消す */
  padding: 0;
  margin: 0;
}

/* 各項目の調整 */
.ec-newsRole__breadcrumb li {
  display: flex;
  align-items: center;
}

/* 項目間の区切り文字（例: > ）を追加 */
.ec-newsRole__breadcrumb li::after {
  content: ">";      /* ここを "/" や "|" に変更可能 */
  margin: 0 10px;    /* 左右の余白 */
  color: #ccc;       /* 区切り文字の色 */
}

/* 最後の項目の区切り文字を消す */
.ec-newsRole__breadcrumb li:last-child::after {
  content: none;
}

.ec-newsRole__searchBox {
    display: flex;
    gap: 10px;
}

.ec-newsRole__searchInput {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    min-width: 250px;
}

.ec-newsRole__searchButton {
    padding: 10px 20px;
    background-color: var(--bidoor-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.ec-newsRole__searchButton:hover {
    background-color: var(--bidoor-blue-dark);
}

.ec-newsRole__searchResult {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.ec-newsRole__searchResultCount {
    margin: 0;
    font-size: 16px;
}
table.bodr{
	margin: 10px 0 5px 0;
    border: 1px solid #666;
}
table.bodr th{background:#eee;}
table.bodr th,table.bodr td{font-size:90%!important;}
table.bodr td strong{white-space:nowrap;}
.ec-newsRole__articleContent p {
    margin: 1.5em 0;
    line-height: 1.9em;
    text-align: justify;
}
.ec-newsRole__articleContent h2 {
    margin: 20px 0;
    line-height: 2em;
}

/* --- ベースレイアウト --- */
.mailmag-section {
    margin-bottom: 30px;
}
.mailmag-section dt {
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: #333;
}

/* --- 共通：カード型UIのリセットと整形 --- */
/* ラジオボタンとチェックボックス共通のカードスタイル */
.mailmag-card-radio,
.mailmag-card-checkbox {
    display: flex; /* 横並びにする */
    align-items: center; /* 垂直方向中央揃え */
    justify-content: flex-start; /* 左寄せ（中央にしたい場合は center） */
    padding: 15px 20px; /* 内側の余白 */
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all 0.2s ease;
    position: relative;
    margin: 0; /* マージンリセット */
    width: 100%; /* 横幅いっぱい使う */
    height: auto; /* 高さは中身に合わせる */
    min-height: 60px; /* 最低限の高さを確保 */
}

/* フォーム部品（.form-check）の干渉を強制リセット */
.mailmag-card-radio .form-check,
.mailmag-card-checkbox .form-check {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 0 !important;
    width: auto !important;
}

/* inputタグ自体の余白調整 */
.mailmag-card-radio input,
.mailmag-card-checkbox input {
    margin: 0 10px 0 0 !important;
    position: static !important;
    cursor: pointer;
}

/* 自動生成される空のラベルを消す（レイアウト崩れ防止） */
.mailmag-card-radio .form-check label,
.mailmag-card-checkbox .form-check label {
    display: none !important;
}

/* テキスト部分のスタイル（改行禁止・見た目調整） */
.mailmag-label-text {
    font-weight: bold;
    color: #555;
    white-space: nowrap; /* ★勝手な改行を禁止 */
    line-height: 1;
}

/* ホバー時の挙動 */
.mailmag-card-radio:hover,
.mailmag-card-checkbox:hover {
    border-color: #adb5bd;
    background-color: #f8f9fa;
}

/* 選択済み（Checked）のスタイル */
.mailmag-card-radio:has(input:checked),
.mailmag-card-checkbox:has(input:checked) {
    border-color: #0d6efd;
    background-color: #f0f7ff;
    color: #0d6efd;
}

/* --- レイアウト構造 --- */

/* ラジオボタン（受信設定）の並び */
.mailmag-radio-group {
    display: flex;
    gap: 20px;
    width: 100%;
}
/* スマホ表示対応：画面が狭いときは縦並びにするなら以下を有効化 */
@media (max-width: 576px) {
    .mailmag-radio-group {
        flex-direction: column;
    }
}

/* チェックボックス（種類）の並び */
.mailmag-type-grid {
    display: grid;
    /* 1列の幅を確保しつつ並べる */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

/* 「すべて選択」エリア */
.mailmag-select-all {
    margin-bottom: 15px;
    padding: 12px 15px;
    background: #e3f2fd;
    border-radius: 6px;
    border: 1px solid #bbdefb;
}
.mailmag-checkbox-simple {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    color: #0d47a1;
    margin: 0;
}
.mailmag-checkbox-simple input {
    margin-right: 8px;
    transform: scale(1.2);
}

/* レスポンシブ */
@media (max-width: 768px) {
    .ec-newsRole__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .ec-productRole__description{width:100%;}
    .ec-newsRole__searchForm {
        width: 100%;
        margin-top: 15px;
    }
    
    .ec-newsRole__searchBox {
        width: 100%;
    }
    
    .ec-newsRole__searchInput {
        flex: 1;
        min-width: auto;
    }
}

/* =============================================================================
   商品詳細 スペックテーブル（description_detail内）
   ============================================================================= */

.ec-productRole__description .item_data01 {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.ec-productRole__description .item_data01 th {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 10px 14px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    width: 120px;
    vertical-align: top;
    color: #333;
}

.ec-productRole__description .item_data01 td {
    border: 1px solid #ddd;
    padding: 10px 14px;
    vertical-align: top;
    word-break: break-word;
}

.ec-productRole__description .item_data01 td img {
    max-width: 200px;
    height: auto;
    margin-top: 5px;
}

.ec-productRole__description .item_data01 td a {
    color: var(--bidoor-blue);
    text-decoration: underline;
}

.ec-productRole__description img{max-width:300px;}

/* レスポンシブ */
@media (max-width: 580px) {
    .ec-productRole__description .item_data01 th {
        width: 90px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .ec-productRole__description .item_data01 td {
        padding: 8px 10px;
        font-size: 13px;
    }

    .ec-productRole__description .item_data01 td img {
        max-width: 150px;
    }
}


/* ========================================
   Phase 2: TOPページ + ヘッダーナビ
   Updated: 2026-03-22 (統合版)
======================================== */

/* --- 15. ヘッダー: メインナビゲーション --- */
.ec-headerRole {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    max-width: 100%;
    flex-wrap: wrap;
}
.ec-headerRole .ec-headerRole__title {
    width: auto;
    flex-shrink: 0;
}
.ec-headerNaviRole {
    max-width: 100%;
}
.bm-mainNav {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 0;
}
.bm-mainNav__link {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: bold;
    color: #fff !important;
    background: var(--bidoor-blue);
    border-radius: 0;
    border-right: 1px solid rgba(255,255,255,0.2);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.bm-mainNav__link:last-child {
    border-right: none;
}
.bm-mainNav__link:hover {
    color: #fff !important;
    background: var(--bidoor-blue-dark);
}
.bm-mainNav__link span {
    display: block;
    font-size: 10px;
    font-weight: normal;
    opacity: 0.75;
    margin-top: 1px;
}

/* --- 16. TOPページ セクション共通 --- */
.bm-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0;
}
.bm-section__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bidoor-blue);
    padding-bottom: 10px;
}
.bm-section__title {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--bidoor-blue-dark);
    margin: 0;
}
.bm-section__more {
    font-size: 14px;
    color: var(--bidoor-blue);
    text-decoration: none;
    white-space: nowrap;
}
.bm-section__more:hover {
    color: var(--bidoor-blue-dark);
}

/* --- 17. ヒーロースライダー --- */
.bm-hero {
    margin-bottom: 0;
}
.bm-hero__slider {
    margin-bottom: 0;
}
.bm-hero__slide img {
    width: 100%;
    height: auto;
    display: block;
}
.bm-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    background: rgba(0, 61, 122, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.bm-hero__arrow:hover {
    background: rgba(0, 61, 122, 0.85);
}
.bm-hero__arrow--prev {
    left: 16px;
}
.bm-hero__arrow--next {
    right: 16px;
}
.bm-hero .slick-dots {
    bottom: 16px;
}
.bm-hero .slick-dots li button:before {
    content: "";
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 1;
}
.bm-hero .slick-dots li.slick-active button:before {
    background: #ffffff;
}

/* --- 18. カテゴリグリッド --- */
.bm-catgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.bm-catgrid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px 12px;
    background: var(--bidoor-bg-light);
    border: 1px solid var(--bidoor-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--bidoor-blue-dark);
    transition: all 0.3s ease;
}
.bm-catgrid__item:hover {
    background: var(--bidoor-blue-light);
    border-color: var(--bidoor-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.15);
    color: var(--bidoor-blue-dark);
}
.bm-catgrid__icon {
    width: 40px;
    height: 40px;
    background: rgba(0, 95, 189, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    font-size: 16px;
    color: var(--bidoor-blue);
    transition: all 0.3s ease;
}
.bm-catgrid__item:hover .bm-catgrid__icon {
    background: var(--bidoor-blue);
    color: white;
}
.bm-catgrid__name {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
}

/* --- 19. ニュースセクション --- */
.ec-bidoorNews {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 0;
}
.ec-bidoorNews__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bidoor-blue);
    padding-bottom: 10px;
}
.ec-bidoorNews__title {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--bidoor-blue-dark);
    margin: 0;
}
.ec-bidoorNews__moreLink {
    font-size: 14px;
    color: var(--bidoor-blue);
    text-decoration: none;
}
.ec-bidoorNews__moreLink:hover {
    color: var(--bidoor-blue-dark);
}

/* --- 20. Quick Links --- */
.bm-quicklinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.bm-quicklinks__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bidoor-bg-light);
    border: 1px solid var(--bidoor-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--bidoor-text);
    transition: all 0.3s ease;
}
.bm-quicklinks__card:hover {
    background: var(--bidoor-blue-light);
    border-color: var(--bidoor-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.12);
    color: var(--bidoor-text);
}
.bm-quicklinks__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: rgba(0, 95, 189, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--bidoor-blue);
    transition: all 0.3s ease;
}
.bm-quicklinks__card:hover .bm-quicklinks__icon {
    background: var(--bidoor-blue);
    color: white;
}
.bm-quicklinks__title {
    font-size: 14px;
    font-weight: bold;
    color: var(--bidoor-blue-dark);
    line-height: 1.4;
}
.bm-quicklinks__desc {
    font-size: 12px;
    color: var(--bidoor-text-light);
    margin-top: 2px;
}

/* --- 21. ブランド / シリーズ（横スクロール） --- */
.bm-brands {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
}
.bm-brands::-webkit-scrollbar {
    height: 6px;
}
.bm-brands::-webkit-scrollbar-thumb {
    background: var(--bidoor-border);
    border-radius: 3px;
}
.bm-brands__item {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bidoor-border);
    transition: all 0.3s ease;
}
.bm-brands__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 95, 189, 0.15);
    border-color: var(--bidoor-blue);
}
.bm-brands__item img {
    width: 280px;
    height: auto;
    display: block;
    object-fit: contain;
}

/* --- 22. TOPページ レイアウト（幅100%・サイドバー非表示） --- */
.front_page .ec-layoutRole__footer {
    margin-top: 50px;
}
.front_page .ec-layoutRole {
    max-width: 100%;
    padding: 0;
}
.front_page .ec-layoutRole .ec-layoutRole__contentTop {
    max-width: 100%;
    padding: 0;
}
body.front_page .ec-layoutRole .ec-layoutRole__contents {
    max-width: 100% !important;
    margin: 0;
    padding: 0;
}
.front_page .ec-layoutRole .ec-layoutRole__mainWithColumn,
.front_page .ec-layoutRole .ec-layoutRole__mainBetweenColumn,
.front_page .ec-layoutRole .ec-layoutRole__main {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.front_page .ec-layoutRole .ec-layoutRole__left,
.front_page .ec-layoutRole .ec-layoutRole__right {
    display: none;
}
.front_page .ec-layoutRole .ec-layoutRole__mainTop,
.front_page .ec-layoutRole .ec-layoutRole__mainBottom {
    max-width: 100%;
    padding: 0;
}
.front_page .ec-sliderRole {
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.front_page .ec-layoutRole .ec-layoutRole__contentBottom {
    max-width: 100%;
    padding: 0;
}
body.front_page .ec-headerRole {
    max-width: 100%;
}
body.front_page .ec-headerNaviRole {
    max-width: 100%;
}
body.front_page .bm-section {
    max-width: 100%;
}
body.front_page .ec-bidoorNews {
    max-width: 100%;
}

/* --- 23. レスポンシブ: タブレット --- */
@media (max-width: 992px) {
    .bm-catgrid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    .bm-quicklinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- 24. レスポンシブ: スマホ --- */
@media (max-width: 768px) {
    .bm-mainNav {
        display: none;
    }
    .ec-headerRole {
        padding: 8px 15px;
    }
    .bm-section {
        padding: 30px 15px 0;
    }
    .bm-section__title {
        font-size: 1.1em;
    }
    .bm-catgrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .bm-catgrid__item {
        padding: 12px 6px 10px;
    }
    .bm-catgrid__icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .bm-catgrid__name {
        font-size: 11px;
    }
    .bm-quicklinks {
        grid-template-columns: 1fr;
    }
    .ec-bidoorNews {
        padding: 30px 15px 0;
    }
}

/* --- 商品詳細: メイン画像を大きく --- */
.ec-sliderItemRole {
    max-width: 100%;
}
.ec-productRole img {
    width: auto;
    max-height: 450px;
    margin: auto;
}
.ec-sliderItemRole .slideThumb img {
    width: 80%;
    /* height: auto; */
    -o-object-fit: cover;
    object-fit: cover;
    max-height: 140px;
}
@media only screen and (min-width: 768px) {
    .ec-productRole .ec-productRole__img {
        width: 55%;
        margin-right: 16px;
    }
    .ec-productRole .ec-productRole__profile {
        /*width: 40%;*/
        margin-left: 16px;
    }
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-grid2 .ec-grid2__cell:first-child {
        width: 60%;
    }
    .ec-productRole .ec-grid2 .ec-grid2__cell:last-child {
        width: 40%;
    }
}

@media only screen and (min-width: 768px) {
    .ec-productRole .ec-grid2 .ec-grid2__cell:first-child {
        width: 50%;
    }
    .ec-productRole .ec-grid2 .ec-grid2__cell:last-child {
        width: 50%;
    }
}


/* --- 商品詳細: メイン画像エリア拡大 --- */
.ec-productRole {
    max-width: 100%;
}
.ec-sliderItemRole {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   下層ページ共通スタイル（カスタマーサービス・カタログ・企業情報）
   ============================================================ */

.ec-pageTitle {
    border-top: 4px solid #005FBD;
    /*border-bottom: 1px solid #e0e0e0;*/
    padding: 16px 20px;
    text-align: center;
    margin-bottom: 10px;
    background: url(../img/tit_bg.gif) 0 0 no-repeat;
    background-size: 100% 94px;
    
}
.ec-pageTitle__text {
    font-size: 26px;
    font-weight: 800;
    color: #005FBD;
    margin: 0;
    letter-spacing: 0.05em;
}
.ec-pageTitle__sub {
    display: none;
    font-size: 13px;
    color: #888;
    margin-top: 8px;
    letter-spacing: 0.15em;
}
/* --- ニュース詳細専用：長いタイトル対応 --- */
.ec-pageTitle--news {
    /*background-size: 100% 100%;
    padding: 28px 20px;
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;*/
}
.ec-pageTitle--news .ec-pageTitle__text {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    max-width: 900px;
}
.ec-newsRole__breadcrumb{margin-left:1em;}
.ec-newsRole__breadcrumb li:last-child [itemprop="name"] {
    font-weight: bold;
    color: #333;
}
@media (max-width: 767px) {
    .ec-pageTitle--news {
        padding: 20px 16px;
    }
    .ec-pageTitle--news .ec-pageTitle__text {
        font-size: 16px;
        line-height: 1.5;
    }
}
.ec-pageHeaderImage {
    /*max-width: 1100px;*/
    margin: 0 auto 40px;
    padding: 0 20px;
    text-align:center;
}
.ec-pageHeaderImage__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.ec-pageTabs {
    /*max-width: 1100px;*/
    margin: 0 auto 40px;
    padding: 0 20px;
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
}
.ec-pageTabs__item {
    padding: 12px 24px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
}
.ec-pageTabs__item:hover {
    color: #005FBD;
    text-decoration: none;
}
.ec-pageTabs__item.is-active {
    color: #005FBD;
    border-bottom-color: #005FBD;
    font-weight: 500;
}
.ec-contentBlock {
    /*max-width: 1100px;*/
    margin: 0 auto;
    padding: 0 20px 60px;
}

.ec-contentBlock table{margin: 0 auto;width: 80%;}
.ec-contentBlock table td,.ec-contentBlock table th{padding: 20px;border:1px solid #ccc;}

.ec-leadBlock {
    text-align: center;
    margin-bottom: 50px;
    padding: 32px 24px;
    background: #f8f9fa;
    border-radius: 8px;
}
.ec-leadBlock__lead {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin: 0;
}
.ec-section {
    margin-bottom: 50px;
}
.ec-section table{width:50%;}
.ec-section table td,.ec-section table th,.ec-section table tr{border:none;padding:0;}
.ec-section__title {
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 20px;
    padding-left: 14px;
    border-left: 4px solid #005FBD;
    border-right: 4px solid #005FBD;
    
    background: url(../img/tit_bg2.gif) 0 0 repeat;
    width: 100%;
    height: auto;
    font-size: 16px;
    font-weight: bold;
    color: #005fbd;
    text-align: center;
    height: 36px;
    line-height: 2em;
    text-shadow: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff;
}
.ec-section__body {
    font-size: 15px;
    line-height: 1.85;
    color: #333;
}
.ec-section__body p {
    margin: 0 20px 14px;
}
.ec-section__body p:last-child {
    margin-bottom: 0;
}
.ec-section__image {
    margin-bottom: 24px;
    text-align: center;
}
.ec-section__image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ec-bulletList {
    list-style: none;
    padding: 0;
    margin: 20px;
}
.ec-bulletList li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.ec-bulletList li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #005FBD;
}
.ec-noteList {
    list-style: none;
    padding: 0;
    margin: 20px;
}
.ec-noteList li {
    padding-left: 22px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.7;
    color: #888;
    text-indent: -22px;
}
.ec-defTable {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}
.ec-defTable tr {
    border-bottom: 1px solid #e8e8e8;
}
.ec-defTable tr:last-child {
    border-bottom: none;
}
.ec-defTable th {
    width: 220px;
    padding: 16px 20px;
    background: #f8f9fa;
    color: #005FBD;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid #e8e8e8;
}
.ec-defTable td {
    padding: 16px 20px;
    color: #333;
    line-height: 1.7;
    vertical-align: top;
}
@media (max-width: 767px) {
    .ec-defTable th,
    .ec-defTable td {
        display: block;
        width: 100%;
        border-right: none;
    }
    .ec-defTable th {
        padding-bottom: 8px;
    }
    .ec-defTable td {
        padding-top: 8px;
    }
}
.ec-flowStep {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
    width: 85%;
    margin: auto;
}
.ec-flowStep__item {
    counter-increment: step;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #e8e8e8;
    
    background: url(../img/bg_arrow01.gif) center bottom no-repeat;
    padding-bottom: 35px;
    margin-bottom: 15px;
    
}
.ec-flowStep__item:last-child {
    border-bottom: none;
}
.ec-flowStep__item::before {
    content: counter(step, decimal-leading-zero);
    grid-column: 1;
    font-size: 24px;
    font-weight: 500;
    color: #005FBD;
    line-height: 1;
}
.ec-flowStep__content {
    grid-column: 2;
}
.ec-flowStep__title {
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    margin: 0 0 8px;
}
.ec-flowStep__desc {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}
.ec-contactBlock {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 40px;
}
.ec-contactBlock__lead {
    font-size: 15px;
    color: #555;
    margin: 0 0 20px;
}
.ec-contactBlock__btn {
    display: inline-block;
    padding: 14px 48px;
    background: #005FBD;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.2s;
}
.ec-contactBlock__btn:hover {
    background: #004a96;
    color: #fff;
    text-decoration: none;
}
.ec-cardGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 24px 0;
}
@media (min-width: 768px) {
    .ec-cardGrid--3col {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ec-cardGrid--2col {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* カタログカード */
.ec-catalogCard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
@media (min-width: 768px) {
    .ec-catalogCard {
        grid-template-columns: 280px 1fr;
        gap: 32px;
        padding: 32px;
    }
}
.ec-catalogCard__image { text-align: center; }
.ec-catalogCard__image img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); }
.ec-catalogCard__body p { font-size: 14px; line-height: 1.8; color: #333; margin: 0 0 14px; }
.ec-catalogCard__meta { display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px; margin: 16px 0 20px; padding: 12px 16px; background: #f8f9fa; border-radius: 4px; font-size: 13px; }
.ec-catalogCard__meta dt { color: #888; font-weight: normal; }
.ec-catalogCard__meta dd { margin: 0; color: #333; }
.ec-catalogCard__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ec-catalogCard__btn { display: inline-block; padding: 10px 24px; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.ec-catalogCard__btn--primary { background: #005FBD; color: #fff; }
.ec-catalogCard__btn--primary:hover { background: #004a96; color: #fff; text-decoration: none; }
.ec-catalogCard__btn--secondary { background: #fff; color: #005FBD; border: 1px solid #005FBD; }
.ec-catalogCard__btn--secondary:hover { background: #f0f7ff; color: #005FBD; text-decoration: none; }

/* カスタマーサービストップ */
.ec-customerService { /*max-width: 1100px;*/ margin: 0 auto; padding: 20px 0 60px; }
.ec-customerService__intro { text-align: center; margin-bottom: 50px; padding: 0 20px; }
.ec-customerService__intro p { font-size: 16px; line-height: 1.8; color: #333; margin: 0; }
.ec-customerService__cards { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 0 20px; margin-bottom: 60px; }
@media (min-width: 768px) { .ec-customerService__cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ec-customerCard { display: flex; flex-direction: column; padding: 32px 28px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; text-decoration: none; color: #333; transition: all 0.25s ease; position: relative; overflow: hidden; }
.ec-customerCard:hover { border-color: #005FBD; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 95, 189, 0.12); text-decoration: none; color: #333; }
.ec-customerCard::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: #005FBD; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.ec-customerCard:hover::before { transform: scaleX(1); }
.ec-customerCard__badge { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: #005FBD; background: #E6F1FB; padding: 4px 10px; border-radius: 3px; margin-bottom: 16px; }
.ec-customerCard__title { font-size: 22px; font-weight: 500; margin: 0 0 16px; color: #1a1a1a; }
.ec-customerCard__desc { font-size: 14px; line-height: 1.7; color: #555; margin: 0 0 24px; flex: 1; }
.ec-customerCard__more { font-size: 13px; color: #005FBD; font-weight: 500; }
.ec-customerService__contact { text-align: center; padding: 50px 20px; background: #f8f9fa; border-radius: 8px; }
.ec-customerService__contactLead { font-size: 15px; color: #555; margin: 0 0 24px; }
.ec-customerService__contactBtn { display: inline-block; padding: 14px 48px; background: #005FBD; color: #fff; text-decoration: none; border-radius: 4px; font-size: 15px; font-weight: 500; transition: background 0.2s; }
.ec-customerService__contactBtn:hover { background: #004a96; color: #fff; text-decoration: none; }

/* 企業情報 */
.ec-philoTitle { font-size: 16px; font-weight: 500; color: #005FBD; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px dotted #ccc; }
.ec-philoTitle:first-of-type { margin-top: 0; }
.ec-philoSign { margin-top: 32px; padding: 24px; background: #f8f9fa; border-radius: 8px; text-align: center; }
.ec-philoSign img { max-width: 200px; height: auto; margin-bottom: 12px; }
.ec-philoSign p { font-size: 14px; color: #555; margin: 0; line-height: 1.7; }

/* details/summary 展開ブロック */
.ec-detailsBlock {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafbfc;
}
.ec-detailsBlock[open] {
    background: #fff;
}
.ec-detailsBlock__summary {
    padding: 14px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #005FBD;
    list-style: none;
    position: relative;
    user-select: none;
    transition: background 0.2s;
}
.ec-detailsBlock__summary::-webkit-details-marker {
    display: none;
}
.ec-detailsBlock__summary::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #005FBD;
    border-bottom: 2px solid #005FBD;
    transform: rotate(45deg);
    margin-right: 12px;
    transition: transform 0.2s;
    vertical-align: middle;
}
.ec-detailsBlock[open] > .ec-detailsBlock__summary::before {
    transform: rotate(-135deg);
}
.ec-detailsBlock__summary:hover {
    background: #f0f7ff;
}
.ec-detailsBlock__body {
    padding: 16px 20px 20px;
    border-top: 1px solid #e8e8e8;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}
.ec-detailsBlock__body p {
    margin: 0 0 12px;
}
.ec-detailsBlock__heading {
    font-size: 15px;
    font-weight: 500;
    color: #005FBD;
    margin: 20px 0 10px;
    padding-left: 10px;
    border-left: 3px solid #005FBD;
}
.ec-detailsBlock__heading:first-child {
    margin-top: 0;
}

/* ========================================
   27. ページ系統別サイドナビ
======================================== */
.ec-sideNav {
    border: 1px solid var(--bidoor-border);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    margin: 0 0 24px 31px;
    width: 266px;
}
.ec-sideNav__heading {
    margin: 0;
    padding: 12px 14px;
    background: var(--bidoor-blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.ec-sideNav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ec-sideNav__item {
    border-bottom: 1px dotted var(--bidoor-border);
}
.ec-sideNav__item:last-child {
    border-bottom: none;
}
.ec-sideNav__item a {
    display: block;
    padding: 10px 14px 10px 24px;
    color: var(--bidoor-text);
    text-decoration: none;
    font-size: 0.92rem;
    position: relative;
    transition: background 0.2s, color 0.2s;
}
.ec-sideNav__item a:before {
    content: "▸";
    position: absolute;
    left: 10px;
    color: var(--bidoor-blue);
    font-size: 0.85rem;
}
.ec-sideNav__item a:hover {
    background: var(--bidoor-bg-light);
    color: var(--bidoor-blue);
    text-decoration: none;
}
.ec-sideNav__item.is-active a {
    background: var(--bidoor-bg-light);
    color: var(--bidoor-blue);
    font-weight: 600;
}
.ec-sideNav__item.is-active a:before {
    content: "●";
    font-size: 0.7rem;
}

/* サイドバナーボックス幅統一 */
ul.bnrBox {
    width: 297px;
    font-size: 86%;
}
ul.bnrBox img {
    width: 100%;
    height: auto;
}

/* ========================================
   スムーススクロール（アンカーリンク用）
======================================== */
html {
    scroll-behavior: smooth;
}

/* ========================================
   26. 社史ん集 NAGANO Inc ページ
======================================== */

/* --- セクション区切り点線 --- */
.ec-naganoDivider {
    border: none;
    border-top: 1px dashed var(--bidoor-border);
    margin: 48px 0;
}

/* --- ギャラリー（メイン+サムネ切替） --- */
.ec-naganoGallery {
    margin: 24px 0;
}
.ec-naganoGallery__main {
    width: 100%;
    /*max-width: 900px;*/
    margin: 0 auto 16px;
    background: #ffffff;
    border: 1px solid var(--bidoor-border-light);
    border-radius: 4px;
    overflow: hidden;
    /*aspect-ratio: 16 / 9;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.ec-naganoGallery__main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ec-naganoGallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}
.ec-naganoGallery__thumb {
    width: 100%;
    height: auto;
    display: block;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}
.ec-naganoGallery__thumb:hover,
.ec-naganoGallery__thumb.is-active {
    border-color: var(--bidoor-blue);
    opacity: 1;
}

/* --- 仕様テーブル --- */
.ec-naganoSpec {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: transparent;
}
.ec-naganoSpec th,
.ec-naganoSpec td {
    padding: 10px 14px;
    border: none;
    border-bottom: 1px dotted var(--bidoor-border);
    font-size: 0.95rem;
    vertical-align: top;
    background: transparent;
    text-align: left;
}
.ec-naganoSpec th {
    color: var(--bidoor-text-light);
    white-space: nowrap;
    width: 12%;
    font-weight: 500;
}
.ec-naganoSpec td:nth-child(2),
.ec-naganoSpec td:nth-child(5) {
    width: 2%;
    color: var(--bidoor-text-light);
    padding: 10px 4px;
}

/* --- 購入ボタン --- */
.ec-naganoPurchase {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 32px 0;
    flex-wrap: wrap;
}
.ec-naganoPurchase .ec-blockBtn--action {
    min-width: 400px;
    background: var(--bidoor-blue);
    color: #fff;
    border: none;
    /*padding: 30px;*/
    text-align: center;
    font-weight: 600;
    border-radius: 4px;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
}
.ec-naganoPurchase .ec-blockBtn--action:hover {
    background: var(--bidoor-blue-hover);
    color: #fff;
    text-decoration: none;
}

/* ec-blockBtn--action 重複定義削除済み */

/* --- 撮影者紹介 --- */
.ec-naganoPhotographers {
    margin-top: 48px;
}
.ec-naganoPhotographer {
    display: block;
    gap: 32px;
    margin: 40px 0;
    align-items: flex-start;
    width: 80%;
    margin: 40px auto;
}
.ec-naganoPhotographer:nth-child(even) {
    flex-direction: row-reverse;
}
.ec-naganoPhotographer__photo {
    width: 280px;
    height: auto;
    flex-shrink: 0;
    border-radius: 4px;
}

.ec-naganoPhotographer .rightboxs {
    height: 280px;
    overflow: hidden;
    width: 30%;
}
.ec-naganoPhotographer .rightboxs img {
    -webkit-transform: scale(2);
    transform: scale(2);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 220px;
    top: 10px;
    left: 90px;
    position: relative;
}
.ec-naganoPhotographer__body {
    flex: 1;
    min-width: 0;
    width: 60%;
    float: left;
    margin-right: 20px;
}
.ec-naganoPhotographer__name {
    margin: 0 0 6px;
    font-size: 1.3rem;
    color: var(--bidoor-text);
    border-bottom: none;
    padding-bottom: 0;
}
.ec-naganoPhotographer__role {
    margin: 0 0 14px;
    font-size: 0.9rem;
    color: var(--bidoor-text-light);
}
.ec-naganoPhotographer__body p:last-child {
    line-height: 1.85;
    font-size: 0.95rem;
}

/* --- 企業実務 掲載 --- */
.ec-naganoPress {
    margin-top: 48px;
}
.ec-naganoPress__head {
    /*display: flex;*/
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 24px;
}
.ec-naganoPress__title {
    font-size: 2.4rem;
    color: var(--bidoor-blue);
    font-weight: 700;
    margin: 0;
    border-bottom: 2px solid var(--bidoor-blue);
    padding-bottom: 4px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ec-naganoPress__cover {
    width: 180px;
    height: auto;
    margin-left: auto;
    border: 1px solid var(--bidoor-border-light);
    float: right;
}
.ec-naganoPress__body p {
    line-height: 1.85;
    margin: 0 0 20px;
}
.ec-naganoPress__links {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.ec-naganoPress__links li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
}
.ec-naganoPress__links li > img {
    width: 16px;
    height: auto;
    margin-top: 6px;
    flex-shrink: 0;
}
.ec-naganoPress__links li > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ec-naganoPress__links a {
    font-weight: 700;
    color: var(--bidoor-blue);
    font-size: 1rem;
    text-decoration: underline;
}
.ec-naganoPress__links span {
    color: var(--bidoor-text-light);
    font-size: 0.88rem;
    line-height: 1.7;
    padding-left: 20px;
}
.ec-naganoPress__photos {
    /*display: grid;*/
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 24px 0 8px;
    /*max-width: 720px;*/
}
.ec-naganoPress__photos img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}
.ec-naganoPress__photos img:first-child {
    grid-column: 1 / -1;
    max-width: 100%;
}
.ec-naganoPress__credit {
    text-align: right;
    font-size: 0.85rem;
    color: var(--bidoor-text-light);
    margin: 4px 0 0;
    /*max-width: 720px;*/
}


.ec-naganoGallery__main img{width:100%;}
.ec-naganoGallery__thumbs{margin:auto;}

.ec-naganoPress__photos img{width: 48%;
    display: inline-block;}

/* --- ワトモスデジオ ラジオ --- */
.ec-naganoRadio {
    margin-top: 48px;
}
.ec-naganoRadio__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ec-naganoRadio__logo {
    height: 48px;
    width: auto;
}
.ec-naganoRadio__subtitle {
    color: var(--bidoor-text);
    font-size: 1.05rem;
}
.ec-naganoRadio__lead {
    margin: 0 0 20px;
    line-height: 1.85;
}
.ec-naganoRadio__freemark {
    color: var(--bidoor-blue);
    font-weight: 700;
    margin-left: 6px;
}
.ec-naganoRadio__content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    margin: 24px 0 32px;
    width:80%;
}
.ec-naganoRadio__episodes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ec-naganoRadio__episode {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    background: #eef6fd;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 0.95rem;
}
.ec-naganoRadio__episodeTitle {
    font-weight: 600;
    color: var(--bidoor-text);
}
.ec-naganoRadio__playBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bidoor-blue);
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    padding-left: 2px;
}
.ec-naganoRadio__episodeDate {
    color: var(--bidoor-text-light);
    font-size: 0.85rem;
    white-space: nowrap;
}
.ec-naganoRadio__hosts {
    display: flex;
    gap: 20px;
    flex-shrink: 0;
    width: 425px;
}
.ec-naganoRadio__host {
    margin: 0;
    text-align: center;
}
.ec-naganoRadio__host img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}
.ec-naganoRadio__host figcaption {
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}
.ec-naganoRadio__hostRole {
    color: var(--bidoor-text-light);
    font-size: 0.78rem;
}
.ec-naganoRadio__hostName {
    color: var(--bidoor-text);
    font-weight: 600;
}

.sound {
    display: inline-block;
    min-width: 240px;
    width: 75%;
    float: left;
}

.sound {
    background: #d1e8ff;
    border-radius: 6px;
    color: #005fbd;
    border: 1px solid #005fbd;
    clear: both;
    margin: 23px 0 0;
    padding: 5px;
    text-align: left;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
h4.inc {
    color: #005fbd;
    float: left;
    font-size: 120%;
    margin-right: 5px;
    font-weight: bold;
    padding-bottom: 0px;
    padding-left: 5px;
    letter-spacing: -0.03em;
    width: 97%;
}
.audiojs {
    width: 62px;
    height: 28px;
    background: none;
    overflow: hidden;
    font-family: monospace;
    font-size: 12px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.audiojs .play-pause {
    background: #005fbd;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden;
    border: 1px solid #005fbd;
    border-radius: 14px;
}
.audiojs p{height:25px!important;}
.audiojs .play {
    background: url(../img/icon/play-btn1.png) center center no-repeat;
    margin-left: 1.45px;
}
.audiojs .pause {
    background: url(../img/icon/pause-btn1.png) center center no-repeat;
}
.audiojs .loading {
    background: url(/user_data/packages/default/js/player-graphics.gif) -2px -31px no-repeat;
}
.audiojs .error {
    background: url(/user_data/packages/default/js/player-graphics.gif) -2px -61px no-repeat;
}
.audiojs .scrubber {
    position: relative;
    float: left;
    width: 23px;
    background: #005fbd;
    height: 4px;
    margin: 12px 0 0 0px;
    border-top: 0;
    border-left: 0px;
    border-bottom: 0px;
    overflow: hidden;
}



.inc_date {
    display: inline-block;
    float: left;
    margin-left: 5px;
    margin-top: 35px;
}

/* --- 対談 --- */
.ec-naganoDialogue dl {
    background: #fafafa;
    border-left: 4px solid var(--bidoor-blue);
    padding: 24px 28px;
    margin: 24px 0 0;
    border-radius: 0 4px 4px 0;
}
.ec-naganoDialogue dt {
    font-weight: 700;
    color: var(--bidoor-blue);
    margin-top: 14px;
    font-size: 1rem;
}
.ec-naganoDialogue dt:first-child {
    margin-top: 0;
}
.ec-naganoDialogue dd {
    margin: 4px 0 0 0;
    line-height: 1.85;
    font-size: 0.95rem;
}

/* --- レスポンシブ: タブレット以下 --- */
@media only screen and (max-width: 991px) {
    .ec-naganoRadio__content {
        grid-template-columns: 1fr;
    }
    .ec-naganoRadio__hosts {
        justify-content: center;
    }
    .ec-naganoPress__head {
        gap: 16px;
    }
    .ec-naganoPress__cover {
        width: 140px;
    }
    .ec-naganoPhotographer__photo {
        width: 220px;
    }
}

/* --- レスポンシブ: スマホ --- */
@media only screen and (max-width: 767px) {
    .ec-naganoGallery__main {
        aspect-ratio: 4 / 3;
    }
    .ec-naganoGallery__thumbs {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .ec-naganoSpec {
        display: block;
    }
    .ec-naganoSpec tbody,
    .ec-naganoSpec tr {
        display: block;
    }
    .ec-naganoSpec th,
    .ec-naganoSpec td {
        display: block;
        width: 100% !important;
        padding: 4px 0;
        border: none;
    }
    .ec-naganoSpec td:nth-child(2),
    .ec-naganoSpec td:nth-child(5) {
        display: none;
    }
    .ec-naganoSpec tr {
        padding: 10px 0;
        border-bottom: 1px dotted var(--bidoor-border);
    }

    .ec-naganoPhotographer,
    .ec-naganoPhotographer:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: left;
        gap: 16px;
    }
    .ec-naganoPhotographer__photo {
        width: 200px;
    }

    .ec-naganoPress__head {
        flex-direction: column;
        align-items: flex-start;
    }
    .ec-naganoPress__title {
        font-size: 1.8rem;
    }
    .ec-naganoPress__cover {
        width: 120px;
        margin: 0 auto;
    }
    .ec-naganoPress__links li > div {
        flex: 1 1 100%;
    }
    .ec-naganoPress__links span {
        padding-left: 0;
    }
    .ec-naganoPress__photos {
        grid-template-columns: 1fr;
    }
    .ec-naganoPress__photos img:first-child {
        grid-column: auto;
    }

    .ec-naganoRadio__episode {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .ec-naganoRadio__episodeDate {
        grid-column: 1 / -1;
        text-align: right;
    }
    .ec-naganoRadio__hosts {
        gap: 12px;
    }
    .ec-naganoRadio__host {
        width: 90px;
    }
    .ec-naganoPurchase .ec-blockBtn--action {
        min-width: 100%;
    }
}

/* ============================================================
   25. スマホドロワー: メインメニュー5項目
   ============================================================ */
.bm-spMainMenu {
    background: #fff;
    border-bottom: 1px solid var(--bidoor-border-light);
}
.bm-spMainMenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bm-spMainMenu__list li {
    border-bottom: 1px solid var(--bidoor-border-light);
}
.bm-spMainMenu__list li:last-child {
    border-bottom: none;
}
.bm-spMainMenu__list a {
    display: block;
    padding: 14px 20px 14px 17px;
    color: var(--bidoor-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-left: 3px solid var(--bidoor-blue);
    transition: all 0.2s ease;
}
.bm-spMainMenu__list a:hover,
.bm-spMainMenu__list a:active {
    background: var(--bidoor-bg-light);
    color: var(--bidoor-blue);
}
/* =============================================================================
   ビドーアカウント案内バナー（ニュース一覧ページ）
   ============================================================================= */
.bm-accountBanner {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fb 100%);
    border: 1px solid #c2d8f5;
    border-left: 5px solid var(--bidoor-blue);
    border-radius: 8px;
    padding: 28px 32px;
    margin: 0 0 28px 0;
}
.bm-accountBanner__title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bidoor-blue);
    margin: 0 0 14px 0;
    line-height: 1.4;
}
.bm-accountBanner__text {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.8;
    margin: 0 0 20px 0;
}
.bm-accountBanner__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.bm-accountBanner__btn {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}
.bm-accountBanner__btn--primary {
    background: var(--bidoor-blue);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 95, 189, 0.25);
}
.bm-accountBanner__btn--primary:hover {
    background: var(--bidoor-blue-hover);
    transform: translateY(-1px);
    color: #fff;
}
.bm-accountBanner__btn--secondary {
    background: #fff;
    color: var(--bidoor-blue);
    border: 2px solid var(--bidoor-blue);
}
.bm-accountBanner__btn--secondary:hover {
    background: var(--bidoor-blue);
    color: #fff;
}
@media (max-width: 768px) {
    .bm-accountBanner {
        padding: 20px 18px;
    }
    .bm-accountBanner__title {
        font-size: 1.05rem;
    }
    .bm-accountBanner__actions {
        flex-direction: column;
    }
    .bm-accountBanner__btn {
        text-align: center;
    }
}

/* =============================================================================
   ニュース検索バナー（ニュース一覧ページ）
   ============================================================================= */
.bm-searchBanner {
    background: var(--bidoor-blue);
    border-radius: 8px;
    padding: 24px 28px;
    margin: 0 0 24px 0;
}
.bm-searchBanner__inner {
    max-width: 700px;
    margin: 0 auto;
}
.bm-searchBanner__label {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: 0.05em;
}
.bm-searchBanner__form {
    display: flex;
    gap: 0;
}
.bm-searchBanner__input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 6px 0 0 6px;
    font-size: 0.95rem;
    outline: none;
    color: #333;
}
.bm-searchBanner__input::placeholder {
    color: #aaa;
}
.bm-searchBanner__btn {
    background: #fff;
    color: var(--bidoor-blue);
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.bm-searchBanner__btn:hover {
    background: #e8f0fb;
}
@media (max-width: 768px) {
    .bm-searchBanner {
        padding: 18px 16px;
    }
    .bm-searchBanner__form {
        flex-direction: column;
        gap: 8px;
    }
    .bm-searchBanner__input {
        border-radius: 6px;
    }
    .bm-searchBanner__btn {
        border-radius: 6px;
        text-align: center;
    }
}