/*
Theme Name: cocoon-child-master
Template: cocoon-master
Description: Child theme for Cocoon-master.
Version: 1.0
*/

/*
Theme stylesheet - critical and common styles moved from front-page.php
Added by automated optimization script on 2025-09-09.
*/
body {
  margin: 0;
  padding: 0;
  font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
  line-height: 1.8;
  color: #333;
  background: #fff;
  box-sizing: border-box;
}

h1 {
  color: #2c3e50;
  border-bottom: 3px solid #3498db;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
h2 {
  color: #2c3e50;
  border-left: 4px solid #3498db;
  padding-left: 15px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h3 {
  color: #34495e;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 18px
}

ul {
  padding-left: 30px;
  margin: 20px 0;
}

/* ---------- Critical (above-the-fold) styles for front page ---------- */
#geo-search{
  display:block;
  width:100%;
  height:76px;
  margin-bottom:12px;
  font-size:1.05rem;
  background: linear-gradient(135deg,#0069d9 0%,#0056b3 100%);
  color:#fff;
  border:0;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.4px;
  box-shadow:0 6px 18px rgba(0,105,217,0.18), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
  position:relative;
  overflow:hidden;
}
#geo-search::before{
  content:'';
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.95;
}
#geo-search:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,105,217,0.22);opacity:1}
#station-search{
  height:40px;
  padding:10px 18px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
  margin:10px;
  background:linear-gradient(90deg,#ff7a18 0%,#af002d 100%);
  color:#fff;
  border:0;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(175,0,45,0.18);
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s;
}
#station-search:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(175,0,45,0.22)}
#station-search:active{transform:translateY(0)}
#station-search:focus{outline:3px solid rgba(255,122,24,0.12);outline-offset:2px}
#result-count{display:inline-block;vertical-align:middle}
.hide-initial{display:none}
.map-list-container{height:500px;width:100%}
.no-list-style{list-style:decimal!important;padding-left:1.5em;margin-left:0}
.featured-centered{text-align:center;margin-top:40px}

/* ---------- Featured grid (moved from front-page.php) ---------- */
.nf-featured-wrapper {
  max-width: 1200px;
  margin: 30px auto 60px;
  padding: 0 20px;
}
.nf-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}
.nf-featured-item {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: transform .15s ease;
}
.nf-featured-item a { color: inherit; text-decoration: none; display:block; }
.nf-featured-item:hover { transform: translateY(-4px); }
.nf-featured-item img {
  width: 100%;
  height: auto;
  display:block;
}
.nf-featured-body {
  padding: 12px;
}
.nf-featured-title {
  font-size: 16px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.nf-featured-excerpt {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

/* Mobile: single column */
@media (max-width: 768px) {
  .nf-featured-grid {
    grid-template-columns: 1fr;
  }
  .nf-featured-title { font-size: 18px; }
  .nf-featured-body { padding: 14px; }

  /* モバイル時：検索フォームの要素間を広げる */
  #search-form label,
  #search-form input,
  #search-form fieldset,
  #search-form select,
  #search-form button {
    display: block;
    width: 100%;
  }

  /* キーワード入力欄の下に余白を追加 */
  #station-name {
    margin: 8px 0 16px;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  /* カテゴリ（fieldset）に余白を追加して視覚的な間隔を確保 */
  #category-filters {
    margin-bottom: 16px;
    padding: 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }

  /* ボタンやジオボタンの高さをモバイル向けに調整（必要に応じて数値調整） */
  #geo-search { height: 56px; }
  #station-search { height: 44px; padding: 8px 12px; }
}

 /* カテゴリリストの番号を消す（カテゴリ表示の数字を非表示にする） */
 #category-filters ul,
 #category-filters ol {
   list-style: none !important;
   padding-left: 0;
   margin: 0;
 }

/* ========== カテゴリチェックボックスのレイアウト修正 ========== */
/* チェックボックスとカテゴリ名を横並びで揃える（デスクトップ／モバイル両対応） */
#category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 6px 0;
  box-sizing: border-box;
}

