/**
 * MINAMI Dental Clinic - ホバースタイル
 * Figma node 25307:6855 準拠
 * カラー・モーションは tokens.css の CSS 変数を参照
 */

/* ==========================================================================
   button-utility-pc
   デフォルト: 白背景・main枠・main文字
   ホバー: main背景・白文字・矢印右移動
   ========================================================================== */
.c-button-utility {
  background-color: var(--color-base);
  border-color: var(--color-main);
  color: var(--color-main);
  transition:
    background-color var(--transition-hover),
    color var(--transition-hover),
    border-color var(--transition-hover);
}

.c-button-utility:hover,
.c-button-utility:focus-visible {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}

.c-button-utility__icon {
  position: absolute;
  right: 12px;
  transition: right var(--transition-hover);
}

.c-button-utility:hover .c-button-utility__icon,
.c-button-utility:focus-visible .c-button-utility__icon {
  right: 6px;
}

.c-button-utility__icon-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.c-button-utility:hover .c-button-utility__icon-default,
.c-button-utility:focus-visible .c-button-utility__icon-default {
  opacity: 0;
}

.c-button-utility:hover .c-button-utility__icon-hover,
.c-button-utility:focus-visible .c-button-utility__icon-hover {
  opacity: 1;
}

/* ==========================================================================
   button-reserve-pc / button-contact-pc
   ========================================================================== */
.c-button--primary {
  background-color: var(--color-main);
  transition: background-color var(--transition-hover);
}

.c-button--primary:hover,
.c-button--primary:focus-visible {
  background-color: var(--color-main-dark);
}

.c-button--outline,
.c-button--outline:link,
.c-button--outline:visited {
  background-color: var(--color-base);
  border-color: var(--color-main);
  color: var(--color-main);
  transition:
    background-color var(--transition-hover),
    color var(--transition-hover),
    border-color var(--transition-hover);
}

.c-button--outline:hover,
.c-button--outline:focus-visible {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}

.c-button--outline__icon-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-hover);
}

.c-button--outline:hover .c-button--outline__icon-default,
.c-button--outline:focus-visible .c-button--outline__icon-default {
  opacity: 0;
}

.c-button--outline:hover .c-button--outline__icon-hover,
.c-button--outline:focus-visible .c-button--outline__icon-hover {
  opacity: 1;
}

/* ==========================================================================
   button-reserve-fixed
   ========================================================================== */
.c-fixed-reserve {
  background-color: var(--color-main);
  transition: background-color var(--transition-hover);
}

a.c-fixed-reserve:hover,
a.c-fixed-reserve:focus-visible {
  background-color: var(--color-main-dark);
}

/* ==========================================================================
   news-link-pc
   デフォルト: #393939 / ホバー: #1391e6 + 矢印右移動
   ========================================================================== */
.c-news__link {
  transition: color var(--transition-hover);
}

.c-news__link .c-news__date,
.c-news__link .c-news__text {
  transition: color var(--transition-hover);
}

.c-news__link:hover .c-news__date,
.c-news__link:hover .c-news__text,
.c-news__link:focus-visible .c-news__date,
.c-news__link:focus-visible .c-news__text {
  color: var(--color-main);
}

.c-news__arrow {
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity var(--transition-hover),
    transform var(--transition-hover);
}

.c-news__link:hover .c-news__arrow,
.c-news__link:focus-visible .c-news__arrow {
  opacity: 1;
  transform: translateX(5px);
}

.c-news__archive-link {
  transition: color var(--transition-hover);
}

.c-news__archive-link:hover,
.c-news__archive-link:focus-visible {
  color: var(--color-main);
}

/* ==========================================================================
   診療案内カード
   デフォルト: overlay 20% / ホバー: overlay 40% + 画像110% + 白枠線
   ========================================================================== */
.c-medical-card__bg {
  transition: transform var(--transition-hover);
}

.c-medical-card__overlay {
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color var(--transition-hover);
}

