/* 代理店ページ専用のスタイル */
root {
   --primary-color: #333;
   --border-color: #ddd;
   --spacing-unit: 20px;

.agency-content {
   padding: var(--spacing-unit);

/* 説明文セクション */
description-section {
   margin-bottom: calc(var(--spacing-unit) * 2);

.lead-text {
   line-height: 1.8;
   margin-bottom: var(--spacing-unit);

/* 代理店リストのスタイル */
agency-list {
   margin-bottom: calc(var(--spacing-unit) * 2);

.section-title {
   font-size: 1.5rem;
   margin-bottom: var(--spacing-unit);
   padding-bottom: 10px;
   border-bottom: 2px solid var(--primary-color);

.prefecture-group {
   margin-bottom: calc(var(--spacing-unit) * 2);

.region-title {
   font-size: 1.2rem;
   margin-bottom: var(--spacing-unit);
   padding: 5px 10px;
   background-color: #f5f5f5;

.agency-items {
   list-style: none;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--spacing-unit);

.agency-item {
   padding: var(--spacing-unit);
   border: 1px solid var(--border-color);
   border-radius: 4px;

.agency-name {
   font-size: 1.1rem;
   margin-bottom: 10px;
   color: var(--primary-color);

.agency-address,
agency-contact {
   font-size: 0.9rem;
   margin-bottom: 5px;
   line-height: 1.6;

/* お問い合わせセクション */
contact-section {
   text-align: center;
   margin-top: calc(var(--spacing-unit) * 2);
   padding: var(--spacing-unit);
   background-color: #f5f5f5;

.mail-link {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   text-decoration: none;
   color: var(--primary-color);

/* レスポンシブ対応 */
media (max-width: 768px) {
   .agency-items {
       grid-template-columns: 1fr;
   }