/* =============================================
   風俗ラボ デザインシステム v2
   Base: Airbnb Design Principles
   Brand: #e91e8c  Text: #222222
   ============================================= */

/* =============================================
   サイトタイトル：グラデーション＋モダンスタイル
   ============================================= */
.site_title__link {
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  font-size: 1.5rem !important;
  background: linear-gradient(135deg, #e91e8c 0%, #ff6b9d 60%, #c2185b 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
}

/* TOPページ：ヘッダー全体を非表示（ロゴはヒーロー内に表示） */
body.type-home .i-header {
  display: none !important;
}

/* TOPページ：サイトタイトルテキストを非表示 */
body.type-home .site_title__link {
  display: none !important;
}

/* TOPページ：サイトロゴ＋コピー（バルーン外・中央） */
.fl-site-logo-wrap {
  text-align: center;
  padding: 36px 20px 20px;
}

.fl-site-logo {
  height: 100px;
  width: auto;
  display: inline-block;
}

@media screen and (min-width: 769px) {
  .fl-site-logo {
    height: 160px;
  }
}

.fl-site-copy {
  font-size: 20px;
  font-weight: 800;
  color: #c2185b;
  margin: 12px 0 0;
  letter-spacing: 0.03em;
}

/* =============================================
   トップページ：Gold Media スライダー非表示
   front-page.php が独自ヒーローを実装するため
   body class は "type-home"（home ではない）
   ============================================= */
body.type-home .widget-is-widget_fit_carousel_widget,
body.type-home .fit-keyvisual {
  display: none !important;
}

/* =============================================
   バルーンふわふわアニメーション
   ============================================= */
@keyframes fl-float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* =============================================
   トップページ：ヒーローセクション
   ============================================= */

/* ヒーロー全体 */
.fl-hero {
  background: linear-gradient(160deg, #fff5fa 0%, #fce4f1 50%, #fff 100%);
  padding: 50px 20px 60px;
  overflow: visible;
}

.fl-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 左：吹き出しバルーン（ふわふわ） */
.fl-hero-balloon {
  flex: 1;
  min-width: 0;
  background: linear-gradient(160deg, #ffffff 60%, #fff5fb 100%);
  border-radius: 40px;
  border: 2px solid rgba(233,30,140,0.12);
  box-shadow:
    rgba(233,30,140,0.06) 0px 0px 0px 4px,
    rgba(233,30,140,0.10) 0px 8px 24px,
    rgba(0,0,0,0.08) 0px 16px 40px;
  padding: 36px 40px;
  position: relative;
  animation: fl-float 4s ease-in-out infinite;
}

/* バルーンのしっぽ（右向き三角） */
.fl-hero-balloon::after {
  content: '';
  position: absolute;
  right: -22px;
  top: 44%;
  transform: translateY(-50%);
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

/* バルーン内ロゴ */
.fl-hero-logo {
  margin-bottom: 12px;
}

.fl-logo-img {
  height: 56px;
  width: auto;
  display: block;
}

/* バッジ */
.fl-hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #fce4f1, #f8d0e8);
  color: #e91e8c;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.fl-hero-badge em { font-style: normal; }

/* バルーン内の問いかけテキスト */
.fl-balloon-label {
  font-size: 26px;
  font-weight: 800;
  color: #222222;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

/* 都道府県ボタン */
.fl-pref-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.fl-pref-btn {
  padding: 11px 20px;
  border: 2px solid #e91e8c;
  border-radius: 28px;
  color: #e91e8c;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s ease;
  background: #fff;
}

.fl-pref-btn:hover {
  background: #e91e8c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(233,30,140,0.35);
}

/* サブCTAリンク */
.fl-cta-link {
  display: inline-block;
  color: #e91e8c;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid #e91e8c;
  padding-bottom: 2px;
  transition: opacity 0.2s;
}

.fl-cta-link:hover { opacity: 0.7; }

/* 右：キャラクター */
.fl-hero-char {
  flex-shrink: 0;
  width: 420px;
  align-self: flex-end;
}

.fl-hero-char img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(233,30,140,0.20));
}

/* アフィリエイトバナー帯：広告設置まで非表示 */
.fl-ad-strip {
  text-align: center;
  padding: 16px 0;
  background: #fff;
}

/* メインレイアウト */
.fl-content-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.fl-main { flex: 1; min-width: 0; }
.fl-sidebar { width: 300px; flex-shrink: 0; }

/* 業種ナビ */
.fl-genre-nav {
  margin-bottom: 40px;
}

.fl-genre-nav-title {
  font-size: 13px;
  font-weight: 700;
  color: #6a6a6a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.fl-genre-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fl-genre-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  color: #222222;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
  box-shadow: rgba(0,0,0,0.04) 0px 2px 6px;
}

.fl-genre-btn:hover {
  border-color: #e91e8c;
  color: #e91e8c;
  transform: translateY(-1px);
}

.fl-genre-icon { font-size: 18px; }

/* セクション見出し */
.fl-section-header { margin-bottom: 20px; }

.fl-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #222222;
  border-left: 4px solid #e91e8c;
  padding-left: 12px;
  margin: 0;
}

/* 記事グリッド */
.fl-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.fl-post-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    rgba(0,0,0,0.02) 0px 0px 0px 1px,
    rgba(0,0,0,0.04) 0px 2px 6px,
    rgba(0,0,0,0.08) 0px 4px 8px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.fl-post-card:hover {
  transform: translateY(-3px);
  box-shadow:
    rgba(0,0,0,0.04) 0px 0px 0px 1px,
    rgba(0,0,0,0.08) 0px 4px 12px,
    rgba(0,0,0,0.12) 0px 8px 20px;
}

.fl-post-card-link { text-decoration: none; color: inherit; display: block; }

/* サムネイル */
.fl-post-thumb { aspect-ratio: 16/9; overflow: hidden; }
.fl-post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fl-post-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fce4f1, #e8d5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e91e8c;
  font-size: 14px;
  font-weight: 700;
}

/* カード本文 */
.fl-post-body { padding: 14px; }

.fl-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.fl-post-cat {
  background: #fce4f1;
  color: #e91e8c;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.fl-post-meta time {
  font-size: 12px;
  color: #aaa;
}

.fl-post-title {
  font-size: 14px;
  font-weight: 700;
  color: #222222;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ページネーション */
.fl-pagination {
  text-align: center;
  margin: 20px 0 40px;
}

.fl-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  color: #222;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.fl-pagination .page-numbers.current,
.fl-pagination .page-numbers:hover {
  background: #e91e8c;
  border-color: #e91e8c;
  color: #fff;
}

/* サイドバープレースホルダー */
.fl-sidebar-ad-placeholder {
  background: #f7f7f7;
  border: 2px dashed #ddd;
  border-radius: 12px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 0.85rem;
  text-align: center;
  line-height: 1.7;
}

/* =============================================
   トップページ：モバイル対応
   ============================================= */
@media screen and (max-width: 768px) {
  .fl-hero { padding: 32px 16px 28px; overflow: hidden; }

  .fl-hero-inner {
    flex-direction: column-reverse;
    gap: 0;
    align-items: center;
  }

  .fl-hero-char {
    width: 220px;
    margin: 0 auto -16px;
    align-self: auto;
  }

  /* モバイルではしっぽ非表示 */
  .fl-hero-balloon::after { display: none; }

  .fl-hero-balloon {
    border-radius: 24px;
    padding: 24px 22px;
    width: 100%;
    box-sizing: border-box;
    animation: none; /* モバイルはアニメなし */
  }

  .fl-balloon-label { font-size: 22px; }

  .fl-pref-btn { font-size: 15px; padding: 9px 16px; }

  .fl-content-wrap {
    flex-direction: column;
    padding: 24px 16px;
  }

  .fl-sidebar { width: 100%; }

  .fl-post-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ===== 本文テキスト ===== */
.entry-content p,
.entry-content li {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.9 !important;
  color: #222222 !important;
}

/* ===== H2：グレー座布団（Airbnb風） ===== */
.entry-content h2 {
  border-left: 4px solid #e91e8c !important;
  background: #f7f7f7 !important;
  padding: 14px 18px !important;
  color: #222222 !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 32px 0 16px !important;
  border-radius: 0 8px 8px 0 !important;
}

/* ===== H3：左ボーダー＋ダーク文字（可読性改善） ===== */
.entry-content h3 {
  border-left: 3px solid #e91e8c !important;
  padding: 8px 14px !important;
  color: #222222 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 24px 0 12px !important;
}

/* ===== リード文 ===== */
.entry-content .lead {
  background: #fdf0f7 !important;
  border-left: 4px solid #e91e8c !important;
  padding: 16px 20px !important;
  color: #444444 !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  line-height: 1.9 !important;
  margin-bottom: 32px !important;
  display: block !important;
  border-radius: 0 8px 8px 0 !important;
}

/* =============================================
   CTAボックス＋ボタン：変更なし・現状維持
   ============================================= */
div.cta-box {
  background: #ffffff !important;
  border: 2px solid #e91e8c !important;
  border-radius: 12px !important;
  padding: 24px !important;
  text-align: center !important;
  margin: 40px auto !important;
  display: block !important;
  max-width: 480px !important;
  box-shadow: 0 4px 16px rgba(233, 30, 140, 0.15) !important;
}

div.cta-box p {
  color: #333333 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  display: block !important;
  line-height: 1.7 !important;
}

a.cta-button {
  background: #e91e8c !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 32px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 18px !important;
  display: inline-block !important;
  box-shadow: 0 6px 16px rgba(233, 30, 140, 0.4) !important;
  transition: all 0.2s ease !important;
}

a.cta-button:hover {
  opacity: 0.9 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(233, 30, 140, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* ===== モバイル対応 ===== */
@media screen and (max-width: 768px) {
  .entry-content p,
  .entry-content li {
    font-size: 15px !important;
  }

  .entry-content h2 {
    font-size: 1.15rem !important;
  }

  .entry-content h3 {
    font-size: 1.05rem !important;
  }

  div.cta-box {
    max-width: 100% !important;
    padding: 20px 16px !important;
  }

  a.cta-button {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 16px !important;
  }
}

/* =============================================
   ⑥ 前後記事ナビ：「記事がありません」非表示
   ============================================= */
.nextprev_list li .phrase-is-secondary {
  display: none !important;
}

/* =============================================
   店舗一覧ページ
   ============================================= */
.fl-shops-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}

.fl-shops-inner { width: 100%; }

.fl-shops-header {
  margin-bottom: 32px;
}

.fl-shops-page-title {
  font-size: 22px;
  font-weight: 800;
  color: #222;
  margin: 0 0 20px;
}

.fl-shops-count {
  font-size: 16px;
  font-weight: 500;
  color: #999;
}

.fl-shops-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: #6a6a6a;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.fl-pref-btn--active {
  background: #e91e8c !important;
  color: #fff !important;
  border-color: #e91e8c !important;
}

.fl-pref-btn--reset {
  border-color: #ccc !important;
  color: #666 !important;
}

.fl-shops-grid {
  grid-template-columns: repeat(4, 1fr);
}

.fl-shop-title {
  font-size: 13px !important;
  -webkit-line-clamp: 2 !important;
}

.fl-shops-empty {
  text-align: center;
  color: #999;
  padding: 60px 0;
  font-size: 16px;
}

/* エリアナビ（TOPページ） */
.fl-area-nav {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .fl-shops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .fl-shops-page-title {
    font-size: 18px;
  }
}

/* =============================================
   店舗テーブル：Airbnb 三層シャドウ＋角丸
   ============================================= */
.shop-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 48px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow:
    rgba(0,0,0,0.02) 0px 0px 0px 1px,
    rgba(0,0,0,0.04) 0px 2px 6px,
    rgba(0,0,0,0.10) 0px 4px 8px !important;
}

.shop-table th,
.shop-table td {
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 15px !important;
  vertical-align: middle !important;
  color: #222222 !important;
}

.shop-table th {
  background: #fdf0f7 !important;
  color: #e91e8c !important;
  width: 22% !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.shop-table tr:last-child th,
.shop-table tr:last-child td {
  border-bottom: none !important;
}

/* =============================================
   ピックアップ PR枠（TOP・店舗一覧・業種別共通）
   ============================================= */
.fl-pickup-wrap {
  margin-bottom: 28px;
}

.fl-pickup-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #e91e8c;
  background: #fce4f1;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}

.fl-pickup-card {
  border: 2px solid #fce4f1;
  border-radius: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #fff 60%, #fff5fb 100%);
  box-shadow: 0 4px 20px rgba(233,30,140,0.08);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.fl-pickup-thumb {
  width: 120px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.fl-pickup-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fl-pickup-body {
  flex: 1;
  min-width: 0;
}

.fl-pickup-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.fl-pickup-tag {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 4px;
}

.fl-pickup-tag--price {
  color: #e91e8c;
  background: #fce4f1;
}

.fl-pickup-name {
  font-size: 18px;
  font-weight: 800;
  color: #222;
  margin: 0 0 6px;
}

.fl-pickup-catch {
  font-size: 14px;
  color: #555;
  margin: 0 0 14px;
  line-height: 1.6;
}

.fl-pickup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fl-pickup-btn {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.fl-pickup-btn:hover { opacity: 0.85; }

.fl-pickup-btn--tel {
  background: #222;
  color: #fff;
}

.fl-pickup-btn--web {
  background: linear-gradient(135deg, #e91e8c, #c2185b);
  color: #fff;
}

/* TOP用：より大きく */
.fl-pickup-top .fl-pickup-name { font-size: 22px; }
.fl-pickup-top .fl-pickup-thumb { width: 180px; }

@media screen and (max-width: 768px) {
  .fl-pickup-card { flex-direction: column; }
  .fl-pickup-thumb { width: 100%; aspect-ratio: 16/9; }
  .fl-pickup-top .fl-pickup-thumb { width: 100%; }
}

/* =============================================
   記事ページ：広告枠
   ============================================= */
.fl-ad-inline,
.fl-ad-bottom {
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
}

/* アフィリエイト未設定時のプレースホルダー表示 */
.fl-ad-placeholder {
  background: #f9f9f9;
  border: 2px dashed #e0e0e0;
  padding: 20px;
  text-align: center;
}

.fl-ad-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  border: 1px solid #ddd;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.fl-ad-placeholder-text {
  font-size: 13px;
  color: #ccc;
  margin: 0;
}

/* =============================================
   TOPページ：オーナー問い合わせCTA
   ============================================= */
.fl-owner-cta {
  background: #f7f7f7;
  border-top: 1px solid #eee;
  padding: 40px 20px;
  text-align: center;
}

.fl-owner-cta-inner {
  max-width: 600px;
  margin: 0 auto;
}

.fl-owner-cta-title {
  font-size: 18px;
  font-weight: 800;
  color: #222;
  margin: 0 0 8px;
}

.fl-owner-cta-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 20px;
  line-height: 1.7;
}

.fl-owner-cta-btn {
  display: inline-block;
  background: #222;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.fl-owner-cta-btn:hover {
  background: #e91e8c;
  color: #fff;
}

/* =============================================
   オーナーボックス：Airbnb カードスタイル
   重複削除・hover修正済み
   ============================================= */
.owner-box {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  text-align: center !important;
  margin: 40px auto !important;
  max-width: 480px !important;
  box-shadow:
    rgba(0,0,0,0.02) 0px 0px 0px 1px,
    rgba(0,0,0,0.04) 0px 2px 6px,
    rgba(0,0,0,0.10) 0px 4px 8px !important;
}

.owner-box p {
  color: #6a6a6a !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  line-height: 1.7 !important;
}

a.owner-button,
a.owner-button:link,
a.owner-button:visited {
  background: #222222 !important;
  color: #ffffff !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: rgba(0,0,0,0.08) 0px 4px 12px !important;
}

a.owner-button:hover {
  background: #e91e8c !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: rgba(0,0,0,0.12) 0px 6px 16px !important;
}