/*
Theme Name: xeory_base_child　　
Theme URI: http://example.com/
Description: Child theme for the Xeory
Author: バズ部
Author URI: http://bazubu.com/
Template: xeory_base
Version: 0.5.0　　
*/

/* ブラウザによるデフォルトのmarginとpaddingの差異を無くすために、ユニバーサルセレクタを利用して初期化 */
* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  background-color: #f3f8f9;
  font-family: "Noto Sans JP";
  color: #555;
  font-family: "Noto Sans JP";
  font-size: 16px;
}

.pc-none {
  display: none;
}

.sp-none {
  display: block;
}

a:hover {
  opacity: 0.7;
}

/* -----------------------------
Title
--------------------------------*/
.post-content h2 {
  border-bottom: none;
  padding: 20px;
  border-left: 6px solid #00a3c6;
  background: #f3f8f9;
}

.post-content h3 {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  padding: 10px 0;
  border-bottom: 1px solid #00a3c6;
  border-left: none;
}

.post-content h4 {
  padding-left: 20px;
  border-left: 4px solid #00a3c6;
  font-weight: 400;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-0 {
  margin-top: 0 !important;
}

/* -----------------------------
table
--------------------------------*/
.post-content table thead th {
  border: 1px solid #d0d0d0;
  background: #f6f3f5;
  color: #555555;
  font-weight: 600;
}

.wp-block-table thead {
  border-bottom: none;
}

.post-content table th,
.post-content table td {
  background-color: #fff;
}

/* -----------------------------
bg
--------------------------------*/
.bg_light_blue {
  padding: 20px;
  background: #f3f8f9;
}

.bg_green {
  padding: 20px;
  background: #d2e8da;
}

/* -----------------------------

Haeder

--------------------------------*/
/* ヘッダーのドロップダウンメニュー表示用 */
.menu-item-has-children {
  position: relative; /* 子要素を絶対位置で制御するために必要 */
}

.sub-menu {
  position: absolute;
  top: 100%; /* 親要素のすぐ下に表示 */
  left: 0;
  z-index: 1000;
  background-color: #00b0ca;
  min-width: 100px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: none; /* JSと連携 */
  width: 260px;
}

.sub-menu a {
  padding: 4px;
  display: block;
}

#header {
  background-color: #00b0ca;
  padding: 4px 0;
  padding: 2px 14px;
}

#header .wrap {
  display: flex;
  justify-content: space-between;
}

.header_logo_link img {
  max-width: 250px;
}

#gnav {
  margin-top: 0;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 400;
}

#gnav li a {
  background: transparent;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-caption {
  font-size: 0.875rem;
  color: #fff;
  margin-top: 5px;
}

.header-center .gnav {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-center .gnav li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.header-right {
  display: flex;
  gap: 10px;
}

.header_nav {
  display: flex;
  align-items: center;
}

#header .wrap:after {
  display: none;
}

.btn-reserve {
  display: inline-block;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 20px;
}

.btn-reserve.main {
  background: #fff;
  color: #009fc1;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.btn-reserve.sub {
  background: #d2e8da;
  color: #186464;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

.btn-reserve-main__title {
  padding: 2px 12px;
  background-color: #00a3c6;
  color: #fff;
  border-radius: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
}

.btn-reserve-sub__title {
  padding: 2px 12px;
  background-color: #186464;
  color: #fff;
  border-radius: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
}

.btn-reserve img {
  width: 18px;
  margin-left: 8px;
  display: inline-block;
}

/*　TOPページ　記事一覧
--------------------------------*/
.post-loop-wrap {
  background: #fff;
  padding: 50px 20px;
}

.content-wrap {
  display: flex;
  gap: 30px;
}

.article-list {
  flex: 1;
}

.post-card {
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #d6edf2;
}

.post-card a {
  display: flex;
}

.post-card .post-thumb {
  width: 34%;
  margin-right: 5%;
}

.post-card .post-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.post_content {
  width: 61%;
}

.post_title {
  color: #666;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
}

.post_date {
  font-size: 12px;
  color: #383838;
  margin-bottom: 10px;
  padding-left: 20px;
}

.post_excerpt {
  font-size: 1rem;
  color: #777;
  font-weight: 400;
}

/* 既存の sidebar クラスに合わせて調整 */
.sidebar {
  width: 260px;
}

/*　ページネーション
--------------------------------*/
.custom-pagination {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  background-color: #d9f0f5;
  padding: 20px;
  border-radius: 5px;
  list-style: none;
  margin-top: 40px;
  flex-wrap: wrap;
}

.custom-pagination li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-pagination li a,
.custom-pagination li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  color: #00b0ca;
  border-radius: 50%;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s;
}

