@charset "UTF-8";
/* Responsive Fixes v5 (no clipping, remove min-width/fixed widths) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;line-height:1.7;font-size:clamp(16px,1.9vw,18px)}
/* Fluid media */
img,svg,video,canvas,iframe{max-width:100%;height:auto;display:block}

/* Readable measure */
.content,.main,.article,article,.post,.text,.page,.entry,.wrap-text{max-width:72ch;margin-inline:auto}
*{overflow-wrap:anywhere;word-break:break-word}

/* Remove any global min-width that forces desktop width */
body,#container,#wrapper,#wrap,#contents,#content,#page,#main,#left,#right,.container,.wrapper,.inner {
  min-width: 0 !important;
}

/* Mobile layout rules */
@media (max-width: 900px){
  /* STOP clipping: allow horizontal overflow to be visible while we fix offenders */
  html,body{overflow-x: visible !important;}

  /* Force all main containers to be fluid */
  #container,#wrapper,#wrap,#contents,#content,#page,#main,#left,#right,
  .container,.wrapper,.inner,.row,.layout,.cols-2,.cols-3,.grid,.grid-2,.grid-3 {
    width:auto !important;
    max-width:100% !important;
    margin-left:auto !important; margin-right:auto !important;
    float:none !important;
  }

  /* Kill common fixed widths */
  [style*="width:1200px"],[style*="width:1100px"],[style*="width:1024px"],[style*="width:1000px"],
  [style*="width:980px"],[style*="width:960px"],[style*="width:950px"],[style*="width:940px"],
  [style*="width:900px"],[style*="width:800px"],[style*="width:780px"],[style*="width:760px"],[style*="width:750px"]{
    width:100% !important; max-width:100% !important;
  }
  [style*="min-width:"]{ min-width: 0 !important; }

  /* Normalize inline font-size to avoid unexpected zoomed layout */
  article, .article, .entry, #contents, .content, .main, .text, .page {
    font-size: clamp(16px, 2.2vw, 18px) !important;
    line-height: 1.8 !important;
  }
  article [style*="font-size"], .article [style*="font-size"], .entry [style*="font-size"],
  #contents [style*="font-size"], .content [style*="font-size"], .main [style*="font-size"] {
    font-size: 1em !important;
  }

  /* Headline bars */
  .ttlBg, .ttlRed, .subttl, .ttl, .headline, .title, .hTtl, .midashi {
    display:block !important; width:auto !important; max-width:100% !important;
    padding:8px 12px !important; box-sizing:border-box;
  }
  .ttlBg, .ttlRed { background-color:#a00 !important; color:#fff !important; }

  /* Tables: wrap instead of overflow; allow scroll fallback */
  table{width:100% !important; border-collapse:collapse; white-space:normal !important; display:table}
  table th,table td{word-break:break-word; overflow-wrap:anywhere; padding:.6em .8em}

  /* Iframe maps/videos responsive */
  .embed,.video,.youtube,.map,.gmap{position:relative; padding-top:56.25%}
  .embed iframe,.video iframe,.youtube iframe,.map iframe,.gmap iframe{position:absolute; inset:0; width:100%; height:100%}
}

