/*
Bootstrap breakpoints
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px
xxl	≥1400px
*/

html {
  font-size: 18px;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  line-height: 2;
  color: #333;
}

main {
  min-height: 1000px;
}

/*
id のある箇所へ遷移するとき、少し上の方に遷移するよう設定
*/
[id] {
  scroll-margin-top: 3rem;
}

.bg-paleWhite {
  background-color: #fff9;
}

/**
  ロゴマーク
*/
/* ユーカリ福祉会ロゴマーク */
.bl_logoYuukari {
  height: 30px;
  width: auto;
}
/* 望洋園ロゴマーク */
.bl_logoBouyouen {
  height: 40px;
  width: auto;
}

@media (min-width: 768px) {
  /* ユーカリ福祉会ロゴマーク */
  .bl_logoYuukari {
    height: 40px;
    width: auto;
  }

  /* 望洋園ロゴマーク */
  .bl_logoBouyouen {
    height: 50px;
    width: auto;
  }
}

/**
  ヘッダーイメージ
*/
.bl_headerImg {
  aspect-ratio: 1080/720;
  display: block;
  object-fit: cover;
  width: 100%;
  height: auto;
  object-position: center;
}
@media (min-width: 992px) {
  .bl_headerImg {
    aspect-ratio: 1920/450;
  }
}

/** ************************************************************
  上端固定メニュー
*/
.ly_fixHeaderNav {
  display: none;
}
@media (min-width: 1200px) {
  .ly_fixHeaderNav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    transition: transform 0.4s ease-in-out, opacity 0s ease;
    transform: translateY(-100%);
    opacity: 1;
    background-color: #fff9;
  }
  .ly_fixHeaderNav.js_isActive {
    transform: translateY(0);
    opacity: 1;
  }
}

/** ************************************************
  グローバルメニュ
*/
.ly_headerMenu {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.ly_headerMenu > li > a {
  text-decoration: none;
  color: inherit;
}
.ly_headerMenu > li > a:hover {
  filter: brightness(2);
}
.ly_headerMenu > li > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 終了:グローバルメニュー */

/** ************************************************
  ドロワーメニューのボタン
*/
.bl_drawerMenuToggler {
  width: 75px;
  aspect-ratio: 1/1;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
  display: grid;
  place-items: center;
}

/* ハンバーガー棒線のラップ */
.bl_drawerMenuToggler_bars {
  display: block;
  width: 66%;
  aspect-ratio: 1/1;
  position: relative;
}

/* ハンバーガー棒線・共通 */
.bl_drawerMenuToggler_bars > span {
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  right: 0;
  background-color: white;
}

/* ハンバーガー棒線の個別設定 */
.bl_drawerMenuToggler_bars > span:nth-child(1) {
  top: 0;
  transition: transform 0.3s ease-in-out;
}
.bl_drawerMenuToggler_bars > span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease-in-out;
}
.bl_drawerMenuToggler_bars > span:nth-child(3) {
  bottom: 0;
  transition: transform 0.3s ease-in-out;
}

/* ハンバーガー棒線の個別設定・アクティブ時 */
.bl_drawerMenuToggler[aria-expanded="true"]
  > .bl_drawerMenuToggler_bars
  > span:nth-child(1) {
  transform: translate(0, 14px) rotate(45deg);
}
.bl_drawerMenuToggler[aria-expanded="true"]
  > .bl_drawerMenuToggler_bars
  > span:nth-child(2) {
  opacity: 0;
}
.bl_drawerMenuToggler[aria-expanded="true"]
  > .bl_drawerMenuToggler_bars
  > span:nth-child(3) {
  transform: translate(0, -14px) rotate(-45deg);
}

/** ************************************************
  ドロワーメニューのパネル
*/
.ly_drawerMenuPanel {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fffc;
}
.ly_drawerMenuPanel.js_isActive {
  visibility: visible;
  opacity: 1;
}

/*
  ドロワーメニューパネル内のメニュリストのアンカー
*/
.ly_drawerMenuPanel_list > li > a {
  text-decoration: none;
  color: inherit;
}
.ly_drawerMenuPanel_list > li > a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/*
サイトマップ
*/
.ly_sitemap_menu {
  width: fit-content;
  margin-inline: auto;
}

/*
  共通 h2
*/
.el_commonH2 {
  position: relative;
  padding-bottom: 0.5rem;
}

/*
　共通 h2 の飾り
*/
.el_commonH2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 4px;
  background-color: var(--bs-theme-color);
}

.el_commonH3 {
  border-bottom: 1px dotted #ccc;
  padding-bottom: 0.5rem;
}

/*
  共通データリスト
*/
.ly_dataList {
}