.custom-pagination li.page-number {
  border-radius: 50%;
}

.custom-pagination li.page-number.current span {
  background: #00b0ca;
  color: #fff;
}

.custom-pagination li a:hover {
  background: #00a0b1;
  color: #fff;
}

.pagination {
  margin-bottom: 0;
}

.pagination .current {
  padding: 0;
  background: transparent;
}

/* 「前へ」「次へ」「最後へ」だけ四角形に */
.custom-pagination li.next a,
.custom-pagination li.last a,
.custom-pagination li.prev a,
.custom-pagination li.first a {
  border-radius: 0px;
}

.custom-pagination li.next .arrow,
.custom-pagination li.last .arrow,
.custom-pagination li.prev .arrow,
.custom-pagination li.first .arrow {
  border-radius: 0 !important;
  background: transparent;
  padding: 0;
}

/*　TOPカテゴリー一覧セクション
--------------------------------*/
.home #content {
  padding-top: 0;
}

.section_top_cat {
  padding: 50px;
  margin-bottom: 70px;
  background: url(./images/bg_intro.jpg);
  background-size: cover;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.section_top_cat .section_inner {
  padding: 20px 30px;
  background-color: #f9fafb;
  max-width: 100%;
}

.top_cat_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.top_cat_item {
  margin-top: 30px;
  margin-bottom: 30px;
  width: calc(100% / 3 - 40px);
}

.top_cat_title {
  display: flex;
  margin-bottom: 14px;
}

.top_cat_title__img {
  width: 40px;
  margin-right: 12px;
}

.top_cat_title__text {
  font-size: 1.125rem;
  color: #00b0ca;
  font-weight: 500;
}

.top_cat_text {
  margin-bottom: 14px;
  font-weight: 400;
  color: #000000;
}

.top_cat_btn__wrapper {
  width: 100%;
}

.top_cat_btn {
  border: solid 1px #e3e3e3;
  padding: 6px;
  width: 100%;
  background-color: #fff;
  color: #000000;
  display: block;
  text-align: center;
  font-size: 0.8125rem;
}

.top_cat_btn:hover {
  text-decoration: none;
}

.top_cat_btn span {
  position: relative;
}

.top_cat_btn span::after {
  content: "";
  background: url(./images/ico_right.png);
  background-size: 100%;
  width: 11px;
  height: 11px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 30px;
  position: absolute;
  top: 6px;
  right: -20px;
}

/* -----------------------------

サイドバー

--------------------------------*/
#recent-posts-3 {
  display: none;
}

.side_clinic {
  margin-bottom: 30px;
  padding: 20px;
}

.side_main_clinic {
  background-color: #d3e9f1;
}

.side_clinic_logo {
  margin-bottom: 10px;
}

.side_clinic_adress {
  margin-bottom: 10px;
}

.side_clinic_adress p {
  color: #00a6cb;
  font-size: 0.875rem;
  font-weight: 600;
}

.side_clinic_tel_wrapper {
  margin-bottom: 10px;
  width: 100%;
}

