/* 3カラム修理CTA用のCSS */
.repair-cta-container {
  margin: 2em 0;
  padding: 1.5em;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.repair-cta-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 1em;
  padding-bottom: 0.8em;
  border-bottom: 1px dashed #ddd;
  position: relative;
}

.repair-cta-title::before {
  content: "▷";
  color: #2589d0;
  margin-right: 5px;
}

.repair-cta-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.repair-cta-column {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 1em;
  border-radius: 6px;
}

/* 電話カラム */
.repair-cta-tel {
  background: #f5f5f5;
}

.repair-cta-tel-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.repair-cta-tel-number {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.repair-cta-tel-number::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56a.977.977 0 00-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66a.98.98 0 00.24-1.02c-.36-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>') center/contain no-repeat;
}

/* LINEカラム */
.repair-cta-line {
  background: #E2F7D6;
}

.repair-cta-line a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06C755;
  color: white !important;
  text-decoration: none;
  padding: 0.8em 1em;
  border-radius: 4px;
  font-weight: bold;
  transition: opacity 0.3s;
  gap: 5px;
}

.repair-cta-line a:hover {
  opacity: 0.9;
}

.repair-cta-line a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%23ffffff" d="M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23C6,39.09,8.91,42,12.5,42z"></path><path fill="%2306C755" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"></path></svg>') center/contain no-repeat;
}

/* メールカラム */
.repair-cta-mail {
  background: #E6F4FF;
}

.repair-cta-mail a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a8cff;
  color: white !important;
  text-decoration: none;
  padding: 0.8em 1em;
  border-radius: 4px;
  font-weight: bold;
  transition: opacity 0.3s;
  gap: 5px;
}

@media screen and (min-width: 767px) {
  .repair-cta-mail a {
    font-size: 12px;
  }
}

.repair-cta-mail a:hover {
  opacity: 0.9;
}

.repair-cta-mail a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>') center/contain no-repeat;
}

/* レスポンシブデザイン */
@media (max-width: 767px) {
  .repair-cta-columns {
    flex-direction: column;
  }
  
  .repair-cta-column {
    width: 100%;
  }
}