.ly_dataList__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-top: 1px dotted #ccc;
  padding-block: 1rem;
}
.ly_dataList__item .ly_dataList__item:last-child {
  border-bottom: 1px dotted #ccc;
}

@media (min-width: 992px) {
  .ly_dataList__item {
    flex-direction: row;
  }
}

.ly_dataList__title {
  min-width: fit-content;
  width: fit-content;
}

@media (min-width: 992px) {
  .ly_dataList__title {
    width: 8rem;
  }
  .ly_dataList__title.ly_dataList__9rem {
    width: 9rem;
  }
  .ly_dataList__title.ly_dataList__10rem {
    width: 10rem;
  }
  .ly_dataList__title.ly_dataList__11rem {
    width: 11rem;
  }
  .ly_dataList__title.ly_dataList__12rem {
    width: 12rem;
  }
}

.ly_dataList__data {
  margin-bottom: 0;
}

/*
  入所費用テーブル
*/
.bl_admissionFeeTable {
}

.bl_admissionFeeTable > thead {
  background-color: var(--bs-theme-color);
  color: white;
}
.bl_admissionFeeTable > thead > tr > th {
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
  min-width: fit-content;
  font-size: 80%;
}
@media (min-width: 576px) {
  .bl_admissionFeeTable > thead > tr > th {
    font-size: 100%;
  }
}

.bl_admissionFeeTable > tbody > tr:nth-child(even) {
  background-color: #f9f9f9;
}
.bl_admissionFeeTable > tbody > tr > td {
  padding-block: 0.5rem;
  padding-inline: 1.5rem;
}
.bl_admissionFeeTable > tbody > tr > td:nth-child(1) {
  text-align: center;
}
.bl_admissionFeeTable > tbody > tr > td:nth-child(2) {
  text-align: right;
}

/*
  時間割表
*/
.bl_timeTable {
  width: fit-content;
}

.bl_timeTable__tBody {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bl_timeTable__clockImg {
  display: block;
  width: 30px;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.bl_timeTable__clockImg.bl_timeTable__bellClockImg {
  aspect-ratio: 1319/1175;
  height: 30px;
  width: auto;
}

.bl_timeTable__header,
.bl_timeTable__data {
  width: 8rem;
}

.bl_timeTable__header {
  border-right: 2px solid green;
  padding-right: 1rem;
}
.bl_timeTable__headerInner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.bl_timeTable__clockWrap {
}
.bl_timeTable__clockWrap.bl_timeTable__bellClockWrap {
}

.bl_timeTable__timeWrap {
  font-size: 80%;
}
.bl_timeTable__data {
  padding-left: 1rem;
  font-size: 80%;
}

@media (min-width: 768px) {
  .bl_timeTable__header,
  .bl_timeTable__data {
    width: 10rem;
  }
  .bl_timeTable__clockImg {
    width: 50px;
  }
  .bl_timeTable__clockImg.bl_timeTable__bellClockImg {
    height: 50px;
  }
  .bl_timeTable__timeWrap {
    font-size: 100%;
  }
  .bl_timeTable__data {
    font-size: 100%;
  }
}

/*
  bootstrap バージョンのページネーションのスタイル修正
*/
.page-item > .page-link {
  color: var(--bs-theme-color) !important;
}
.page-item > .page-link[aria-current="page"] {
  border: 1px solid var(--bs-theme-color) !important;
  background-color: var(--bs-theme-color) !important;
  color: white !important;
}

/*
  サブループ用の自作ページネーションのスタイル
*/
.ly_pagination > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.ly_pagination > ul > li:has(.page-numbers) {
  background-color: #eee;
  color: var(--bs-theme-color);
  padding-inline: 0.5rem;
  border-right: 1px solid gray;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}
.ly_pagination > ul > li:has(.page-numbers):last-child {
  border-right: none;
}
.ly_pagination > ul > li:has(.page-numbers):last-child {
}

.ly_pagination > ul > li:has(.page-numbers.prev),
.ly_pagination > ul > li:has(.page-numbers.next) {
  background-color: var(--bs-theme-color);
  color: white;
}
.ly_pagination a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}

/** ***************************************************************************
提供された食事
*/

.bl_mealsCard {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
}
.bl_mealsCard_imgAnchor {
  display: block;
  width: 100%;
  height: fit-content;
}
.bl_mealsCard_img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
}
.bl_mealsCard_img:hover {
  transition: transform 0.1s ease-in-out;
  transform: scale(1.01);
}
.bl_mealsCard_heading {
  color: inherit;
  font-size: 1rem;
}

/* *************************************************
  「お知らせ」(urgent_notice)のカード
*/

