@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ==========================================================
   ヘッダー高さ変数
   → PC/スマホの固定ヘッダーの高さと、bodyのpadding-topが
     必ず一致するよう、単一の変数から計算する
========================================================== */
:root {
  --pc-header-top-h: 70px;
  --pc-header-menu-h: 50px;
  --sp-header-h: 74px;
}

/* ==========================================================
   投稿日・投稿者・タイトルなど非表示
========================================================== */
.entry-date,
.entry-meta,
.post-meta,
.author-info,
.byline,
.date-tags,
.entry-title,
.page-title,
.footer-meta,
.article-header .entry-title,
.entry-header .entry-title,
.footer-meta .author-info,
.article-footer .author-info {
  display: none !important;
}

/* ==========================================================
   content / main / body の余白リセット
========================================================== */
.content,
.main,
#main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body {
  padding-top: 0;
}

/* ==========================================================
   fv-full / fv-pc（トップ画像フル幅）
   → 基準サイト(seitai-ti-da.com)同様、767/768pxの一段のみで切替
========================================================== */
@media (max-width: 767px) {
  .fv-full,
  .fv-pc {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /* PC用FVを隠し、スマホ用FVのみ表示 */
  .fv-pc {
    display: none !important;
  }

  .fv-sp {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

@media (min-width: 768px) {
  /* 志木店の .index01 と同じ方式：imgタグに依存せず、background-imageで高さを504px固定する
     （PC・iPad共通。object-fit相当の役割は background-size: cover が担う） */
  .fv-full,
  .fv-pc {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    height: 504px !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    overflow: hidden;
  }

  /* スマホ用FVを隠し、PC用FVのみ表示 */
  .fv-sp {
    display: none !important;
  }
}

/* PC・iPad共通（768px以上）のヘッダー高さ調整は既存のまま。
   FVの高さは上のブロックに統合したため、ここでの上書きは不要になった */
@media (min-width: 1024px) {

  /* PC版FVのみ、表示位置を調整（高さ504px・width・aspect比は変更しない） */
  body .fv-pc {
    background-position: center -100px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  /* FV上部に表示されるCocoonのタグライン文言を非表示（PCのみ） */
  .tagline {
    display: none !important;
  }

  /* 志木店の実測値（header .inner 189px − タグライン29px = 160px、
     うちナビ60px・ロゴ〜電話番号の行100px）に合わせたPC専用の高さ上書き。
     :root の変数は変更せず、プロパティを直接上書きすることで
     iPad（768〜1023px）側の768pxブロックには一切影響しない */
  .pc-header-top {
    height: 100px !important;
  }

  /* .pc-logo/.pc-info/.pc-contact が90px固定のままだと、
     上の .pc-header-top を100pxにしても中身が上寄りに余白ができるだけで
     クリップは発生しないため、ここは既存の90pxのまま変更しない */

  .pc-menu {
    height: 60px !important;
  }

  /* 768px共通ブロックの .pc-header{position:fixed !important} はファイル後方にあり、
     同じ詳細度・!important同士のためソース順で勝ってしまい、PCでも固定されたままだった。
     body .pc-header（クラス+要素で詳細度を上げる）にして確実にstaticを勝たせる */
  body .pc-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    margin-left: 0 !important;
  }

  /* ヘッダーが通常の流れに戻ったため、高さぶんは自動的に確保される。
     固定ヘッダー用のbody上余白（120px）はPCでは不要になったため0に戻す */
  body {
    padding-top: 0 !important;
  }
}

.fv-full,
.fv-pc,
.fv-sp {
  margin-top: 0 !important;
}

.fv-full img,
.fv-pc img,
.fv-sp img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================
   main-before.php への移設に伴う安全策
   → #content の外側（main-before.php）に新しいコピーを設置したため、
     本文（#main）側に旧コピーが残っていた場合のみ二重表示を防ぐ
========================================================== */
#main .pc-header,
#main .header-wrap,
#main .fv-pc,
#main .fv-sp {
  display: none !important;
}

/* ==========================================================
   キャンペーンボックス
========================================================== */
.campaign-box {
  border: 3px solid #2ea3c9;
  padding: 20px 15px;
  text-align: center;
  margin: 40px 0;
  background: #fff;
}

.campaign-title {
  font-size: 16px;
  margin-bottom: 15px;
  letter-spacing: 2px;
}

.campaign-price {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.campaign-price span {
  font-size: 32px;
  color: #e74c3c;
}

.campaign-price small {
  font-size: 14px;
  color: #e74c3c;
}

.campaign-note {
  font-size: 12px;
  margin-top: 10px;
  color: #666;
}

@media (max-width: 480px) {
  .campaign-box {
    padding: 15px 10px;
  }

  .campaign-price span {
    font-size: 28px;
  }

  .campaign-title {
    font-size: 14px;
  }
}

/* ==========================================================
   お悩みボックス
========================================================== */
.nayami-box {
  background: #e6f1f4;
  border: 4px solid #2ea3c9;
  border-radius: 10px;
  padding: 25px 20px;
  margin: 30px 15px;
}

.nayami-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0;
}

.nayami-box li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

.nayami-box li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  background: #2bb3a3;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-size: 16px;
  font-weight: bold;
}

.nayami-box li:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   FAQ（アコーディオン）
========================================================== */
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 45px 18px 50px;
  font-weight: bold;
  position: relative;
  background: #fff;
}

