/* ==========================================================================
   cv-buttons.css — CV ボタンの共通仕上げ（2026-09-16）
   - オンライン診療のボタンを他と同じくグラデーション（ブロンズ）に統一
   - CV ボタンのマウスオーバー時のアニメーション（浮き上がり・影・矢印の動き）
   読み込み順は最後（layout.css / mid-cta.css の指定を上書きする）
   ========================================================================== */

/* ---- オンライン診療ボタン：グラデーション統一 ---- */
.fixed-menu li.fm-online a,
.sp-fixedmenu li.fm-online a,
.btn-online a,
.mv-inner .inner-btn li.online a,
.mid-cta__btn.online a,
.online-badge__link a,
.sec-13 .sec-13__inner ul li.online a {
  color: #fff;
  background-color: transparent;
  background-image: linear-gradient(90deg, #b8823f 0%, #6e3d12 100%);
  border: 1px solid #6e3d12;
}
.fixed-menu li.fm-online a:hover,
.sp-fixedmenu li.fm-online a:hover,
.btn-online a:hover,
.mv-inner .inner-btn li.online a:hover,
.mid-cta__btn.online a:hover,
.online-badge__link a:hover,
.sec-13 .sec-13__inner ul li.online a:hover {
  background-color: transparent;
  background-image: linear-gradient(90deg, #6e3d12 0%, #b8823f 100%);
}
.fixed-menu li.fm-online a .fixed-tit,
.sp-fixedmenu li.fm-online a .fixed-tit,
.btn-online a span,
.mv-inner .inner-btn li.online a span,
.mid-cta__btn.online a span,
.sec-13 .sec-13__inner ul li.online a span {
  color: #fff;
}
/* アイコン・矢印を白に */
.fixed-menu li.fm-online a .fixed-icon img,
.sp-fixedmenu li.fm-online a .fixed-icon img {
  content: url(../../images/src/common/ico_online_w.svg);
}
.btn-online a span {
  background-image:
    url(../../images/src/common/ico_online_w.svg),
    url(../../images/src/common/ico_arrow.svg);
}
.mv-inner .inner-btn li.online a span,
.mid-cta__btn.online a span {
  background-image:
    url(../../images/src/common/ico_online_w.svg),
    url(../../images/src/common/ico_arrow.svg);
}
.online-badge__link a {
  background-image:
    url(../../images/src/common/ico_online_w.svg),
    linear-gradient(90deg, #b8823f 0%, #6e3d12 100%);
  background-repeat: no-repeat;
  background-position: 14px center, 0 0;
  background-size: 18px auto, 100% 100%;
}
.online-badge__link a:hover {
  background-image:
    url(../../images/src/common/ico_online_w.svg),
    linear-gradient(90deg, #6e3d12 0%, #b8823f 100%);
}
/* 末尾CTA（sec-13）の3つ目：電話の見た目を打ち消してボタン型に */
.sec-13 .sec-13__inner ul li.online a span,
.sec-13 .sec-13__inner ul li.web a span {
  padding: 0 36px 0 42px;
  font-size: 2.2rem;
  font-weight: 500;
  background-repeat: no-repeat;
  background-position:
    left center,
    right center;
  background-size:
    26px auto,
    27px auto;
}
.sec-13 .sec-13__inner ul li.online a span {
  background-image:
    url(../../images/src/common/ico_online_w.svg),
    url(../../images/src/common/ico_arrow.svg);
}
.sec-13 .sec-13__inner ul li.web a {
  background-color: transparent;
  background-image: linear-gradient(90deg, #d5ab1f 0%, #a07114);
  border: 1px solid #a17315;
}
.sec-13 .sec-13__inner ul li.web a:hover {
  opacity: 1;
  background-image: linear-gradient(90deg, #a07114 0%, #d5ab1f);
}
.sec-13 .sec-13__inner ul li.web a span {
  color: #fff;
  background-image:
    url(../../images/src/common/ico_calendar.svg),
    url(../../images/src/common/ico_arrow.svg);
  background-size:
    30px auto,
    27px auto;
}
.sec-13 .sec-13__inner ul li.online a:hover,
.sec-13 .sec-13__inner ul li.web a:hover {
  opacity: 1;
}
@media screen and (max-width: 1300px) {
  .sec-13 .sec-13__inner ul li.online a span,
  .sec-13 .sec-13__inner ul li.web a span {
    padding: 0 2.7692vw 0 3.23vw;
    font-size: 1.6923vw;
    background-size:
      2vw auto,
      2.07vw auto;
  }
  .sec-13 .sec-13__inner ul li.web a span {
    background-size:
      2.3vw auto,
      2.07vw auto;
  }
}
@media screen and (max-width: 767px) {
  .sec-13 .sec-13__inner ul li.online a span,
  .sec-13 .sec-13__inner ul li.web a span {
    padding: 0 9.661vw 0 9.1787vw;
    font-size: 4.9685vw;
    background-size:
      5.6vw auto,
      5.7971vw auto;
  }
  .sec-13 .sec-13__inner ul li.web a span {
    background-size:
      6vw auto,
      5.7971vw auto;
  }
}

/* ---- マウスオーバー時のアニメーション（CV ボタン共通） ---- */
.fixed-menu li a,
.sp-fixedmenu li a,
.btn-reserve a,
.btn-online a,
.mv-inner .inner-btn li a,
.mid-cta__btn a,
.sec-13 .sec-13__inner ul li a,
.online-badge__link a,
.sp-tel a {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
  will-change: transform;
}
/* 光が左から右へ流れる */
.btn-reserve a::after,
.btn-online a::after,
.mv-inner .inner-btn li a::after,
.mid-cta__btn a::after,
.sec-13 .sec-13__inner ul li a::after,
.online-badge__link a::after,
.fixed-menu li a::after,
.sp-fixedmenu li a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn-reserve a:hover,
.btn-online a:hover,
.mv-inner .inner-btn li a:hover,
.mid-cta__btn a:hover,
.sec-13 .sec-13__inner ul li a:hover,
.online-badge__link a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(80, 34, 8, 0.28);
}
.fixed-menu li a:hover,
.sp-fixedmenu li a:hover,
.sp-tel a:hover {
  filter: brightness(1.06);
}
.fixed-menu li a:hover {
  transform: translateX(-4px);
}
.btn-reserve a:hover::after,
.btn-online a:hover::after,
.mv-inner .inner-btn li a:hover::after,
.mid-cta__btn a:hover::after,
.sec-13 .sec-13__inner ul li a:hover::after,
.online-badge__link a:hover::after,
.fixed-menu li a:hover::after,
.sp-fixedmenu li a:hover::after {
  animation: cv-shine 0.7s ease-out forwards;
}
@keyframes cv-shine {
  from { left: -75%; }
  to { left: 130%; }
}
/* 矢印（span の右側の背景画像）を右へ動かす：span 自体を少し右へ */
.btn-reserve a span,
.btn-online a span,
.mv-inner .inner-btn li a span,
.mid-cta__btn a span,
.sec-13 .sec-13__inner ul li a span {
  transition: transform 0.25s ease;
}
.btn-reserve a:hover span,
.btn-online a:hover span,
.mv-inner .inner-btn li a:hover span,
.mid-cta__btn a:hover span,
.sec-13 .sec-13__inner ul li a:hover span {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .btn-reserve a, .btn-online a, .mv-inner .inner-btn li a, .mid-cta__btn a,
  .sec-13 .sec-13__inner ul li a, .online-badge__link a, .fixed-menu li a, .sp-fixedmenu li a, .sp-tel a,
  .btn-reserve a span, .btn-online a span, .mv-inner .inner-btn li a span, .mid-cta__btn a span, .sec-13 .sec-13__inner ul li a span {
    transition: none;
  }
  .btn-reserve a:hover, .btn-online a:hover, .mv-inner .inner-btn li a:hover, .mid-cta__btn a:hover,
  .sec-13 .sec-13__inner ul li a:hover, .online-badge__link a:hover, .fixed-menu li a:hover {
    transform: none;
  }
  .btn-reserve a:hover::after, .btn-online a:hover::after, .mv-inner .inner-btn li a:hover::after, .mid-cta__btn a:hover::after,
  .sec-13 .sec-13__inner ul li a:hover::after, .online-badge__link a:hover::after, .fixed-menu li a:hover::after, .sp-fixedmenu li a:hover::after {
    animation: none;
  }
}

/* スマホの末尾CTA：文章が画面端に接しないよう左右に余白、文字を少し小さく（2026-09-16） */
@media screen and (max-width: 767px) {
  .sec-13 .sec-13__copy {
    padding: 0 6vw;
    font-size: 5.2vw;
    box-sizing: border-box;
  }
  .sec-13 .sec-13__sodan {
    padding: 3.6vw 3vw;
    font-size: 4.2vw;
    line-height: 1.5;
    box-sizing: border-box;
  }
  /* リード文はPC用の改行指定を外し、自然に折り返す */
  .common-lead br {
    display: none;
  }
}

/* フッター：診療時間の下にオンライン診療へのテキストリンク（2026-09-17） */
.site-footer__inner .inner-upper .upper-online {
  margin-top: min(1vw, 14px);
  font-size: min(1.3vw, 1.6rem);
  line-height: 1.875;
}
.site-footer__inner .inner-upper .upper-online a {
  display: inline-block;
  padding-right: 22px;
  color: #6e3d12;
  text-decoration: underline;
  text-underline-offset: 4px;
  background-image: url(../../images/src/common/ico_arrow_brown.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px auto;
}
.site-footer__inner .inner-upper .upper-online a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .site-footer__inner .inner-upper .upper-online {
    margin-top: 2.4vw;
    font-size: 3.38164vw;
  }
  .site-footer__inner .inner-upper .upper-online a {
    padding-right: 5.5vw;
    background-size: 3.4vw auto;
  }
}