@charset "utf-8";

/* html・body */
html,
#root {
  height: 100%;
}

/* フォント */
.font-class {
  font-family: var(--font-family-normal);
}

/* カーソル ポインター */
.cursor-pointer {
  cursor: pointer;
}

/* カーソル ポインター（子要素も全て） */
.cursor-pointer-all {
  cursor: pointer;
}

/* カーソル ポインター（子要素も全て） */
.cursor-pointer-all * {
  cursor: pointer;
}

/* フォントサイズ Xスモール */
.font-size-x-small {
  font-size: x-small;
}

/* フォントサイズ スモール */
.font-size-small {
  font-size: small;
}

/* フォントサイズ ミディアム */
.font-size-medium {
  font-size: medium;
}

/* フォントサイズ ラージ */
.font-size-large {
  font-size: large;
}

/* フォントサイズ Xラージ */
.font-size-x-large {
  font-size: x-large;
}

/* max-width 100% */
.max-width-100 {
  max-width: 100%;
}

/*==============================================================================
サイト基礎
==============================================================================*/

:root {
  /* カラーマスタ */
  --color-red: #c0242c;

  /* 定義色 */
  --color-black: #333333;
  --color-white: #ffffff;
  --color-primary: #e97132;
  --color-primary-light: #ffb184;
  --color-primary-lighter: #facfb4;
  --color-primary-dark: #b15321;
  --color-primary-darker: #5e2a0e;
  --color-secondary: #107c10;
  --color-secondary-light: #88be88;
  --color-secondary-lighter: #e0eee0;
  --color-secondary-dark: #0d580d;
  --color-secondary-darker: #071d0c;
  --color-info: #115b80;
  --color-info-light: #1c7baa;
  --color-info-lighter: #5ba5ca;
  --color-info-dark: #0a4563;
  --color-info-darker: #082838;
  --color-danger: #a4262c;
  --color-danger-light: #d29396;
  --color-danger-lighter: #fad4d7;
  --color-danger-dark: #942228;
  --color-danger-darker: #7b1d21;
  --color-nutral: var(--color-base-500);
  --color-nutral-light: var(--color-base-300);
  --color-nutral-lighter: var(--color-base-200);
  --color-nutral-dark: var(--color-base-600);
  --color-nutral-darker: var(--color-base-700);
  --color-on-primary: #ffffff;
  --color-on-primary-light: #ffffff;
  --color-on-primary-lighter: #ffffff;
  --color-on-primary-dark: #ffffff;
  --color-on-primary-darker: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-secondary-light: #ffffff;
  --color-on-secondary-lighter: #ffffff;
  --color-on-secondary-dark: #ffffff;
  --color-on-secondary-darker: #ffffff;
  --color-on-info: #ffffff;
  --color-on-info-light: #ffffff;
  --color-on-info-lighter: #ffffff;
  --color-on-info-dark: #ffffff;
  --color-on-info-darker: #ffffff;
  --color-on-danger: #ffffff;
  --color-on-danger-light: #ffffff;
  --color-on-danger-lighter: #ffffff;
  --color-on-danger-dark: #ffffff;
  --color-on-danger-darker: #ffffff;
  --color-on-nutral: #ffffff;
  --color-on-nutral-light: #ffffff;
  --color-on-nutral-lighter: #ffffff;
  --color-on-nutral-dark: #ffffff;
  --color-on-nutral-darker: #ffffff;
  --color-base: #edebe9;
  --color-base-50: #faf9f8;
  --color-base-100: #f3f2f1;
  --color-base-200: #edebe9;
  --color-base-300: #d2d0ce;
  --color-base-400: #a19f9d;
  --color-base-500: #8a8886;
  --color-base-600: #605e5c;
  --color-base-700: #3b3a39;
  --color-base-800: #323130;
  --color-base-900: #201f1e;

  --color-series-doctor: #1a47a7;
  --color-series-eiseishi: #b93da5;
  --color-on-series-doctor: #ffffff;
  --color-on-series-eiseishi: #ffffff;

  --color-font: var(--color-base-900);
  --color-gray-font: var(--color-base-500);

  --color-background: var(--color-base-100);
  --color-background-accent: var(--color-white);

  --color-border: var(--color-base-300);

  --color-disabled: var(--color-base-500);
  --color-on-disabled: var(--color-base-800);

  /* フォント */
  --font-family-normal: "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ ProN W3", sans-serif;

  /* ユーティリティ */
  --border-normal: 1px solid var(--color-border);
}