.faq summary::before {
  content: "Q";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: #6bb7c6;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  text-align: center;
  line-height: 28px;
}

.faq summary::after {
  content: "▼";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.3s;
}

.faq details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq-content {
  padding: 15px 20px 20px 50px;
  background: #f5f5f5;
  line-height: 1.8;
}

/* ==========================================================
   フッター（シンプル）
========================================================== */
.footer-simple {
  background: #2f6fa8;
  padding: 50px 20px;
  text-align: center;
  color: #fff;
}

.footer-logo {
  width: 140px;
  margin-bottom: 20px;
}

.footer-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.footer-simple p {
  margin: 10px 0;
  line-height: 1.9;
  font-size: 15px;
}

.footer-tel {
  font-size: 18px;
  font-weight: bold;
}

/* ==========================================================
   フロー紹介ボックス（画像＋テキスト横並び）
========================================================== */
.flow-box {
  border: 3px solid #3aa0b3;
  padding: 25px;
  margin-bottom: 30px;
  background: #f7f7f7;
  border-radius: 5px;
}

.flow-inner {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}

.flow-img {
  width: 40%;
}

.flow-img img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.flow-text {
  width: 60%;
}

.flow-text h3 {
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
}

.flow-text p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
}

.flow-bottom {
  margin-top: 15px;
  font-size: 16px;
  line-height: 1.8;
}

@media screen and (max-width: 768px) {
  .flow-inner {
    flex-direction: column;
  }

  .flow-img,
  .flow-text {
    width: 100%;
  }

  .flow-text h3 {
    font-size: 20px;
  }

  .flow-text p,
  .flow-bottom {
    font-size: 15px;
  }
}

