/*
Theme Name: Umekita Clinic Child
Template: umekita-clinic
*/

/* ========================================================
   Global custom properties
   --------------------------------------------------------
   --header-h : ヘッダーの実高さ。page-nkt.php でも同じ値を使う
======================================================== */
:root{
  --header-h:80px;          /* 変更するときは page-nkt.php も同じ値に */
}

/* ========================================================
   Slim Header  ── NKTページなど最小構成ヘッダー
======================================================== */
.slim-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  padding:0 20px;
  background:#fff;
  display:flex; align-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  z-index:9999;
}

/* ロゴ */
.slim-logo{
  display:block;
  line-height:0;           /* 余計な隙間を消す */
  text-decoration:none;
}
.slim-logo img{
  height:44px;
  width:auto;
  display:block;
}

/* LANGUAGE（Google Language Translator）ラッパー */
.slim-lang{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;                /* 言語リンク間の余白 */
  flex-wrap:wrap;
  line-height:1;
}

/* ========================================================
   Google Language Translator 基本スタイル
======================================================== */
/* ドロップダウン or <select> をボタン風に */
#glt-translate-trigger,
.slim-lang select,
.glt-lang a{
  display:inline-block;
  padding:6px 10px;
  font-size:14px;
  background:#fff;
  color:#333;
  border:1px solid #ccc;
  border-radius:4px;
  cursor:pointer;
  transition:.2s background-color;
}
#glt-translate-trigger:hover,
.slim-lang select:hover,
.glt-lang a:hover{background:#f1f1f1}

/* 選択中の言語を強調 */
.glt-lang a.glt-current-lang{font-weight:700}

/* 旧 flags レイアウトが有効なときに横並びで整列させる */
#flags{display:flex;gap:6px;margin-top:4px}
#flags a{text-decoration:none;font-size:13px}

/* “Español” などリストが直に出てしまう場合は非表示にして select だけ残す */
#glt-translate-trigger ul{display:none!important}

/* ========================================================
   Optional ── スクロール挙動を「外側1本」に切り替えるとき
   --------------------------------------------------------
   二重スクロールになっても良い場合にコメントを外してください。
======================================================== */
/*
html,body{overflow:auto}
.nkt-iframe{overflow:hidden}
*/
/* =====================================================
   LANGUAGE（flags または text links）を
   ロゴ右へ横 1 行で並べる
===================================================== */
.slim-lang{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;                /* 各言語アイテムの間隔 */
  flex-wrap:wrap;          /* 幅が足りないときだけ折り返す */
}

/* ------ 国旗アイコンを整列 ------ */
#flags{
  display:flex!important;          /* 横並びにする */
  gap:10px;                        /* 国旗間の余白 */
  margin:0!important;              /* 余計なマージン除去 */
}
#flags img{
  width:24px;height:24px;          /* 好みで調整 */
  display:block;
}

/* ------ 文字リンク表示の場合の装飾 ------ */
.slim-lang a{
  font-size:14px;
  text-decoration:none;
  color:#333;
  padding:4px 8px;
  border:1px solid #ccc;
  border-radius:4px;
  transition:.2s background;
}
.slim-lang a:hover{background:#f5f5f5}
.slim-lang a.glt-current-lang{font-weight:700}

/* =====================================================
   ❶ Slim Header レイアウト
===================================================== */
:root{ --header-h:80px; }                   /* 高さは page-nkt.php と同じ */

.slim-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  padding:0 20px;
  display:flex; align-items:center;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06);
  z-index:9999;
}
.slim-logo img{height:44px;width:auto;display:block}
.slim-lang{margin-left:auto;display:flex;align-items:center;gap:8px}

/* -----------------------------------------------------
   ❷ LANGUAGE ボタン風スタイル
----------------------------------------------------- */
.lang-label{
  font-size:15px;font-weight:700;letter-spacing:.02em;
  user-select:none;
  display:flex;align-items:center;gap:6px;
}

/* “地球”アイコンが無いテーマでも FontAwesome の代用 */
.lang-label .fa{font-size:16px}

/* -----------------------------------------------------
   ❸ 既定 <select> をカスタム風に
----------------------------------------------------- */
#glt-translate-trigger{
  appearance:none;          /* ネイティブ矢印を消す(Chrome) */
  -moz-appearance:none;     /* Firefox */
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' height='8' width='8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .6em center/8px;
  padding:6px 32px 6px 12px;
  font-size:14px;
  border:1px solid #ccc;border-radius:4px;cursor:pointer;
  max-width:160px;
}
#glt-translate-trigger:focus{outline:2px solid #0a7cf5}

/* iOS / Safari の矢印を消す */
select::-webkit-outer-spin-button,
select::-webkit-inner-spin-button{display:none}

