/* components/footer.css: お問い合わせCTA（.contact）とフッター。TOP・下層共通。
   PCは1366px幅基準の vw で絶対配置し、後半にSP指定とホバー演出をまとめている。下層では pages/sub-common.css が一部を上書きする。 */
.contact {
  height: 79.135vw;
}

.contact__footer-bg {
  top: 22.84vw;
}

.contact__card,
.contact__marquee {
  top: 0;
  height: 22.84vw;
}

.contact__en {
  top: 4.9vw;
}

.contact__title {
  top: 7.2vw;
  line-height: 5.2vw;
}

.contact-btn {
  top: 13.84vw;
  width: 20.86vw;
  height: 4.1vw;
}

.contact-btn--doc {
  left: 15.6vw;
}

.contact-btn--mail {
  left: 38.58vw;
}

.contact-btn__label {
  top: 1.23vw;
  font-size: clamp(12px, 1.1vw, 21px);
}

.contact-btn__icon {
  left: 4.1vw;
}

.contact-btn__icon--doc {
  top: 1.14vw;
  width: 1.35vw;
  height: 1.3vw;
}

.contact-btn__icon--mail {
  top: 1.38vw;
  width: 1.15vw;
  height: .93vw;
}

.contact-btn--doc .contact-btn__label {
  left: 6.5vw;
  width: 9.1vw;
}

.contact-btn--mail .contact-btn__label {
  left: 6.65vw;
  width: 9.7vw;
}

.footer__logo {
  top: 28.2vw;
}

.footer__address {
  top: 33vw;
}

.footer__badges {
  position: absolute;
  left: 4.32vw;
  top: 38.78vw;
  display: flex;
  gap: 1.54vw;
}

.footer__badges img {
  display: block;
  width: 16.84vw;
  height: 7.32vw;
  object-fit: contain;
  background: #fff;
  /* 画像に焼き込まれていた角を除いてあるので、角丸（デザイン指定3px）はCSSで付ける */
  border-radius: 0.2196vw;
}

.footer__social {
  position: absolute;
  left: 4.32vw;
  top: 47.98vw;
  display: flex;
  align-items: center;
  gap: 1.32vw;
  letter-spacing: .04em;
}

.footer__social ul {
  display: flex;
  gap: .73vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: grid;
  width: 2.78vw;
  height: 2.78vw;
  border: 1px solid #fff;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  font-size: 1.2vw;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.footer__banner {
  left: 50.3vw;
  top: 38.78vw;
  width: 45.24vw;
  height: 14.64vw;
}

.footer__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-menu {
  top: 27.75vw;
  width: 18.52vw;
}

.footer-menu--primary {
  left: 50vw;
}

.footer-menu--secondary {
  left: 68.52vw;
}

.footer-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ●とテキストは position の座標合わせだと行の高さとテキストの行送りの中心がずれるため、li を flex にして中央揃えする */
.footer-menu__list li {
  display: flex;
  align-items: center;
  gap: .59vw;
  height: 3.29vw;
}

.footer-menu__list li::before {
  content: '';
  flex-shrink: 0;
  width: .73vw;
  height: .73vw;
  border-radius: 50%;
  background: #25bbd7;
}

.footer-menu__link {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 1.464vw, 28px);
  line-height: 2.34vw;
  letter-spacing: .04em;
}

.footer__rule {
  top: 55.27vw;
}

.footer__policy,
.footer__copy {
  top: 56.8vw;
  font-size: clamp(9px, .95vw, 18px);
}

/* CONTACT＋フッター。座標はデザインのフレーム相対の実値を vw に変換している。
   重なり順: 0 背景テクスチャ / 1 グリッド罫・淡い円 / 2 フッター濃紺円 / 3 白カード / 4 流れる帯（カード形状でクリップ）/ 5 CTA / 6 フッター内容 */
.contact {
  position: relative;
  width: 100%;
  height: 71.6691vw;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
  margin-top: 8.7847vw;
}

