@charset "utf-8";
/* ============================================================
   スマホ用の表示（画面幅 1023px 以下だけで読み込まれる。スマホの横向きも含む）
   タブレットは表示幅を1024に固定しているので、パソコンと同じ表示のまま
   株式会社ディセオ 2026-11
   ============================================================ */

html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 15px; }
img { max-width: 100%; height: auto; }

/* ---- ヘッダー ---- */
.globeheader { height: auto; }
.logo { width: auto; background-image: none; }
h1 { font-size: 10px; line-height: 1.5; padding: 6px 10px 2px; }
h2 { width: auto; padding: 4px 10px 8px; }
h2 img { width: 200px; }
p.stuff { display: none; }          /* 右上の「採用情報」はメニューに入っているので隠す */
#globenav { display: none; }        /* 画像のメニューは隠して、下の文字のメニューを出す */
nav.spnav { display: block; padding: 0 8px 10px; }
nav.spnav ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
nav.spnav li { flex: 1 1 22%; }
nav.spnav a { display: block; padding: 10px 2px; border-radius: 6px; background: #37A68A; color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; text-shadow: none; }
nav.spnav a:hover { background: #2E8771; color: #FFF; }

/* ---- パンくず ---- */
#contents { padding-top: 0; }
#contents .pan { width: auto; margin: 0; padding: 8px 12px; background-image: none; }

/* ---- トップ：スライド（スマホでは1枚目の写真だけを表示） ---- */
#slide { width: auto; padding: 0 8px; }
#slider { width: auto !important; height: auto !important; margin: 0; border: 0; background: none !important; }
#slider img { position: static !important; display: none !important; width: 100% !important; height: auto !important; visibility: visible !important; }
#slider img:first-child { display: block !important; }
#slider .nivo-slice, #slider .nivo-box, #slider .nivo-caption, #slider .nivo-directionNav, #slider .nivo-controlNav { display: none !important; }

/* ---- トップ：枠を縦1列に ---- */
#box { width: auto; margin: 12px 0; padding: 0 8px; }
.box1, .box2, .box3, .box4 { float: none; width: auto; height: auto; margin: 0 0 12px; }
.tonextpage { position: static; margin-top: 4px; text-align: right; }
.box1 table.timetable { width: 100%; margin-left: 0; }
.box1 ul { padding-top: 8px; }
p#topprof { padding-top: 8px; }
p#profcliphoto, p#profaccess { position: static; display: inline-block; margin: 8px 0 0 7px; vertical-align: bottom; }
.box3 #news { width: auto; height: auto; margin: 10px 0 0; padding: 0 4px; overflow: visible; }
#news .newsdate { float: none; width: auto; padding-bottom: 0; border-bottom: 0; }
#news .newspara { float: none; width: auto; }

/* ---- 下部のお問い合わせ：画像の代わりに、押すと電話がかかるボタン ---- */
#shopin { width: auto; height: auto; margin: 12px 8px 0; }
#shopinfo { display: none; }
p.sptel { display: block; margin: 0; }
p.sptel a { display: block; padding: 12px; border-radius: 8px; background: #37A68A; color: #FFF; font-size: 14px; line-height: 1.5; text-align: center; text-decoration: none; text-shadow: none; }
p.sptel strong { font-size: 24px; letter-spacing: 1px; }
.totop { width: auto; padding: 16px 8px 0; }

/* ---- フッター ---- */
.footernav { width: auto; padding: 12px 8px; }
.footernav ul { margin: 0; padding: 0; }
.footernav ul li { display: inline-block; margin: 4px 0; font-size: 12px; }
.footerprof { width: auto; margin-top: 0; padding: 0 12px; }
.footerprofimg { float: none; margin: 0 0 6px; }
.copyright { width: auto; margin-top: 10px; padding: 0 12px; font-size: 11px; text-align: center; }

/* ---- 下層ページ ---- */
#block { width: auto; margin: 0 8px 16px; }
.box5 { width: auto; margin: 0; padding: 12px 10px; }
.box5 h3 { display: none; }          /* 縦書きのタイトル画像（パンくずにページ名が出ている） */
#rightbox { float: none; width: auto; }
.box5 h4 { width: auto; height: auto; margin-left: 0; padding: 8px 10px 6px; font-size: 17px; }
.box5 div.peace, .box5 div.peaces { width: auto; margin-left: 0; }
.box5 div.peace { padding: 12px; }
.accessprof { width: auto; }
.box5 iframe { width: 100% !important; height: 300px !important; }
.box5 div.servebody { padding: 6px 2px 0; }
/* 狭い画面では「、」だけで折り返すと短い行ばかりになるので、文ごとの改行は残して文の中は普通に折り返す */
.box5 span.ph, .box5 div.servebody span.ph { display: inline; }
.box5 div.peace p, .box5 div.servebody p, .box5 p.accessprof, .box5 .equipment, .box5 .equipment.brk { text-align: left; word-break: normal; overflow-wrap: anywhere; }

/* 診療時間の表 */
.box5 div.hourswrap { width: auto; margin-left: 0; }
.box5 table.hours { font-size: 13px; }
.box5 table.hours th, .box5 table.hours td { padding: 8px 2px; }
.box5 table.hours thead th { font-size: 13px; }
.box5 table.hours thead th.hlabel { padding-left: 6px; }
.box5 table.hours tbody th { width: auto; padding-left: 6px; white-space: normal; }
.box5 table.hours tbody th .ampm { display: block; width: auto; }
.box5 table.hours strong { font-size: 14px; }
.box5 table.hours td { font-size: 16px; }

/* 項目と内容の表（当院のご案内・院長あいさつ・採用情報） */
dl.comprof { width: auto; padding: 8px 0; }
dl.comprof dt { float: none; width: auto; padding: 10px 10px 2px; text-indent: 0; border: 1px solid #DDD; border-bottom: 0; background-color: #F9F9F9; }
dl.comprof dd { padding: 2px 10px 10px; border-top: 0; }
dl.comprof dt#overandover { border-top: 1px solid #DDD; }
dl.comprof dd#overandover { border-top: 0; }

/* 施設紹介（写真は説明の上に、幅いっぱいで） */
.equipment { width: auto; height: auto; }
.equipment img { float: none; display: block; width: 100%; max-width: 350px; margin: 0 0 10px; }

/* 採用情報の見出し文 */
.catchcopy { width: auto; margin: 10px 0 0; padding: 0 4px; line-height: 1.6; }

/* 横向きのスマホなど、少し広い画面では本文の幅を読みやすい範囲に */
#box, #block, #slide, #shopin, nav.spnav { max-width: 760px; margin-left: auto; margin-right: auto; }
#block, #shopin { width: calc(100% - 16px); }   /* 上の max-width で消えた左右8pxの余白を戻す */
.logo, #contents .pan, .footernav, .footerprof, .totop { max-width: 760px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

/* 小さかった文字（住所・駐車場・採用・フッター）を読みやすく */
h1 { font-size: 11px; }
.box2 p { font-size: 14px; }
.box1 table.timetable small { font-size: 12px; }
.box4 p.toprec { font-size: 14px; }
.footerprof { font-size: 13px; }
.copyright small { font-size: 11px; }

/* 番号や時間を行の途中で切らない */
.nw { white-space: nowrap; }

/* 古いスマホでも、長い文が横にはみ出さないように */
#news .newspara, .box4 p.toprec, .box1 table.timetable small.brk { word-break: normal; overflow-wrap: break-word; }

/* 「大きな地図で見る」を押しやすいボタンに（行内の 11px 指定より優先） */
.box5 div.peaces iframe + p { margin: 8px 0 0; font-size: 15px !important; }
.box5 div.peaces iframe + p a { display: block; padding: 12px; border: 1px solid #37A68A; border-radius: 6px; background: #FFF; text-align: center; text-decoration: none; }

/* メニューのボタンは同じ高さに。幅320pxの画面でも「当院のご案内」が割れないように */
nav.spnav li { display: flex; }
nav.spnav a { flex: 1; }
@media (max-width: 359px) {
  nav.spnav ul { gap: 4px; }
  nav.spnav a { padding: 10px 0; font-size: 11px; letter-spacing: -0.5px; white-space: nowrap; }
}

/* フッターの文字リンクを押しやすく */
.footernav ul li { margin: 0; }
.footernav ul li a { display: inline-block; padding: 8px 2px; }