/* Always keep CSS lightweight for cascade wins; no root overflow-x hidden here */
/* ===== EMERGENCY MOBILE HOTFIX ===== */
@media (max-width: 900px){

  /* 0) 絶対にこのCSSが勝つように土台を流体化 */
  html, body,
  #container,#wrapper,#wrap,#contents,#content,#page,#main,#left,#right,
  #header,#icatch,#slide,#footer,
  .container,.wrapper,.inner,.row,.layout,.cols-2,.cols-3,.grid,.grid-2,.grid-3 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* 1) 右切れの主犯（固定幅/最小幅/負のマージン/絶対配置のずれ）を無効化 */
  [style*="width:1200px"],[style*="width:1100px"],[style*="width:1024px"],
  [style*="width:1000px"],[style*="width:980px"],[style*="width:960px"],
  [style*="width:950px"],[style*="width:940px"],[style*="width:900px"],
  [style*="min-width:"],
  .w1200,.w1100,.w1024,.w1000,.w980,.w960,.w950,.w940,.w900 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  [style*="margin-left:-"], [style*="left:-"], [style*="right:-"] {
    margin-left: 0 !important; left: 0 !important; right: 0 !important;
  }
  [style*="position:absolute"][style*="left:"], .abs-left {
    left: 0 !important;
  }

  /* 2) 写真・バナー・スライドを必ず画面内に収める */
  img { max-width: 100% !important; height: auto !important; display: block !important; }
  img[width], img[height] { width: 100% !important; height: auto !important; }
  #header img, #icatch img, .mainvisual img, .kv img, .banner img,
  .slideInner img, .photo img, figure img {
    width: 100% !important; height: auto !important;
  }
  #slide, .slideInner, .slideInner li {
    width: 100% !important; left: 0 !important; right: 0 !important;
    position: relative !important;
  }
  .slidePrev, .slideNext { top: 40% !important; }

  /* 3) 文字サイズがHTML内で固定されていても崩れないように正規化 */
  article, .article, .entry, #contents, .content, .main, .text, .page {
    font-size: clamp(16px, 2.2vw, 18px) !important;
    line-height: 1.8 !important;
  }
  article [style*="font-size"], .article [style*="font-size"],
  .entry [style*="font-size"], #contents [style*="font-size"],
  .content [style*="font-size"], .main [style*="font-size"] {
    font-size: 1em !important;
  }

  /* 4) 見出しの赤帯（［…］）をブロック化して折返し */
  .ttlBg, .ttlRed, .subttl, .ttl, .headline, .title, .hTtl, .midashi {
    display: block !important;
    width: auto !important; max-width: 100% !important;
    padding: 8px 12px !important; box-sizing: border-box !important;
  }
  .ttlBg, .ttlRed { background-color: #a00 !important; color: #fff !important; }

  /* 5) 表ははみ出さず、文字を折り返す（必要に応じて横スクロールも残す） */
  table { width: 100% !important; table-layout: fixed !important; border-collapse: collapse; }
  th, td { word-break: break-word !important; overflow-wrap: anywhere !important; padding: .6em .8em; }
  .table-wrap, .tblWrap { width: 100%; overflow-x: auto; }

  /* 6) 横スクロールを視覚上消す（中身は縮むので基本出ません） */
  html, body { overflow-x: hidden !important; }
}

/* === Semantic typography (mobile-first) === */
:root { --brand-red:#a00; }

h1{ font-size: clamp(24px,6vw,36px); line-height:1.25; margin:.8em 0 .4em; }
h2{ font-size: clamp(20px,4.8vw,28px); line-height:1.30; margin:.8em 0 .4em; }
h3{ font-size: clamp(16px,4.0vw,24px); line-height:1.35; margin:.8em 0 .4em; }

.section-title{
  display:block; width:auto; max-width:100%;
  background:var(--brand-red); color:#fff;
  padding:8px 12px; box-sizing:border-box;
}

p{ margin:0 0 1em; font-size:clamp(16px,2.2vw,18px); line-height:1.8; }

/* 表は折り返し＆100%幅 */
table{ width:100%; border-collapse:collapse; table-layout:auto; }
th,td{ padding:.6em .8em; word-break:break-word; overflow-wrap:anywhere; }
.table-wrap{ width:100%; overflow-x:auto; }

/* 旧テンプレの最小幅・固定幅の解除（スマホ時） */
@media (max-width:900px){
  body,#container,#wrapper,#wrap,#contents,#content,#page,#main,#left,#right{
    min-width:0 !important; width:100% !important; max-width:100% !important;
  }
  img,svg,video,canvas,iframe{ max-width:100% !important; height:auto !important; display:block !important; }
}

