@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
/*=================================================
 * 全体
 * ================================================= */
/* --- ドット柄を全画面に敷く（白背景の後ろに見える）--- */
body::before{
  content:"";
  position: fixed;      /* 画面全体をカバー */
  inset: 0;
  z-index: -1;          /* すべての“背面”に */
  /* お好みで色・間隔を調整 */
  --dot-color: #e5e7eb; /* ドットの色（薄いグレー）*/
  --base-color:#ffffff; /* ベース色（白）*/
  --dot-size: 1.5px;    /* ドットの直径 */
  --gap: 18px;          /* ドット間隔 */

  background:
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size)) 0 0 / var(--gap) var(--gap),
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size)) calc(var(--gap)/2) calc(var(--gap)/2) / var(--gap) var(--gap);
  background-color: var(--base-color);
}

/* --- SWELLの各エリアは“透過”にしておく（白はコンテンツ側で持つ）--- */
html, body { background: transparent !important; }

/* --- 白い“紙”感を出したい場合（影・角丸はお好みで）--- */
/* SWELLはレイアウトがサイト毎に微妙に違うため、代表的なラッパーをまとめて指定 */
main, .l-main, .l-content, .p-main, .postContent, .c-container{
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border-radius: 12px;
}

/* ヘッダー／フッターも白で載せたいなら（透明にしたい場合は消してください） */
header, .l-header, .p-header,
footer, .l-footer, .p-footer{
  background:#fff;
}
.top #content {
    padding: 0em 0 0em;
	margin: 0 auto 0em;
}
.-frame-on .l-mainContent {
	padding-bottom: 6em;
}
.l-content {
    margin: 0 auto 0em;
    padding: 0 0 0em;
}
.-frame-on .p-breadcrumb {
    background: #fff !important;
	max-width: 1296px;   /* 本文コンテナの幅に合わせる */
}
/*=================================================
 * ヘッダー
 * ================================================= */
/* ヘッダーをコンテナ幅に合わせる */
.l-header,
.l-header__inner,
.l-header__gnav,
.c-gnavWrap {
  max-width: 1296px;   /* 本文コンテナの幅に合わせる */
  margin: 0 auto;
}

/* 背景を全幅ではなく中央寄せのみにする */
.l-header,
.l-header__inner {
  background: #fff;  /* 背景を白に固定する場合 */
}

/*=================================================
 * メニュー
 * ================================================= */
/* ====== SWELL グローバルナビを青グラ＋白ドットに ====== */
:root{
  --nav-c1:#1e90ff;           /* 上の青 */
  --nav-c2:#0072c6;           /* 下の青 */
  --dot-color:rgba(255,255,255,.35);
  --dot-size:1px;             /* ドット直径 */
  --gap:12px;                 /* ドット間隔 */
  --nav-h:48px;               /* バーの高さ */
}
:root{
  --dot-size: .55px;                 /* ドットを小さく  */
  --gap: 5px;                       /* 間隔をやや狭く  */
  --dot-color: rgba(255,255,255,.28);/* 少し薄く        */
}
.c-gnav .ttl {
    color: #fff;
}
.l-fixHeader__gnav .c-gnav .ttl {
    color: #000;
}
.c-gnav>.menu-item {
    width: 150px;
}
.l-fixHeader__gnav .c-gnav>.menu-item {
    width: auto;
}
.l-fixHeader__gnav .c-gnav > .menu-item::before, .c-gnav .menu > li::before {
    top: 15px;
    bottom: 15px;
}
/* ナビ本体（SWELL 2.x で使われる .c-gnav ほかを網羅） */
#header .c-gnav,
.l-header .c-gnav,
nav#gnav,
nav[aria-label*="グローバル"],
.p-spMenu__nav.-gnav{
  position: relative;
  background: linear-gradient(to bottom,var(--nav-c1),var(--nav-c2)) !important;
  min-height: var(--nav-h);
  isolation: isolate; /* 擬似要素の重なりを安定化 */
}

