/*リンク*/
a {
  text-decoration: none;
  color: #ffffff;
}

/*ラベル（「開く」ボタン）*/
.button{
  /*margin: 0 1.5em;*/ /*中央寄せ*/
  margin: 0 0 0 auto; /*右寄せ*/
  padding: 0.5em; /*テキストと外枠の間*/
  display: block;
  color: #fff; /*文字色*/
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0px 0 0px #aaa; /*影*/
  background: #fcae11;
  border-radius: 0px; /*角の丸み*/
  width: 100px;
  height: 20px;
}

.short_description {
  margin-top: 0px;
}

#bookmark_search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;            /* 絞り込みセレクトボックスと合わせる */
  padding: 0 12px;
  background-color: #ffffff;
  border: 2px solid #111;  /* 枠は黒 */
  border-radius: 0px;      /* 完全な四角 */
  color: #111;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s, color 0.2s;
  margin: 2px;
}

/* チェックボックス本体は隠す */
#bookmark_check {
  display: none;
}

/* 【重要】チェックが入った時：枠は黒のまま背景を青にする */
/* 親要素（labelの隣のinputの状態を見るため、あるいは構造に合わせて調整） */
/* label自体がクリック対象なので、以下のCSSで制御します */

body:has(#bookmark_check:checked) #bookmark_search {
  background-color: #1da1f2; /* Twitter風の青 */
  color: #ffffff;            /* 文字は白 */
}

/* hover時の微調整 */
#bookmark_search:hover {
  background-color: #f8f8f8;
}

body:has(#bookmark_check:checked) #bookmark_search:hover {
  background-color: #1991db; /* 選択中のhoverは少し濃い青 */
}

.bookmark_search1 {
  background-color: white;
}

.bookmark_search2 {
  background-color: #1da1f2;
}

.select_label {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 10px 0px;
}

.select_label::after {
    position: absolute;
    right: 15px;
    width: 10px;
    height: 7px;
    background-color: #535353;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.select_label select {
    appearance: none;
    height: 40px;
    width: 120px;
    padding: .4em calc(.8em + 30px) .4em .8em;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #fff;
    color: #333333;
    font-size: 1em;
    cursor: pointer;
}

.place-card{
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0;
}

.place-title{
  font-weight: bold;
  margin-bottom: 6px;
}

.place-actions{
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* LISTではカード上のタイトルリンクを必ず黒で表示する */
.place-card .place-title,
.place-card .place-title a,
.place-card a.link {
  color: #111 !important;
}

.place-card .place-title {
  display: block !important;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
}

.place-card .place-title a {
  text-decoration: none;
}
.place-card .place-title a:hover {
  text-decoration: underline;
}

/* MAP⇄LIST 小さめボタン */
/* 「⇄マップ」ボタンのスタイル統一 */
.swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;           /* 検索ボタンと同じ高さ */
  padding: 0 20px;
  background-color: #fff; /* 背景を白に */
  color: #74c7cf;         /* 文字色をメインカラーに */
  border: 2px solid #74c7cf; /* 枠線をメインカラーに */
  border-radius: 22px;    /* 角を丸く */
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  margin-left: 8px;
  box-sizing: border-box;
  transition: all 0.2s;
}

.swap-btn:hover {
  background-color: #74c7cf;
  color: #fff;
}
/* =========================
   LIST: タイトル帯を飛び出しラベル化（最終調整）
========================= */