/* ===== Home intro (top page text) ===== */
.home-intro p{
  margin: 0 0 0.8em;
  line-height: 1.8;
}

/* スマホだけ改行するための <br class="sp-only"> */
.sp-only{
  display: none;
}

/* 可読性目的の改行はスマホ幅のみ */
@media (max-width: 768px){
  .sp-only{
    display: inline;
  }
}

/* ===== 「医院案内」ページ (iin page text) ===== */
/* 当院について(ごあいさつ) */
.greeting-inner{
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

/* 画像エリア */
.greeting-photo{
  flex: 0 0 150px;          /* PC時の基準サイズ */
  max-width: 240px;
  margin-right: auto;
}

.greeting-photo img{
  width: 100%;
  height: auto;
  border-radius: 8px;      /* やさしい印象 */
}

/* テキスト */
.greeting-text{
  flex: 1;
}

/* スマホ対応 */
@media (max-width: 768px){
  .greeting-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .greeting-photo{
    max-width: 100px;      /* スマホでは少し小さく */
    margin-bottom: 12px;
  }

  .greeting-text{
    text-align: left;      /* 文章は左揃えの方が読みやすい場合 */
  }
}
.greeting{
  background: #f7f9fb;
  padding: 24px;
  border-radius: 8px;
}

/* =========================================================
   Clinic schedule table (診察時間表)
   - PC: container内に収めてスクロールを出さない
   - SP: 横幅が足りない場合のみ横スクロールを許可
   - iPhone SE等の狭幅: 左列（時間帯）を広めに確保して縦割れ防止
   ========================================================= */

/* Wrapper: PCはスクロール無し */
.table-wrap{
  width: 100%;
  overflow-x: visible;/* PCはスクロールさせない */
  padding:0 10px;  
}

.table-wrap[aria-label="院長プロフィール"] .stuff-table tbody td{
  vertical-align: top !important; /* プロフィール表の説明は上揃え */
}

/* Table base */
.clinic-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 曜日表は列幅計算が安定 */
  background: #fff;
}

/* Cells (共通) */
.clinic-table th,
.clinic-table td{
  border: 1px solid #ccc;
  padding: 10px 8px;        /* PCの基本余白 */
  box-sizing: border-box;
  vertical-align: middle;
  text-align: center;   /* 記号列は中央 */
}

/* Header row (曜日) */
.clinic-table thead th{
  background: #f3f3f3;
  white-space: nowrap;  /* 月火水…は折り返さない */
}

/* Left column (時間帯) - PCは1行で見せる */
.clinic-table th[scope="row"]{
  text-align: left;
  white-space: nowrap;       /* PCでは1行で見せる */
  font-weight: 700;
}

/* Left-top header cell */
.clinic-table td.time-col{
  text-align: left;
}

/* ---------------------------------------------------------
   iPad (<= 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px){
 
  .clinic-table th{
    width: 7em;
    min-width: 7em;
  }
}

/* ---------------------------------------------------------
   iPad Air など (<= 1000px)
   --------------------------------------------------------- */

/* 820〜768周辺（iPad mini縦など）も含めて“均等割り回避” */
@media (max-width: 1024px){

  /* ★ここが肝：900px以下で強制された fixed!important を打ち消す */
  .clinic-table{
    table-layout: auto !important;
  }

  /* 左列：1行でギリ表示（折り返さない） */
  .clinic-table th{
    width: 1% !important;          /* 可能な限り狭く */
    white-space: nowrap !important; /* 1行維持 */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-align: center;
  }

  /* 右列：残り全部 */
  .clinic-table tbody td{
    width: auto !important;
  }
}

/* ---------------------------------------------------------
   Mobile (<= 768px)
   --------------------------------------------------------- */
