@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
*/

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

/* -------------------------
   Front page - 検索フォーム
   ------------------------- */

/* 検索フォーム全体をカード風に */
#search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(23, 43, 77, 0.08);
  border: 1px solid rgba(20,30,60,0.06);
  max-width: 1100px;
  margin: 0 auto 18px;
}

/* 現在地ボタンを強調（モダンな大きめボタン） */
#search-form #geo-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 170px;
  height: 56px;
  padding: 0 18px;
  background: linear-gradient(90deg, #0066ff 0%, #00a3ff 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 6px 14px rgba(0,101,255,0.18);
}

/* アイコン風の装飾（絵文字を利用） */
#search-form #geo-search::before{
  content: "📍";
  font-size: 1.08rem;
}

/* ボタンホバー/アクティブ */
#search-form #geo-search:hover { transform: translateY(-2px); opacity: 0.98; }
#search-form #geo-search:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(0,101,255,0.14); }

/* テキスト入力とセレクトの共通スタイル */
#search-form input[type="text"],
#search-form select,
#search-form .category-filters {
  height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(20,30,60,0.08);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: 0.98rem;
  color: #172033;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

/* テキスト入力は柔軟に幅を取る */
#search-form input[type="text"] {
  min-width: 220px;
  flex: 1 1 320px;
}

/* カテゴリフィルタは複数選択用に横並び */
.category-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  height: auto;
  min-width: 220px;
}

/* fieldset legend の見た目調整 */
.category-filters legend {
  font-weight: 600;
  margin-right: 6px;
  font-size: 0.95rem;
}

/* チェックボックス/ラベル周りの見た目（JSで動的に生成される想定） */
.category-filters .cat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(6, 102, 255, 0.06);
  border: 1px solid rgba(6,102,255,0.08);
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
}
.category-filters input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0066ff;
}

/* 表示件数のセレクトはコンパクトに */
#search-form select#result-count {
  min-width: 84px;
  width: auto;
  padding-right: 28px;
  text-align: center;
}

/* 検索ボタン */
#search-form #station-search {
  min-width: 120px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(90deg,#222a69 0%,#464bf5 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(34,40,105,0.12);
}
#search-form #station-search:hover { transform: translateY(-2px); opacity: 0.98; }
#search-form #station-search:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(34,40,105,0.10); }

/* ラベルの最小スタイル（フォームの可読性向上） */
#search-form label {
  font-size: 0.9rem;
  color: #4b5563;
  margin-right: 6px;
}

/* フォーカス時の視覚フィードバック */
#search-form input[type="text"]:focus,
#search-form select:focus,
#search-form .category-filters:focus {
  border-color: rgba(6,102,255,0.9);
  box-shadow: 0 6px 18px rgba(6,102,255,0.06);
  transform: translateY(-1px);
}

/* 小さいスクリーンでは縦並びにして操作しやすくする */
@media screen and (max-width: 834px){
  #search-form {
    padding: 12px;
    gap: 10px;
    align-items: stretch;
  }
  #search-form #geo-search{
    min-width: 0;
    width: 100% !important;
    height: 56px !important;
    border-radius: 10px;
  }
  #search-form input[type="text"],
  #search-form select#result-count,
  #search-form #station-search,
  .category-filters {
    width: 100%;
    min-width: 0;
  }
  .category-filters {
    padding: 10px;
    justify-content: flex-start;
  }
}

/* さらに狭い画面向けの微調整 */
@media screen and (max-width: 480px){
  #search-form {
    padding: 10px;
    gap: 8px;
  }
  #search-form #geo-search { height: 52px; font-size: 0.98rem; }
  #search-form #station-search { height: 48px; }
  .category-filters .cat-item { padding: 6px 8px; font-size: 0.85rem; }

  /* 検索結果リストを横スクロール可能にする（スマホ向け） */
  #results-container {
    padding: 0 12px;
  }
  #list-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 12px;
  }

  /* テーブルに最小幅を与えて横スクロールを発生させる */
  #netcafe-list {
    min-width: 720px;
    width: 100%;
    border-collapse: collapse;
    background: transparent;
  }
  #netcafe-list thead {
    background: linear-gradient(90deg, rgba(6,102,255,0.06), rgba(70,75,245,0.03));
  }
  #netcafe-list th, #netcafe-list td {
    padding: 10px 12px;
    white-space: nowrap;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 0.92rem;
  }

  /* スクロールバーの見た目改善（WebKit） */
  #list-container::-webkit-scrollbar { height: 8px; }
  #list-container::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 999px;
  }
}

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

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

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