.side_clinic_tel_link {
  padding: 10px;
  width: 100%;
  background-color: #fff;
  color: #00a6cb;
  font-size: 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.side_clinic_tel_link:hover,
.side_clinic_reservation_link:hover {
  text-decoration: none;
}

.side_clinic_tel_img img {
  width: 24px;
}

.side_clinic_reservation_wrapper {
  width: 100%;
  margin-bottom: 10px;
}

.side_clinic_reservation_link {
  padding: 10px;
  width: 100%;
  color: #fff;
  background-color: #00a6cb;
  font-size: 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span.side_clinic_reservation_img img {
  width: 28px;
  margin-right: 7px;
}

.side_north_clinic {
  background-color: #d2e8da;
}

.side_north_clinic .side_clinic_adress p {
  color: #186464;
}

.side_north_clinic .side_clinic_tel_link {
  color: #186464;
}

.side_north_clinic .side_clinic_reservation_link {
  background-color: #186464;
}

.btn_tel_main {
  background-color: #fff;
}

/* -----------------------------

footer

--------------------------------*/
#footer .wrap {
  padding: 20px 0;
  background-color: #00b0ca;
  color: #fff;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.footer {
  background-color: #fff;
}

.footer_inner {
  max-width: 1110px;
  margin: auto;
  padding: 20px;
  /* display: flex; */
  gap: 30px;
  justify-content: space-between;
}

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

.footer_logo {
  width: 252px;
  margin-bottom: 30px;
}

.footer_info .side_main_clinic {
  background-color: #f3f8f9;
  padding: 0;
}

.footer_info .side_north_clinic {
  background-color: #d2e8da;
  padding: 0;
}

.footer_clinic_inner {
  padding: 20px;
}

.footer_info_title_main {
  background-color: #00a6cb;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
}

.footer_info_title_north {
  background-color: #186464;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
}

#footer .side_main_clinic a.side_clinic_tel_link {
  color: #00a6cb;
}

#footer .side_north_clinic a.side_clinic_tel_link {
  color: #186464;
}

#footer .side_main_clinic a.side_clinic_reservation_link {
  color: #fff;
}

#footer .side_north_clinic a.side_clinic_reservation_link {
  color: #fff;
}

.side_clinic_access {
  color: #00a6cb;
  font-weight: bold;
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.side_north_clinic .side_clinic_access {
  color: #186464;
}

.footer_nav_title {
  padding: 10px;
  background: #00a3c6;
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 12px;
}

.footer_nav_item {
  margin-bottom: 8px;
}

#footer .footer_nav_item a {
  color: #00a3c6;
  font-size: 0.875rem;
  position: relative;
}

#footer .footer_nav_item a::before {
  content: "";
  background: url(./images/ico_footer_arrow.png);
  background-size: 100%;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 10px;
}

.footer_nav_wrapper {
  /* margin-bottom: 40px; */
  display: flex;
  flex-wrap: wrap;
  gap: 0px 35px;
  padding: 0 10px;
  /* border-bottom: solid 1px #00a3c6; */
}

.footer_bottom {
  display: flex;
  gap: 0 30px;
}

.footer_middle {
  /* width: 30%; */
  display: flex;
  gap: 20px;
}

#footer a.footer_page_nav_btn {
  border: solid 1px #00a3c6;
  padding: 20px;
  width: 100%;
  color: #00a3c6;
  display: inline-block;
  margin-bottom: 12px;
}

.footer .side_clinic_reservation_link {
  font-size: 1rem;
}

.footer .side_clinic {
  padding: 0px;
  width: 48%;
}

.footer_left {
  border: solid 1px #00a3c6;
  margin-bottom: 40px;
}

/* -----------------------------

記事詳細ページ

--------------------------------*/
.post-author {
  display: none;
}

.breadcrumb {
  display: none;
}

.post-title {
  margin-bottom: 10px;
}

/* 記事下部の監修者情報
--------------------------------*/
.supervisor-profile {
  margin: 20px;
  padding: 40px;
  border: 1px solid #cccccc;
  background: #fff;
}

.supervisor-profile h3 {
  font-weight: 700;
}

.profile-info {
  width: calc(100% - 240px);
  margin-bottom: 30px;
}

.supervisor-profile .clinic-name {
  font-size: 16px;
  color: #666;
  margin-bottom: 0.5em;
}

.supervisor-profile .name-ja {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #00a3c6;
}