@media (max-width: 768px){

  /* 横幅が足りない場合のみスクロール（右端罫線の欠け対策含む） */
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 10px; /* 右端1px欠け対策 */
  }

  /* 全体を少し詰める */
  .clinic-table th,
  .clinic-table td{
    padding: 8px 6px;
    font-size: 14px;
  }

  /* 左列（時間帯）を守る：幅確保＋折り返し許可 */
  .clinic-table th[scope="row"]{
  /* 狭い端末では左列を広めに確保 */
    width: 11em;
    min-width: 11em;
    white-space: normal; /* 折り返しOK（縦割れ防止） */
    line-height: 1.35;
  }

  /* 左上セルも同様に（見出しが長い場合） */
  .clinic-table th.time-col{
    width: 11em;
    min-width: 11em;
    white-space: normal;
  }
}

/* ---------------------------------------------------------
   Extra small devices (<= 375px) : iPhone SE 等
   --------------------------------------------------------- */
@media (max-width: 375px){

  /* 左列をさらに確保 */
  .clinic-table th[scope="row"],
  .clinic-table th.time-col{
    width: 12em;
    min-width: 12em;
  }

  /* さらに詰める */
  .clinic-table th,
  .clinic-table td{
    padding: 6px 5px;  /* 全体を少し詰める */
    font-size: 13px;
  }
}


/* =========================================================
   Clinic Recruitment table (スタッフ募集表)
   - PC: container内に収めてスクロールを出さない
   - SP: 横幅が足りない場合のみ横スクロールを許可
   - iPhone SE等の狭幅: 左列（時間帯）を広めに確保して縦割れ防止
   ========================================================= */
/* Table base */
.stuff-table{
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 曜日表は列幅計算が安定 */
  background: #fff;
}

/* Cells (共通) */
.stuff-table th{
  border: 1px solid #ccc;
  padding: 10px 8px;        /* PCの基本余白 */
  box-sizing: border-box;
  vertical-align: middle;
}

/* Header row (表の説明) */
.stuff-table thead th{
  background: #f3f3f3;
  white-space: nowrap;  /* 折り返さない */
  text-align: left;   /* 文字は左寄せ */
}

/* Left column (項目) - PCは1行で見せる */
.stuff-table tbody th[scope="row"]{
  text-align: center;
  white-space: nowrap;       /* PCでは1行で見せる */
  font-weight: 700;
  text-align: center;   /* 文字は中央 */
}

.stuff-table tbody td{
  border: 1px solid #ccc;
  padding: 10px 8px;        /* PCの基本余白 */
  box-sizing: border-box;
  vertical-align: middle;
  text-align: left;   /* 文字は左寄せ */
}

/* year cell */
.stuff-table td.time-col{
  text-align: left;
}



/* ---------------------------------------------------------
   iPad (<= 1024px)
   --------------------------------------------------------- */
@media (max-width: 1024px){
 
  .stuff-table tbody th[scope="row"]{
    width: 7em;
    min-width: 7em;
  }
}

/* ---------------------------------------------------------
   iPad Air など (<= 1000px)
   --------------------------------------------------------- */

/* 820〜768周辺（iPad mini縦など）も含めて“均等割り回避” */
@media (max-width: 1000px){

  /* ★ここが肝：900px以下で強制された fixed!important を打ち消す */
  .stuff-table{
    table-layout: auto !important;
  }

  /* 左列：1行でギリ表示（折り返さない） */
  .stuff-table tbody th[scope="row"]{
    width: 1% !important;          /* 可能な限り狭く */
    white-space: nowrap !important; /* 1行維持 */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-align: center;
  }

  .stuff-table tbody th[scope="row"],
  .stuff-table tbody td{
    padding: 8px 6px;
    font-size: 14px;
  }

  /* 左列 */
  .stuff-table tbody th[scope="row"]{
    width: auto !important;
  }
}




/* ---------------------------------------------------------
   Mobile (<= 768px)
   --------------------------------------------------------- */