.info-text {
  color: var(--color-info);
}

.separator {
  border-top: var(--border-normal);
}

/*==============================================================================
サイト基礎
==============================================================================*/
body {
  font-family: var(--font-family-normal);
  color: var(--color-font);
  font-weight: 500;
  letter-spacing: 0.01em;
  list-style: 1.5;
  height: 100dvh;
  background-color: var(--color-background);
}

.bold {
  font-weight: bold;
}

.font-serif {
  font-family: var(--font-family-normal);
}

.icon {
  font-size: small;
}

h1 {
  @media screen and (max-width: 767px) {
    font-size: 1.5rem;
  }
}

h2 {
  @media screen and (max-width: 767px) {
    font-size: 1.4rem;
  }
}

h3 {
  @media screen and (max-width: 767px) {
    font-size: 1.3rem;
  }
}

h4 {
  @media screen and (max-width: 767px) {
    font-size: 1.2rem;
  }
}

h5 {
  @media screen and (max-width: 767px) {
    font-size: 1rem;
  }
}

h6 {
  @media screen and (max-width: 767px) {
    font-size: 0.6rem;
  }
}

/*==============================================================================
ヘッダー
==============================================================================*/
nav {
  box-shadow: 0px 4px 15px -12px #777777;
  background-color: #ffffff;
}
.logo {
  width: 300px;
  @media screen and (max-width: 767px) {
    width: 220px;
  }
}
.login {
  background-color: #f8f3ed;
}
.navbar-collapse {
  width: 100%;
}
.nav-link {
  border-bottom: 2px solid transparent;
  transition: 0.2s;
  flex: 1;
  text-align: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.nav-link:hover {
  border-color: var(--color-secondary-light);
}
.nav-link.active {
  border-color: var(--color-secondary);
}

/*==============================================================================
フッター
==============================================================================*/
footer {
  background-color: var(--color-secondary-dark);
  color: var(--color-on-secondary-dark);
  .address {
    .detail {
      font-size: 0.9em;
    }
  }
  @media screen and (max-width: 767px) {
    font-size: 0.8em;
  }
}
.copy {
  background-color: var(--color-secondary-darker);
  color: var(--color-on-secondary-darker);
  font-size: 0.9rem;

  @media screen and (max-width: 767px) {
    font-size: 0.6rem;
  }
}

/*==============================================================================
パーツ
==============================================================================*/
.page-summary-img-container {
  border: 2px solid var(--color-secondary);
  background-color: var(--color-background-accent);
  padding: 0.8em;
  border-radius: 80px;
  width: 80px;
  height: 80px;

  @media screen and (max-width: 767px) {
    border-radius: 60px;
    width: 60px;
    height: 60px;
  }

  & img {
    height: 90%;
    @media screen and (max-width: 767px) {
      height: 100%;
    }
  }
}

.button {
  border: none;
  font-size: 1em;
  padding: 8px 15px;
  border-radius: 5px;
  transition: 0.2s;
  min-width: 150px;

  &:focus {
    outline: none;
    box-shadow: none;
  }

  &:focus-visible {
    outline-width: 3px;
    outline-style: solid;
  }

  &.xs {
    font-size: 0.5em;
    padding: 5px 10px;
    min-width: 50px;
  }

  &.sm {
    font-size: 0.7em;
    padding: 5px 10px;
    min-width: 100px;
  }

  &.lg {
    font-size: 1.2em;
    padding: 10px 20px;
    min-width: 180px;
  }

  &.xl {
    font-size: 1.5em;
    padding: 10px 20px;
    min-width: 200px;
  }

  &.not-round {
    border-radius: 0;
  }

  &.more-round {
    border-radius: 20px;
  }

  &.square {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0px;
    min-width: unset;
    &.sm {
      width: 1.7rem;
      height: 1.7rem;
    }
  }

  &.circle-round {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    padding: 0px;
    min-width: unset;
  }

  &.transparent {
    opacity: 0.7;
  }

  &.automd {
    font-size: 1em;
    padding: 8px 15px;
    @media (max-width: 768px) {
      font-size: 0.7em;
      padding: 8px 10px;
      min-width: unset;
    }
  }

  &.autolg {
    font-size: 1.2em;
    padding: 10px 20px;

    @media (max-width: 768px) {
      font-size: 1em;
      padding: 10px 15px;
    }
  }

  &.fullwidth {
    width: 100%;
  }

  &.outlined {
    &.primary {
      background-color: transparent;
      color: var(--color-primary);
      border: 1px solid var(--color-primary);

      &:hover {
        background-color: var(--color-primary-lighter);
        color: var(--color-primary-dark);
      }

      &:focus-visible {
        outline-color: var(--color-primary-light);
      }

      &:active {
        background-color: var(--color-primary-light);
        color: var(--color-primary-dark);
        outline-color: var(--color-primary-light);
        border: 1px solid var(--color-primary);
      }
    }

    &.secondary {
      background-color: transparent;
      color: var(--color-secondary);
      border: 1px solid var(--color-secondary);

      &:hover {
        background-color: var(--color-secondary-lighter);
        color: var(--color-secondary-dark);
      }

      &:focus-visible {
        outline-color: var(--color-secondary-light);
        border: 1px solid var(--color-secondary);
      }

      &:active {
        background-color: var(--color-secondary-light);
        color: var(--color-secondary-dark);
        outline-color: var(--color-secondary-light);
        border: 1px solid var(--color-secondary);
      }
    }

    background-color: transparent;
    color: var(--color-nutral);
    border: 1px solid var(--color-nutral);

    &:hover {
      background-color: var(--color-nutral-lighter);
      color: var(--color-nutral-dark);
    }

    &:focus-visible {
      outline-color: var(--color-nutral-light);
      border: 1px solid var(--color-nutral);
    }

    &:active {
      background-color: var(--color-nutral-light);
      color: var(--color-nutral-dark);
      outline-color: var(--color-nutral-light);
      border: 1px solid var(--color-nutral);
    }

    &:disabled {
      background-color: var(--color-disabled);
      color: var(--color-on-disabled);
    }
  }

  &.light-filled {
    &.primary {
      background-color: var(--color-primary-lighter);
      color: var(--color-primary-darker);
      border: 1px solid transparent;

      &:hover {
        background-color: var(--color-primary-light);
        color: var(--color-primary-darker);
      }

      &:focus-visible {
        outline-color: var(--color-primary-light);
      }

      &:active {
        background-color: var(--color-primary);
        color: var(--color-primary-darker);
        outline-color: var(--color-primary-light);
        border: 1px solid var(--color-primary-light);
      }
    }

    &.secondary {
      background-color: var(--color-secondary-lighter);
      color: var(--color-secondary);
      border: 1px solid transparent;

      &:hover {
        background-color: var(--color-secondary-light);
        color: var(--color-secondary-darker);
      }

      &:focus-visible {
        outline-color: var(--color-secondary-light);
        border: 1px solid var(--color-secondary-darker);
      }

      &:active {
        background-color: var(--color-secondary);
        color: var(--color-secondary-darker);
        outline-color: var(--color-secondary-light);
        border: 1px solid var(--color-secondary-light);
      }
    }

    &.danger {
      background-color: var(--color-danger-lighter);
      color: var(--color-danger);
      border: 1px solid transparent;

      &:hover {
        background-color: var(--color-danger-light);
        color: var(--color-danger-darker);
      }

      &:focus-visible {
        outline-color: var(--color-danger-light);
        border: 1px solid var(--color-danger-darker);
      }

      &:active {
        background-color: var(--color-danger);
        color: var(--color-danger-darker);
        outline-color: var(--color-danger-light);
        border: 1px solid var(--color-danger-light);
      }
    }

    background-color: var(--color-nutral-lighter);
    color: var(--color-nutral-dark);
    border: 1px solid transparent;

    &:hover {
      background-color: var(--color-nutral-light);
      color: var(--color-nutral-darker);
    }

    &:focus-visible {
      outline-color: var(--color-nutral-light);
      border: 1px solid var(--color-nutral);
    }

    &:active {
      background-color: var(--color-nutral);
      color: var(--color-nutral-darker);
      outline-color: var(--color-nutral-light);
      border: 1px solid var(--color-nutral-light);
    }

    &:disabled {
      background-color: var(--color-disabled);
      color: var(--color-on-disabled);
      &:hover {
        background-color: var(--color-disabled) !important;
        color: var(--color-on-disabled) !important;
      }
    }
  }

  &.primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);

    &:hover {
      background-color: var(--color-primary-dark);
      color: var(--color-on-primary-dark);
    }

    &:focus-visible {
      outline-color: var(--color-primary-lighter);
    }

    &:active {
      background-color: var(--color-primary-darker);
      color: var(--color-on-primary-darker);
    }
  }

  &.secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);

    &:hover {
      background-color: var(--color-secondary-dark);
      color: var(--color-on-secondary-dark);
    }

    &:focus-visible {
      outline-color: var(--color-secondary-light);
    }
    &:active {
      background-color: var(--color-secondary-darker);
      color: var(--color-on-secondary-darker);
    }
  }

  background-color: var(--color-nutral);
  color: var(--color-on-nutral);

  &:hover {
    background-color: var(--color-nutral-dark);
    color: var(--color-on-nutral-dark);
  }

  &:focus-visible {
    outline-color: var(--color-nutral-lighter);
  }

  &:active {
    background-color: var(--color-nutral-darker);
    color: var(--color-on-nutral-darker);
  }

  &:disabled {
    background-color: var(--color-disabled);
    color: var(--color-on-disabled);
    &:hover {
      background-color: var(--color-disabled) !important;
      color: var(--color-on-disabled) !important;
    }
  }
}