.supervisor-profile .name-en {
  font-size: 16px;
  color: #888;
  margin-left: 0.5em;
}

.profile-body {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 1.5em;
  justify-content: space-between;
}

.profile-image img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

.profile-info h4 {
  margin-top: 1em;
  font-size: 1rem;
  /* border-bottom: 1px solid #ccc; */
}

.profile-info ul,
.profile-info_list {
  list-style: disc;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.profile-info_list_item {
  font-size: 0.75rem;
}

.btn-profile {
  display: inline-block;
  padding: 0.6em 1.2em;
  background: #00a7cc;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.profile-bottom {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.profile-bottom_wrapper {
  padding: 20px;
  background-color: #f3f8f9;
  width: 50%;
}

.profile-btn__wrapper {
  margin-top: 32px;
  text-align: center;
}

.profile-btn__link {
  display: inline-block;
  padding: 0.6em 1.2em;
  background: #00a7cc;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.post-sns {
  border-bottom: 1px solid #eee;
}

.info_box {
  padding: 4px;
  border: 1px solid #d0d0d0;
  background: #fff;
}

.post-content .opening-hours_table table {
  margin-bottom: 10px;
}

.supervisor_wrapper {
  max-width: 360px;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: 40px;
}

.fixed-btn {
  display: none;
}

.mobile_nav {
  display: none;
}

.fa-clock-o:before {
  top: -12px;
}

/* -----------------------------

レスポンシブ

--------------------------------*/
@media screen and (max-width: 1150px) {
  /* 1150pxまでの幅の場合に適応される */
  .top_cat_item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 998px) {
  /* 998pxまでの幅の場合に適応される */
  .top_cat_item {
    width: calc(100% / 2 - 20px);
  }
  .header_nav {
    display: none;
  }
  .fa-align-justify:before {
    top: -10px;
  }
  .mobile_nav {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  /* 768pxまでの幅の場合に適応される */
  .pc-none {
    display: block;
  }
  .sp-none {
    display: none;
  }
  .sp-left {
    text-align: left !important;
  }
  .section_top_cat {
    padding: 50px 10px;
  }
  .top_cat_item {
    width: 100%;
  }
  .post-card a {
    flex-direction: column;
  }
  .post-card .post-thumb {
    width: 100%;
    margin-right: 0;
    margin-bottom: 14px;
  }
  .post_content {
    width: 100%;
  }
  .post-loop-wrap {
    padding: 20px;
  }
  .post-card {
    padding-top: 0;
  }
  .footer_inner {
    flex-direction: column;
  }
  .footer_middle,
  .footer_right {
    width: 100%;
  }
  #footer .wrap {
    margin: 0;
  }
  .header_nav {
    display: none;
  }
  .supervisor-profile {
    padding: 20px;
  }
  .profile-body,
  .profile-bottom {
    flex-direction: column;
  }
  .profile-image {
    text-align: center;
  }
  .profile-info {
    width: 100%;
  }
  .profile-bottom_wrapper {
    width: 100%;
  }
  .footer_middle {
    display: none;
  }
  .fixed-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex;
    opacity: 1;
  }
  .fixed-btn > p {
    width: 100%;
    margin: 0;
  }
  .fixed-btn > p + p {
    border-left: 1px solid #fff;
  }
  .fixed-btn > p a {
    display: block;
    padding: 10px 4px;
    text-align: center;
    color: #fff;
    /* background-color: #c9b789; */
    background: #00a3c6;
    text-decoration: none;
    /* font-size: 1.6rem; */
    opacity: 1;
  }
  .fixed-btn > p.fixed-btn-line a {
    /* background-color: #06c755; */
    background: #186464;
    opacity: 1;
  }
  .footer-02 {
    padding-bottom: 30px;
  }
  .fixed-btn .fa-solid {
    font-size: 12px;
  }
  .is-style-vk-group-alert-danger,
  .is-style-vk-group-alert-info,
  .is-style-vk-group-alert-success {
    padding: 10px;
  }
}

@media screen and (max-width: 500px) {
  /* 500pxまでの幅の場合に適応される */
}