/* 省スペース：未選択時 “言語を選択” → LANGUAGE と同じ幅に */
#glt-translate-trigger option:first-child{color:#999}

/* -----------------------------------------------------
   レスポンシブ調整 （幅 480px 未満なら縦積みに）
----------------------------------------------------- */
@media(max-width:480px){
  .slim-header{flex-direction:column;align-items:flex-start;height:auto;padding:8px 16px}
  .slim-logo img{height:36px;margin-bottom:6px}
  #glt-translate-trigger{width:100%;max-width:none}
}
/* =====================================================
   Slim Header – NKT ページ
===================================================== */
:root{ --header-h:80px; }                /* page-nkt.php と同じ値 */

.slim-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  padding:0 20px;
  background:#fff;
  display:flex; align-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  z-index:9999;
}

/* ---------- Logo ---------- */
.slim-logo{display:block;line-height:0}
.slim-logo img{height:44px;width:auto;display:block}

/* ---------- Language ---------- */
.slim-lang{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
}
.lang-label{
  font-weight:700; font-size:15px; letter-spacing:.03em;
  display:flex; align-items:center; gap:6px;
  user-select:none;
}
.lang-icon{font-size:16px;line-height:1}

/* <select> 化されたプルダウンをボタン風に */
#glt-translate-trigger{
  appearance:none; -moz-appearance:none;
  padding:6px 32px 6px 12px;
  font-size:14px; border:1px solid #ccc; border-radius:4px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .6em center/8px;
  cursor:pointer; max-width:160px;
}
#glt-translate-trigger:focus{outline:2px solid #1e73be}

/* “言語を選択” のプレースホルダー色 */
#glt-translate-trigger option:first-child{color:#888}

/* モバイル幅で縦積み */
@media (max-width:480px){
  .slim-header{flex-direction:column;align-items:flex-start;height:auto;padding:8px 16px}
  .slim-logo img{height:36px;margin-bottom:6px}
  #glt-translate-trigger{width:100%;max-width:none}
}
/*
Theme Name: Umekita Clinic Child
Template: umekita-clinic
------------------------------------------------------------*/

:root{ --header-h:80px; }           /* page-nkt.php と必ず一致させる */

/* =========================================================
   Slim Header (NKT page)
========================================================= */
.slim-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  padding:0 20px;
  display:flex; align-items:center;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  z-index:9999;
}

/* --- logo --- */
.slim-logo{display:block;line-height:0}
.slim-logo img{height:44px;width:auto;display:block}

/* --- language --- */
.slim-lang{
  margin-left:auto;                /* 右端に押し出す */
  display:flex; align-items:center; gap:10px;
}

.lang-label{
  font-weight:700;
  font-size:15px;
  display:flex; align-items:center; gap:6px;
  letter-spacing:.02em;
  user-select:none;
}
.lang-icon{font-size:16px;line-height:1}

/* <select> をボタン風に */
#glt-translate-trigger{
  appearance:none; -moz-appearance:none;
  padding:6px 32px 6px 12px;
  font-size:14px;
  border:1px solid #ccc; border-radius:4px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right .6em center/8px;
  cursor:pointer;
  max-width:160px;
}
#glt-translate-trigger:focus{outline:2px solid #1e73be}
#glt-translate-trigger option:first-child{color:#888}

/* iOS / Safari の▼を消す */
select::-webkit-outer-spin-button,
select::-webkit-inner-spin-button{display:none}

/* ── Responsive (≤480px) ── */
@media (max-width:480px){
  .slim-header{flex-direction:column;align-items:flex-start;height:auto;padding:8px 16px}
  .slim-logo img{height:36px;margin-bottom:6px}
  #glt-translate-trigger{width:100%;max-width:none}
}

/* ---------------------------------------------------------
   page-nkt 専用: 外側スクロール禁止・iframe 内だけスクロール
--------------------------------------------------------- */
/*html,body{height:100%;margin:0;overflow:hidden}*/
.nkt-iframe{
  position:fixed; top:var(--header-h); left:0;
  width:100%; height:calc(100vh - var(--header-h));
  border:0; overflow:auto; -webkit-overflow-scrolling:touch;
}
/*
Theme Name: Umekita Clinic Child
Template:   umekita-clinic
----------------------------------------------------------------
  NKT 固定ページ用 ‟Slim Header” と Google Language Translator
----------------------------------------------------------------*/

:root{
  --header-h:80px;          /* ヘッダー実高さ（page-nkt.php と同値） */
}

/* =========================================================
   1. Slim Header  基本レイアウト
========================================================= */
.slim-header{
  position:fixed; top:0; left:0; right:0;
  height:var(--header-h);
  padding:0 20px;
  display:flex; align-items:center;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  z-index:9999;
}