/* label を inline-flex にしてチェックボックスとテキストを中央揃えに */
#category-filters .category-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 8px 4px 0;
  padding: 4px 8px;
  background: transparent;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}

/* チェックボックスの右に余白を入れてテキストとの間隔を確保 */
#category-filters .category-checkbox {
  margin: 0 8px 0 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* モバイル: フォーム全体はブロック表示を保ちつつ、カテゴリ内は横並びを維持 */
@media (max-width: 768px) {
  /* 検索フォーム内の一般要素（チェックボックス除く）は幅いっぱいにする */
  #search-form > label,
  #search-form input:not([type="checkbox"]),
  #search-form fieldset,
  #search-form select,
  #search-form button {
    display: block;
    width: 100%;
  }

  /* カテゴリラベルは横並びをキープしてタップ領域を拡張 */
  #category-filters {
    gap: 10px;
    padding: 8px 0;
  }
  #category-filters .category-label {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-right: 0;
    width: auto !important;
    white-space: nowrap;
  }

  /* 長いカテゴリ名のみ折返しを許可する補助クラス（必要時 .long-text を付与） */
  #category-filters .category-label.long-text {
    white-space: normal;
  }
}

/* アクセシビリティ: フォーカス時の可視化 */
#category-filters .category-checkbox:focus,
#category-filters .category-label:focus-within {
  outline: 2px solid rgba(0,123,255,0.15);
  outline-offset: 2px;
}

/* 検索結果のリスト表に対するスタイル調整
   - 表を左右スクロール可能にするため、コンテナに overflow-x を付与
   - テーブルは最小幅を設定してレイアウト崩れを防止
*/
#list-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* DataTables 等と併用を想定したテーブル調整（投稿ページでも同様に機能させる） */
#netcafe-list {
  width: 100%;
  min-width: 720px; /* 必要に応じて調整 */
  border-collapse: collapse;
  table-layout: fixed;
}

/* 投稿本文内のテーブルも横スクロール可能にする（投稿ページ対応） */
.entry-content table {
  display: block;               /* 横スクロールを有効にするためブロック化 */
  width: 100%;
  min-width: 720px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  table-layout: fixed;
  margin-bottom: 1rem;
}

