* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #fff;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
}
a {
  text-decoration: none;
  font-size: 16px;
}
h1 {
  font-size: 24px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 18px;
}
p {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* パンくずリスト */
.breadcrumb ul {
  margin: 0 auto;
  max-width: 1200px;
  list-style: none;
  padding: 10px 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 0;
}
.breadcrumb li {
  font-size: 15px;
  font-weight: 400;
  padding-right: 10px;
}
.breadcrumb a {
  font-size: 15px;
  color: #333;
}
.breadcrumb a:hover {
  transition: color 0.3s ease-in-out;
}
.breadcrumb a:hover {
  color: #f4a9bb;
}
/*
  /*
  /* ----------------------メインスタイリング----------------------- */
.s_blog {
  width: 100%;
  padding: 120px 30px 60px 30px;
}
.blog_w {
  max-width: 1180px;
  display: flex;
  margin: auto;
}
.post_grid {
  width: 826px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.post {
  width: 100%;
  padding: 40px 0px;
  display: flex;
  gap: 20px;
  border-top: dashed 1px #ba9d5a;
  position: relative;
}
.post:hover img {
  transition: 0.3s;
  transform: scale(1.1);
}
.post a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.post_contents {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #333333;
}
.post_icatch img {
  width: 280px;
  height: 210px;
}
.post_category span {
  font-size: 15px;
  width: fit-content;
  padding: 2px 18px;
  background-color: #cbbf8b;
  color: #fff;
  border-radius: 5px;
}
.post_day {
  font-size: 13px;
  margin-bottom: -12px;
}
.post_text {
  font-size: 15px;
}
/*
  /*
  /*----------------------予約CTA------------------------*/
.reserve-contents {
  margin-top: 32px;
  padding: 24px 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 1px #d5d5d5;
  box-shadow: 0px 0px 4px 1px rgba(145, 145, 145, 0.1);
  border-radius: 12px;
  gap: 24px;
}
.reserve-contents p {
  text-align: center;
}
.btn-group {
  display: flex;
  gap: 12px;
}
.btn_web {
  display: flex;
  color: #fff;
  align-items: center;
  padding: 16px 75px;
  background-color: #e2abc6;
  border-radius: 5px;
  gap: 8px;
  text-decoration: none;
  white-space: nowrap;
  /*アニメーション*/
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  outline: none;
}
.btn_web:hover {
  box-shadow: 0px 2px 4px #bebebe;
  color: #fff;
  transform: translateY(-6px);
}
.btn_web span {
  display: inline-block;
  width: 24px;
  height: 20px;
  background-image: url(../media/laptop_mac.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.btn_line {
  display: flex;
  align-items: center;
  padding: 16px 75px;
  color: #fff;
  background-color: #2cce2c;
  border-radius: 5px;
  gap: 8px;
  text-decoration: none;
  /*アニメーション*/
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  outline: none;
}
.btn_line:hover {
  box-shadow: 0px 2px 4px #bebebe;
  transform: translateY(-6px);
}
.btn_line span {
  display: inline-block;
  width: 24px;
  height: 20px;
  background-image: url(../media/line_icon.png);
  background-repeat: no-repeat;
  background-size: cover;
}
/* ページネーションスタイル */
ul.page-numbers {
  list-style-type: none; /* リストマーカーを削除 */
  padding: 0;
  display: flex; /* リストを横並びにする */
  justify-content: center; /* 中央に配置 */
}

ul.page-numbers li {
  margin-right: 12px; /* マージンで間隔を開ける */
}

ul.page-numbers a,
ul.page-numbers span {
  font-size: 18px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: transparent; /* 初期背景色は透明 */
  color: inherit; /* テキスト色を継承 */
  transition: background-color 0.3s, color 0.3s; /* 背景色とテキスト色の変更にアニメーションを適用 */
}

ul.page-numbers a:hover,
ul.page-numbers .current {
  background-color: #cbbf8b; /* ホバー時とcurrentに背景色を設定 */
  color: #fff; /* ホバー時のテキストカラーを白にする */
}
/*
  /*
  /*---------------------サイドバー------------------------*/
.blogSidebar {
  width: 324px;
  margin-left: 40px;
}
.blogSidebar_w {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.widgettitle {
  width: 100%;
  background-color: #cbbf8b;
  padding: 12px;
  text-align: center;
}
.widgettitle h3 {
  color: #fff;
}
/*--------------カテゴリーウィジェット-------------*/
.blog_category {
  width: 100%;
  border: solid 2px #f7f7f7;
}
.blog_category ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  list-style: none;
}
.blog_category a {
  font-size: 15px;
  white-space: nowrap;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px;
  /*アニメーション*/
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  outline: none;
}
.blog_category a:hover {
  color: #cbbf8b;
  transform: translateY(-2px);
}
/*--------------人気記事ウィジェット----------------*/
.popular-blogs {
  width: 100%;
  border: solid 2px #f7f7f7;
  border-radius: 5px;
  padding-bottom: 12px;
}
.popular-blogs ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}
.popular-blogs a {
  display: flex;
  gap: 12px;
  padding: 12px;
  color: #333333;
  transition: 0.2s ease;
}
.popular-blogs a:hover {
  color: #ba9d5a;
}
.popular-blogs a:hover img {
  transition: 0.5s ease;
  transform: scale(1.1);
}
.icatch_box {
  width: 70px; /* コンテナの幅 */
  height: 70px; /* コンテナの高さ */
  overflow: hidden; /* コンテナ外の画像を隠す */
  display: flex; /* Flexbox を使用 */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
}
.icatch_img {
  width: auto; /* 幅を自動調整 */
  height: 100%; /* 高さをコンテナに合わせる */
  object-fit: cover; /* 画像をコンテナに合わせてクロップ */
  object-position: center; /* 画像を中央に配置 */
}
.folder-icon {
  width: 14px;
  height: 14px;
}
.widget-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}
.singlepage-category {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.singlepage-category p {
  font-size: 12px;
}
/*----------バナーウィジェット-------*/
figure {
  text-align: center;
}
.banner-wigget {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.banner-wigget img:hover {
  transition: 0.3s;
  transform: scale(1.1);
}
.banner-wigget img {
  width: 100%;
}
/*
  /*
  /*-----------監修者セクション-----------*/
.s_author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px;
}
.author-info {
  width: 90%;
  max-width: 1024px;
  padding: 16px 24px;
  border: solid 2px #f8f7f3;
  border-radius: 5px;
  display: flex;
  gap: 30px;
}
.author-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.author-text h3 {
  font-size: 16px;
  color: #948e7f;
}
.doctor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.name {
  margin-top: 8px;
  font-size: 20px;
}
.name span {
  margin-left: 8px;
  font-size: 14px;
}
.img-box {
  width: 170px; /* コンテナの幅 */
  height: 170px; /* コンテナの高さ */
  overflow: hidden; /* コンテナ外の画像を隠す */
  display: flex; /* Flexbox を使用 */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: flex-start; /* 垂直方向の中央揃え */
  border-radius: 50%;
}
.img-box img {
  width: 100%; /* 幅を自動調整 */
  height: auto; /* 高さをコンテナに合わせる */
}
/*-----------singlepage.html-------*/
.single_post_grid {
  width: 70%;
  padding: 30px 30px 60px 30px;
  border: solid 2px #f7f7f7;
  border-radius: 5px;
}
.single_post_grid img {
  width: 70%;
  display: block;
  margin: 20px;
}
.wp_write_contents {
  padding: 30px 0px;
}
.wp_write_contents h2 {
  margin: 40px 0px;
  padding-bottom: 4px;
  border-bottom: solid 3px #c0c0c0;
  position: relative;
}
.wp_write_contents h2::after {
  position: absolute;
  content: "";
  display: block;
  border-bottom: solid 3px #ba9d5a;
  padding-bottom: 4px;
  width: 70%;
}
.wp_write_contents h3 {
  margin: 10px 0px;
  padding: 15px 15px 15px 30px;
  position: relative;
  z-index: -1;
}
.wp_write_contents h3::before {
  position: absolute;
  content: "";
  background: #ba9d5a;
  width: 15px;
  height: 15px;
  top: 20px;
  left: 5px;
}
.wp_write_contents p {
  font-size: 15px;
  line-height: 2rem;
}
.wp_write_contents ul,
ol {
  background: #fbfbfb;
  border-radius: 8px; /*角の丸み*/
  box-shadow: 0px 0px 4px rgb(182, 182, 182); /*5px=影の広がり具合*/
  padding: 12px 36px;
  margin-bottom: 30px;
}
.wp_write_contents li {
  line-height: 1.5rem;
  padding: 8px 8px;
}
/* ----------デバイス最適化------------ */
/*スモールPC*/
@media screen and (max-width: 1023px) {
  .blog_w {
    flex-wrap: wrap;
    max-width: 768px;
    gap: 60px;
  }
  .post_grid {
    width: 100%;
  }
  .single_post_grid {
    width: 100%;
    padding: 30px 20px 60px 20px;
  }
  .blog_category li {
    width: 100%;
  }
  .blogSidebar {
    width: 100%;
    margin-left: auto;
  }
  .blogSidebar_w {
    flex-direction: column-reverse;
  }
  .banner-wigget {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .banner-wigget img {
    width: 48%;
  }
  .author-info {
    max-width: 768px;
  }
}
/*タブレット*/
@media screen and (max-width: 768px) {
  /*blog*/
  .s_blog {
    padding: 60px 10px 20px 10px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px;
  }
  .s_blog {
    padding: 30px 10px 30px 10px;
  }
  .blog_w {
    max-width: 540px;
    padding-top: 40px;
    flex-wrap: wrap;
  }
  .post_grid {
    width: 100%;
    padding: 20px 0px 20px 0px;
  }
  .post_contents {
    flex: 1;
  }
  .post_contents p {
    display: none;
  }
  .post_icatch {
    width: 35%;
    gap: 20px;
  }
  .post_grid {
    width: 100%;
    padding: 20px 0px 40px 0px;
    gap: 0;
  }
  .post {
    padding: 20px 0px 10px 0px;
  }
  .post_icatch img {
    width: 100%;
    height: auto;
  }
  .post_title {
    font-size: 14px;
  }
  .post_category span {
    font-size: 12px;
  }
  .btn-group {
    flex-direction: column;
  }
  .btn_web {
    font-size: 16px;
  }
  .btn_line {
    font-size: 16px;
  }
  /*予約CTA*/
  .reserve-contents p {
    font-size: 13px;
  }
  /*サイドバー*/
  .blog_category li {
    width: 100%;
  }
  .banner-wigget {
    flex-direction: column;
    align-items: center;
  }
  .banner-wigget img {
    width: 70%;
  }
  /*author*/
  .s_author {
    padding: 10px;
  }
  .author-info {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .author-text {
    align-items: center;
  }
  .author-info {
    max-width: 540px;
  }
  .img-box {
    width: 150px; /* コンテナの幅 */
    height: 150px; /* コンテナの高さ */
  }
  .name {
    margin-top: 8px;
    font-size: 18px;
  }
  .massage p {
    font-size: 13px;
    line-height: 1.4rem;
  }
  .wp_write_contents {
    padding: 10px 0px;
  }
}