@charset "utf-8";
/* 
医者どこCMS WEBサイト

1．共通
2．投稿ページ・固定ページ
3．一覧ページ
4．ボタン
5．ヘッダー
6．ナビゲーション
7．パンくず
8．その他のページタイトル
9．各セクションタイトル
10．ヒーロー
11．お知らせ
12．診療時間表
13．アクセスマップ
14．フッター
15．ページネーション
16．ページTOPへ移動
17．CTA固定（WeB予約　電話番号）
18．検索窓

【サイト固有のTOPページコンテンツ】
クリニック紹介
診療内容
診療内容（固定ページ本文）
折り畳みUI（details要素）
投稿、固定ページの最上部　キャッチコピーと画像の配置
診療料金ページ　料金表（テーブルを利用しない）
固定ページ専用ヒーロー
*/


/* =============================
   オリジナルデザイン用カスタムCSS
============================= */
/* 追加 */
.has-ml-font-size {
  font-size: clamp(20px, 1.6vw, 28px);
}

/* -------------------------
   1．共通
----------------------------- */
/* 各セクションレイアウト */
.custom-site-main {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.custom-news-section,
.custom-services-section,
.custom-access-section {
  clear: both;
  margin: 4rem 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.custom-news-section::after,
.custom-services-section::after,
.custom-access-section::after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (min-width: 1440px) {
  .custom-news-section,
  .custom-services-section,
  .custom-access-section {
    margin: 6rem 0;
  }
}

/* -------------------------------------------
  2．投稿ページ・固定ページ
----------------------------------------------- */
/* 見出し（投稿タイトル） */
h1.custom-entry-title {
  clear: both;
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--color_primary_light);
  padding: 0;
  padding-bottom: 0.6rem;
  padding-top: 1rem;
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  margin-bottom: 0.3rem;
  font-weight: 550;
  color: var(--color_base)!important;
  max-width: var(--content-width); 
  margin: auto;
  line-height: 1.4;
}

/* 見出し（固定ページ本文内）※白抜き */
.custom-h2 {
  clear: both;
  background-color: var(--color_primary_light);
  color: var(--color_white);
  padding: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 8rem;
  margin-bottom: 1rem!important;
  border-radius: 0.2rem;
  line-height: 1.4;
  font-size: clamp(1.25rem, 1.4vw, 1.4rem);
  max-width: var(--outer-width);
}

/* 小出し（固定ページ本文内）※左ラインあり */
.custom-midashi {
  clear: both;
  padding: 0.4rem;
  padding-left: 0.8rem;
  margin-top: 10rem;
  margin-bottom: 1rem!important;
  border-left: 5px solid  var(--color_primary);
  line-height: 1.4;
  font-size: clamp(1.3rem, 1.65vw, 1.65rem)!important;
  max-width: var(--outer-width);
  background-color: #f2f5fe;
}

/* コラム枠 */
.column-box{
    clear: both;
    border:2px solid var(--color_primary_light);
    background:var(--box);
    padding:18px 18px 0 18px;
    border-radius:12px;
    box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
    margin:1.6em 0 2em;
    text-align: left;
  }

/* -------------------------------------------
  3．一覧ページ（categrory・arvhive・tag・search）
----------------------------------------------- */


/* -------------------------------------------
  4．ボタン
----------------------------------------------- */
.custom-btn-blue {
  background-color: var(--color_primary_light);
  color: var(--color_white);
}

.custom-btn-outline {
  background-color: transparent;
  color: var(--color_primary);
  border-color: var(--color_blue);
}

.custom-entry-content .custom-btn {
  text-decoration: none;
}


/* -------------------------
  5．ヘッダー
----------------------------- */
/* ヘッダー内枠：基準箱（ハンバーガーを絶対配置するため） */
.custom-header-inner{
  position: relative;
  padding: 0.4rem 1.5rem 0.4rem 1.5rem;
  max-width: var(--outer-width);
  margin: 0 auto;
}

/* ロゴブロック */
.custom-header-logo{
  display: block;
}

/* リンクをブロック化（中でpとimgを制御しやすくする） */
.wp-block-site-title a{
  display: block;
  text-decoration: none;
}

/* PC：pは右寄せ（幅を100%にして右寄せが効くように） */
.wp-block-site-title p{
  display: block;
  width: 100%;
  margin: 0 0 0.35rem 0;
  color: var(--color_base);
  text-align: right;   /* ← pだけ右寄せ */
  font-size: 0.8rem;
}

/* PC：ロゴは左寄せ */
.wp-block-site-title img{
  display: block;
  width: 180px;        /* ← ロゴサイズ */
  max-width: 100%;
  height: auto;
  margin: 0;           /* ← 左寄せ固定 */
}

/* ハンバーガー：右上固定（現状維持のため絶対配置） */
.custom-nav-toggle{
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* =========================
  スマホ（768px以下）
  - ロゴ中央
  - p非表示
  - ハンバーガーは右上のまま
========================= */
@media (max-width: 768px){
  .custom-header-inner{
    padding: 0.4rem 1.5rem 0.8rem 1.5rem;
  }
  .custom-site-header{
    padding-top: 10px;
  }
  
  .wp-block-site-title p{
    display: none;
  }

  .wp-block-site-title img{
    margin: 0 auto;
    width: 180px;        /* ← スマフォ時のロゴサイズ */
  }
}

/* -------------------------
   6．ナビゲーション
----------------------------- */
.wp-block-navigation {
  max-width: var(--outer-width);
  margin: auto;
}
.wp-block-navigation__icon {
  display: inline-block;
  vertical-align: middle;
}

/* モバイル（〜768px）*/
@media screen and (max-width: 768px) {
  body.no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  .custom-nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }

  .custom-hamburger-icon {
    display: inline-block;
    width: 24px;
    height: 18px;
    position: relative;
    transition: 0.3s;
  }

  .custom-hamburger-icon span {
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--color_base);
    transition: 0.3s;
  }

  .custom-hamburger-icon span:nth-child(1) { top: 0; }
  .custom-hamburger-icon span:nth-child(2) { top: 8px; }
  .custom-hamburger-icon span:nth-child(3) { bottom: 0; }

 .custom-nav-toggle.open .custom-hamburger-icon span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
  }

  .custom-nav-toggle.open .custom-hamburger-icon span:nth-child(2) {
    opacity: 0;
  }

 .custom-nav-toggle.open .custom-hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 8px;
  }

  .wp-block-navigation__responsive-container {
    opacity: 0;
    visibility: hidden;
    transition: 0.1s ease-in-out 0s;
    pointer-events: none;
    position: absolute;
    top: 65px;  /* メニューの表示位置TOPを決める */
    left: 0;
    width: 100%;
    background-color: var(--color_second);
    z-index: 999;
    text-align: center;
    overflow-y: auto;
    height: 100vh;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
  }

  .wp-block-navigation__responsive-container.show {
    opacity: 1;
    visibility: visible;
    transition: var(--custom-transition);
    pointer-events: auto;
  }

  .wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    gap: 0;
    padding: 0 1.5rem 14.5rem;
  }

  .wp-block-navigation__container li {
    width: 100%;
    list-style-type: none;
  }

  .wp-block-navigation-item {
    border-bottom: 1px solid var(--color_white);
  }

  .wp-block-navigation-item a {
    display: block;
    padding: 0.7rem;
    color: var(--color_white);
    text-align: center;
  }

  .has-child {
    overflow: hidden;
    transition: all 0.3s ease-out;
  }

  .has-child > a {
    position: relative;
  }

  .has-child > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 1px solid var(--color_white);
    border-bottom: 1px solid var(--color_white);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform 0.3s ease;
  }

  .has-child.open > a::after {
    transform: translateY(-50%) rotate(45deg);
  }
  
  .custom-sub-menu {
    display: none;
  }
  
  .has-child.open > .custom-sub-menu {
    width: 100%;
    padding: 0;
    margin: 0;
    max-height: 800px;
    height: auto;
    opacity: 1;
    visibility: visible;
    background-color: var(--color_white);
    transition: max-height 0.4s ease-out, opacity 0.2s ease-out, visibility 0.2s ease-out;
  }

  .has-child.open > .custom-sub-menu li a {
    color: var(--color_base);
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--color_primary_light);
    text-align: center;
    display: block;
  }

  .has-child.open > .custom-sub-menu li:last-child a {
    border-bottom: none;
  }

  .has-child.open > .custom-sub-menu li a:hover {
    background-color: #f2f2f2;
  }
} 

