@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* サプライDB スタイル */

  .supply-db-desc {
    color: #666;
    margin-bottom: 1.5em;
  }

  .supply-filter-form {
    margin-bottom: 2em;
  }
  .supply-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }
  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .filter-group label {
    font-size: 12px;
    font-weight: bold;
    color: #555;
  }
  .filter-group select {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    min-width: 160px;
  }
  .filter-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .filter-btn:hover {
    background: #1d4ed8;
  }
  .filter-reset {
    font-size: 13px;
    color: #666;
    margin-left: 8px;
  }

  .supply-count {
    color: #555;
    margin-bottom: 0.5em;
    font-size: 14px;
  }

  .supply-table-wrap {
    overflow-x: auto;
  }
  .supply-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .supply-table thead {
    background: #f1f5f9;
  }
  .supply-table th {
    padding: 12px 14px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    font-size: 13px;
    color: #475569;
  }
  .supply-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    line-height: 1.5;
  }
  .supply-table .col-maker,
  .supply-table .col-type,
  .supply-table .col-status {
    white-space: nowrap;
  }
  .supply-table tbody tr:hover {
    background: #f8fafc;
  }
  .supply-table .col-name a {
    color: #1e40af;
    text-decoration: none;
    font-weight: 500;
  }
  .supply-table .col-name a:hover {
    text-decoration: underline;
  }
  .supply-table .col-work a {
    color: #059669;
    text-decoration: none;
    white-space: nowrap;
  }
  .supply-table .col-link a {
    display: inline-block;
    background: #f59e0b;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    margin-right: 4px;
    white-space: nowrap;
  }
  .supply-table .col-link a:hover {
    background: #d97706;
  }

  .avail-on_sale { color: #059669; font-weight: bold; }
  .avail-preorder { color: #2563eb; font-weight: bold; }
  .avail-secondary { color: #d97706; }
  .avail-ended { color: #9ca3af; }

  .pagination {
    margin-top: 2em;
    text-align: center;
  }

  @media (max-width: 768px) {
    .supply-filters {
      flex-direction: column;
    }
    .filter-group select {
      min-width: 100%;
    }
    .supply-table {
      font-size: 12px;
    }
    .supply-table th,
    .supply-table td {
      padding: 8px 6px;
    }
    .col-type, .col-status {
      display: none;
    }
  }

  .supply-detail-spec {
    margin: 1.5em 0;
  }
  .supply-detail-spec table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
  }
  .supply-detail-spec th {
    background: #f1f5f9;
    padding: 8px 12px;
    text-align: left;
    width: 140px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
  }
  .supply-detail-spec td {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
  }
  .supply-buy-links {
    margin: 1.5em 0;
  }
  .supply-buy-links a {
    display: inline-block;
    background: #f59e0b;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    font-weight: bold;
  }
  .supply-buy-links a:hover {
    background: #d97706;
  }