/* ==========================================================
   フォーム
========================================================== */
.form-wrap {
  background: #fff;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

.form-title {
  font-weight: bold;
  font-size: 18px;
  margin-top: 25px;
}

.sub {
  font-size: 14px;
  margin-top: 10px;
}

.required {
  border: 2px solid red;
  color: red;
  font-size: 12px;
  padding: 2px 6px;
  margin-left: 8px;
}

/* 入力欄 */
.wpcf7 input,
.wpcf7 textarea {
  width: 100%;
  background: #f3f3f3;
  border: none;
  padding: 14px;
  border-radius: 6px;
  margin-top: 8px;
  margin-bottom: 20px;
  font-size: 16px;
}

.wpcf7 textarea {
  height: 180px;
}

/* 余白 */
.wpcf7 form p {
  margin-bottom: 10px !important;
}

.wpcf7 select {
  margin-bottom: 12px;
}

/* 予約日 */
.date-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.wpcf7 .date-row select {
  width: auto !important;
  flex: 1 !important;
  background: #eee;
  border: none;
  padding: 12px;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
}

/* ボタン */
.wpcf7 input[type="submit"] {
  width: 100%;
  background: #3b1f0f;
  color: #fff;
  font-size: 18px;
  padding: 16px;
  border-radius: 6px;
  margin-top: 20px;
}

/* 注意文 */
.notice {
  font-size: 13px;
  margin-top: 20px;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .date-row {
    gap: 5px;
  }
}

.widget_archive,
.widget_categories {
  display: none !important;
}

/* ==========================================================
   レガシーヘッダー非表示・ロゴサイズ
========================================================== */
.site-name-text {
  display: none !important;
}

.header-container,
.header,
#header-container,
#header {
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

#header-container,
#header,
.header,
#navi,
#navi-in {
  position: static !important;
  top: auto !important;
}

.logo-image img,
.logo-image a img,
.custom-logo {
  width: 180px !important;
  max-width: none !important;
  height: auto !important;
}

/* ==========================================================
   ヘッダー共通パーツ（.header-wrap / スマホヘッダー）
========================================================== */
.fixed-header-img {
  position: fixed;
  top: -100px; /* 最初は隠す */
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 9999;
  transition: 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.fixed-header-img.show {
  top: 0;
}

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

.header-logo {
  height: 78px !important;
  width: auto !important;
}

.header-buttons {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.header-buttons a {
  display: flex;
}

.header-buttons img {
  height: 78px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

/* ボタンの光沢アニメーション */
.header-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.header-btn::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -60%;
  width: 30%;
  height: 160%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(20deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -60%;
  }
  30% {
    left: 140%;
  }
  100% {
    left: 140%;
  }
}

/* ==========================================================
   Gutenbergブロック（画像・グリッド）
========================================================== */
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.wp-block-group.is-layout-grid .wp-block-image {
  width: auto !important;
  margin: 0 auto !important;
}

.wp-block-group.is-layout-grid .wp-block-image img {
  width: 160px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}

/* スマホでも4つ横並び */
.wp-block-group.is-layout-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

/* ==========================================================
   メニューリスト
========================================================== */
.menu-wrap {
  margin: 30px 0;
}

.menu-heading {
  position: relative;
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin: 25px 0 5px;
  padding: 0 0 12px 18px;
  background: none;
  border: none;
  border-bottom: 4px solid #bdbdbd;
  box-shadow: none;
}

.menu-heading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 5px;
  background: #1ea8dc;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-list li {
  border-bottom: 2px dotted #cfcfcf;
}

.menu-list li a {
  display: block;
  padding: 6px 8px;
  color: #222;
  font-size: 17px;
  text-decoration: none;
  line-height: 1.25;
  background: none;
}

.menu-list li a:hover {
  background: #f8f8f8;
}

/* ==========================================================
   サイドバー・本文レイアウト
   → 基準サイト(seitai-ti-da.com)の実測値に合わせる
     コンテンツ最大幅:1020px / サイドバー幅:230px / gap:70px
     ブレークポイントは768pxの一段のみ（ヘッダーと統一）
========================================================== */
/* ==========================================================
   スマホ：サイドバーの「メニュー」「お悩み別コース紹介」を
   ページ本文の下部に表示する（志木店と同じ回遊導線をスマホでも確保）
   → 以前は#sidebar自体を非表示にしていたが、中身の2つの
     ナビメニューウィジェットは既に正しく設定済みのため、
     非表示をやめてページ下部に表示するだけに変更する
========================================================== */
@media screen and (max-width: 767px) {
  #sidebar {
    display: block !important;
    width: 100% !important;
    padding: 10px 15px 20px !important;
  }

  #sidebar .widget-sidebar-title {
    font-size: 16px;
  }

  #sidebar .menu {
    font-size: 15px;
  }
}