/* PC（769px以上） */
@media screen and (min-width: 769px) {
  .wp-block-navigation__responsive-container {
    display: block !important;
    padding: 0.4rem;
    background-color: #fff;
  }

  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .wp-block-navigation__responsive-container[hidden] {
    display: none;
  }

  .wp-block-navigation__container > .wp-block-navigation-item {
    text-align: center;
    border-right: 1px solid var(--color_primary_light);
    flex: 1;
  }

  .wp-block-navigation__container > .wp-block-navigation-item:first-child {
    border-left: 1px solid var(--color_primary_light);
  }

  .wp-block-navigation-item a {
    color: var(--color_primary);
    display: inline-block;
    font-size: clamp(14px, 1.2889vw, 18px);
    font-weight: 500;
    letter-spacing: 0;
  }

  .wp-block-navigation-item.has-child,
  .wp-block-navigation-item.menu-item-has-children {
    position: relative;
    cursor: pointer;
  }

  .wp-block-navigation-item.has-child .custom-sub-menu,
  .wp-block-navigation-item.menu-item-has-children .custom-sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    list-style: none;
    margin: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
    min-width: 160px;
    width: 100%;
  }

  .has-child:hover .custom-sub-menu {
    padding: 0;
    display: block;
  }

  .custom-sub-menu li a {
    display: block;
    padding: 0.7rem 0;
    margin: 0 1rem;
    color: var(--color_base);
    text-decoration: none;
    border-bottom: 1px solid var(--color_primary_light);
    font-size: clamp(14px, 1.1111vw, 16px);
    line-height: 1.2;
    box-sizing: border-box;  
  }
  
 .has-child:hover .custom-sub-menu li a {
    padding: 0.7rem 0;
    display: block;
  }

  .custom-sub-menu li:last-child a {
    border-bottom: none;
  }

  .custom-sub-menu li a:hover {
    background-color: #f2f2f2;
  }
}

@media screen and (min-width: 1280px) {
  .has-child::before {
    width: 0.7rem;
    height: 0.7rem;
  }
}


/* -------------------------
   7．パンくず
----------------------------- */
.breadcrumb {
  font-size: 0.75rem;
  margin: 1rem auto;
  margin-bottom: 1.5rem;
  margin-top: .4rem;
  width: 1200px;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: 0.5em;
  padding: 0;
  padding-left: 0.5rem;
}
.breadcrumb li::after {
  content: ">";
  margin: 0 0.5em;
}
.breadcrumb li:last-child::after {
  content: "";
}