.bl_noticeCard {
  border-radius: 0.5rem;
  border: 1px solid #086827;
  overflow: hidden;
  max-width: 1028px;
  margin-inline: auto;
}
.bl_noticeCard__ttl {
  padding: 1rem;
  font-size: 1.25rem;
  margin-bottom: 0;
  text-align: center;
  background-color: #086827;
  color: white;
}
.bl_noticeCard__content {
  padding: 1rem;
  background-color: white;
}

/*
「園の様子」リスト
*/
.bl_dottedListItem {
  padding-block: 1rem;
  border-bottom: 1px dotted #ccc;
}

.bl_dottedListItem.bl_dottedListItem__borderTop:first-child {
  border-top: 1px dotted #ccc;
}

.bl_listItemFlexWrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 992px) {
  .bl_listItemFlexWrap {
    flex-direction: row;
    gap: 2rem;
  }
}

/*
望洋園での一日表
*/
.bl_dailyRoutineTable {
  border-collapse: collapse;
}

.bl_dailyRoutineTable__tBody {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.5rem;
}
@media (min-width: 768px) {
  .bl_dailyRoutineTable__tBody {
    row-gap: 0;
  }
}

.bl_dailyRoutineTable__row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px dotted #ccc;
}
.bl_dailyRoutineTable__row:last-child {
  border-bottom: 1px dotted #ccc;
}

@media (min-width: 768px) {
  .bl_dailyRoutineTable__row {
    display: grid;
    grid-template-columns: 1fr 3fr;
  }
}

.bl_dailyRoutineTable__th {
  padding-block: 0.5rem;
  padding-inline: 1rem;
  vertical-align: top;
  background-color: var(--bs-theme-color);
  color: white;
}
.bl_dailyRoutineTable__td {
  padding-block: 1rem;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .bl_dailyRoutineTable__td {
    padding-block: 1rem;
  }
  .bl_dailyRoutineTable__th {
    padding-block: 1rem;
  }
}

.bl_dailyRoutineTable__subItemList {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.el_clockIcon {
  display: inline-block;
  width: 1.5rem;
  height: auto;
  aspect-ratio: 1/1;
}

/*
the_posts_pagination()で出力されるデフォルトのページネーション用
*/
.navigation.pagination {
  width: fit-content;
  margin-inline: auto;
  margin-top: 3rem;
}
.navigation.pagination > .nav-links {
  display: flex;
  gap: 0;
  justify-content: center;
}
.navigation.pagination > .nav-links > .page-numbers {
  display: block;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ddd;
  border-right: none;
  color: var(--bs-theme-color);
  text-decoration: none;
  background-color: white;
}
.navigation.pagination > .nav-links > .page-numbers:hover {
  background-color: #f3f3f3;
  transition: background-color 0.15s ease-in-out;
}
.navigation.pagination > .nav-links > .page-numbers:first-child {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.navigation.pagination > .nav-links > .page-numbers:last-child {
  border-right: 1px solid #ddd;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.navigation.pagination > .nav-links > .page-numbers.current {
  background-color: #086827;
  color: white;
}

/** ************************************
  汎用的な grid のクラス
*/
.ly_grid {
  display: grid;
}
.ly_grid.ly_grid__autoRowsFr {
  grid-auto-rows: minmax(0, 1fr);
}
.ly_grid.ly_grid__1c {
  grid-template-columns: repeat(1, 1fr);
}
.ly_grid.ly_grid__2c {
  grid-template-columns: repeat(2, 1fr);
}
.ly_grid.ly_grid__2m3c {
  grid-template-columns: repeat(2, 1fr);
}
.ly_grid.ly_grid__23c {
  grid-template-columns: repeat(2, 1fr);
}
.ly_grid.ly_grid__12c {
  grid-template-columns: repeat(1, 1fr);
}
.ly_grid.ly_grid__24c {
  grid-template-columns: repeat(2, 1fr);
}
.ly_grid.ly_grid__13c {
  grid-template-columns: repeat(1, 1fr);
}
.ly_grid.ly_grid__124c {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 768px) {
  .ly_grid.ly_grid__124c {
    grid-template-columns: repeat(2, 2fr);
  }
}

@media (min-width: 992px) {
  .ly_grid.ly_grid__12c {
    grid-template-columns: repeat(2, 1fr);
  }
  .ly_grid.ly_grid__24c {
    grid-template-columns: repeat(4, 1fr);
  }
  .ly_grid.ly_grid__13c {
    grid-template-columns: repeat(3, 1fr);
  }
  .ly_grid.ly_grid__124c {
    grid-template-columns: repeat(4, 2fr);
  }
  .ly_grid.ly_grid__23c {
    grid-template-columns: repeat(3, 1fr);
  }
}