/* ---------- Logo ---------- */
.slim-logo{display:block;line-height:0}
.slim-logo img{height:44px;width:auto;display:block}

/* ---------- LANGUAGE ドロップダウン ---------- */
.slim-lang{
  margin-left:auto;                 /* 右端に寄せる */
  display:flex; align-items:center; gap:10px;
}

/* ラベル「🌐 LANGUAGE」 */
.lang-label{
  font:700 15px/1 "Noto Sans JP", sans-serif;
  display:flex; align-items:center; gap:6px;
  letter-spacing:.02em; user-select:none;
}
.lang-icon{font-size:16px;line-height:1}

/* <select id="glt-translate-trigger"> をボタン風に */
#glt-translate-trigger{
  appearance:none; -moz-appearance:none;
  padding:6px 32px 6px 12px;
  font-size:14px;
  border:1px solid #ccc; border-radius:4px;
  background:#fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")
    no-repeat right .6em center/8px;
  cursor:pointer;
  max-width:160px;
}
#glt-translate-trigger:focus{outline:2px solid #1e73be}
#glt-translate-trigger option:first-child{color:#888}   /* 未選択時 */

/* iOS/Safari の ▼ を隠す */
select::-webkit-outer-spin-button,
select::-webkit-inner-spin-button{display:none}

/* --------------------------------------------------
   2. サブメニュー式（.menu-lang）の見た目調整
   ※ header-slim.php で <ul class="sub-menu"> を生成
-------------------------------------------------- */
.menu-lang{position:relative}
.menu-lang > a{
  display:flex;align-items:center;gap:6px;
  font:700 15px/1 "Noto Sans JP", sans-serif;
  text-decoration:none;color:#000;padding:10px 0;
}
.menu-lang .sub-menu{
  position:absolute;left:0;top:100%;min-width:140px;
  background:#fff;border:1px solid #ccc;border-radius:4px;
  padding:6px 0;list-style:none;display:none;z-index:10000;
}
.menu-lang.open .sub-menu{display:block}
.menu-lang .sub-menu a{
  display:block;padding:6px 12px;font-size:14px;color:#000;
  text-decoration:none;white-space:nowrap;
}
.menu-lang .sub-menu a:hover{background:#f5f5f5}

/* --------------------------------------------------
   3. モバイル（幅 ≤480px）では縦積みに変更
-------------------------------------------------- */
@media(max-width:480px){
  .slim-header{
    flex-direction:column; align-items:flex-start;
    height:auto; padding:8px 16px;
  }
  .slim-logo img{height:36px;margin-bottom:6px}
  #glt-translate-trigger{width:100%;max-width:none}
}

/* =========================================================
   4. NKT 固定ページ専用 – 外側スクロール禁止 & iframe 内スクロール
========================================================= */
/*html,body{height:100%;margin:0;overflow:hidden}*/
.nkt-iframe{
  position:fixed; top:var(--header-h); left:0;
  width:100%; height:calc(100vh - var(--header-h));
  border:0;
  overflow:auto;                               /* 内側だけ縦スクロール */
  -webkit-overflow-scrolling:touch;
}

/* ===== Print fix (NKT) ===== */
@media print{
  html, body{ height:auto !important; overflow:visible !important; }
  .slim-header{ position:static !important; box-shadow:none !important; }
  .nkt-iframe{
    position:static !important; width:100% !important; height:auto !important;
    overflow:visible !important; -webkit-overflow-scrolling:auto !important;
  }
}

/* ===== 印刷プレビュー中だけ適用（ALLメディア） ===== */
html.is-print body{
  -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important;
  background:#fff !important;
}

/* ヘッダー固定の解除（ロゴを隠さない） */
html.is-print header,
html.is-print .site-header,
html.is-print #header{
  position: static !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* スライダーは“見えている1枚だけ”刷る（Swiper/Slick/Splide対応） */
html.is-print .swiper-slide{ display:none !important; }
html.is-print .swiper-slide-active,
html.is-print .swiper-slide.swiper-slide-visible{ display:block !important; }
html.is-print .swiper-slide-duplicate{ display:none !important; }

html.is-print .slick-slide{ display:none !important; }
html.is-print .slick-current, html.is-print .slick-active{ display:block !important; }
html.is-print .slick-cloned{ display:none !important; }

html.is-print .splide__slide{ display:none !important; }
html.is-print .splide__slide.is-active,
html.is-print .splide__slide.is-visible{ display:block !important; }

/* “さらに表示”は開いた状態に（ボタンは隠す） */
html.is-print .readmore, html.is-print .more, html.is-print .accordion,
html.is-print .is-collapsed, html.is-print .collapsed, html.is-print .is-closed{
  max-height:none !important; height:auto !important; overflow:visible !important;
}
html.is-print .readmore__btn, html.is-print .more__btn, html.is-print .accordion__toggle{
  display:none !important;
}

/* アクセス以降が切れない／フッターを必ず出す */
html.is-print section, html.is-print .section, html.is-print .block, html.is-print .row{
  break-inside: avoid !important; page-break-inside: avoid !important;
}
html.is-print #access, html.is-print .access{
  break-before: page !important; page-break-before: always !important;
}
/* Google Map の iframe は印刷で外し、代替静止画があれば表示 */
html.is-print iframe[src*="google.com/maps"], html.is-print .access__map iframe{
  display:none !important;
}
html.is-print .access__map img, html.is-print .map-static{
  display:block !important;
}
html.is-print #footer, html.is-print .site-footer{
  display:block !important; position:static !important; visibility:visible !important; opacity:1 !important;
}