/*----- 見出し */
.secTitle {
  font-weight: 600;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: baseline;
  @media screen and (max-width: 768px) {
    flex-direction: column;
    gap: 5px;
  }
  h2 {
    font-size: 1.8rem;
    @media screen and (max-width: 768px) {
      font-size: 1.3rem;
    }
  }
  & span {
    color: var(--color-info);
    font-size: 1.2rem;
    @media screen and (max-width: 768px) {
      font-size: 1rem;
    }
  }
}

.header-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background-color: transparent;
  transition: 0.2s;
  padding: 0.5em;
  color: var(--color-secondary);
  gap: 0.3rem;

  @media screen and (max-width: 768px) {
    font-size: 0.8em;
  }

  @media screen and (max-width: 457px) {
    font-size: 1.2em;
    & .text {
      font-size: 0.5em;
    }
  }
  @media screen and (max-width: 435px) {
    & .text {
      display: none;
    }
  }

  &:focus {
    outline: none;
  }
  &:hover {
    color: var(--color-secondary-light);
  }
  &:focus-visible {
    outline: 1px solid;
    outline-color: var(--color-secondary-light);
    background-color: var(--color-secondary-lighter);
    color: var(--color-secondary-darker);
  }

  &.primary {
    color: var(--color-primary);
    &:hover {
      color: var(--color-primary-light);
    }
    &:focus-visible {
      outline-color: var(--color-primary-light);
      background-color: var(--color-primary-lighter);
      color: var(--color-primary-darker);
    }
  }

  &.info {
    color: var(--color-info);
    &:hover {
      color: var(--color-info-light);
    }
    &:focus-visible {
      outline-color: var(--color-info-light);
      background-color: var(--color-info-lighter);
      color: var(--color-info-darker);
    }
  }

  &.danger {
    color: var(--color-danger);
    &:hover {
      color: var(--color-danger-light);
    }
    &:focus-visible {
      outline-color: var(--color-danger-light);
      background-color: var(--color-danger-lighter);
      color: var(--color-danger-darker);
    }
  }
}
.shokushu-badge {
  padding: 0.8em 2em;
  border-radius: 1.5em;
  font-size: 1em;
  margin: none;

  @media screen and (max-width: 768px) {
    font-size: 0.7em;
  }

  &.doctor {
    background-color: var(--color-series-doctor);
    color: var(--color-on-series-doctor);
  }

  &.eiseishi {
    background-color: var(--color-series-eiseishi);
    color: var(--color-on-series-eiseishi);
  }
}