/* -------------------------
   8．その他のページタイトル
----------------------------- */
#pagetitle {
  max-height: 200px;
  overflow: hidden;
}
.custom-pagetitle-wrapper {
  width: 100%;
  aspect-ratio: 1 / 0.4;
  background-size: cover;
  background-position: center;
}
#pagetitle .custom-pagetitle-wrapper {
  background-image: url("../images/services-hero.jpg");
  display: flex;
  justify-content: center;   /* 横方向中央 */
  align-items: flex-end;     /* 縦方向下揃え */
  height: 200px;
  padding-bottom: 13px;
}

#pagetitle .custom-entry-title {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  text-align: center;
  font-weight: 500;
  color: var(--color_base)!important;
  margin: 0 auto;
  letter-spacing : 3px;
  border: none;
  text-shadow    : 
       2px  2px 2px #ffffff,
      -2px  2px 2px #ffffff,
       2px -2px 2px #ffffff,
      -2px -2px 2px #ffffff,
       2px  0px 2px #ffffff,
       0px  2px 2px #ffffff,
      -2px  0px 2px #ffffff,
       0px -2px 2px #ffffff;
}

@media screen and (max-width: 768px) {
  #pagetitle {
    max-height: 170px;
  }
  #pagetitle .custom-pagetitle-wrapper {
    height: 170px;
  }
  #pagetitle h1.custom-entry-title {
    font-size: 26px;
    text-align: center;
    letter-spacing : 2px;
  }
}

/* -------------------------
   9．各セクションタイトル
----------------------------- */
.custom-heading {
  text-align: center;
  margin: 0 0 2.4rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color_primary);
}

 h2.custom-heading {
  font-size: clamp(28px, 2.5vw, 32px)!important;
  letter-spacing: 0.25rem;
}

.custom-heading .custom-en {
  display: block;
  color: var(--color_base);
}

/* -------------------------
   10．ヒーロー
----------------------------- */

/* ---------- Hero / Swiper 共通 ---------- */
.custom-hero-wrapper { 
  position: relative; 
  width: 100%;
  height: auto!important;
}

.swiper,
.Swiper-wrapper,
.custom-Swiper,
.custom-hero-section,
#hero {
    height: auto!important;
}

/* スライドの高さ（SP） */
.custom-Swiper .swiper-slide{
  aspect-ratio: 1.3 / 1;
  position: relative;
}

/* タブレット〜 */
@media (min-width: 769px){
  .custom-Swiper .swiper-slide{
    aspect-ratio: 5 / 3; /* ← 2枚表示でちょうどよく見える比率例 */
  }
}

/* PC〜 */
@media (min-width: 1025px){
  .custom-Swiper .swiper-slide{
    aspect-ratio: 3 / 2; /* ← 3枚表示で高さが出すぎない例 */
  }
}

.custom-Swiper .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- フェード時の操作感向上（任意だが推奨） ---------- */
/* fadeエフェクトでは非アクティブスライドの操作を無効化 */
.swiper-fade .swiper-slide { pointer-events: none; }
.swiper-fade .swiper-slide.swiper-slide-active { pointer-events: auto; }


/* ---------- スライド内テキスト（h1 と p を直接スタイル） ---------- 
.custom-Swiper .swiper-slide h1,
.custom-Swiper .swiper-slide p {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  margin: 0;
  z-index: 2;
}

.custom-Swiper .swiper-slide h1 {
  font-size: clamp(42px, 3.6vw, 46px);
  font-weight: 700;
  margin-bottom: 0;
  padding: 0;
  color: #1933d4;
  line-height: 1.6;
  text-shadow:
  0 0 2px #fff,
  0 0 4px #fff,
  0 0 8px #fff,
  0 0 14px rgba(255,255,255,0.95),
  0 0 22px rgba(255,255,255,0.9),
  0 0 32px rgba(255,255,255,0.85);
}
.custom-Swiper .swiper-slide p {
  font-size: clamp(30px, 2.8vw, 28px);
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  text-shadow:
  0 0 2px #fff,
  0 0 4px #fff,
  0 0 8px #fff,
  0 0 14px rgba(255,255,255,0.95),
  0 0 22px rgba(255,255,255,0.9),
  0 0 32px rgba(255,255,255,0.85);
}*/

/* 余白・配置の微調整（PCで少し上に） 
@media (min-width: 769px) {
  .custom-Swiper .swiper-slide h1 { bottom: 6rem; left: 2rem; right: auto; }
  .custom-Swiper .swiper-slide p  { bottom: 2rem; left: 2rem; right: auto; }
}*/

/* スマホ最適化 */
@media (max-width: 768px) {
  .custom-Swiper { width: 100%; overflow: hidden; }
 /* .custom-Swiper .swiper-slide h1 {
    margin-bottom: 1em;
    padding: 0;
  }*/
}


/* -------------------------
   11．お知らせ
----------------------------- */
.custom-news-wrapper {
  clear: both;
  max-width: var(--content-width);
  margin: auto;
  height: auto;
}

.custom-news-wrapper li {
  border-top: 1px solid var(--color_primary_light);
  margin: auto!important;
  font-size: clamp(14px, 1.6667vw, 18px);
  padding: 1rem 0.5rem;
  text-align: left;
  list-style-type: none;
  text-decoration: none;
}

.custom-news-wrapper li:last-child {
  border-bottom: 1px solid var(--color_primary_light);
}
.custom-news-wrapper a {
  display: block;
  text-decoration: none;
}

.custom-news-wrapper time {
  color: var(--color_base);
  padding-left: 0.5rem;
}

.custom-news-wrapper time {
  display: inline-block; /* 安全にコントロールする */
  padding-left: 0.25rem; /* もしくは 0 にして様子を見る */
  font-size: 0.75em;
  max-width: 100%;
  overflow-wrap: break-word;
}