/* 白ドットを重ねる */
#header .c-gnav::before,
.l-header .c-gnav::before,
nav#gnav::before,
nav[aria-label*="グローバル"]::before,
.p-spMenu__nav.-gnav::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size)) 0 0/var(--gap) var(--gap);
  z-index:0; pointer-events:none;
}

/* メニューの文字（白＋太字） */
#header .c-gnav .menu>li>a,
.l-header .c-gnav .menu>li>a,
#gnav .menu>li>a,
nav[aria-label*="グローバル"] .menu>li>a{
  color:#fff !important;
  font-weight:700;
  line-height:var(--nav-h);
  padding:0 14px;
  position:relative; z-index:1;
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}

/* 下に白いライン（ホバー/現在ページで表示） */
#header .c-gnav .menu>li>a::after,
.l-header .c-gnav .menu>li>a::after,
#gnav .menu>li>a::after,
nav[aria-label*="グローバル"] .menu>li>a::after{
  content:"";
  display:block; height:3px; background:#fff; margin-top:4px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
#header .c-gnav .menu>li:hover>a::after,
#header .c-gnav .menu>li.current-menu-item>a::after,
#header .c-gnav .menu>li.current_page_item>a::after,
.l-header .c-gnav .menu>li:hover>a::after,
.l-header .c-gnav .menu>li.current-menu-item>a::after,
.l-header .c-gnav .menu>li.current_page_item>a::after,
#gnav .menu>li:hover>a::after,
#gnav .menu>li.current-menu-item>a::after,
#gnav .menu>li.current_page_item>a::after,
nav[aria-label*="グローバル"] .menu>li:hover>a::after,
nav[aria-label*="グローバル"] .menu>li.current-menu-item>a::after,
nav[aria-label*="グローバル"] .menu>li.current_page_item>a::after{
  transform:scaleX(1);
}

/* PCだけに適用したい場合（任意） */
@media (max-width: 959px){
  #header .c-gnav, .l-header .c-gnav, nav#gnav, nav[aria-label*="グローバル"], .p-spMenu__nav.-gnav{
    min-height: auto;
  }
}
.c-gnav a::after {
    background: #e90000;
}
/* 内側は左線だけ・右端だけ右線 → 1本に見せる 左右のボーダー　*/
.c-gnav > .menu-item,
.c-gnav .menu > li{ position: relative; }
.c-gnav > .menu-item::before,
.c-gnav .menu > li::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:1px;
  background: rgba(255,255,255,.55); box-shadow: 1px 0 0 rgba(0,0,0,.15);
}
.c-gnav > .menu-item:last-child::after,
.c-gnav .menu > li:last-child::after{
  content:""; position:absolute; right:0; top:6px; bottom:6px; width:1px;
  background: rgba(255,255,255,.55); box-shadow: 1px 0 0 rgba(0,0,0,.15);
}
/* 下ボーダー用 */
@media (min-width: 960px){
  /* 好みの余白・太さを変数で管理 */
  .c-gnav{ --ul-inset: 12px;  /* 左右の余白 */
           --ul-bottom: 6px;  /* 下からの距離 */
           --ul-thick: 3px;   /* 太さ */
  }

  /* li は固定幅150pxのまま。はみ出し対策に overflow をON */
  .c-gnav > .menu-item{
    width:150px;
    position:relative;
    overflow:hidden;
  }

  /* a を基準にして中央寄せで下線を描く */
  .c-gnav > .menu-item > a{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:100%;
    height:var(--nav-h,48px);
    padding:0 10px;
    box-sizing:border-box;
    overflow:hidden; /* 念のため */
  }

  /* 常時ボーダー：左右均等＆はみ出しなし */
  .c-gnav > .menu-item > a::after{
    content:"";
    position:absolute;
    bottom:var(--ul-bottom);
    left:50%;
    width: calc(100% - (var(--ul-inset) * 2)); /* ← 左右均等の余白 */
    transform: translateX(-50%);               /* 中央基準 */
    height:var(--ul-thick);
    background:#fff;
    border-radius:2px;
    box-shadow:0 1px 0 rgba(0,0,0,.25);
    pointer-events:none;
    z-index:9; /* 仕切り線より下にしたいなら 4～5 に調整 */
  }
  /* 常時ボーダー：左右均等＆はみ出しなし（transformは使わない） */
  .c-gnav > .menu-item > a::after{
    content:"";
    position:absolute;
    left: var(--ul-inset);
    right: var(--ul-inset);
    bottom: var(--ul-bottom);
    height: var(--ul-thick);
    background:#fff;
    border-radius:2px;
    box-shadow:0 1px 0 rgba(0,0,0,.25);
    opacity:1 !important;
    transform:none !important;
    transform-origin:center !important;
    pointer-events:none;
    z-index:9; /* 縦セパレーターより上/下にしたい場合は調整 */
  }
}
@media (min-width: 960px){
  /* 色を変数で管理（白=通常、赤=ホバー/現在） */
  .c-gnav{
    --ul-color: #fff;       /* 通常の線色 */
    --ul-active: #e6002b;   /* ホバー/現在ページの線色（赤） */
  }

  /* 常時ボーダー（既存の a::after をそのまま使用） */
  .c-gnav > .menu-item > a::after{
    background: var(--ul-color) !important;
    transition: background-color .15s ease; /* 色変化だけ軽く */
  }

  /* ホバー時は赤 */
  .c-gnav > .menu-item:hover > a::after{
    background: var(--ul-active) !important;
  }

  /* “現在ページ”を赤に（WPの付与クラス＋ARIAの両方に対応） */
  .c-gnav > .menu-item.current-menu-item > a::after,
  .c-gnav > .menu-item.current_page_item > a::after,
  .c-gnav > .menu-item > a[aria-current="page"]::after{
    background: var(--ul-active) !important;
  }

  /* キーボード操作でフォーカス時も赤に（任意） */
  .c-gnav > .menu-item > a:focus-visible::after{
    background: var(--ul-active) !important;
  }
}
/* 子供ページも赤ボーダー */
@media (min-width: 960px){
  .parent-pageid-19 .c-gnav .menu-item-32 > a::after{
    background: var(--ul-active, #e6002b) !important;
  }
}

/*=================================================
 * TOPページ、各ページ見出しにも使用
 * ================================================= */
.heading {
  position: relative;
  background: linear-gradient(to right, #007ad9, #0a5aa6);
  color: #fff;
  padding: 10px 12px 10px 16px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.heading .title {
  padding: 0 0 0 10px;
}

/* 左の赤ライン */
.heading::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  width: 5px;
  height: 35px;
  background: #e60033;
	margin: 5px;
}

/* 右側の斜めカット */
.heading::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  border-top: 100% solid transparent;
  border-left: 20px solid #fff;
  height: 0;
  width: 0;
}

/* 英語部分 */
.heading .en {
  color: #666;
  font-size: 12px;
  font-weight: normal;
  margin-left: auto;
  padding: 0 8px;
  background: #fff;
}
/* h2が左側で揃っていないのを揃える為 */
.post_content h2 {
    margin: 4em 0em 2em;
}
/*=================================================
 * 投稿記事内
 * ================================================= */
/* 記事本文内のテキストリンクにアンダーラインと動き */
.post_content a {
  text-decoration: underline;
  display: inline-block;       /* ← transform が効くようになる */
  transition: transform 0.2s ease;
}

.post_content a:hover {
  transform: translateY(2px);  /* 下に2px動く */
}

/*=================================================
 * NEW
 * ================================================= */
/* 赤い点滅テキスト */
.swl-format-1{
  color:#e60000;           /* 赤 */
  font-weight:700;
  animation:swl-format-1 0.9s steps(1, end) infinite;
}

/* 点滅アニメーション（表示/非表示の切替）*/
@keyframes swl-format-1{
  0%{ opacity:1; }
  50%{ opacity:0; }
  100%{ opacity:1; }
}

/* アニメーション苦手な方向けの配慮（OS設定でアニメ減の場合は点滅しない）*/
@media (prefers-reduced-motion: reduce){
  .swl-format-1{ animation:none; }
}
/*=================================================
 * 院内紹介
 * ================================================= */
.page-id-17 .wp-block-gallery .wp-element-caption {
  width: 234px !important;
}
.page-id-17 .wp-block-gallery img {
  width: 234px !important;
}
/*=================================================
 * 得意な分野
 * ================================================= */
.is-vertically-aligned-top>.wp-block-media-text__content {
    padding-top: 0;
}
.ed01 {
    color: #0000CC;
}
/* 1列目（項目） */
.ed01 td:nth-child(1),
.ed01 th:nth-child(1) {
  background-color: #F0FFFD;
}
/* 2列目（バイアグラ） */
.ed01 td:nth-child(2),
.ed01 th:nth-child(2) {
  background-color: #FEFFE6;
}
/* 3列目（レビトラ） */
.ed01 td:nth-child(3),
.ed01 th:nth-child(3) {
  background-color: #FFF5D0;
}
/* 4列目（シアリス） */
.ed01 td:nth-child(4),
.ed01 th:nth-child(4) {
  background-color: #FFF4F4;
}
/*=================================================
 * 健康診断のご案内
 * ================================================= */
.kensin .has-fixed-layout td:first-child {
  text-align: center;      /* 水平センター */
  vertical-align: middle;  /* 垂直センター */
}

.kensin .has-fixed-layout td:nth-child(2) {
  width: 31em; /* ここでお好みの幅に変更 */
}
/* スマホ専用（幅は必要に応じて調整） */
@media (max-width: 767px) {
  /* 固定レイアウトを解除して列幅計算を通常に戻す */
  .wp-block-table.kensin table.has-fixed-layout {
    table-layout: auto;
  }

  /* 1列目を狭く固定（!importantで上書き） */
  .wp-block-table.kensin table tr > td:first-child,
  .wp-block-table.kensin table tr > th:first-child {
    width: 3em !important;
    min-width: 3em !important;
    max-width: 3em !important;
    text-align: center;
    white-space: nowrap;
  }

  /* 2列目は折り返して本文を確保（任意） */
  .wp-block-table.kensin table tr > td:nth-child(2),
  .wp-block-table.kensin table tr > th:nth-child(2) {
    word-break: break-word;      /* または overflow-wrap: anywhere; */
  }
}

/*=================================================
 * 検査時の注意事項
 * ================================================= */
.is-style-section_ttl {
  display: flex;
  align-items: center; /* 縦中央揃え */
  gap: 8px; /* 画像とテキストの間隔 */
}
.icon-text {
  display: flex;
  align-items: center; /* 縦方向を中央揃え */
  gap: 6px;           /* アイコンと文字の間隔 */
  margin: 0 0 1em;          /* pタグの余白をリセット（必要なら） */
}
/*=================================================
 * 季節の病気
 * ================================================= */
.badge{
  --size: 40px;          /* 直径。必要に応じて変更 */
  --bg: #8a63ff;         /* 背景色 */
  --fg: #fff;            /* 文字色 */

  display:inline-grid;
  place-items:center;    /* 文字を上下左右センター */
  width:var(--size);
  aspect-ratio:1/1;      /* 正円にする */
  border-radius:50%;
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:calc(var(--size) * 0.52);
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); /* 縁取り(任意) */
}
.badge-row{
  display:inline-flex;
  align-items:center;
	    margin: 0 0 0;
}
.badge.overlap{
  margin-left:-4px;           /* ここで重なり量を調整 */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    -2px 0 0 0 #fff;          /* 重なり境界を白で縁取り(任意) */
}
.badge2{
  --size: 40px;          /* 直径。必要に応じて変更 */
  --bg: #090;         /* 背景色 */
  --fg: #fff;            /* 文字色 */

  display:inline-grid;
  place-items:center;    /* 文字を上下左右センター */
  width:var(--size);
  aspect-ratio:1/1;      /* 正円にする */
  border-radius:50%;
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:calc(var(--size) * 0.52);
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); /* 縁取り(任意) */
}
.badge3{
  --size: 40px;          /* 直径。必要に応じて変更 */
  --bg: #0fbfff;         /* 背景色 */
  --fg: #fff;            /* 文字色 */

  display:inline-grid;
  place-items:center;    /* 文字を上下左右センター */
  width:var(--size);
  aspect-ratio:1/1;      /* 正円にする */
  border-radius:50%;
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:calc(var(--size) * 0.52);
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); /* 縁取り(任意) */
}
.badge4{
  --size: 40px;          /* 直径。必要に応じて変更 */
  --bg: #a06b00;         /* 背景色 */
  --fg: #fff;            /* 文字色 */

  display:inline-grid;
  place-items:center;    /* 文字を上下左右センター */
  width:var(--size);
  aspect-ratio:1/1;      /* 正円にする */
  border-radius:50%;
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:calc(var(--size) * 0.52);
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); /* 縁取り(任意) */
}
.badge5{
  --size: 40px;          /* 直径。必要に応じて変更 */
  --bg: #ff4411;         /* 背景色 */
  --fg: #fff;            /* 文字色 */

  display:inline-grid;
  place-items:center;    /* 文字を上下左右センター */
  width:var(--size);
  aspect-ratio:1/1;      /* 正円にする */
  border-radius:50%;
  background:var(--bg);
  color:var(--fg);
  font-weight:700;
  font-size:calc(var(--size) * 0.52);
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.7); /* 縁取り(任意) */
}
/* スマホだけ適用：seasons-grid 専用 */
@media (max-width: 768px) {
  /* 親ブロック自体のはみ出し防止 */
  .swell-block-columns.seasons-grid {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* 古い環境なら hidden に */
    box-sizing: border-box;
  }

  /* 2列グリッド。minmax(0,1fr) + min-width:0 が重要 */
  .swell-block-columns.seasons-grid .swell-block-columns__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* カラムの最小幅を0にしてコンテンツ起因のはみ出しを防ぐ */
  .swell-block-columns.seasons-grid .swell-block-column {
    min-width: 0;                /* ←これが効きます */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* 画像周りの余白をリセット */
  .swell-block-columns.seasons-grid figure { margin: 0; }
  .swell-block-columns.seasons-grid a { display: block; }

  /* 画像は親幅にフィット */
  .swell-block-columns.seasons-grid img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }
}

/*=================================================
 * サイド　★ 診療日カレンダーはこちら
 * ================================================= */
.pink a {
  color:#ff0099;
}
/* 点滅テキスト */
.swl-format-2{
  color:#ff0099;
  font-weight:700;
  animation:swl-format-1 0.3s steps(1, end) infinite;
}

/* 点滅アニメーション（表示/非表示の切替）*/
@keyframes swl-format-2{
  0%{ opacity:1; }
  50%{ opacity:0; }
  100%{ opacity:1; }
}

/* アニメーション苦手な方向けの配慮（OS設定でアニメ減の場合は点滅しない）*/
@media (prefers-reduced-motion: reduce){
  .swl-format-2{ animation:none; }
}

/* お知らせやブログ一覧に戻る時*/
.back-list {
  text-align: right;
  margin-top: 2em;
}
.back-list a {
  color: var(--color_main, #0066cc);
  text-decoration: underline;
}
.back-list a:hover {
  text-decoration: none;
  opacity: 0.8;
}