/* contact-contact-info02.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

.contact_info02 {
  background: url(images/contact-info02-bg-1.webp) no-repeat center top;
  padding: 28px 0;
  height: 400px;
  text-align: center;
}
@media (max-width: 767px) {
  .contact_info02 {
    height: 400px;
    padding: 16px 0;
  }
}
.contact_info02 .span_12 {
  float: none;
  width: 350px;
  margin: 0 auto !important;
  height: 350px;
  background: #fff;
  border-radius: 50%;
  padding: 40px 0 0;
}
@media (max-width: 767px) {
  .contact_info02 .span_12 {
    width: 300px;
    height: 300px;
    padding: 50px 20px 0;
  }
}
.contact_info02 .more a {
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  max-width: 100%;
  width: 160px;
  font-size: 0.875rem;
}
.contact_info02 .more a:after {
  border-color: var(--color-on-primary);
  right: 8%;
  transform-origin: bottom;
}
.contact_info02 .more a:hover {
  color: var(--color-text);
}
.contact_info02 .more a:hover:after {
  border-color: var(--color-text);
}

/* SM-FIX-20260819 */
/* 2026-08-19: 白い円が 350x350 固定で、中身が入り切らず文字が円の外（写真の上）へ
   はみ出して読めなくなっていた。円は最低サイズだけ決めて中身に追従させる。
   セクション側も height 固定をやめ、狭い画面では円を画面幅に合わせる。 */
.contact_info02{ height: auto; min-height: 400px; background-size: cover; background-position: center; }
.contact_info02 .span_12{
  height: auto; min-height: 350px; width: 350px; max-width: 88vw;
  padding: 2.6em 2em; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 479px){
  .contact_info02 .span_12{ width: min(320px, 88vw); padding: 2em 1.6em; }
}