/*
Theme Name: recovery
Author: 有限会社アイ・ワーク
Description: 株式会社リカバリーサイトテーマ
Version: 1.0.1
*/

/* =======================================================================
   Import CSS
======================================================================= */
@import url("assets/css/animation.css");

/* =======================================================================
   Common
======================================================================= */
main {
  box-sizing: border-box;
  margin-block-start: 0 !important;
  overflow-x: hidden;
}

p {
  margin-block-start: 0 !important;
  text-align: justify;
}

.wp-block-spacer {
  margin-block-start: 0 !important;
}

.page-title-section {
  display: grid;
  place-items: center;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  overflow: hidden;
}

.page-title {
  margin-block-start: 4rem !important;
}

.page-title,
.section-title {
  font-size: clamp(1.5rem, 1.179rem + 1.43vw, 2.25rem);
  letter-spacing: 0.1em;

  /* Modifier: color variations */
  &.page-title--purple:first-letter,
  &.section-title--purple:first-letter {
    color: var(--wp--preset--color--custom-purple);
  }

  &.page-title--light-pink:first-letter,
  &.section-title--light-pink:first-letter {
    color: var(--wp--preset--color--custom-light-pink);
  }

  &.page-title--dark-pink:first-letter,
  &.section-title--dark-pink:first-letter {
    color: var(--wp--preset--color--custom-dark-pink);
  }

  &.page-title--blue:first-letter,
  &.section-title--blue:first-letter {
    color: var(--wp--preset--color--custom-blue);
  }

  &.page-title--orange:first-letter,
  &.section-title--orange:first-letter {
    color: var(--wp--preset--color--custom-orange);
  }

  /* Element: subtitle */
  .page-title__subtitle {
    display: block;
    font-size: clamp(0.875rem, 0.821rem + 0.24vw, 1rem);
  }
}

.button__icon--right {
  font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem);
  position: relative;
  width: 100%;
  max-width: 390px;

  &:after {
    content: "\f054";
    color: #fff;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
  }
}

.button--blue,
.button--purple,
.button--light-pink,
.button--dark-pink,
.button_transparent {
  transition: all 0.3s ease;

  a {
    transition: background-color 0.3s ease, opacity 0.3s ease;
  }
}

.button--blue:hover {
  a {
    background-color: var(--wp--preset--color--custom-blue);
  }
}

.button--purple:hover {
  a {
    background-color: var(--wp--preset--color--custom-purple);
  }
}

.button--light-pink:hover {
  a {
    background-color: var(--wp--preset--color--custom-light-pink);
  }
}

.button--dark-pink:hover {
  a {
    background-color: var(--wp--preset--color--custom-dark-pink);
  }
}

.button_transparent:hover {
  a {
    opacity: 0.3;
  }
}

/* Category Label Component */
.category-label {
  background-color: var(--wp--preset--color--custom-blue);
  border-radius: 100vmax;
  box-sizing: border-box;
  color: white;
  display: inline-block;
  font-size: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem);
  padding: 0.5rem 1.25rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
  max-width: 125px;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.7;
  }

  /*
    カテゴリーID別のスタイル
    あみい保育園（ID: 6）
    */
  &.category-6 {
    background-color: var(--wp--preset--color--custom-light-green);
  }
  /* 放課後等デイ（ID: 7） */
  &.category-7 {
    background-color: var(--wp--preset--color--custom-orange);
  }
  /* 就労継続支援（ID: 8） */
  &.category-8 {
    background-color: var(--wp--preset--color--custom-light-blue);
  }
  /* 採用情報（ID: 9） */
  &.category-9 {
    background-color: var(--wp--preset--color--custom-light-pink);
  }
  /* その他（ID: 10） */
  &.category-10 {
    background-color: var(--wp--preset--color--custom-purple);
  }
}

/* Category Link Component */
.category-link {
  transition: opacity 0.3s ease;

  /*
    カテゴリーID別のスタイル
    あみい保育園（ID: 6）
    */
  &.category-6 {
    &:hover {
      color: var(--wp--preset--color--custom-light-green);
    }
  }
  /* 放課後等デイ（ID: 7） */
  &.category-7 {
    &:hover {
      color: var(--wp--preset--color--custom-orange);
    }
  }
  /* 就労継続支援（ID: 8） */
  &.category-8 {
    &:hover {
      color: var(--wp--preset--color--custom-light-blue);
    }
  }
  /* 採用情報（ID: 9） */
  &.category-9 {
    &:hover {
      color: var(--wp--preset--color--custom-light-pink);
    }
  }
  /* その他（ID: 10） */
  &.category-10 {
    &:hover {
      color: var(--wp--preset--color--custom-purple);
    }
  }
}