.content-grid {
  display: grid;
  gap: 1.5rem;
  justify-content: center;

  /* カードの並びを制御 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  /* 画面幅ごとのレイアウト調整 */
  @media (min-width: 900px) {
    grid-template-columns: repeat(4, 1fr); /* 4列 */
  }

  @media (max-width: 1000px) and (min-width: 600px) {
    grid-template-columns: repeat(2, 1fr); /* 2×2 */
  }

  @media (max-width: 599px) {
    grid-template-columns: repeat(1, 1fr); /* 縦4列 */
  }
}

.content-card {
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 5px 5px 15px -6px var(--color-base-500);
  background-color: var(--color-background-accent);
  & .material-symbols-outlined {
    font-size: 1.5em;
    color: var(--color-secondary);
  }
}

.shokushu-badge {
  padding: 0.8em 2em;
  border-radius: 1.5em;
  font-size: 1em;
  margin: none;

  @media screen and (max-width: 768px) {
    font-size: 0.7em;
  }

  &.doctor {
    background-color: var(--color-series-doctor);
    color: var(--color-on-series-doctor);
  }

  &.eiseishi {
    background-color: var(--color-series-eiseishi);
    color: var(--color-on-series-eiseishi);
  }
}

.content-card {
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 5px 5px 15px -6px var(--color-base-500);
  & .material-symbols-outlined {
    font-size: 1.5em;
    color: var(--color-secondary);
  }
}

