/* エリア×業種ページ（functions-area-genre.php、2026-10-21）
   数字・紹介文（一覧の上）と、体験談・よくある質問・ほかの業種（一覧の下） */

/* ① 数字：1行の小さなチップ（スマホで一覧を押し下げないように。2026-10-22 大友さん依頼） */
.ag-num { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.ag-num li { padding: 4px 12px; border: 1px solid #f3dcd3; border-radius: 999px; background: #fff; color: #80696a; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.ag-num b { margin: 0 1px 0 3px; color: #f0457a; font-size: 14px; font-weight: 700; }

/* ② 紹介文（2行だけ見せて、続きは開く） */
.ag-intro { margin: 0 0 20px; padding: 16px; border: 1px solid #f3dcd3; border-radius: 12px; background: #fff; }
.ag-intro__lb { margin: 0 0 4px; color: #f0457a; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.ag-intro__h { margin: 0 0 8px; padding: 0; border: 0; background: none; color: #2e211f; font-size: 16px; line-height: 1.5; }
.ag-intro__h::before, .ag-intro__h::after { content: none; }
.ag-intro__body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #2e211f; font-size: 14px; line-height: 1.8; }
.ag-intro__body p { margin: 0 0 .8em; }
.ag-intro__body.is-open { display: block; }
.ag-intro__more { display: block; width: 100%; margin-top: 10px; padding: 9px 0; border: 1px solid #f6b8c6; border-radius: 999px; background: #fff; color: #f0457a; font-size: 13px; font-weight: 700; cursor: pointer; }

/* 一覧の下 */
.ag-bottom { margin-top: 32px; }
.ag-sec { margin: 0 0 32px; }
.ag-h { margin: 0 0 12px; padding: 0 0 0 10px; border: 0; border-left: 4px solid #f0457a; background: none; color: #2e211f; font-size: 18px; line-height: 1.5; }
.ag-h::before, .ag-h::after { content: none; }

/* ③ 体験談（1本目を大きく） */
.ag-iv__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-iv__c { display: block; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1px 4px rgba(46, 33, 31, .12); color: #2e211f; text-decoration: none; }
.ag-iv__c.is-big { grid-column: 1 / -1; }
.ag-iv__im { display: block; aspect-ratio: 16 / 9; background: #f5eeeb; }
.ag-iv__im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ag-iv__t { display: block; padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.5; }
.ag-iv__c.is-big .ag-iv__t { font-size: 15px; }
.ag-more { display: block; margin-top: 12px; color: #f0457a; font-size: 14px; font-weight: 700; text-align: right; text-decoration: none; }

/* ⑤ ほかの業種・近くのエリア：左右2列のリスト（左オレンジ・右ピンク。大友さん「リンクD-3」） */
.ag-links__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ag-links__col { overflow: hidden; border: 1px solid #f3dcd3; border-radius: 10px; background: #fff; }
.ag-links__col:only-child { grid-column: 1 / -1; }
.ag-links__h { margin: 0; padding: 8px 12px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; }
.ag-links__col.is-g .ag-links__h { background: #ff6a00; }
.ag-links__col.is-a .ag-links__h { background: #f0457a; }
.ag-links ul { margin: 0; padding: 0; list-style: none; }
.ag-links li + li { border-top: 1px solid #f5eeeb; }
.ag-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; color: #2e211f; font-size: 14px; text-decoration: none; }
.ag-links a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-links a b { flex-shrink: 0; color: #f0457a; font-size: 13px; font-weight: 700; }
.ag-links__col.is-g a b { color: #ff6a00; }
.ag-links a:hover { background: #fff6f2; }

/* 駅ページのカード：「〇〇駅から徒歩◯分」（functions-station.php） */
.card-walk { display: inline-block; margin: 4px 0 8px; padding: 3px 10px; border-radius: 999px; background: #fff0f4; color: #f0457a; font-size: 13px; font-weight: 700; line-height: 1.5; }
.card-walk::before { content: "🚶 "; }

@media (min-width: 751px) {
	.ag-iv__list { grid-template-columns: 2fr 1fr 1fr; align-items: start; }
	.ag-iv__c.is-big { grid-column: auto; }
}