.c-medical-card {
  transition: box-shadow var(--transition-hover);
}

.c-medical-card:hover .c-medical-card__bg,
.c-medical-card:focus-visible .c-medical-card__bg {
  transform: scale(1.1);
}

.c-medical-card:hover .c-medical-card__overlay,
.c-medical-card:focus-visible .c-medical-card__overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.c-medical-card:hover,
.c-medical-card:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-base);
}

/* ==========================================================================
   blog-card
   ホバー: タイトル #1391e6 + サムネ110%
   ========================================================================== */
.c-blog-card__image {
  transition: transform var(--transition-hover);
}

.c-blog-card__title {
  transition: color var(--transition-hover);
}

.c-blog-card__link:hover .c-blog-card__image,
.c-blog-card__link:focus-visible .c-blog-card__image {
  transform: scale(1.1);
}

.c-blog-card__link:hover .c-blog-card__title,
.c-blog-card__link:focus-visible .c-blog-card__title {
  color: var(--color-main);
}

/* ==========================================================================
   header-nav
   ホバー/カレント: main色 + 下線
   ========================================================================== */
.c-header__nav-label {
  color: var(--color-contrast);
  transition: color var(--transition-hover);
}

/* アイコンはマスクで塗るため、ラベルと同じ色遷移になる */
.c-header__nav-icon {
  display: block;
  background-color: var(--color-contrast);
  -webkit-mask: var(--nav-icon) no-repeat center / contain;
  mask: var(--nav-icon) no-repeat center / contain;
  transition: background-color var(--transition-hover);
}

.c-header__nav-item:hover .c-header__nav-icon,
.c-header__nav-item:focus-visible .c-header__nav-icon,
.c-header__nav-item.is-current .c-header__nav-icon {
  background-color: var(--color-main);
}

.c-header__nav-underline {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-main);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--transition-hover);
}

.c-header__nav-item:hover .c-header__nav-label,
.c-header__nav-item:focus-visible .c-header__nav-label,
.c-header__nav-item.is-current .c-header__nav-label {
  color: var(--color-main);
}

.c-header__nav-item:hover .c-header__nav-underline,
.c-header__nav-item:focus-visible .c-header__nav-underline,
.c-header__nav-item.is-current .c-header__nav-underline {
  transform: translateX(-50%) scaleX(1);
}

/* ==========================================================================
   button-arrow-down-pc
   デフォルト: 白背景 / ホバー: main-light背景
   ========================================================================== */
.c-button-arrow-down {
  background-color: var(--color-base);
  transition: background-color var(--transition-hover);
}

.c-button-arrow-down:hover,
.c-button-arrow-down:focus-visible {
  background-color: var(--color-main-light);
}

/* ==========================================================================
   フッターナビリンク
   ========================================================================== */
.c-footer__nav-link {
  transition: color var(--transition-hover);
}

.c-footer__nav-link:hover,
.c-footer__nav-link:focus-visible {
  color: var(--color-main);
}

.c-footer__totop {
  color: var(--color-main);
  background: transparent;
  transition: color var(--transition-hover), opacity 0.3s;
}

.c-footer__totop:hover,
.c-footer__totop:focus-visible {
  color: var(--color-main-dark);
}

/* ==========================================================================
   お問い合わせ / WEB予約 送信ボタン
   デフォルト: 白背景・main枠・main文字
   ホバー: main背景・白文字
   ========================================================================== */
.p-contact-form__submit,
.p-reservation-form__submit {
  transition:
    background-color var(--transition-hover),
    color var(--transition-hover),
    border-color var(--transition-hover);
}

.p-contact-form__submit:hover,
.p-contact-form__submit:focus-visible,
.p-reservation-form__submit:hover,
.p-reservation-form__submit:focus-visible {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-base);
}

a.c-fixed-reserve:focus {
  outline: none;
}

a.c-fixed-reserve:focus-visible {
  outline: 2px solid var(--color-main-dark);
  outline-offset: 2px;
}