/* 共通のセルスタイル（見た目とスクロール時の読みやすさ向上） */
#netcafe-list th,
#netcafe-list td,
.entry-content table th,
.entry-content table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 各列の幅を明示的に設定（投稿ページのテーブルにも適用されるよう nth-child を併用） */
/* 列順: 1=店舗名, 2=1時間料金, 3=シャワー料金, 4=女性専用ルーム, 5=ナイトパック料金, 6=距離 */
#netcafe-list th[data-sort="post_title"],
#netcafe-list td:first-child,
.entry-content table th:first-child,
.entry-content table td:first-child {
  /* 店舗名列を10文字分表示する（single-netcafe.php 含む投稿ページ用） */
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#netcafe-list th:nth-child(2),
#netcafe-list td:nth-child(2),
.entry-content table th:nth-child(2),
.entry-content table td:nth-child(2) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

#netcafe-list th:nth-child(3),
#netcafe-list td:nth-child(3),
.entry-content table th:nth-child(3),
.entry-content table td:nth-child(3) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

#netcafe-list th:nth-child(4),
#netcafe-list td:nth-child(4),
.entry-content table th:nth-child(4),
.entry-content table td:nth-child(4) {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

#netcafe-list th:nth-child(5),
#netcafe-list td:nth-child(5),
.entry-content table th:nth-child(5),
.entry-content table td:nth-child(5) {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

#netcafe-list th:nth-child(6),
#netcafe-list td:nth-child(6),
.entry-content table th:nth-child(6),
.entry-content table td:nth-child(6) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

/* レスポンシブ調整: 小さい画面では最小幅を下げる */
@media (max-width: 480px) {
  #netcafe-list { min-width: 520px; }
  #netcafe-list th[data-sort="post_title"],
  #netcafe-list td:first-child,
  .entry-content table th:first-child,
  .entry-content table td:first-child {
    min-width: 100px;
    max-width: 100px;
  }
}

/* page-netcafe-search.php 用のテーブル調整
   - 横スクロールは既に wrapper に inline style があるが念のためスタイルを統一
   - 各列幅を明示的に指定してレイアウトを安定化
   - 長い URL / 単語の折返しを有効化
*/
#netcafe-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 50px;
}

#netcafe-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

/* セル共通 */
#netcafe-table th,
#netcafe-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 長いリンクやURLを折り返す */
#netcafe-table td a,
.break-url {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 列幅指定（このテーブルの列順に合わせる）
   1=店舗名, 2=距離, 3=1時間料金, 4=シャワー料金, 5=女性専用ルーム, 6=ナイトパック料金, 7=優先度(hidden)
*/
#netcafe-table th:first-child,
#netcafe-table td:first-child {
  /* 店舗名列を10文字分表示する（ch単位） */
  width: 10ch;
  min-width: 10ch;
  max-width: 10ch;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#netcafe-table th:nth-child(2),
#netcafe-table td:nth-child(2) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

#netcafe-table th:nth-child(3),
#netcafe-table td:nth-child(3) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

#netcafe-table th:nth-child(4),
#netcafe-table td:nth-child(4) {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

#netcafe-table th:nth-child(5),
#netcafe-table td:nth-child(5) {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

#netcafe-table th:nth-child(6),
#netcafe-table td:nth-child(6) {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

/* 7列目（優先度）は非表示にする */
#netcafe-table th:nth-child(7),
#netcafe-table td:nth-child(7) {
  display: none;
}

/* モバイル調整 */
@media (max-width: 480px) {
  #netcafe-table { min-width: 520px; }
  #netcafe-table th:first-child,
  #netcafe-table td:first-child {
    min-width: 100px;
    max-width: 100px;
  }
}

/* Ensure equal left/right gutters for main + content wrapper
   レスポンシブで常に中央寄せ：max-width を指定し、左右 margin を auto にすることで
   メイン＋サイドバー全体が常に画面中央に配置され、左右の余白が等しくなります。 */
main#main.main + #content-in.content-in.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;   /* コンテンツの最大幅（任意で調整） */
  margin-left: auto;
  margin-right: auto;  /* 中央寄せ（左右マージンが自動で等しくなる） */
  padding-left: 20px;  /* 内側のガター（必要に応じて調整） */
  padding-right: 20px;
}

/* 小画面ではパディングを小さくして表示領域を確保 */
@media (max-width: 640px) {
  main#main.main + #content-in.content-in.wrap {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%; /* モバイルでは画面幅に合わせる */
  }
}

/* サイドバーとメインコンテンツを合わせた中心を画面中央に揃える
   アプローチ:
   - .site-container をフレックスコンテナ化して内部の .site-content を中央寄せ
   - .site-content.content-sidebar-centered を横並びのフレックスにして main と sidebar の合計幅を中央に配置
   - 画面幅が狭ければ縦並びに戻す（レスポンシブ）
*/
.site-container {
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;                /* コンテナを画面中央に固定 */
  padding-left: 20px;            /* 左右のガターをここで統一 */
  padding-right: 20px;
  display: flex;
  justify-content: center;       /* 子要素（.site-content）群を中央寄せ */
  width: 100%;
}

/* メイン + サイドバーの横並び（中央揃え） */
.site-content.content-sidebar-centered {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;              /* 横並びを優先し折返さない */
  justify-content: center !important;       /* グループ全体を中央に寄せる */
  align-items: flex-start !important;
  gap: 24px;
  box-sizing: border-box;
  width: auto;
  max-width: 1280px; /* 必要に応じて調整 */
}