.place-card{
  border: 2px solid #74c7cf;
  border-radius: 18px;
  margin: 24px 0;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* タイトル帯：カードから少し飛び出す */
.place-card-header{
  background: #74c7cf;
  padding: 10px 16px;
  display: inline-block;
  border-radius: 10px 10px 0 0;

  /* ★飛び出し */
  position: relative;
  top: -12px;
  left: 0px;
  z-index: 2;

  /* ★白い溝が出る原因を潰す */
  margin: 0;
}

/* タイトル文字は白固定（他CSSに勝つ） */
.place-title{
  margin: 0 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

/* 本文側：タイトル帯が被った分だけ上に余白を確保 */
.place-card-body{
  padding: 20px 20px 20px 20px;
  margin-top: -12px;          /* ★溝を消す */
  background: #fff;
}

/* 本文 */
.place-desc{
  margin: 0 0 20px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

/* ボタン位置はそのまま右 */
.place-actions{
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

/* ボタン */
.btn-map{
  padding: 12px 22px;
  border-radius: 14px;
  border: 2px solid #74c7cf;
  color: #74c7cf;
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

.btn-detail{
  padding: 12px 28px;
  border-radius: 14px;
  background: #f5a623;
  color: #fff;
  border: 2px solid #f5a623;
  font-weight: 900;
  text-decoration: none;
}

/* スマホ時 */
@media (max-width: 768px){
  .place-card-header{
    left: 0px;
    top: -10px;
  }
  .place-actions{
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* =========================
   LIST Card (no-overlap title tab)
   - タイトルは上に独立（かぶせない）
   - 溝なし（枠線の継ぎ目だけ重ねて消す）
========================= */

.place-card{
  margin: 28px 0;
  border: none;
  background: transparent;
}

/* タイトルタブ（文字幅にフィット） */
.place-card-header{
  display: inline-block;
  background: #74c7cf;

  border: 3px solid #74c7cf;     /* 枠線は同色でもOK（見た目は塊になる） */
  border-bottom: 0;              /* 下側は本文枠と繋ぐので消す */
  border-radius: 18px 18px 0 0;

  padding: 14px 22px;
  margin: 0;                     /* 溝防止 */
}

/* タイトル文字は白固定 */
.place-title,
.place-card-header .place-title,
.place-card-header h3{
  margin: 0;
  color: #fff !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

/* 本文枠（カード本体） */
.place-card-body{
  border: 3px solid #74c7cf;
  border-radius: 0 24px 24px 24px;
  background: #fff;

  /* ★ここが溝を消す要（枠線だけ重ねて継ぎ目を消す） */
  margin-top: -15px;

  padding: 22px 24px 24px;
}

/* 本文 */
.place-desc{
  margin: 0 0 18px 0;
  font-size: 18px;
  line-height: 1.65;
  color: #000;
}

/* ボタン：右寄せ */
.place-actions{
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* ボタン */
.btn-map{
  padding: 12px 22px;
  border-radius: 14px;
  border: 2px solid #74c7cf;
  color: #74c7cf;
  background: #fff;
  font-weight: 900;
  text-decoration: none;
}

.btn-detail{
  padding: 12px 28px;
  border-radius: 14px;
  background: #f5a623;
  color: #fff;
  border: 2px solid #f5a623;
  font-weight: 900;
  text-decoration: none;
}

.btn-map:hover,
.btn-detail:hover{
  opacity: 0.9;
}

/* スマホ */
@media (max-width: 768px){
  .place-card-body{
    padding: 18px 18px 20px;
    border-radius: 0 20px 20px 20px;
  }
  .place-title{ font-size: 22px; }
}

/* --- ヘッダー全体の固定 --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px; /* ロゴとタイトルが入る高さ */
  z-index: 9000;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* --- メニューボタンを左上に固定 --- */
.menu-btn {
  position: fixed !important;
  top: 10px;
  left: 10px;
  z-index: 9999;
}

/* --- メインコンテンツの押し下げ（ここが重要） --- */
main {
  margin-top: 110px !important; /* ヘッダーより少し広く空ける */
  padding: 0 15px;
  display: block;
}
.list-search {
  flex: 1;
  min-width: 280px; /* 幅を広く */
  height: 50px;     /* 高さを高く */
  padding: 0 20px;
  border: 2px solid #74c7cf;
  border-radius: 25px; /* 高さを半分にして丸く */
  font-size: 18px;     /* 文字も大きく */
  outline: none;
}

/* 検索エリア全体の余白 */
.list-ui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  background: transparent !important;
}
/* 検索ボタンとリセットボタンの共通スタイル */
.list-btn {
  height: 50px;
  padding: 0 25px;
  background-color: #74c7cf;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  transition: 0.2s;
}

.list-btn:hover {
  opacity: 0.8;
}

/* リセットボタンの色 */
.list-btn.secondary {
  background-color: #999;
  margin-left: 5px;
}

/* 折りたたみ要素（details）のスタイル */
.list-filters {
  margin: 10px 0 20px 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.list-filters summary {
  padding: 10px 15px;
  cursor: pointer;
  font-weight: bold;
  color: #555;
  outline: none;
}

.filter-inner {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  background: #fff;
}