@media screen and (min-width: 769px) {
  .custom-news-wrapper {
    width: 1000px;
    margin: auto!important;
  }
  .custom-news-wrapper time {
    font-size: 0.85em; 
    padding-left: 0.5rem;
  }
}


/* -------------------------
   12．診療時間表
----------------------------- */
.custom-hours-wrapper {
  overflow-x: auto;
  width: 100%;
}
.custom-hours,
.custom-about-hours {
  flex: 1;
  min-width: unset;
  width: 100%;
}
.custom-about-hours {
  text-align: left;
}
.custom-hours table.timetable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  border-top: 1px solid var(--color_base);
}
.custom-hours table.timetable th:first-child,
.custom-hours table.timetable td:first-child {
  width: auto;
  max-width: 60px;
  white-space: nowrap;
}
.custom-hours table.timetable thead tr {
  border-top: 1px solid var(--color_base);
}
.custom-hours table.timetable tbody tr:first-child {
  border-top: 1px solid var(--color_base);
  border-bottom: 1px solid var(--color_base);
}
.custom-hours table.timetable tbody tr:last-child {
  border-bottom: 1px solid var(--color_base);
}
.custom-hours table.timetable th,
.custom-hours table.timetable td {
  padding: 1rem 0.5rem;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
.custom-hours table.timetable td.custom-on {
    color:  var(--color_second_dark);
}
.custom-hours table.timetable td.custom-on2 {
    color:  var(--color_primary);
}
.custom-hours .custom-note {
  margin: 2rem 0;
  position: relative;
  padding-left: 1.2em;
  text-align: left;
}
.custom-hours .custom-note::before {
  content: "※";
  position: absolute;
  left: 0;
}
@media screen and (min-width: 600px) {
.custom-hours table.timetable th:first-child,
.custom-hours table.timetable td:first-child {
    max-width: 30px;
  }
}
@media screen and (min-width: 769px) {
  .custom-access-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: var(--outer-width);
    margin: auto;
  }
.custom-hours table.timetable th:first-child,
.custom-hours table.timetable td:first-child {
    max-width: 60px;
  }
}
@media screen and (min-width: 1440px) {
  .custom-access-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
  }
}

/* -------------------------
   13．アクセスマップ
----------------------------- */
.custom-access-map {
  clear: both;
  width: 100%;
  margin-top: 1.5rem;
}
.custom-access-map {
  text-align: center;
}
.custom-access-map iframe {
  width: 100%;
}
.custom-access-map p {
  text-align: left;
}
.custom-access-map iframe {
    height: 50vh;
  }

/* -------------------------
   14．フッター
----------------------------- */
.custom-site-footer {
  background-color: #e6ebf4;
  padding: 2rem 0 0.8rem 0;
  text-align: center;
	margin:3rem 0 0 0;
}

.custom-footer-inner {
  margin: auto;
  text-align: center;
  width: 90%;
}

/* フッターバナーの中央寄せ */
.custom-footer-banners {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: auto!important;
  margin-bottom: 2.5rem;
}

.custom-footer-banners figure {
  width: 220px;
  margin: 0;
}

.custom-footer-banners figure a {
  display: block;
  width: 100%;
  text-align: center;
}

.custom-footer-banners figure img {
  display: block;
  margin: 0 auto;
  height: auto;
}

@media screen and (min-width: 769px) {
  .custom-footer-banners {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

/* コピーライト表示 */
.custom-footer-copy {
  clear: both;
  display: block;
  width: 100%;
  margin-top: 1rem;
}

@media screen and (max-width: 768px) {
  .custom-footer-copy {
    margin-bottom: 3.5rem
  }
}
.custom-footer-copy small {
  clear: both;
  font-size: .9rem;
  text-align: center;
}

/* フッターウィジェット */
.custom-footer-widgets-3col {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  margin: 0 auto;
  margin-bottom: 3rem;
  width: 100%;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  max-width: var(--content-width);
}
.custom-footer-col {
  flex: 1;
  min-width: 12.5rem;
  /*border-right: 1px solid var(--color_primary);*/
}
.custom-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-footer-col li {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}

.custom-footer-col li a {
  margin-bottom: 10px;
}

.custom-footer-col a {
  text-decoration: none;
  color: var(--color_base);
  font-size: 0.9rem;
}

.custom-footer-col a:hover {
  color: var(--color_second_dark);
}

.custom-footer-col a:visited {
  color: var(--color_primary_hover);
}

/* 最後のカラムだけ右ライン不要 */
.custom-footer-col:last-child {
  border-right: none;
}

.widget-title {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 1.3rem;
  color: var(--color_base);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--color_primary_light);
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center; 
}

.custom-footer-col .widget,
.widget_categories,
.widget_pages,
.widget_categories {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

.textwidget{
  text-align: left;
}

.widget_nav_menu {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

@media screen and (max-width: 768px) {
  .custom-footer-widgets-3col {
    flex-direction: column;
    gap: 2rem;
  }

  .custom-footer-col {
    min-width: 100%;
    flex: none;
    border-right:none;
  }

  .widget-title {
    text-align: center;
    padding-left: 0;
    width: 100%;
  }
  
  .custom-footer-col li {
    border-bottom-color: var(--color_gray);
  }
  
  .custom-footer-col li a {
    margin-bottom: 0;
  }
}


/* -------------------------
   15．ページネーション
----------------------------- */
/* カテゴリー、アーカイブ一覧のページネーション */
.custom-footer-col li {
  padding: 0;
  margin: 0;
  text-align: left;
}
.custom-pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
  gap: 0.5rem;
  margin: 2.5rem 0;
}
.custom-pagination li a,
.custom-pagination li span {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid var(--color_primary_light);
  color: var(--color_primary);
}
.custom-pagination li .current {
  background-color: var(--color_primary_light);
  color: var(--color_white);
  pointer-events: none;
}

/* 投稿・固定ページのページネーション */
.custom-post-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem; /* ボタンの間隔 */
  margin: 2rem auto;
}

.custom-post-navigation li a {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: var(--color_primary_light);
  color: var(--color_white);
  text-decoration: none;
  border-radius: 9999px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.custom-post-navigation li a:hover {
  background-color: var(--color_primary);
}

/* -------------------------
   16．ページTOPへ移動
----------------------------- */
/* 共通　*/
#pagetop,
#circle-pagetop {
	text-align:center;
  background-color: var(--color_second);
  color: var(--color_white);
	z-index:99999;
  font-size: 0.8rem;
}
#circle-pagetop a,
#circle-pagetop a:link,
#circle-pagetop a:visited,
#circle-pagetop a:hover,
#circle-pagetop a:active,
#pagetop a,
#pagetop a:link,
#pagetop a:visited,
#pagetop a:hover,
#pagetop a:active {
	display:block;
}