/* 画像は確実に出す */
html.is-print img, html.is-print svg, html.is-print picture, html.is-print canvas{
  max-width:100% !important; height:auto !important; page-break-inside:avoid !important;
}

/* NKT専用（page-nkt.php）だけ外側スクロール禁止にする */
html.page-template-page-nkt,
body.page-template-page-nkt{
  height:100%;
  margin:0;
  overflow:hidden;
}

/* ========= NKT セクションの共通レイアウト ========= */
:root{
  --cont-w: 1120px;                         /* 本文の最大幅（必要なら 1040–1200pxで調整） */
  --gutter: min(5vw, 28px);                 /* 本文の左右余白 */
  --mincho: "Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic: "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;

  /* ヒーロー／本文の左端ライン（オリジナルと同じ基準線） */
  --leftline: calc(50% - min(var(--cont-w), 92vw)/2 + var(--gutter));
}

/* 本文の共通幅 */
.entry-content > *{
  max-width: min(var(--cont-w), 92vw);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* ===== 単独画像（行外）を左端ラインに揃える ===== */
.entry-content figure.wp-block-image{
  margin-left: var(--leftline) !important;   /* ← 左端にぴったり */
  margin-right: auto !important;
  width: min(54vw, 620px) !important;        /* 画像≒画面半分（上限620px） */
}
.entry-content figure.wp-block-image img{
  display:block; width:100%; height:auto;
}

/* ===== メディアと文章（Media & Text） ===== */
.entry-content .wp-block-media-text{
  display:grid; grid-template-columns: 54% 1fr;       /* 左=画像 を広めに */
  align-items:center; column-gap: clamp(20px, 3.2vw, 44px);
}
.entry-content .wp-block-media-text.has-media-on-the-right{
  grid-template-columns: 1fr 54%;                     /* 右が画像のパターンにも対応 */
}
.entry-content .wp-block-media-text__media img{ width:100%; height:auto; display:block; }

/* 右側の最初の見出しだけ：中央＋明朝体、本文は左＋ゴシック */
.entry-content .wp-block-media-text .wp-block-media-text__content h2:first-of-type,
.entry-content .wp-block-media-text .wp-block-media-text__content h3:first-of-type{
  text-align:center; font-family: var(--mincho); font-weight:700; letter-spacing:.02em;
  margin: 0 0 .7em 0;
}
.entry-content .wp-block-media-text .wp-block-media-text__content :not(h2):not(h3){
  text-align:left; font-family: var(--gothic); line-height:1.9;
}

/* ===== カラム（Columns） ===== */
.entry-content .wp-block-columns{ align-items:center; column-gap: clamp(20px, 3.2vw, 44px); }
.entry-content .wp-block-columns > .wp-block-column:first-child{ flex-basis:54% !important; }
.entry-content .wp-block-columns > .wp-block-column:last-child { flex-basis:46% !important; }

/* 右カラムの最初の見出しだけ：中央＋明朝体（Columns版） */
.entry-content .wp-block-columns > .wp-block-column:last-child h2:first-of-type,
.entry-content .wp-block-columns > .wp-block-column:last-child h3:first-of-type{
  text-align:center; font-family: var(--mincho); font-weight:700; letter-spacing:.02em; margin:0 0 .7em 0;
}
/* Columns の本文は左＋ゴシック */
.entry-content .wp-block-columns > .wp-block-column:last-child :not(h2):not(h3){
  text-align:left; font-family: var(--gothic); line-height:1.9;
}

/* ===== キャプションなどの細部 ===== */
.entry-content figcaption{ font-size:.9em; line-height:1.6; opacity:.8; margin-top:.4em; }

/* ===== スマホ ===== */
@media (max-width: 782px){
  .entry-content .wp-block-media-text{ grid-template-columns: 1fr; }
  .entry-content .wp-block-columns{ display:block; }
  .entry-content figure.wp-block-image{
    margin-left:auto !important; width:min(92vw,640px) !important;
  }
}