/* 汎用 横並びリスト（画像左・本文右） */
.t-list { display: flex; flex-direction: column; gap: 12px; }
.t-list__item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; transition: box-shadow .2s, transform .2s; }
.t-list__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.t-list__thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; }
.t-list__body { display: flex; flex-direction: column; justify-content: center; }
.t-list__title { font-weight: 600; margin-bottom: 4px; }
.t-list__desc { margin: 0; color: var(--color-text-light); font-size: 14px; }
/* top2.css: トップ専用（t- prefix）。既存JSフック用のID/クラスは併記 */

/* ヒーロー */
.t-hero { position: relative; margin: var(--space-6) auto; margin-top: 3em;}
.t-hero__container { border-radius: var(--radius-lg); padding: clamp(12px,2vw,20px); background:
  radial-gradient(900px 500px at 10% 10%, rgba(15,23,42,0.04), transparent 60%),
  radial-gradient(900px 500px at 90% 20%, rgba(2,6,23,0.03), transparent 60%),
  linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center; min-height: clamp(220px, 32vw, 420px);
}
.t-hero__content { width: 100%; max-width: none; background: rgba(255,255,255,0.9); border: 1px solid #f0f4f4; border-radius: var(--radius-lg); padding: clamp(12px,2vw,16px); box-shadow: var(--shadow-sm); }
.t-hero__content--wide { width: 100%; }
.t-hero__content .hotel-form { display:grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 769px){
  .t-hero__content .hotel-form { grid-template-columns: 1fr auto; align-items: end; }
  .t-hero__content .hotel-form label { grid-column: 1 / -1; }
  .t-hero__content .hotel-form #hotel-input { grid-column: 1 / 2; }
  .t-hero__content .hotel-form #search-cafe-btn { grid-column: 2 / 3; height: 42px; }
}
.t-headline { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; }
.t-headline__icon { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.t-headline__catch { font-weight: 800; letter-spacing: .01em; font-size: clamp(18px,2.6vw,24px); color: var(--tone-heading-lg); }

/* 滞在場所検索UI（既存JSのセレクタ維持） */
.hotel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.hotel-tag { background:#fff; color: var(--text-strong); border:1.5px solid var(--color-border); border-radius:999px; font-weight:700; padding: .35em 1.1em; }
.hotel-tag:hover, .hotel-tag:focus { background: rgba(14,122,95,.08); color: var(--text-strong); border-color: #cbd5e1; }
.hotel-tag.selected, .hotel-tag:active { background: var(--color-primary); color:#fff; }

.hotel-form { display:flex; flex-direction:column; gap:10px; }
.hotel-form label { display:flex; justify-content:space-between; align-items:center; color: var(--text-strong); font-weight:700; }
.hotel-form input[type="text"] { padding: 10px 12px; border:1px solid var(--color-border); border-radius:10px; font-size:16px; color: var(--text-base); }
.hotel-form input[type="text"]::placeholder { color:#9aa9a6; }

.now-btn { background: transparent; color: var(--text-strong); border:1.5px solid var(--color-border); border-radius: 10px; padding: 6px 10px; }
.now-btn:hover, .now-btn:focus { background: var(--color-primary); color:#fff; border-color: var(--color-primary); }

#search-cafe-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; background: var(--color-primary); color:#fff; border:none; border-radius:12px; padding:.7em 1.8em; font-weight:800; box-shadow: var(--shadow-sm); }
#search-cafe-btn:hover, #search-cafe-btn:focus { background: var(--color-accent); }

/* セクション（HOT/ギャラリー/UGC/駅近/カテゴリ） */
.t-section { margin: var(--space-6) 0; }
.t-cards { display:flex; flex-direction:column; gap: var(--space-3); }
@media (min-width: 1100px){ .t-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.t-card { background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3); }
.t-card__thumb { width:100%; height: 160px; object-fit: cover; border-radius: 10px; }
.t-card__title { margin: 8px 0 4px; color: var(--tone-heading-sm); font-weight: 800; }
.t-card__desc { margin:0; color: var(--tone-body-md); font-size: 14px; line-height: 1.75; }
.t-badge--hot { display:inline-block; background:#fde047; color:#111827; border-radius:8px; padding:2px 8px; font-weight:800; font-size:.85em; }

/* ギャラリー */
.t-gallery { display:grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 1100px){ .t-gallery { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.t-gallery__item { position:relative; overflow:hidden; border-radius: .3em; border:1px solid var(--color-border); }
.t-gallery__img { width:100%; aspect-ratio: 1/1; object-fit: cover; display:block; }
.t-gallery__name {     position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* transform: translateX(-50%); */
  background: rgb(0 0 0 / 48%);
  color: #fff;
  /* border-radius: 999px; */
  padding: 4px 10px;
  font-weight: 800; 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

 /* セクションタイトル */
 .t-section__title { text-align: center; margin: 0 0 8px; font-size: 18px; font-weight: 900; color: var(--tone-heading-md); letter-spacing: .01em; }
 
 /* 駅近セクションのタイトルに上部マージンを追加 */
 .t-section--stations .t-section__title { margin-top: 5em; }

/* ------------------ Motion (scroll-in / hover) ------------------ */
.motion-fade, .motion-up, .motion-right { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; will-change: transform, opacity; }
.motion-right { transform: translateX(12px); }
.is-inview.motion-fade { opacity: 1; transform: none; }
.is-inview.motion-up { opacity: 1; transform: none; }
.is-inview.motion-right { opacity: 1; transform: none; }
.t-card { transition: transform .25s ease, box-shadow .25s ease; }
.t-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (prefers-reduced-motion: reduce) {
  .motion-fade, .motion-up, .motion-right { opacity: 1; transform: none; transition: none; }
  .t-card, .t-card:hover { transform: none; }
}

 /* ------------------ Rough Notation 吹き出し ------------------ */

/* ------------------ 手描き下線（t-underline） ------------------ */
.t-underline { position: relative; display: inline-block; }
.t-underline::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px; height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><path d='M0 6 C10 0 30 12 40 6' fill='none' stroke='%23f2b705' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 40px 100%;
  pointer-events: none;
}

/* 駅タグ・カテゴリタグ */
.t-tags { display:flex; flex-wrap:wrap; gap:8px; }
.t-tag { background:#fff; color: var(--text-strong); border:1.5px solid var(--color-border); border-radius:999px; font-weight:700; padding:.35em 1.1em; }
.t-tag:hover { background: rgba(20,83,45,.08); border-color: #cbd5e1; }

/* SNSリンク装飾 */
.t-sns { justify-content:center; gap: 14px; }
.t-sns li { list-style: none; }
.t-sns a { display:inline-flex; align-items:center; justify-content:center; width: 40px; height: 40px; border-radius: 10px; background:#fff; border:1px solid var(--color-border); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.t-sns a:hover, .t-sns a:focus { background: #0f172a; color:#fff; border-color:#0f172a; }
.t-sns i { font-size: 18px; }

 /* Rough Notation 吹き出しスタイル */
 .t-headline { position: relative; }
 .t-section__title { position: relative; }
 
 .t-bubble { 
   position: absolute; 
   top: -2.5em; 
   left: 50%; 
   transform: translateX(-50%);
   background: #fffdfa; 
   color: var(--tone-heading-sm); 
   font-weight: 900; 
   font-size: 16px; 
   padding: 10px 16px; 
   border-radius: 10px; 
   z-index: 10; 
   line-height: 1.2; 
   white-space: nowrap; 
   transition: transform 0.2s ease;
 }