@charset "UTF-8";

/* =========================================================
   共通CTA「インバウンド集客は我々にお任せください」
   template-parts/cta-contact.php 用。会社概要 / NEWS一覧 で共用。
   Figma: link シンボル（h2: Yuji Syuku 42 / button: 28px）
   ※ Figma指定フォント "Isego" は未導入のため Noto Sans JP で代替。
========================================================= */

.cta-contact {
  background-color: #fff;
}
.cta-contact__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px 0 80px; /* PC: 左右paddingなし */
}
.cta-contact__title {
  font-family: "Yuji Syuku", serif;
  font-size: 42px;
  line-height: 1.62;
  color: #333;
  text-align: center;
  margin-bottom: 60px;
  font-feature-settings: "palt" 1;
}
.cta-contact__btns {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  padding: 30px 0; /* 上下30px。ディバイダーはこの高さまで伸びる */
}
.cta-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 60px;
  padding: 40px 20px;
  color: #fff;
  font-family: "Yuji Syuku";
  font-size: 28px;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease;
}
.cta-contact__btn--primary {
  flex: 0 0 610px;
  background-color: #c11f1f;
}
.cta-contact__btn--dark {
  flex: 0 0 240px;
  background-color: #1a1a1a;
}
/* ボタン間のディバイダー。負マージンで btns の上下padding 分まで伸ばし、
   ディバイダー高さ = cta-contact__btns の高さ にする */
.cta-contact__divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin: -30px 0;
  background-color: #e2e8f0;
}
.cta-contact__btn:hover {
  opacity: 0.85;
}
.cta-contact__btn-txt {
  display: inline-block;
}
.cta-contact__btn-icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.cta-contact__btn-icon img {
  display: block;
  width: 42px;
  height: 42px;
}

/* ---------- SP ---------- */
@media (max-width: 750px) {
  .cta-contact__inner {
    padding: 80px 20px 60px;
  }
  .cta-contact__title {
    font-size: min(calc(48/750*100vw),48px);
    line-height: 1.6;
    margin-bottom: calc(30/375*100%);
  }
  .cta-contact__btns {
    flex-direction: column;
    align-items: stretch;
    gap: 4.27vw; /* ≒16px@375。ボタン間余白も可変 */
    padding: 0;
  }
  /* PCのディバイダーはSPでは非表示 */
  .cta-contact__divider {
    display: none;
  }
  /* SP: ボタンは全幅・高さは内容に追従 */
  .cta-contact__btn--primary,
  .cta-contact__btn--dark {
    flex: 0 0 auto;
  }
  /* SP: テキストは中央寄せ・矢印アイコンは右端に絶対配置（固定位置）。
     ボタン高さを指定して縦中央。右paddingを大きめに取り、中央テキストがアイコンに被らないように。
     ※Figma の当該SP書き出しはアイコン無し・完全中央。アイコン不要なら .cta-contact__btn-icon を display:none に。 */
  .cta-contact__btn {
    justify-content: center;
    gap: 0;
    width: 100%;
    height: min(168px, calc(168/750*100vw)); /* @2x160=@375 80px・調整可 */
    /* 右大きめ=アイコン領域を確保 / 左 calc(52/750)=@375 26px */
    padding: 0 calc(150/750*100%) 0 calc(20/750*100%);
    font-size: min(40px, calc(40/750*100vw));
  }
  .cta-contact__btn-icon {
    position: absolute;
    top: 50%;
    right: calc(40/750*100%); /* @375 20px・調整可 */
    transform: translateY(-50%);
  }
  .cta-contact__btn-icon img {
    width: min(84px, calc(84/750*100vw));
    height: min(84px, calc(84/750*100vw));
  }
}