.category-buttons {
  gap: clamp(0.375rem, -0.698rem + 4.58vw, 1.5rem);
}

.category-button {
  font-size: clamp(0.75rem, 0.693rem + 0.24vw, 0.875rem);
  width: clamp(6.875rem, 6.023rem + 3.64vw, 8.75rem);
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 0.7;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}

/* =======================================================================
   Utilities
======================================================================= */
.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-12 {
  margin-top: 0.75rem !important;
}

.u-pc-hide {
  display: block !important;
}

.u-sp-hide {
  display: none !important;
}

/* font-size: 16px - 14px */
.u-text-base {
  font-size: clamp(0.875rem, 0.818rem + 0.24vw, 1rem) !important;
}
/* font-size: 20px - 18px */
.u-text-md {
  font-size: clamp(1.125rem, 1.068rem + 0.24vw, 1.25rem) !important;
}
/* font-size: 24px - 20px */
.u-text-lg {
  font-size: clamp(1.25rem, 1.136rem + 0.48vw, 1.5rem) !important;
}
/* font-size: 30px - 20px */
.u-text-xl {
  font-size: clamp(1.25rem, 0.966rem + 1.21vw, 1.875rem) !important;
}
/* font-size: 36px - 24px */
.u-text-xxl {
  font-size: clamp(1.5rem, 1.159rem + 1.45vw, 2.25rem) !important;
}

.u-gap-0 {
  gap: 0;
}

/* =======================================================================
   Header
======================================================================= */
.header-container {
  padding: 1rem clamp(0.625rem, 0.294rem + 1.41vw, 1.5rem);

  .wp-block-site-logo {
    width: clamp(7.875rem, 5.888rem + 8.48vw, 13.125rem);
  }

  /* ヘッダーメニューアイコン */
  .wp-block-navigation__responsive-container-open svg,
  .wp-block-navigation__responsive-container-close svg {
    width: 34px;
    height: 32px;
  }

  /* 閉じるアイコン */
  .wp-block-navigation__responsive-container-close {
    top: 0.82rem;
    right: 0.25rem;
  }

  /* メニューオープン時 */
  .wp-block-navigation:not(.has-background) {
    .wp-block-navigation__responsive-container {
      &.is-menu-open {
        left: auto;
        max-width: 50vw;

        .wp-block-navigation__responsive-container-content {
          padding-top: 80px;

          .wp-block-navigation__container {
            gap: 0;
          }

          .wp-block-navigation-item {
            border-bottom: 1px solid #272727;
            width: 100%;
          }

          .wp-block-navigation-item__content {
            padding: 1rem 0;
          }
        }
      }
    }
  }
}

/* メニューオープン時のbodyスクロール禁止 */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
  overflow: hidden !important;
}

/* =======================================================================
   Footer
======================================================================= */
footer {
  margin-block-start: 0 !important;

  p {
    margin-block-start: 0.75rem !important;
  }

  .is-layout-constrained > .footer_container {
    flex-flow: column;
    max-width: 320px;
  }

  .footer-logo {
    figure {
      display: block;
      margin: 0 auto;
      width: clamp(10.625rem, 9.679rem + 4.04vw, 13.125rem);
    }
  }

  .footer-column-title {
    font-size: var(--wp--preset--font-size--small);
    padding: 0.2rem 1rem;
    max-width: 69px;
  }

  .footer-address {
    gap: 0;
    margin-block-start: 0 !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Footer Navigation List */
  .is-style-footer-list {
    background-color: initial;
    border: none;
    font-size: clamp(0.875rem, 0.828rem + 0.2vw, 1rem);
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    li {
      list-style: none;
      margin: 0;
      padding: 0;
      display: inline-block;

      &:not(:last-child)::after {
        content: " | ";
        margin: 0 8px;
        color: currentColor;
      }

      a {
        text-decoration: none;
        color: inherit;

        &:hover {
          text-decoration: underline;
        }
      }
    } /* // li */
  } /* //.is-style-footer-list */
}

/* =======================================================================
   Media Query
======================================================================= */
@media (min-width: 769px) {
  .wp-site-blocks {
    position: static;
  }

  .page-title {
    margin-block-start: 7rem !important;
  }

  header {
    background-color: #fff;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  footer {
    .footer-logo {
      figure {
        margin: 0;
      }
    }
  } /* // footer */

  .u-pc-hide {
    display: none !important;
  }

  .u-sp-hide {
    display: block !important;
  }
}

@media (min-width: 1000px) {
  footer {
    .is-layout-constrained > .footer_container {
      flex-flow: row;
      max-width: var(--wp--style--global--wide-size);
    }
  }
}