.service-step-container {
  @media screen and (max-width: 912px) {
    flex-direction: column;
  }
  & .service-step-arrow {
    color: var(--color-secondary);
    font-size: 4em;
    margin-top: 40px;
    @media screen and (max-width: 912px) {
      margin-top: 0px;
      transform: rotate(90deg);
    }
  }
}
.new-recruitment-listcontainer {
  @media (max-width: 768px) {
    flex-direction: column;
  }

  & /*----- 新着求人カード */
  .new-recruitment-card {
    background: var(--color-background-accent);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    white-space: nowrap;
    gap: 10px;
    flex: 1;

    & .recruit-area {
      font-weight: 600;
      font-size: 1.4rem;
      @media (max-width: 768px) {
        font-size: 1.2rem;
      }
    }

    & .recruit-target {
      border: 0.5px solid var(--color-gray-font);
      color: var(--color-gray-font);
      border-radius: 5px;
      width: fit-content;

      &.doctor {
        border: 0.5px solid var(--color-series-doctor);
        color: var(--color-series-doctor);
      }

      &.eiseishi {
        border: 0.5px solid var(--color-series-eiseishi);
        color: var(--color-series-eiseishi);
      }
    }

    & .recruit-treatment {
      font-size: 0.8rem;
      color: var(--color-gray-font);
      white-space: normal;
      @media (max-width: 768px) {
        font-size: 0.7rem;
      }
    }
  }
}
/*==============================================================================
トップページ
==============================================================================*/
.mContainer {
  &.-mainVisual {
    background-color: var(--color-background-accent);
    .number-job {
      background-color: var(--color-background-accent);
      border-bottom: var(--border-normal);
      .number {
        color: var(--color-red);
        font-size: 3rem;
        line-height: 1em;
        @media screen and (max-width: 768px) {
          font-size: 2rem;
        }
      }
      .date {
        color: var(--color-gray-font);
      }
    }

    & .accent-button {
      font-size: 1.2rem;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      @media screen and (max-width: 1399px) {
        height: 70px;
      }
      @media screen and (max-width: 768px) {
        height: 60px;
        font-size: 1rem;
      }
    }
  }

  &.-news {
    background-color: var(--color-background-accent);
    .news-link {
      a {
        color: var(--color-info);
      }
    }
    .news-list {
      list-style: none;
      padding-left: 0;
      .news-list__item {
        & a {
          display: block;
          padding: 1.5rem 0;
          border-bottom: var(--border-normal);
          color: var(--color-black);

          & p {
            margin-bottom: 0;
            flex: 1;
          }
        }
      }
    }
  }
  &.-about {
    background-color: var(--color-beige-light);
    .about-list {
      list-style: none;
      padding-left: 0;
      .about-list__item {
        .title {
          color: #0a4563;
        }
      }
    }
    .youtube {
      width: 100%;
      aspect-ratio: 16 / 9;
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
  &.-message {
    .name {
      font-size: 0.95rem;
      @media screen and (max-width: 1199px) {
        font-size: 0.9rem;
      }
    }
  }
  &.-service {
    background-color: var(--color-background-accent);
  }
  &.-movie {
    .movie-link {
      a {
        color: var(--color-navy);
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .slider {
      width: 90%;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
    }
    .swiper-slide {
      width: calc(90% / 3);
      padding: 1rem;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
      .link {
        display: block;
        transition: 0.2;
        text-decoration: none;
        color: var(--color-navy);
        &:hover {
          opacity: 0.8;
          transition: 0.2;
          text-decoration: underline;
        }
      }
    }
    .swiper-button-prev {
      left: 10px;
      height: 40px;
      width: 40px;
      background-color: var(--color-navy);
      border-radius: 50px;
      &::after {
        font-size: 1.2rem;
        color: #ffffff;
        content: "<";
      }
    }
    .swiper-button-next {
      right: 10px;
      height: 40px;
      width: 40px;
      background-color: var(--color-navy);
      border-radius: 50px;
      &::after {
        font-size: 1.2rem;
        color: #ffffff;
        content: ">";
      }
    }
  }
}