/* ==========================================================
   ページ本文下部のcontent-bottom（旧式メニュー一覧）
   → PC左サイドバーに「メニュー」「お悩み別コース紹介」が
     既にあり、本文下部の表示は重複のためPCでも非表示にする。
     スマホは元々このcontent-bottomを非表示にしており、
     #sidebar側（本文下部相当の位置）で表示しているため無変更
========================================================== */
@media screen and (max-width: 767px) {
  #content-bottom {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  #content-bottom {
    display: none !important;
  }
}

/* ==========================================================
   PC：左サイドバーを志木店 #side .side-wrapper の実測値に合わせる
   （見出しの余白・文字サイズ／項目の余白・文字サイズ・枠線／
   　左の青丸アイコン）。幅は志木店の230pxより25px広い255pxにし、
   　その分だけ#mainの計算幅を調整する。#sidebarのみが対象で、
   　ページ下部の#content-bottomやスマホ表示には影響しない
========================================================== */
@media screen and (min-width: 768px) {
  #sidebar .widget-sidebar-title {
    padding: 18px 15px;
    font-size: 18px;
  }

  #sidebar .widget_nav_menu ul li {
    position: relative;
  }

  #sidebar .widget_nav_menu ul li a {
    padding: 18px 12px 18px 40px;
    font-size: 16px;
    border-right: 2px solid #ccc;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    background: #fff;
  }

  #sidebar .widget_nav_menu ul li a::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ea3c9;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 768px) {
  #content {
    max-width: 1020px !important;
    margin: 0 auto !important;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 70px !important;
  }

  #main {
    width: calc(100% - 325px) !important;
  }

  #sidebar {
    width: 255px !important;
    display: block !important;
    padding-top: 40px;
  }
}