/* デスクトップ（幅 > 1280px）では強制的に横並びを維持し、メインとサイドバーの幅を固定 */
@media (min-width: 1281px) {
  .site-content.content-sidebar-centered {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .site-content.content-sidebar-centered > .site-main.content-area,
  .site-content.content-sidebar-centered > main,
  .site-content.content-sidebar-centered main.site-main {
    flex: 0 0 760px !important;
    width: 760px !important;
    max-width: 760px !important;
    box-sizing: border-box !important;
  }
  .site-content.content-sidebar-centered > aside,
  .site-content.content-sidebar-centered .sidebar,
  .site-content.content-sidebar-centered .widget-area {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }

  /* テーブルなど大きな要素が原因で幅がはみ出す場合は横スクロールにして折返しを防ぐ */
  .site-content.content-sidebar-centered {
    overflow-x: auto;
  }
}

/* メインとサイドバーの幅（合計が中央に来るように固定幅を与える）
   調整しやすいように flex を使うが、合計幅が画面幅を超えないようレスポンシブにする */
.site-content.content-sidebar-centered .site-main.content-area {
  flex: 0 0 760px;  /* 固定幅で横並びを維持 */
  max-width: 760px;
  box-sizing: border-box;
  width: 760px;
}

.site-content.content-sidebar-centered aside,
.site-content.content-sidebar-centered .sidebar,
.site-content.content-sidebar-centered .widget-area {
  flex: 0 0 320px;
  width: 320px;
  box-sizing: border-box;
}

/* 画面が狭い場合は縦並びに戻す（スマホ等） */
@media (max-width: 1024px) {
  .site-container { display: block; padding-left: 12px; padding-right: 12px; }
  .site-content.content-sidebar-centered {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .site-content.content-sidebar-centered .site-main.content-area,
  .site-content.content-sidebar-centered aside,
  .site-content.content-sidebar-centered .sidebar,
  .site-content.content-sidebar-centered .widget-area {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* 強制的に中央寄せして左右余白を均等にする（上書きルール） */
/* wrap や主要コンテナに max-width と margin:auto を付与し、左右パディングを統一 */
#page,
.wrap,
.site-container,
main#main.main + #content-in.content-in.wrap,
.site-content.content-sidebar-centered {
  box-sizing: border-box;
  max-width: 1280px;    /* 必要に応じて値を調整してください */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

/* 少し余白を小さくするレスポンシブ */
@media (max-width: 1024px) {
  #page,
  .wrap,
  .site-container,
  main#main.main + #content-in.content-in.wrap,
  .site-content.content-sidebar-centered {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  #page,
  .wrap,
  .site-container,
  main#main.main + #content-in.content-in.wrap,
  .site-content.content-sidebar-centered {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- Sidebar layout fallback to keep sidebar at the side ---------- */
/* Some themes or templates use different class names; enforce side-by-side layout
   using flexbox for common selectors, and provide a float-based fallback. */
.site-content,
.site-content .content-area,
.content-sidebar,
.content-sidebar .site-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px;
  flex-wrap: nowrap !important;
  width: 100%;
  box-sizing: border-box;
}

/* Main content sizing */
.site-content .site-main,
.site-main.content-area,
#primary,
.main.content-area,
.content-area {
  flex: 1 1 760px !important;
  max-width: 760px !important;
  box-sizing: border-box;
  width: 760px !important;
}

/* Sidebar sizing */
.widget-area,
.sidebar,
#secondary,
aside {
  flex: 0 0 320px !important;
  width: 320px !important;
  box-sizing: border-box;
}

/* Float fallback for templates that still use floats */
#primary {
  float: left !important;
  width: calc(100% - 320px) !important;
}
#secondary {
  float: right !important;
  width: 320px !important;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1024px) {
  .site-content,
  .site-content .content-area,
  .content-sidebar,
  #primary,
  #secondary,
  .sidebar,
  .widget-area {
    display: block !important;
    width: 100% !important;
    float: none !important;
    flex-direction: column !important;
    box-sizing: border-box;
    gap: 16px;
  }
}
/* マーカーのぴょんぴょんアニメーション用CSS */
/* Leafletの標準マーカーまたはL.divIconに適用することを想定 */
.leaflet-marker-icon.marker-pulse {
    animation: pulse-animation 0.7s infinite ease-in-out alternate; /* 往復アニメーション */
}

@keyframes pulse-animation {
    0% {
        transform: scale(1.0);
    }
    50% {
        /* マーカーが少し上に跳ねて、わずかに大きくなる */
        transform: translate3d(0, -10px, 0) scale(1.1);
    }
    100% {
        transform: scale(1.0);
    }
}