/*
Theme Name: My Original Theme
Description: 静的HTMLをベースにしたオリジナルテーマ
Version: 1.0
Author: 井上
*/

/* 施設別ナビ　START */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}

article.card {
  position: relative;
  width: calc((100% - 40px) / 2);
  max-width: 580px;
  border-radius: var(--radius-md);
  background-color: var(--color-neutral-white);
  border: solid 1px var(--color-neutral-gray);
  padding: var(--space-32) var(--space-32) var(--space-72);
}

.card__title {
  font-size: var(--font-size-lg);
  color: var(--color-neutral-black);
  text-align: center;
  margin-bottom: var(--space-40);
}
ul.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--space-40);
}

.link-list__item a {
  display: inline-block;
  padding: var(--space-8);
  font-size: var(--font-size-md);
  text-align: center;
  color: var(--color-neutral-black);
  border: solid 1px var(--color-neutral-black);
  border-radius: var(--radius-sm);
  transition: 0.3s ease-in-out;
}

.link-list__item a:hover {
  color: var(--color-neutral-white);
  border: solid 1px var(--color-primary-main);
  background-color: var(--color-primary-main);
}

.card__footer a {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 0 0px 18px 18px;
  padding-block: var(--space-24);
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-black);
  width: 100%;
}

.card__footer a.btn--guidance {
  background-color: var(--color-accent-pink);
}

.card__footer a.btn--recruit {
  background-color: var(--color-secondary-light);
}

.card__footer a.btn--community {
  background-color: var(--color-primary-light);
}

.card__footer a span {
  position: relative;
}

.card__footer a span::before {
  position: absolute;
  content: "";
  background: url(/wp-content/themes/mytheme/assets/images/icon/arrow.svg)
    no-repeat center / contain;
  width: 32px;
  height: 32px;
  top: 50%;
  right: -40px;
  transform: translate(0, -46%);
  transition: 0.3s ease-in-out;
}

.card__footer a:hover span::before {
  right: -64px;
}
@media screen and (max-width: 768px) {
  .card-list {
    display: block;
  }
  article.card {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--space-32);
    padding: var(--space-32) var(--space-16) var(--space-56);
  }
  .card__title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-24);
  }
  ul.link-list {
    gap: var(--space-8);
    margin-bottom: var(--space-32);
  }
  .link-list__item a {
    font-size: var(--font-size-sm);
  }
}
/* 施設別ナビ　END */

/* 目的別ナビ　START */
.card__title--left {
  font-size: var(--font-size-lg);
  color: var(--color-neutral-black);
  text-align: left;
  margin-bottom: var(--space-16);
}
.cate-list {
  display: flex;
  justify-content: start;
  gap: var(--space-16);
  margin-bottom: var(--space-24);
}
.cate-list__item {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.cate-list__item--permanent {
  background-color: var(--color-secondary-main);
}
.cate-list__item--short-stay {
  background-color: var(--color-secondary-light);
}
.cate-list__item--day-service {
  background-color: #b8d1f8;
}
.cate-list__item--care-service {
  background-color: #f0dbff;
}
.cate-list__item--consultation {
  background-color: var(--color-accent-blue);
}
.card__info {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  margin-bottom: var(--space-24);
}
.card__info--icon {
  width: var(--icon-size-m);
}
.card__info--text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}
.card__footer a.btn {
  background-color: var(--color-neutral-gray);
}
@media screen and (max-width: 768px) {
  .section__title--full {
    margin-bottom: var(--space-32);
  }
  .title--wrap p {
    width: calc(((100% - 8px) / 3.6) * 2.6);
    font-size: var(--font-size-lg);
    margin-right: var(--space-8);
  }
  .card__title--left {
    font-size: var(--font-size-md);
  }
  .cate-list {
    display: block;
  }
  .cate-list__item {
    margin-bottom: var(--space-8);
  }
  .card__footer a {
    padding-block: var(--space-16);
    font-size: var(--font-size-md);
  }
}