/* 横型 <a href="#top" title="ページTOP" id="pagetop">▲ ページトップへ</a>　*/
#pagetop {
	position:fixed;
	bottom:25px;
	right:0px;
	margin: 0;
  padding:5px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
@media screen and (max-width: 768px) {
  #pagetop {
	  position:fixed;
	  bottom:70px;
	  right:0px;
  }
}

/* 円形　<a href="#top" title="ページTOP" id="circle-pagetop">▲</a>　*/
#circle-pagetop {
	position:fixed;
	bottom:20px;
	right:10px;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	vertical-align:middle;
	padding-top:15px;
}
@media screen and (max-width: 768px) {
  #circle-pagetop {
	  position:fixed;
	  bottom:50px;
	  right:10px;
  }
}


/* -----------------------------------
   17．CTA固定　WeB予約　電話番号
------------------------------------- */
/* 縦型（スマフォ 画面下に固定） */
.custom-fixed-btn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom-fixed-btn-list li {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color_white);
}
.custom-fixed-btn-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 500;
  color: var(--color_white);
  text-decoration: none;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.custom-fixed-btn-list a img {
  width: 1.4rem;
  height: auto;
  margin: 0 auto 0.2rem auto;
  display: block;
  vertical-align: middle;
  text-align: center;
}
.custom-fixed-btn-list a span {
  line-height: 1;
  margin: 0;
  padding: 0;
  display: block;
}
.custom-fixed-btn-list li.custom-reserve-btn a:hover,
.custom-fixed-btn-list li.custom-tel-btn a:hover {
  background-color: var(--color_second);
}

@media screen and (max-width: 768px) {
  .custom-fixed-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
  }

  .custom-fixed-btn-list {
    display: flex;
    justify-content: center;
    background-color: var(--color_primary_light);
    height: 60px;
    margin: 0;
    padding: 0;
  }

  .custom-fixed-btn-list li {
    flex: 1;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .custom-fixed-btn-list li:first-child {
    border-right: 1px solid var(--color_white);
  }

  .custom-fixed-btn-list a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    color: var(--color_white);
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .custom-fixed-btn-list a:hover {
    background-color: var(--color_primary);
  }

.custom-fixed-btn-list img {
    margin: 0 auto 0.4rem auto!important;
  }

  .custom-fixed-btn-list a span {
    font-size: 0.9rem;
    line-height: 1;
  }
}

/* ▼ スマホでは電話番号を横並びに戻す */
@media screen and (max-width: 768px) {
  .tel-vertical {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    line-height: 1;
    margin: 0;
    padding: 0;
  }

  .tel-vertical > span {
    display: inline !important;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  .tel-vertical > .rotate-bracket {
    transform: none !important;
    margin: 0;
    padding: 0;
  }
}

@media screen and (min-width: 769px) {
  .custom-fixed-btn {
    position: fixed;
    top: 14rem;
    right: 0;
    left: auto;
    z-index: 1000;
  }
  .custom-fixed-btn-list {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    background-color: transparent;
  }
  .custom-fixed-btn-list li:first-child {
    margin-bottom: 0.5rem;
  }
  .custom-fixed-btn-list a {
    background-color: var(--color_primary_light);
    border-radius: 1.2rem 0 0 1.2rem;
    padding: 0.9rem 0.6rem 0.9rem;
    min-height: 100px;
    width: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    border: 2px solid transparent;
    transition: var(--custom-transition);
    color: var(--color_white);
    text-decoration: none;
  }
  .custom-fixed-btn-list img {
    margin: 0 auto;
  }

  /* ▼ ラベル用テキストだけ縦書きに（電話番号は除外） */
  .custom-fixed-btn-list a > span:not(.tel-vertical) {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.2;
    margin-top: 0.2rem;
    font-size: 1.2rem;
  }

  /* ▼ PC用：telリンクを無効化して縦書き表示に（JSが置換時に使用） */
  .custom-tel-btn-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color_primary_light);
    border-radius: 1.2rem 0 0 1.2rem;
    padding: 0.9rem 0.6rem;
    min-height: 100px;
    color: var(--color_white);
  }

  /* ▼ 電話番号：1文字ずつ縦積み（writing-modeは使わない） */
  .tel-vertical {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1;
    margin-top: 0.3rem;
    padding: 0.4rem 0.4rem 0.3rem;
    color: var(--color_white) !important;
    text-align: center !important;
  }
  .tel-vertical > span {
    display: block !important;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0;
  }
  .tel-vertical > .rotate-bracket {
    display: block;
    transform: rotate(90deg);
    transform-origin: center;
    line-height: 1;
    font-size: 1.15rem;
    margin: -0.3rem;
    padding-bottom: 0.5rem;
    color: var(--color_white) !important;
    text-align: center !important;
  }
}

