@charset "utf-8";

/* -------------------------------------------------------------
  hover
------------------------------------------------------------- */

/* common - 変遷時間 */
@media (hover: hover) {
  a,
  .page-numbers__svg,
  .link-button,
  .link-button__icon,
  .page-post__pagination__icon-box,
  .page-post__pagination__icon,
  .toppage__reserve__tel-button,
  .toppage__reserve__tel-button-icon,
  .header__tel-button a,
  .header__tel-button__icon,
  .monthly-archives__text,
  .monthly-archives__icon {
    transition-duration: 0.4s;
  }
}

/* text - 透明度調整 */
@media (hover: hover) {
  a:not(.not-hover-animation):not(.link-button):not(.nav-content__list-link) {
    /* transition-property: opacity; */
  }

  a:not(.not-hover-animation):not(.link-button):not(
      .page-post__pagination a
    ):not(.footer-banner__inner):not(.nav-content__list-link):hover {
    /* opacity: 0.75; */
  }
}

/* text - 色変更 */
@media (hover: hover) {
  a.page-numbers,
  .monthly-archives a:hover {
    transition-property: color;
  }

  a.page-numbers:hover {
    color: var(--color-accent-1);
  }

  .monthly-archives__link:hover .monthly-archives__text {
    color: var(--color-accent-1);
  }
}

/* svg - 色変更 */
@media (hover: hover) {
  .page-numbers__svg {
    transition-property: stroke;
  }

  a.page-numbers:hover .page-numbers__svg {
    stroke: var(--color-accent-1);
  }

  .monthly-archives__link:hover .monthly-archives__icon {
    stroke: var(--color-accent-1);
  }
}

/* button - 色変更 */
@media (hover: hover) {
  .link-button,
  .link-button__icon {
    transition-property: background-color, color, stroke;
  }

  .link-button__primary:hover {
    color: var(--color-main-light);
    background-color: var(--color-white);
  }

  .link-button__primary:hover .link-button__icon {
    stroke: var(--color-main-light);
  }

  .link-button__secondary:hover {
    color: var(--color-white);
    background-color: var(--color-main-light);
  }

  .link-button__secondary:hover .link-button__icon {
    stroke: var(--color-white);
  }

  .page-post__pagination__icon-box,
  .page-post__pagination__icon {
    transition-property: background-color, stroke;
  }

  .page-post__pagination__icon-box:hover {
    background-color: var(--color-main-light);
  }

  .page-post__pagination__icon-box:hover .page-post__pagination__icon {
    stroke: var(--color-white);
  }

  .toppage__reserve__tel-button {
    transition-property: background-color, color;
  }

  .toppage__reserve__tel-button-icon {
    transition-property: fill;
  }

  .toppage__reserve__tel-button:hover {
    color: var(--color-main-light);
    background-color: var(--color-white);
  }

  .toppage__reserve__tel-button:nth-of-type(2):hover {
    color: var(--color-accent-1);
  }

  .toppage__reserve__tel-button:hover img {
    filter: brightness(0) saturate(100%) invert(53%) sepia(94%) saturate(289%)
      hue-rotate(95deg) brightness(92%) contrast(89%);
  }

  .toppage__reserve__tel-button:nth-of-type(2):hover img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(490%)
      hue-rotate(314deg) brightness(105%) contrast(85%);
  }

  .toppage__reserve__tel-button:hover .toppage__reserve__tel-button-icon {
    fill: var(--color-main-light);
  }

  .header__tel-button .header__tel-button__link:hover {
    background-color: var(--color-main);
    color: var(--color-white);
  }

  .header__tel-button__icon {
    transition-property: fill;
  }

  .header__tel-button__link:hover .header__tel-button__icon {
    fill: var(--color-white);
  }
}

/* header__nav-content__pc ヘッダーナビ - 下線追加 */
.header__nav-content__pc__list-link {
  position: relative;
}

.header__nav-content__pc__list-link::before {
  display: block;
  position: absolute;
  content: "";
  left: 0;
  bottom: -8px;
  width: calc(100% - 24px);
  height: 2px;
  background-color: var(--color-accent-1);
  scale: 0 1;
  transform-origin: right top;
  transition-property: scale;
  transition-duration: 0.25s;
}

@media (hover: hover) {
  .header__nav-content__pc__list-link:hover::before {
    scale: 1 1;
    transform-origin: left top;
  }
}

/* g-nav-button - 色変更 */
@media (hover: hover) {
  .g-nav-button__line,
  .g-nav-button__text,
  .nav-content__list-link {
    transition-duration: 0.4s;
    transition-property: background-color, color;
  }

  .nav-content__list-link {
    transition-duration: 0.2s;
    transition-property: color;
  }

  .g-nav-button:hover .g-nav-button__line {
    background-color: var(--color-accent-1);
  }

  .g-nav-button:hover .g-nav-button__text {
    color: var(--color-accent-1);
  }

  .nav-content__list-link:hover {
    color: var(--color-accent-1);
  }
}

/* footer-banner - 形変更 */

.footer-banner {
  transition-delay: 60ms;
  transition-duration: 0.4s;
  transition-property: width;
}

@media (min-width: 1280px) {
  .footer__banner__title,
  .footer__banner__text {
    display: none;
    opacity: 0;
  }

  .footer-banner:hover {
    width: 475px;
  }

  .footer-banner:hover .footer-banner__inner {
    padding: 0 30px;
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    justify-content: start;
  }

  .footer-banner.footer__tel-banner:hover .footer-banner__inner,
  .footer-banner.footer__reserve-banner:hover .footer-banner__inner {
    grid-template-areas:
      "icon title"
      "icon title";
    align-items: center;
  }

  .footer-banner:hover .footer__banner__title {
    grid-area: title;
  }

  .footer-banner:hover .icon-footer {
    height: 56px;
  }

  .footer-banner:hover .footer__banner__title,
  .footer-banner:hover .footer__banner__text {
    display: block;
    animation: 0.4s ease 0.3s forwards fadein;
  }

  .footer-banner:hover .footer__banner__pc-text {
    display: none;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}