/* 背景テクスチャはページ通しのタイルなので、このセクションの開始位置に合わせて上へずらしている */
.contact__bg {
  z-index: 0;
}

/* フッターの濃紺は大きな真円の上部を見せている */
.contact__footer-bg {
  position: absolute;
  left: -26.6127vw;
  z-index: 2;
  width: 153.1676vw;
  height: 153.1676vw;
  border-radius: 50%;
  background: var(--c-navy);
  top: 6.393vw;
}

/* CTAの白カード（右上・左下だけ角丸、影なし） */
.contact__card {
  position: absolute;
  left: 4.3192vw;
  top: 2.5864vw;
  z-index: 3;
  width: 91.3616vw;
  height: 30.3807vw;
  border-radius: 0 8.7848vw 0 8.7848vw;
  background: var(--c-white);
}

.contact__marquee {
  left: 4.3192vw;
  top: 2.459vw;
  z-index: 4;
  height: 30.3807vw;
  border-radius: 0 8.7848vw 0 8.7848vw;
}

/* 色は rgba(153,153,153,0.1) のまま使う。白地に合成した #f4f4f4 をベタで指定してはいけない
   （この文字は白カードと濃紺フッターの両方にまたがるため、濃紺の上で白く光ってしまう） */
.contact__marquee-text {
  padding-right: 4.3924vw;
  color: rgba(153, 153, 153, 0.1);
  line-height: 14.0556vw;
  letter-spacing: 0;
  white-space: nowrap;
}