/* -----------------------------------
   18．検索窓
------------------------------------- */
@media screen and (max-width: 768px) {
  .footer-search {
    margin: 0 auto 0 auto;
    max-width: 260px;
  }
}


/* =============================
   サイト固有のTOPページコンテンツ
============================= */

/* -------------------------
   クリニック紹介
----------------------------- */
.custom-intro-section {
  padding: 5rem 0 5rem 0;
  background-color: var(--color_second);
}
.custom-clinic-intro p {
  margin-bottom: 1rem;
}
@media screen and (min-width: 769px) {
  .custom-intro-section {
    padding: 5rem 0 4rem 0;
    background-color: var(--color_second);
  }
}

/* クリニック紹介　共通 */
.custom-intro-wrapper {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem;
  overflow: visible;
}

.custom-clinic-image {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.custom-clinic-image > img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  display: block;
}

/* クリニック紹介　PC：画像左上＋テキスト右下・余白最小 */
@media screen and (min-width: 769px) {
  .custom-intro-wrapper {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }

  .custom-clinic-image {
    width: 60%;
    position: relative;
    z-index: 1;
  }

  .custom-clinic-image > img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
  }

  .custom-intro-text {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 42%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0.6rem 0.6rem 0.4rem rgba(0, 0, 0, 0.2);
    z-index: 2;
  }
}