/* ==========================================================
   PC・iPad 固定ヘッダー（768px以上）
   → .pc-header を表示し、.header-wrap は非表示
========================================================== */
@media (min-width: 768px) {
  /* .pc-header-top / .pc-menu の高さ変数から自動計算するため、
     ヘッダー側の高さを変更してもここが自動的に追従する */
  body {
    padding-top: calc(var(--pc-header-top-h) + var(--pc-header-menu-h));
  }

  .sp-tel {
    pointer-events: none;
  }

  .header-wrap {
    display: none !important;
  }

  /* WordPress「追加CSS」に残っている旧ルール（.pc-logo{width:260px}等、非!important）が
     このファイルより後に読み込まれ上書きしてしまうため、本ブロックは !important で確実に勝たせる */
  .pc-header {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    margin-left: -50vw !important;
    background: #fff !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
  }

  /* 志木店 header .inner .con01 ＝ 340px×3ブロック（合計1020px＝basewidth）
     box-sizing:border-box + overflow:hidden で、border/内容のはみ出しにより
     実際の高さが90px/60pxからずれないよう固定する */
  .pc-header-top {
    box-sizing: border-box !important;
    max-width: 1020px !important;
    height: var(--pc-header-top-h) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .pc-logo,
  .pc-info,
  .pc-contact {
    box-sizing: border-box !important;
    width: 340px !important;
    height: 90px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

  .pc-logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }

  .pc-logo img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 80px !important;
    height: auto !important;
    display: block !important;
  }

  .pc-info {
    gap: 28px !important;
  }

  .pc-circle {
    width: 66px !important;
    height: 66px !important;
    border: 2px solid #3ba8de;
    border-radius: 50%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #2f7fb0;
    line-height: 1.4;
    flex-shrink: 0 !important;
  }

  .pc-contact {
    flex-direction: column !important;
  }

  .pc-tel {
    display: block !important;
    width: auto !important;
    max-width: 320px !important;
  }

  .pc-tel img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 55px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .pc-reservation {
    margin: 4px 0 0;
    font-size: 11px;
    color: #666;
    text-align: center;
  }

  /* 志木店 nav.pc > ul.menu > li ＝ 170px×6項目（合計1020px＝basewidth） */
  .pc-menu {
    box-sizing: border-box !important;
    max-width: 1020px !important;
    height: var(--pc-header-menu-h) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: block !important;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden !important;
  }

  .pc-menu > ul {
    display: flex !important;
    justify-content: flex-start !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .pc-menu li {
    width: 170px !important;
    height: 100% !important;
    flex: none !important;
    flex-shrink: 0 !important;
  }

  .pc-menu li a {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-weight: bold;
  }

  .pc-menu li a:hover {
    color: #178fd6;
  }

  /* 追加CSS側に残る旧セレクタ(.pc-menu a など直下aへの指定)を無効化 */
  .pc-menu > a {
    display: none !important;
  }

}

/* ==========================================================
   スマホ（767px以下）
   → .header-wrap のみ表示し、.pc-header は完全に非表示
========================================================== */
@media screen and (max-width: 767px) {
  html,
  body,
  #wrapper,
  #page,
  .header-container,
  #header-container,
  .header,
  #header,
  #navi,
  #navi-in,
  #content,
  #content-in,
  .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .pc-header,
  .pc-header * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* スマホ固定ヘッダー（ロゴ＋予約バナー） */
  .header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: var(--sp-header-h);
    z-index: 9999;
    background: #fff;
    box-sizing: border-box;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* .header-wrap の高さ変数から自動計算するため、
     ヘッダー側の高さを変更してもここが自動的に追従する */
  body {
    padding-top: var(--sp-header-h) !important;
  }

  .header-logo,
  .header-wrap .header-logo img,
  .header-logo img {
    display: block !important;
    height: 58px !important;
    width: auto !important;
    max-width: none !important;
  }

  .header-btn {
    display: block !important;
  }

  .header-buttons img,
  .header-wrap .header-btn img,
  .header-btn img {
    display: block !important;
    height: 56px !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* ==========================================================
   推薦文・推薦状（/suisen/ /suisen2/ 専用）
   → 志木店(seitai-ti-da.com)と同じレイアウトにするための正規CSS。
     ページ本文に直接埋め込まれていた同名スタイル(.suisen-kamagaya /
     .suisen2-kamagaya)は、WordPressの自動整形(wpautop)により
     全行末に<br />が混入してCSS構文が壊れ、1ルール目
     （max-width/marginのみ）以外は無効化されていた。
     そのためPCでは画像回り込みが効かず、スマホでは
     table.top-tableがそのまま描画されて文字・画像が潰れていた。
     このブロックは .suisen-kamagaya / .suisen2-kamagaya 配下にのみ
     適用されるため、他ページ・ヘッダー・FV・症状別ページには影響しない
========================================================== */
.suisen-kamagaya,
.suisen2-kamagaya {
  max-width: 960px;
  margin: 0 auto;
}

.suisen-kamagaya table.top-table.suisen,
.suisen2-kamagaya table.top-table.suisen {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 20px;
  table-layout: fixed;
  margin-bottom: 0;
}

.suisen-kamagaya table.top-table.suisen tr,
.suisen2-kamagaya table.top-table.suisen tr {
  display: table-row;
}

.suisen-kamagaya table.top-table.suisen td,
.suisen2-kamagaya table.top-table.suisen td {
  background-color: #f1f1f1;
  border: none;
  padding: 20px;
  font-size: 16px;
  overflow: hidden;
}

.suisen-kamagaya table.top-table.suisen td::after,
.suisen2-kamagaya table.top-table.suisen td::after {
  content: "";
  display: block;
  clear: both;
}

.suisen-kamagaya table.top-table.suisen img,
.suisen2-kamagaya table.top-table.suisen img {
  margin: 5px 0 10px 25px;
  float: right;
  border-radius: 4px;
}

.suisen-kamagaya table.top-table.suisen img.half,
.suisen2-kamagaya table.top-table.suisen img.half {
  width: 50%;
  height: auto;
}

.suisen-kamagaya table.top-table.suisen img.half2,
.suisen2-kamagaya table.top-table.suisen img.half2 {
  width: 40%;
  height: auto;
}

.suisen-kamagaya table.top-table.suisen img:not(.half):not(.half2),
.suisen2-kamagaya table.top-table.suisen img:not(.half):not(.half2) {
  width: 300px;
  height: auto;
}

.suisen-kamagaya table.top-table.suisen p,
.suisen2-kamagaya table.top-table.suisen p {
  margin-top: 15px;
  margin-bottom: 0;
  line-height: 1.8;
}

.suisen-kamagaya table.top-table.suisen p:first-of-type,
.suisen2-kamagaya table.top-table.suisen p:first-of-type {
  margin-top: 0;
}

/* スマホ（767px以下）：タイトル→写真→推薦者情報→推薦文の順に
   HTML記述順のまま自然に縦積みさせる。floatを解除し、
   td・imgをブロック化することで、狭い列に文字が押し込まれて
   氏名・肩書きが1文字ずつ縦に折り返される現象を解消する */
@media (max-width: 767px) {
  .suisen-kamagaya table.top-table.suisen td,
  .suisen2-kamagaya table.top-table.suisen td {
    display: block;
    padding: 16px;
    margin-bottom: 10px;
    font-size: 15px;
  }

  .suisen-kamagaya table.top-table.suisen img,
  .suisen2-kamagaya table.top-table.suisen img {
    max-width: 100% !important;
    width: 100% !important;
    float: none;
    display: block;
    margin: 10px auto;
  }
}

/* ==========================================================
   スタッフ紹介ページ（/staff/ 専用）
   → 本文冒頭に新設した .staff-photo-grid-kamagaya 内の
     写真＋名前を2カラムグリッドで表示するためのCSS。
     このクラスは/staff/の本文にのみ存在するため、
     他ページ・ヘッダー・FVには一切影響しない。
     PC・スマホともに2列を維持する（縦1列にはしない）
========================================================== */
.staff-photo-grid-kamagaya {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 900px;
  margin: 30px auto;
}

.staff-grid-item {
  text-align: center;
}

.staff-grid-item img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.staff-grid-name {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .staff-photo-grid-kamagaya {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 20px auto;
  }

  .staff-grid-name {
    font-size: 13px;
  }
}

/* ==========================================================
   院情報・アクセス（/access/ 専用）
   → 本文に埋め込まれていた .access-kamagaya のスタイルが
     wpautopでCSS構文が壊れて無効化されていたため、
     正しい構文でここに実装し直す
========================================================== */
.access-kamagaya {
  max-width: 900px;
  margin: 0 auto;
}

.access-kamagaya h2 {
  background: #2ea3c9;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 20px;
  margin: 40px 0 20px;
}

.access-kamagaya table.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.access-kamagaya table.info-table th {
  background: #eef7fa;
  width: 110px;
  padding: 12px;
  text-align: left;
  border: 1px solid #cde3ec;
  font-size: 15px;
}

.access-kamagaya table.info-table td {
  padding: 12px;
  border: 1px solid #cde3ec;
  font-size: 15px;
}

.access-kamagaya .map-link {
  display: block;
  text-align: center;
}

.access-kamagaya .map-image {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 6px;
  border: 1px solid #ddd;
}

.access-kamagaya .address-box {
  text-align: center;
  font-size: 17px;
  font-weight: bold;
  margin-top: 16px;
  line-height: 1.6;
}

.access-kamagaya .step-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.access-kamagaya .step-list li {
  margin-bottom: 16px;
}

.access-kamagaya .step-list img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.access-kamagaya .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}

.access-kamagaya .gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.access-kamagaya .gallery-grid.single {
  grid-template-columns: 1fr;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.access-kamagaya h3.sub-heading {
  font-size: 16px;
  border-left: 5px solid #2ea3c9;
  padding-left: 10px;
  margin: 26px 0 12px;
}

.access-kamagaya .single-photo {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .access-kamagaya h2 {
    font-size: 18px;
    padding: 8px 14px;
  }
}