@media (max-width: 768px){

  /* 横幅が足りない場合のみスクロール（右端罫線の欠け対策含む） */
  .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 余白と文字を少し詰める */
  .stuff-table tbody th[scope="row"],
  .stuff-table tbody td{
    padding: 8px 6px;
    font-size: 14px;
  }

.stuff-table td.time-col{
    padding: 8px 6px;
    font-size: 14px;
    white-space: nowrap;  /* 折り返さない */
    width: auto !important;
  }

  /* 左列 */
  .stuff-table tbody th[scope="row"]{
    width: auto !important;
  }

/*  .stuff-table tbody th[scope="row"]{
    table-layout: fixed;
    width: 5em;              /* 可能な限り狭く（内容に合わせる） */
/*    min-width: 5em;
  /*  min-width: 4.0em; */
  /*  line-height: 1.35; */
/*  } */

  /* 右列（説明文）：自然に伸びる */
/*  .stuff-table tbody td{
    width: auto;
  } */

  /* 右列：残り全部 */
  .stuff-table tbody td{
    width: auto !important;
  
  }

/* ---------------------------------------------------------
   Extra small devices (<= 375px) : iPhone SE 等
   --------------------------------------------------------- */
@media (max-width: 375px){

  /* 固定レイアウトをやめて内容に合わせて列幅を決める */
/*  .stuff-table{
    table-layout: fixed;
  } */

  /* 左列をさらに確保 */
/*  .stuff-table tbody th[scope="row"]{
    width: 4em;              /* 可能な限り狭く（内容に合わせる） */
/*    min-width: 4em; 
  } */

  /* さらに詰める */
  .stuff-table tbody th,
  .stuff-table tbody td{
    padding: 6px 5px;  /* 全体を少し詰める */
    white-space: nowrap;  /* 折り返さない */
    font-size: 13px;
  }

  /* 左列 */
  .stuff-table tbody th[scope="row"]{
    width: auto !important;
  }

  }

/* ===== Content helpers (text readability) ===== */
.lead{
  font-size: 1.05em;
  line-height: 1.8;
  margin: 0 0 12px;
  }

.note{
  font-size: 0.95em;
  line-height: 1.8;
  padding: 10px 12px;
  border: 1px solid #ddd;
  background: #fafafa;
  border-radius: 8px;
  margin: 12px 0;
  }

.bullet-list{
  margin: 8px 0 14px 1.2em;
  line-height: 1.8;
}

.bullet-list li{ margin: 2px 0; }

/* 既存 section-title の色が紫になっているため、ページ側で赤に寄せたい場合 */
.section-title{
  background: #a00;  /* 既存(common.css)は紫(#a0a)なので上書きしたい時だけ有効 */
  color: #fff;
  }

  /* YouTube縦動画（9:16） */
.yt-vertical{
  width: min(420px, 100%);
  margin: 12px 0;
  aspect-ratio: 9 / 16;
  position: relative;
  }

.yt-vertical iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  }
}

/* バナー下の暫定ナビ：PCは隠して、1024px以下だけ表示 */
.mobile-nav-links{
  display: none;          /* PC（>1024px）では非表示 */
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
  line-height: 1.8;
}

/* リンクを「押しやすいボタン風」に（スマホで重要） */
.mobile-nav-links a{
  display: inline-block;
  padding: 8px 10px;
  margin: 4px 6px 4px 0;
  text-decoration: none;
  border-radius: 6px;
}

/* タブレットで表示 */
@media (max-width: 1000px){
  .mobile-nav-links{
    display: block;
  }
}

/* スマホで表示 */
@media (max-width: 860px){
  .mobile-nav-links{
    display: block;
    font-size: 15px;
  }
}

/* スマホで表示 */
@media (max-width: 770px){
  .mobile-nav-links{
    display: block;
    font-size: 14px;
  }
}

/* スマホで表示 */
@media (max-width: 600px){
  .mobile-nav-links{
    margin: 2px 0;
    padding: 2px 10px;
    font-size: 7px;
  }
}

/* カレントページ強調 */
.mobile-navlinks a.is-current{
  font-weight: 700;
  border-color: #a00;
  background: #fff5f5;
}