/* クリニック紹介　SP：画像上＋白ボックス中央・背景にはみ出さない */
@media screen and (max-width: 768px) {
  .custom-intro-wrapper {
    padding-bottom: 8rem; /* テキストボックスの分だけ下余白を確保 */
    margin: auto;
  }

 .custom-clinic-image {
    width: 96%;
    margin: auto;
  }
    
  .custom-intro-text {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80%;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    padding: 1.5rem;
    border-radius: 1.2rem;
    box-shadow: 0.4rem 0.4rem 0.3rem rgba(0, 0, 0, 0.2);
    z-index: 2;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 380px) {
  .custom-intro-text {
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    padding: 1rem;
    font-size: 0.6rem;
    line-height: 1.4;
  }
}

/* -------------------------
   診療内容
----------------------------- */
.custom-services-section {
  background-color: var(--color_second);
}

.custom-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.custom-service-box {
  background-color: #f5f5f5;
  padding: 1.25rem;
  text-align: center;
  border-radius: 6px;
  transition: background-color 0.3s;
}
.custom-service-box:hover {
  background-color: #e0e0e0;
}

/*.custom-main-menu {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: var(--outer-width);
  margin: auto;
}*/

.custom-main-menu {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  margin: 0 auto;
  max-width: var(--outer-width);
  padding: 0;
}

.custom-main-menu-item {
  background-color: #fcf2fa;
  border: 2px solid #f2c1eb;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.1rem 0.1rem 0 rgb(119, 143, 210, 0.6);
}
.custom-main-menu-item a {
  text-align: center;
  padding: 0.5rem;
  line-height: 1.2;
  font-weight: bold;
  font-size:0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 84px;
}
.custom-sub-menu-item {
  display: block;
  color: var(--color_base);
  letter-spacing: 0;
  margin-top: 0.5rem;
  font-weight: normal;
}
.custom-sub-menu-item {
    font-size: 0.8rem;
}

@media (min-width: 600px) {
  .custom-main-menu {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1rem;
    column-gap: 1.5rem;
  }
  .custom-main-menu-item a {
    font-size: clamp(15px, 1.6667vw, 20px);
  }
  .custom-sub-menu-item {
    font-size: 0.8rem;
  }
}
@media screen and (min-width: 769px) {
  .custom-main-menu-item {
    box-shadow: 0.3rem 0.3rem 0.3rem 0 rgb(119, 143, 210, 0.6);
    transition: var(--custom-transition);
  }
  .custom-main-menu-item:hover {
    box-shadow: none;
    transform: translate(0.2rem, 0.2rem);
  }
  .custom-main-menu-item a {
    min-height: 76px;
  }
  .custom-sub-menu-item {
    font-size: 0.9rem;
  }
}
@media (min-width: 900px) {
  .custom-main-menu {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.5rem;
  }
}
@media (min-width: 1280px) {
  .custom-main-menu-item a {
    min-height: 90px;
  }
}
@media screen and (min-width: 1440px) {
  .custom-main-menu-item a {
    min-height: 100px;
  }
}

/* -------------------------
   診療内容（固定ページ本文）
----------------------------- */
.under-page {
  min-height: 500px;
  margin: 1.5rem auto;
  max-width: var(--content-width);
}
@media screen and (min-width: 1440px) {
  .under-page {
    margin: 3.5rem auto;
  }
}

/* ------------------------------
   診療時間表（クリニック紹介ページ）
---------------------------------- */
table.timetable {
  width: 100%;
  margin-bottom: 1rem;
  border-top: 1px solid var(--color_base);
}
table.timetable > th:first-child,
table.timetable > td:first-child {
  width: auto;
  max-width: 60px;
  white-space: nowrap;
}
table.timetable > thead tr {
  border-top: 1px solid var(--color_base);
}
table.timetable > tbody tr:first-child {
  border-top: 1px solid var(--color_base);
  border-bottom: 1px solid var(--color_base);
}
table.timetable > tbody tr:last-child {
  border-bottom: 1px solid var(--color_base);
}
table.timetable > th,
table.timetable > td {
  padding: 1rem 0.5rem;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
table.timetable > td.custom-on {
    color:  var(--color_second);
}

/* ----------------------------------------------
   折り畳みUI　O&A

  <details class="acc">
    <summary class="acc-summary"><span style="color: #4255cc;">Q</span> Qテキスト</summary>
  <div class="acc-panel">
    <p><span class="answer">A</span> Aテキスト</p>
  </div>
  </details>
-------------------------------------------------- */
.acc { overflow: hidden; clear: both; border:1px solid var(--color-gray,#ddd); border-radius:8px; margin:16px 0; background:#fdf9fc; }
.acc:hover { background:#f9f9fe; }
.acc[open] { box-shadow:0 2px 8px rgba(0,0,0,.05); }
.acc[open] .acc-summary::after{ transform:rotate(-135deg); }
.acc-panel > p > span.answer,.acc-panel > span.answer{ font-size: 1.3rem; font-weight:600; color: #e883cb;}
.acc + .acc { margin-top:12px; }


/* ----------------------------------------------
   折り畳みUI　コラムをクリックで開閉

  <details class="acc_box">
    <summary class="acc-summary"><span style="color: #4255cc;">Q</span> Qテキスト</summary>
  <div class="acc-panel">
    <p><span class="answer">A</span> Aテキスト</p>
  </div>
  </details>
-------------------------------------------------- */
.acc_box { overflow: hidden; clear: both; border:1px solid var(--color-gray,#ddd); border-radius:8px; margin:16px 0; background: #c2d0fa; color: var(--color_base);}
.acc_box:hover { background: #eff3fc; color: var(--color_base);}
.acc_box[open] {  background: #eff3fc; color: var(--color_base); box-shadow:0 2px 8px rgba(0,0,0,.05); }
/*.acc_box { border:1px solid var(--color-gray,#ddd); border-radius:8px; margin:16px 0; background: #edbfe0; color: var(--color_white);}
.acc_box:hover { background: #f6eff4; color: var(--color_base);}
.acc_box[open] {  background: #f6eff4; color: var(--color_base); box-shadow:0 2px 8px rgba(0,0,0,.05); }*/
.acc_box[open] .acc-summary::after{ transform:rotate(-135deg); }
.acc_box + .acc_box { margin-top:12px; }


/* ----------------------------------------------
   折り畳みUI（details要素）共通
-------------------------------------------------- */
.acc-summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.5em; padding:12px 16px; font-weight:700; user-select:none; }
.acc-summary::-webkit-details-marker { display:none; }
.acc-summary::after{ content:""; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:auto; transition:transform .2s ease; }
.acc-summary > span { font-size: 1.3rem; font-weight:600; }
.acc-panel{ padding:0 16px 16px; }
.acc-panel > p { font-size: 0.94rem;}
.acc-panel { font-weight:normal;}
.acc-panel > ol li, .acc-panel > ul li{ font-size: 0.94rem;}

/* ----------------------------------------------
   折り畳みUI 患者様の声
-------------------------------------------------- */
/* 折りたたみ全体の基本デザイン */
details.acc-voics {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 16px 0;
  background-color: #fff;
  overflow: hidden;
  text-align: left;
}

/* summary部分（タイトル行） */
.acc-voics-summary {
  cursor: pointer;
  display: block;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 1.05em;
  position: relative;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}
.acc-voics-summary:hover {
  background-color: #f1f3f5;
}

/* 開閉アイコン */
.acc-voics-summary::-webkit-details-marker {
  display: none; /* デフォルトの三角を非表示 */
}
.acc-voics-summary::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.2em;
  color: #333;
  transition: transform 0.2s ease;
}
details[open] .acc-voics-summary::after {
  content: "－";
}

/* 日付部分 */
.acc-voics-date {
  font-weight: normal;
  font-size: 0.9em;
  color: #666;
  margin-left: 0.5em;
}

/* 折りたたみ内部（本文） */
.acc-voics-panel {
  padding: 16px 20px 20px;
  border-top: 1px solid #eee;
  background-color: #fff;
  animation: fadeIn 0.25s ease;
}
.acc-voics-panel h5 {
  margin-top: 0;
  color: #333;
  font-size: 1em;
  font-weight: 600;
}
.acc-voics-panel p {
  margin: 0.8em 0;
  line-height: 1.7;
  color: #444;
}

/* 画像がある場合 */
.acc-voics-panel img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0 1em;
}

/* 開閉アニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acc-voics-block { margin: 0 0 1.2em; }
.acc-voics-h6 { margin: 0 0 .4em; font-size: .95rem; font-weight: 700; color: #333; }
.acc-voics-patient .acc-voics-text {
  padding: .8em 1em;
  background: #f8fbff;
  border-left: 4px solid #6aa6d6;
  border-radius: 4px;
  line-height: 1.8;
}
.acc-voics-clinic .acc-voics-text { line-height: 1.9; }

/* ----------------------------------------------
   折り畳み内の画像・ブロック要素の表示を安定化
-------------------------------------------------- */
.acc-panel img {
  max-width: 100%;
  height: auto;
  display: block; /* 画像下に余白が出ないように */
  margin: 12px auto 20px; /* 中央寄せ・上下余白 */
  border-radius: 4px; /* デザインを柔らかく */
}

/* 折り畳み開閉アニメーション（任意） */
details.acc summary {
  cursor: pointer;
}
details.acc[open] .acc-panel {
  animation: openAcc 0.3s ease-in-out;
}

@keyframes openAcc {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ----------------------------------------------
   投稿、固定ページの最上部　キャッチコピーと画像の配置(検査ページ)
-------------------------------------------------- */
.equipment-section {
  display: flex;
  align-items: center;       /* 縦方向中央揃え */
  justify-content: center;   /* 横方向中央揃え */
  gap: 40px;                 /* テキストと画像の間隔 */
  flex-wrap: wrap;           /* 狭い画面では縦並び */
  text-align: center;
  margin: 40px auto;
  max-width: 1100px;
}

.equipment-text {
  flex: 1 1 45%;
  display: flex;
  align-items: center;       /* テキストブロック自体を縦中央 */
  justify-content: center;
}

.equipment-text h3 {
  font-size: 1.7rem;
  line-height: 1.8;
  margin: 0;
}

.equipment-image {
  flex: 1 1 30%;
  display: flex;
  justify-content: center;
}

.equipment-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .equipment-section {
    flex-direction: column;
    gap: 20px;
  }
  .equipment-text h3 {
    font-size: 1.4rem;
  }
}


/* ----------------------------------------------
   診療料金ページ　料金表（テーブルを利用しない場合）※未使用
-------------------------------------------------- */
/* タグ風見出し */
.insurance-fee .chip{
  display:inline-block;
  padding:4px 10px;
  border:1px solid #9da3af;
  border-radius:4px;
  font-weight:600;
  margin-bottom:12px;
  background:#fff;
}

/* 行を横並びにするグリッド */
.fee-grid{
  display:grid;
  grid-template-columns: 140px 1fr 1fr; /* 左：項目／右：2カラム */
  gap:16px 24px;
}

/* 行のベース装飾（画像②のようにうっすら区切り線） */
.fee-grid > div{
  padding:10px 0;
  border-bottom:1px solid #e9ecef;
}
.fee-grid > div:nth-last-child(-n+3){ border-bottom:none; } /* 最終行の下線を消す */

/* 左端の項目名 */
.fee-name{
  font-weight:600;
  line-height:1.7;
}

/* 右側の「3割負担（○円）」形式 */
.fee-cell{
  display:flex;
  align-items:center;
  gap:.4em;       /* 「3割負担」と金額のカッコの間隔 */
  line-height:1.7;
}
.fee-cap{ font-weight:600; }
.fee-val{ letter-spacing:.02em; }

/* スマホ：項目名を1行に出し、金額2列がその下に並ぶ */
@media (max-width: 560px){
  .fee-grid{ grid-template-columns: 1fr 1fr; }
  .fee-name{ grid-column: 1 / -1; } /* 項目名は横幅いっぱい */
}

/* ==============================
   固定ページ専用ヒーロー
   ============================== */
.custom-hero {
  position: relative;
  width: 100%;
  max-width: 1000px;      /* 画像サイズに合わせて中央寄せ */
  margin: 0 auto 40px;    /* 下に余白 */
  aspect-ratio: 2 / 1;    /* 1000 x 500 に合わせた比率 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* うっすら暗くして文字を読みやすく */
.custom-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

/* テキストボックス（画像下方に配置） */
.custom-hero__inner {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: min(90%, 920px);
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-sizing: border-box;
}

/* 見出し部分（例：キャッチコピー） */
.custom-hero__label {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 700;
}

/* 説明テキスト キャッチコピー下 */
.custom-hero--menopause .custom-hero__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--color_primary_hover);
}

/* 説明テキスト キャッチコピー下2　*/
.custom-hero--placenta .custom-hero__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 700;
  color: var(--color_primary_hover);
}

/* スマホ向け調整 */
@media (max-width: 768px) {
  .custom-hero {
    margin-bottom: 24px;
  }

  .custom-hero__inner {
    bottom: 6%;
    padding: 1rem 1rem;
  }

  .custom-hero__label {
    font-size: 1.15rem;
  }

  .custom-hero--menopause .custom-hero__text,
  .custom-hero--placenta .custom-hero__text {
    font-size: 1.1rem;
  }
}

/* =============================
   院内紹介ページ
   ============================= */

/* リード文 */
.clinic-inner-page .clinic-lead {
  max-width: var(--content-width);
  margin: 2rem auto 1.5rem;
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  /*color: var(--color_primary_hover);*/
}

/* ① 最上段の画像 */
.clinic-hero-image {
  width: 100%;
  margin: 0 0 0.6rem;
}

/* このページ内の figure 余白をリセット */
.clinic-inner-page figure,
.clinic-inner-page img {
  margin: 0!important;
  padding: 0!important;
}

.clinic-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ② ギャラリー全体 */
.clinic-gallery {
  margin: 0 0 4rem;      /* 上 0、下だけ余白 */
}

/* 3 → 2 → 1 列のレスポンシブグリッド */
.clinic-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* 各画像の枠 */
.clinic-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;        /* すべて同じ比率で揃える */
}

/* 画像本体 */
.clinic-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;         /* 念のため画像側にも同じ角丸 */
}

/* 980px以下：2列 */
@media (max-width: 980px) {
  .clinic-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 600px以下：1列 */
@media (max-width: 600px) {
  .clinic-hero-image {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .clinic-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.clinic-inner-page.wp-block-group figure,
.wp-block-group.alignwide .clinic-inner-page figure {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.clinic-inner-page.wp-block-group img,
.wp-block-group.alignwide .clinic-inner-page img {
  margin-top: 0 !important;
  padding-top: 0 !important;
}