.contact__cta {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* top はデザインのベースライン位置から行ボックス上端に換算した値（以下の文字の top も同じ考え方） */
.contact__en {
  position: absolute;
  left: 17.0205vw;
  top: 8.4429vw;
  width: 65.959vw;
  color: var(--c-cyan);
  line-height: 2.8111vw;
  letter-spacing: 0.0878vw;
  text-align: center;
}

/* 見出しは手書き風ロゴタイプのSVG（グラデーションはSVG内に焼き込み済み）。左寄せ・行ボックス内で縦中央に置く */
.contact__title {
  position: absolute;
  left: 17.0205vw;
  top: 10.4195vw;
  width: 65.959vw;
  height: 9.8389vw;
  display: flex;
  align-items: center;
}

/* ボタン 380×75・角丸60 */
.contact-btn {
  position: absolute;
  top: 21.0344vw;
  width: 27.8184vw;
  height: 5.4905vw;
  border-radius: 60px;
}

.contact-btn__icon {
  position: absolute;
  left: 6.5886vw;
}

.contact-btn__label {
  position: absolute;
  top: 1.8302vw;
  line-height: 1.757vw;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

/* 白地＋1pxのグラデ枠（padding-box / border-box の2層背景で描く） */
.contact-btn--doc {
  left: 20.7906vw;
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%) border-box;
}

.contact-btn__icon--doc {
  top: 1.8302vw;
  width: 1.9034vw;
  height: 1.8302vw;
}

.contact-btn--doc .contact-btn__label {
  left: 9.5168vw;
  width: 11.713vw;
}

.contact-btn__label--grad {
  background: linear-gradient(275deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.contact-btn--mail {
  left: 51.3909vw;
  background: linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
}

.contact-btn__icon--mail {
  top: 2.1266vw;
  width: 1.5469vw;
  height: 1.2372vw;
}

.contact-btn--mail .contact-btn__label {
  left: 9.1603vw;
  width: 12.2255vw;
  color: var(--c-white);
}

/* フッター（濃紺円の上に乗る内容） */
.footer {
  position: absolute;
  inset: 0;
  z-index: 6;
  color: var(--c-white);
  pointer-events: none;
}

.footer__logo {
  position: absolute;
  left: 4.3192vw;
  top: 39.6047vw;
  width: 17.3463vw;
  height: 4.3924vw;
}

.footer__address {
  position: absolute;
  left: 4.3287vw;
  font-weight: 700;
  font-size: clamp(11.99px, 1.1713vw, 22.49px);
  line-height: 2.3426vw;
  letter-spacing: 0.0586vw;
  white-space: nowrap;
  top: 44.1vw;
}

/* 医療DX講座バナー（文字は画像に焼き込み済み） */
.footer__banner {
  position: absolute;
  left: 4.3287vw;
  top: 50.0732vw;
  width: 29.429vw;
  height: 9.0139vw;
  transition: opacity 0.4s var(--ease);
}

.footer__banner img {
  width: 29.429vw;
  height: 9.0139vw;
}

.footer__banner:hover,
.footer__banner:focus-visible {
  opacity: 0.6;
}

/* フッターメニュー2列 */
.footer-menu {
  position: absolute;
  top: 40.0439vw;
  width: 23.1332vw;
}

/* ホバーは下線ではなくフェードで表現する */
.footer-menu__link:hover,
.footer-menu__link:focus-visible {
  opacity: 0.6;
}

.footer__rule {
  position: absolute;
  left: 4.3924vw;
  width: 91.2152vw;
  height: 1px;
  background: var(--c-white);
  top: 73.65vw;
}

.footer__policy {
  position: absolute;
  left: 4.3924vw;
  top: 68.1054vw;
  font-weight: 700;
  font-size: clamp(10.49px, 1.0249vw, 19.68px);
  line-height: 1.6398vw;
  letter-spacing: 0.0512vw;
  white-space: nowrap;
}

.footer__policy-link {
  transition: color 0.4s var(--ease);
}

.footer__policy-link:hover,
.footer__policy-link:focus-visible {
  color: inherit;
  opacity: .7;
}

/* 右揃え。幅を持たせた箱の右端をデザインの右端位置に合わせている */
.footer__copy {
  position: absolute;
  left: 84.5908vw;
  top: 68.1786vw;
  width: 11.0542vw;
  line-height: 1.6398vw;
  letter-spacing: 0.0512vw;
  text-align: right;
  white-space: nowrap;
}

.contact-btn {
  overflow: hidden;
}

.contact-btn:hover,
.contact-btn:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .footer-menu__link,
  .footer__banner,
  .footer__policy-link {
    transition-duration: 0.1s;
  }

  .contact-btn:hover,
  .contact-btn:focus-visible {
    transform: none;
  }
}

@media (max-width: 767px) {
  .contact {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .contact__bg,
  .contact__footer-bg,
  .contact__card,
  .contact__marquee {
    display: none;
  }

  .contact__en {
    margin: 0 0 2.6667vw;
    line-height: 1.4;
    letter-spacing: .05em;
  }

  .contact {
    /* SPも背景は透過にして、ページ通しの WebGL キャンバスをそのまま見せる（白地を敷くとセクションごとに背景が切り替わって見える） */
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background: transparent;
  }

  .contact__cta {
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 左右に余白を付けて紺を覗かせ、角丸で「紺の上に浮く白カード」に見せる */
    margin: 0 5.3333vw;
    padding: 10.6667vw 4.8vw;
    border-radius: 0 12vw 0 12vw;
    background: #fff;
    color: var(--c-navy);
  }

  .contact__en {
    position: static;
    left: auto;
    top: auto;
    width: auto;
  }

  .contact__title {
    position: static;
    left: auto;
    top: auto;
  }

  .contact__en {
    text-align: center;
  }

  .contact__title {
    height: auto;
  }

  .contact-btn,
  .contact-btn--doc,
  .contact-btn--mail {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 30px);
    height: 15.4667vw;
  }

  .contact-btn + .contact-btn {
    margin-top: 4vw;
  }

  .contact-btn__icon,
  .contact-btn__icon--doc,
  .contact-btn__icon--mail,
  .contact-btn--doc .contact-btn__label,
  .contact-btn--mail .contact-btn__label {
    position: static;
    width: auto;
    height: auto;
  }

  .contact-btn__icon {
    margin-right: 3.2vw;
    display: none;
  }

  .contact-btn__icon--doc {
    width: 5.0667vw;
  }

  .contact-btn__icon--mail {
    width: 4.8vw;
  }

  .contact-btn__label {
    line-height: 1;
  }

  .footer {
    position: relative;
    inset: auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 16vw 4.8vw 10.6667vw;
    color: var(--c-white);
  }

  .footer__logo,
  .footer__address,
  .footer__badges,
  .footer__social,
  .footer__banner,
  .footer-menu,
  .footer__rule,
  .footer__policy,
  .footer__copy {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
  }

  .footer__logo {
    display: block;
    width: 46vw;
    margin-bottom: 6.4vw;
  }

  .footer__logo-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .footer__address {
    letter-spacing: .03em;
    left: 20px;
    top: 456px;
    white-space: normal;
    font-size: 13px;
    line-height: 1.8;
  }

  .footer__badges {
    order: 2;
    margin-top: 10.6667vw;
  }

  .footer__badges img {
    width: 100%;
    height: auto;
    border-radius: 0.8vw;
  }

  /* 中のラベル・アイコンは % 指定なので、画像ではなくコンテナを72vwにしてその幅に追従させる */
  .footer__social {
    order: 3;
    margin-top: 8vw;
    width: 72vw;
    max-width: 100%;
    display: flex;
    align-items: center;
  }

  .footer__banner {
    order: 4;
    margin-top: 10.6667vw;
  }

  .footer__banner img {
    width: 100%;
    height: auto;
  }

  /* 「会社概要・事業内容・実績紹介」を左、「お知らせ・IR情報・お問い合わせ」を右の2列にする。
     .footer-menu に order を付けるだけでは縦積みになるため、ラッパー .footer-menu-row で横並びにする */
  .footer-menu-row {
    order: 5;
    display: flex;
    gap: 6.4vw;
    margin-top: 10.6667vw;
  }

  .footer-menu {
    flex: 1 1 0;
  }

  .footer-menu__list {
    display: flex;
    flex-direction: column;
    gap: 4vw;
    margin: 0;
    padding: 0;
  }

  .footer-menu__link {
    font-size: 4vw;
    line-height: 1.5;
  }

  .footer__rule {
    order: 6;
    margin-top: 10.6667vw;
    background: rgba(255,255,255,.55);
    left: 20px;
    top: 1000px;
    width: calc(100% - 40px);
  }

  .footer__policy {
    order: 7;
    margin-top: 5.3333vw;
    font-size: 3.2vw;
    line-height: 2;
    letter-spacing: .03em;
    white-space: normal;
  }

  .footer__copy {
    order: 8;
    margin-top: 5.3333vw;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
  }
}

/* <footer> は .contact 全体を覆う absolute（z-index:6）で CTA（z-index:5）より上にあるため、
   footer 自体は pointer-events:none にし、リンクだけ auto に戻す（透明な余白がCTAボタンのクリックやhoverを奪わないように）。
   強制hover（CDP の forcePseudoState）の検証では当たり判定を無視するので、この種の問題は elementFromPoint で確認すること */
.footer a {
  pointer-events: auto;
}

.contact {
  height: 79.135vw;
}

.contact__card,
.contact__marquee {
  top: .049vw;
  height: 30.38vw;
}

.contact__en {
  top: 6.64vw;
}

.contact__title {
  top: 7.88vw;
}

.contact-btn {
  top: 18.5vw;
  width: 27.82vw;
  height: 5.49vw;
}

.contact-btn--doc {
  left: 20.79vw;
}

.contact-btn--mail {
  left: 51.39vw;
}

.contact-btn__label {
  top: 1.83vw;
}

.contact-btn__icon {
  left: 6.59vw;
}

.contact-btn__icon--doc {
  top: 1.83vw;
  width: 1.9vw;
  height: 1.83vw;
}

.contact-btn__icon--mail {
  top: 2.13vw;
  width: 1.55vw;
  height: 1.24vw;
}

.contact-btn--doc .contact-btn__label {
  left: 9.52vw;
  width: 11.71vw;
}

.contact-btn--mail .contact-btn__label {
  left: 9.16vw;
  width: 12.23vw;
}

.footer__logo {
  left: 4.32vw;
  top: 37.04vw;
  width: 18.3vw;
  height: 4.39vw;
}

.footer__logo-image {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__badges {
  position: absolute;
  left: 4.33vw;
  top: 51.76vw;
}

.footer__social {
  position: absolute;
  left: 4.47vw;
  top: 62.74vw;
  width: 28.4vw;
  height: 3.66vw;
  display: flex;
  align-items: center;
}

/* SNSは「FOLLOW ME」ラベルとアイコン4枚を個別画像にし、各 <a> が自分のアイコンだけを包む構造。
   （1枚画像を等分すると、hoverが全体に連動し、クリック範囲も見た目とずれる）幅は % 指定でPC・SPのコンテナ幅に追従する */
.footer__social-label {
  display: block;
  flex: 0 0 31.443%;
  width: 31.443%;
  height: auto;
}

.footer__social-list {
  display: flex;
  flex: 1 1 68.557%;
  width: 68.557%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__social-list li {
  list-style: none;
}

.footer__social-list li:nth-child(1) {
  flex: 0 0 26.692%;
}

/* Instagram 71px */
.footer__social-list li:nth-child(2) {
  flex: 0 0 25.188%;
}

/* LINE 67px */
.footer__social-list li:nth-child(3) {
  flex: 0 0 25.188%;
}

/* X 67px */
.footer__social-list li:nth-child(4) {
  flex: 0 0 22.932%;
}

/* LinkedIn 61px */
/* 上部の .footer__social a（固定サイズ）に確実に勝つよう、セレクタをネストして詳細度を上げている */
.footer__social .footer__social-list .footer__social-link {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
}

.footer__social-link img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__banner {
  left: 50.3vw;
  top: 51.76vw;
  width: 45.24vw;
  height: 14.64vw;
}

.footer__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-menu {
  top: 36.97vw;
  width: 18.52vw;
}

.footer-menu--primary {
  left: 50vw;
}

.footer-menu--secondary {
  left: 68.52vw;
}

.footer-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu__link {
  display: block;
  color: #fff;
  font-size: clamp(14px, 1.464vw, 28px);
  line-height: 2.34vw;
  letter-spacing: .04em;
}

.footer__policy {
  top: 75.77vw;
  font-size: clamp(10px, 1.025vw, 20px);
}

.footer__copy {
  top: 75.77vw;
}

@media (max-width: 767px) {
  .contact {
    margin-top: 120px;
    height: 1150px;
  }

  .contact__card {
    left: 20px;
    width: calc(100% - 40px);
    height: 330px;
    border-radius: 0 56px 0 56px;
  }

  .contact__marquee {
    left: 20px;
    height: 330px;
    border-radius: 0 56px 0 56px;
  }

  .contact__footer-bg {
    top: 330px;
    width: 180vw;
    height: 180vw;
    left: -40vw;
  }

  .contact__en {
    top: 68px;
    left: 20px;
    width: calc(100% - 40px);
  }

  .contact__title {
    top: 104px;
    left: 20px;
  }

  .contact-btn {
    top: 220px;
    width: calc(50% - 28px);
    height: 50px;
  }

  .contact-btn--doc {
    left: 20px;
  }

  .contact-btn--mail {
    left: calc(50% + 8px);
  }

  .contact-btn__label {
    top: 15px;
    left: 0;
    width: 100%;
  }

  .contact-btn--doc .contact-btn__label,
  .contact-btn--mail .contact-btn__label {
    top: 15px;
    left: 0;
    width: 100%;
    font-size: 12px;
  }

  .footer__logo {
    left: 20px;
    top: 390px;
    width: 200px;
    height: 48px;
  }

  .footer__logo-image {
    width: 200px;
    height: 48px;
  }

  .footer__badges {
    left: 20px;
    top: 520px;
  }

  .footer__social {
    left: 20px;
    top: 615px;
    width: 291px;
    height: 38px;
  }

  .footer-menu {
    top: 690px;
    width: calc(50% - 24px);
  }

  .footer-menu--primary {
    left: 20px;
  }

  .footer-menu--secondary {
    left: calc(50% + 4px);
  }

  .footer-menu__list li::before {
    width: 8px;
    height: 8px;
  }

  .footer-menu__link {
    font-size: 16px;
    line-height: 32px;
  }

  .footer__banner {
    left: 20px;
    top: 825px;
    width: calc(100% - 40px);
    height: auto;
  }

  .footer__banner img {
    height: auto;
  }

  .footer__policy {
    left: 20px;
    top: 1020px;
    width: calc(100% - 40px);
    font-size: 10px;
    white-space: normal;
  }

  .footer__copy {
    left: 20px;
    top: 1090px;
    width: calc(100% - 40px);
    text-align: left;
  }

  .contact {
    margin-top: 0;
  }

  .contact {
    height: auto;
  }

  .contact__en {
    position: static;
    top: auto;
    left: auto;
    width: auto;
  }

  .contact__title {
    position: static;
    top: auto;
    left: auto;
  }

  .contact__cta .contact-btn {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 30px);
    height: 15.4667vw;
  }

  .contact__cta .contact-btn__icon {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin-right: 3.2vw;
  }

  .contact__cta .contact-btn__icon--doc {
    width: 5.0667vw;
  }

  .contact__cta .contact-btn__icon--mail {
    width: 4.8vw;
  }

  .contact__cta .contact-btn__label,
  .contact__cta .contact-btn--doc .contact-btn__label,
  .contact__cta .contact-btn--mail .contact-btn__label {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    font-size: 4.2667vw;
    line-height: 1;
  }

  .footer__logo,
  .footer__address,
  .footer__badges,
  .footer__social,
  .footer__banner,
  .footer-menu,
  .footer__rule,
  .footer__policy,
  .footer__copy {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
  }

  .footer__logo {
    width: 46vw;
  }

  .footer__logo-image {
    width: 100%;
    height: auto;
  }

  /* 中のラベル・アイコンは % 指定なので、コンテナを72vwにしてその幅に追従させる。
     display:flex は直前のリセットに上書きされないよう、ここでも明示している */
  .footer__social {
    position: relative;
    width: 72vw;
    height: auto;
    display: flex;
    align-items: center;
  }

  .footer__badges {
    position: relative;
    width: auto;
    height: auto;
  }

  .footer__banner {
    width: auto;
    height: auto;
  }

  .footer-menu {
    width: auto;
  }

  .footer-menu__list li::before {
    width: 2.1333vw;
    height: 2.1333vw;
  }

  .footer-menu__link {
    font-size: 4vw;
    line-height: 1.5;
  }

  .footer__rule {
    width: auto;
  }

  .footer__policy {
    width: auto;
    font-size: 3.2vw;
  }

  .footer__copy {
    width: auto;
  }
}

/* CTAボタン2本はホバーで見た目を入れ替える（白地＋グラデ枠＋グラデ文字 ⇔ グラデ塗り＋白文字）。
   アイコンはSVGに色が焼き込まれていてCSSで反転できないため、白版とグラデ版の画像を表示切替する */
/* 塗りは scaleX ではなく clip-path（inset）で左から広げる（scaleX だと ::before の枠線まで伸び縮みして線の太さが崩れる） */
.contact-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .4s var(--ease);
}

/* アイコン・ラベルは absolute で上下中央に配置しているため、position:relative は指定せず z-index だけで ::before より手前に出す */
.contact-btn__icon,
.contact-btn__label {
  z-index: 1;
}

.contact-btn--doc::before {
  background: linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
}

.contact-btn--doc:hover::before,
.contact-btn--doc:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

/* 両ボタンとも塗りは左から現れる向きにそろえる */
.contact-btn--mail::before {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(270deg, #041a44 0%, #435a86 46%, #25bbd7 100%) border-box;
}

.contact-btn--mail:hover::before,
.contact-btn--mail:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

/* ホバー用のアイコンに切り替える。SP側の .contact__cta .contact-btn__icon{display:block} に確実に後勝ちさせるため詳細度をそろえている */
.contact__cta .contact-btn__icon--hover,
.contact-btn--doc:hover .contact-btn__icon--base,
.contact-btn--doc:focus-visible .contact-btn__icon--base {
  display: none;
}

.contact-btn--doc:hover .contact-btn__icon--hover,
.contact-btn--doc:focus-visible .contact-btn__icon--hover {
  display: block;
}

.contact-btn--mail:hover .contact-btn__icon--base,
.contact-btn--mail:focus-visible .contact-btn__icon--base {
  display: none;
}

.contact-btn--mail:hover .contact-btn__icon--hover,
.contact-btn--mail:focus-visible .contact-btn__icon--hover {
  display: block;
}

.contact-btn--doc:hover .contact-btn__label--grad,
.contact-btn--doc:focus-visible .contact-btn__label--grad {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

.contact-btn--mail:hover .contact-btn__label,
.contact-btn--mail:focus-visible .contact-btn__label {
  background: linear-gradient(275deg, #041a44 0%, #435a86 46%, #25bbd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* フッターバッジ2件は画像を分割し、各 <a class="footer__badges-link"> が自分のバッジ画像だけを包む構造
   （1枚画像だと、別々のリンク先なのに hover が連動してしまう） */
.footer__badges-link {
  display: block;
}

.footer__badges-link img {
  transition: opacity .4s var(--ease);
}

.footer__badges-link:hover img,
.footer__badges-link:focus-visible img {
  opacity: .6;
}

/* SNSリンク・医療DX講座バナー・フッターバッジのホバーは、少し透過する opacity にそろえる */
.footer__social-link img {
  transition: opacity .4s var(--ease);
}

.footer__social-link:hover img,
.footer__social-link:focus-visible img {
  opacity: .6;
}

/* フッター最下部のポリシー系リンクもホバーは色ではなく opacity で表現する（他の指定の :hover の色変更を打ち消す） */
.footer__policy-link {
  transition: opacity .4s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .contact-btn::before,
  .footer__badges img,
  .footer__social img,
  .footer__policy-link {
    transition-duration: .1s;
  }
}

@media (max-width: 767px) {
  /* SPの紺背景は上部を丸い形にし、白カードの上部は前のセクション側に乗せる（TOP・下層で同じ指定） */
  .contact::before {
    content: "";
    position: absolute;
    top: 34vw;
    left: -30vw;
    right: -30vw;
    bottom: 0;
    z-index: 0;
    border-radius: 50% 50% 0 0 / 60vw 60vw 0 0;
    background: #041a44;
    pointer-events: none;
  }
}

/* SPの「FOLLOW ME」をアイコンの上下中央にそろえる。上部の .footer__social a の高さ指定が残るとリンク枠が潰れて画像がはみ出すため、
   高さを画像に追従させ、align-items:center で中央に置く */
.footer__social .footer__social-list .footer__social-link {
  height: auto;
}

.footer__social-list {
  align-items: center;
}

/* iOSのデータ検出が住所を自動リンク化して下線が付くのを防ぐ保険（本対策は header.php の format-detection の meta） */
.footer__address a {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}