/*
 * スマホ専用の読みやすさ調整（2026-10-05）。sp-ux.js とセット
 * すべて 767px 以下の中だけ。PCの見た目には影響しない
 */
@media screen and (max-width: 767px) {

/* ---------- 横スライド ---------- */
.spux-slider{display:flex !important;flex-wrap:nowrap !important;grid-template-columns:none !important;gap:4vw !important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-5.3vw !important;margin-right:-5.3vw !important;padding:1vw 9vw 2vw !important;scroll-padding:0 9vw;width:auto !important;max-width:none !important;}
.spux-slider::-webkit-scrollbar{display:none;}
.spux-slider > .spux-slide{flex:0 0 var(--spux-w, 78vw) !important;width:var(--spux-w, 78vw) !important;max-width:none !important;margin:0 !important;scroll-snap-align:center;box-sizing:border-box;}
.spux-nav{display:flex;align-items:center;justify-content:center;gap:3.2vw;margin:2.4vw 0 6.4vw;font-size:3.2vw;color:var(--blue, #2A3F7E);}
.spux-count{font-family:"Cormorant Garamond",serif;letter-spacing:.06em;min-width:10vw;text-align:right;}
.spux-count b{font-size:1.25em;font-weight:600;}
.spux-dots{display:flex;gap:1.8vw;}
.spux-dots button{width:2vw;height:2vw;padding:0;border:0;border-radius:50%;background:#C9CFDD;cursor:pointer;}
.spux-dots button.is-on{background:var(--blue, #2A3F7E);width:5.4vw;border-radius:2vw;transition:width .2s;}
.spux-hint{font-size:2.9vw;color:#8A93A8;letter-spacing:.08em;}
.spux-hint::after{content:"→";margin-left:1vw;display:inline-block;animation:spuxHint 1.4s ease-in-out infinite;}
.spux-nav.is-used .spux-hint{display:none;}
@keyframes spuxHint{0%,100%{transform:translateX(0);}50%{transform:translateX(1.6vw);}}

/* ---------- 折りたたみ（見出しを押して開閉） ---------- */
.spux-acc > .spux-acc-head{position:relative;cursor:pointer;padding-right:10vw !important;-webkit-tap-highlight-color:transparent;}
.spux-acc > .spux-acc-head::after{content:"";position:absolute;right:2.4vw;top:50%;width:5.6vw;height:5.6vw;margin-top:-2.8vw;border-radius:50%;background:var(--blue, #2A3F7E) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/60%;transition:transform .25s;}
.spux-acc.is-open > .spux-acc-head::after{transform:rotate(180deg);}
.spux-acc > .spux-acc-body{display:none;}
.spux-acc.is-open > .spux-acc-body{display:block;animation:spuxOpen .25s ease;}
@keyframes spuxOpen{from{opacity:0;transform:translateY(-1.6vw);}to{opacity:1;transform:none;}}
/* 本文エディタの見出し単位の折りたたみ */
.spux-sec{margin-bottom:2.4vw;}
.spux-sec > .spux-acc-head{margin-bottom:0 !important;}
.spux-sec.is-open > .spux-acc-head{margin-bottom:5.3vw !important;}
.spux-sec > .spux-acc-body{padding-bottom:4vw;}

/* ---------- 続きを読む ---------- */
.spux-fold{position:relative;max-height:var(--spux-max);overflow:hidden;}
.spux-fold::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16vw;background:linear-gradient(rgba(255,255,255,0), var(--spux-fade, #fff));pointer-events:none;}
.spux-fold.is-open{max-height:none;}
.spux-fold.is-open::after{display:none;}
.spux-more{display:block;margin:2.4vw auto 6.4vw;padding:2.4vw 8vw;border:1px solid var(--blue, #2A3F7E);border-radius:10vw;background:#fff;color:var(--blue, #2A3F7E);font-size:3.5vw;font-weight:700;letter-spacing:.06em;cursor:pointer;}

}

/* ===== 全ページ共通の手直し（スマホのみ） ===== */
@media screen and (max-width: 767px) {

/* 改行：見出しは行の長さをそろえる。本文は画面の右端まで詰める
   （2026-11-01 本文の text-wrap:pretty を外した。iPhone の Safari は段落全体に効かせるため、行の途中で折れて右側が大きく空いていた） */
main h1, main h2, main h3, main h4, main h5,
#wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4, #wrapper h5,
.corettl span.f-min, #faq .title, .lens-list h3{text-wrap:balance;word-break:auto-phrase;}
/* 本文の単語の途中（mmHg・QOL・50代など）で折れていた原因を解消 */
.wysiwyg p, .wysiwyg li{word-break:normal !important;overflow-wrap:anywhere;line-break:strict;}
/* ヒーローの紹介文：PC用の改行はスマホでは使わない（.sp 指定の改行は残す） */
#contentsmain .text-Box p.text br:not(.sp), #contentsmain p.text br:not(.sp){display:none;}
#contentsmain .text-Box p.text{text-align:left;}
/* 院名・病院名は途中で折らない */
#contentsendtel p.text2{word-break:auto-phrase;}

/* 表：列が3つまでの表は画面幅に収める（sp-ux.js が .spux-fit を付ける） */
table.spux-fit{width:100% !important;min-width:0 !important;max-width:100% !important;table-layout:auto;}
table.spux-fit th, table.spux-fit td{white-space:normal !important;}
.spux-fit-wrap{overflow-x:auto !important;width:auto !important;}
.spux-fit-wrap .scroll-hint-icon-wrap{display:none !important;}
.wysiwyg table:not(.spux-fit){min-width:0;}
/* 4列以上の表は横スクロールのまま、金額は途中で折らない */
.cat-scroll, .gl-scroll, .my-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table td:last-child{overflow-wrap:normal;}

/* 費用一覧：見出しの右に押し出して画面全体を横に揺らしていた負のマージンを解除 */
#contentsmyopia .inner-Box h4{margin-right:0 !important;}
html, body{overflow-x:clip;}

/* 症状カード：文字の幅を最後まで使う（「目が潤んで／いる」の1語落ち） */
#symptomcontents .listbox li a .min-box, #dl-ttlbox-rec .reclistbox li a .min-box{width:auto !important;flex:1 1 0;min-width:0;}

/* 初めての方へ：受診時のお願い枠を字下げせず全幅に */
#contentsflow .flow-note{margin-left:0 !important;margin-right:0 !important;}

/* FAQ・お知らせ・コラムの絞り込みボタンを押しやすく */
#faq .catelist ul{display:grid !important;grid-template-columns:1fr 1fr;gap:2.4vw;}
#faq .catelist li{margin:0 !important;width:auto !important;}
#faq .catelist li a{display:flex !important;align-items:center;justify-content:center;min-height:11.8vw;font-size:3.6vw !important;padding:1.6vw 2vw !important;text-align:center;}
#news #sh-box .category-list li a, #catetagbox .categlist a{font-size:3.4vw !important;min-height:10.6vw;display:inline-flex !important;align-items:center;}
/* コラム一覧のタイトルは3行まで見せる */
#column .listbox li h3 span{-webkit-line-clamp:3 !important;}

/* フッター下のリンク行に左右の余白 */
footer .fnavi .btmtext{padding-left:5.3vw;padding-right:5.3vw;box-sizing:border-box;}

/* 院ページのページ内リンクを押しやすい2列ボタンに */
#contentsnavi ul.anchor2{display:grid !important;grid-template-columns:1fr 1fr;gap:2vw;}
#contentsnavi ul.anchor2 li{width:auto !important;margin:0 !important;}
#contentsnavi ul.anchor2 li a{display:flex !important;align-items:center;min-height:10.6vw;font-size:3.5vw !important;}

/* 一覧ページ：大きな写真のカードを「左に小さな写真・右に文字」にして長さを半分に */
#diseasecontents .listbox li a, #contentstreats .inner-Box ul li a{display:grid !important;grid-template-columns:30vw 1fr;column-gap:4vw;align-items:start;}
#diseasecontents .listbox li a .photo, #contentstreats .inner-Box ul li a .photo{grid-row:1 / span 4;aspect-ratio:1 / 1 !important;margin:0 !important;width:30vw !important;}
#diseasecontents .listbox li a .photo img, #contentstreats .inner-Box ul li a .photo img{width:100%;height:100%;object-fit:cover;}
#diseasecontents .listbox li, #contentstreats .inner-Box ul li{margin-bottom:5.3vw !important;}

/* スライドの中のカードは高さをそろえる */
.spux-slider > .spux-slide{height:auto;}
.spux-slider > .spux-slide > a{height:100%;}
}

@media screen and (max-width: 767px) {
/* 診療時間表の下の注記（周りの本文と同じ大きさに） */
.cal-note{font-size:3.4vw !important;}
.cal-note__mark img{width:3.4vw;height:3.4vw;}
/* 本文の3列の図（緑内障の初期・中期・後期など）は縦に積まず3つ並べて見比べる */
.wysiwyg .wp-block-columns:not(.glaucoma-types):has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))){display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:2.4vw !important;}
.wysiwyg .wp-block-columns:not(.glaucoma-types):has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) > .wp-block-column{flex:1 1 0 !important;min-width:0;margin:0 !important;}
.wysiwyg .wp-block-columns:not(.glaucoma-types):has(> .wp-block-column:nth-child(3)):not(:has(> .wp-block-column:nth-child(4))) :is(p, figcaption){font-size:2.9vw !important;line-height:1.6;}
}

@media screen and (max-width: 767px) {
/* 表の金額は「22,000／円」のように途中で折らない */
table.spux-fit td{word-break:keep-all;overflow-wrap:anywhere;}
/* 4列の表は文字と余白を少し詰めて画面内に収める */
table.spux-fit-4 th, table.spux-fit-4 td{font-size:3.3vw !important;padding:2.4vw 1.1vw !important;letter-spacing:0 !important;}
/* 横長の図：画面の約2倍の大きさで表示し、横にスクロールして読む */
.spux-wide-fig{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.spux-wide-fig img{width:200vw !important;max-width:none !important;}
.spux-wide-fig.mech-fig--types img{width:260vw !important;}
}
@media screen and (max-width: 767px) {
/* コラムの目次の「開く／閉じる」を押しやすく */
#toggle-toc{display:inline-flex;align-items:center;min-height:9vw;padding:0 3.2vw;border:1px solid var(--blue, #2A3F7E);border-radius:10vw;font-size:3.4vw;text-decoration:none !important;}
}

/* ===== 小さくて読めない図：切り分けて縦に並べる／「＋」で拡大（2026-10-19）。sp-ux.js の splitFig・zoomFig とセット ===== */
@media screen and (max-width: 767px) {
.spux-split-src{display:none !important;}
.spux-split{display:flex;flex-direction:column;align-items:center;gap:5.3vw;margin:0 auto;}
.spux-split-part{position:relative;overflow:hidden;width:100%;max-width:100%;}
.spux-split-part > .spux-zoom{position:static;width:auto;}
.spux-split-part img{position:absolute;left:0;top:0;display:block;max-width:none !important;height:auto !important;margin:0 !important;}
.spux-zoom{position:relative;display:block;width:fit-content;max-width:100%;margin-inline:auto;}
.spux-zoom img{cursor:zoom-in;}
.spux-zoom-btn{position:absolute;right:1.6vw;bottom:1.6vw;z-index:2;width:max(44px,11.3vw);height:max(44px,11.3vw);padding:0;border:2px solid #fff;border-radius:50%;background:var(--blue, #2A3F7E);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:pointer;}
.spux-zoom-btn::before,.spux-zoom-btn::after{content:"";position:absolute;left:50%;top:50%;width:4.8vw;height:2px;background:#fff;transform:translate(-50%,-50%);}
.spux-zoom-btn::after{transform:translate(-50%,-50%) rotate(90deg);}
.spux-zoom-layer{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#0c1228;}
.spux-zoom-scroll{flex:1 1 auto;display:flex;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4vw 0;}
.spux-zoom-scroll img{display:block;margin:auto;max-width:none !important;height:auto;background:#fff;}
.spux-zoom-hint{margin:2.4vw 0 0;color:#fff;font-size:3.4vw;text-align:center;letter-spacing:.06em;}
.spux-zoom-close{display:block;margin:3.2vw auto calc(5.3vw + env(safe-area-inset-bottom));padding:2.9vw 12vw;border:1px solid #fff;border-radius:10vw;background:transparent;color:#fff;font-size:3.8vw;font-weight:700;letter-spacing:.1em;cursor:pointer;}
html.spux-zoom-open, html.spux-zoom-open body{overflow:hidden !important;}
}

/* ===== 本文の文字：スマホで読みやすい大きさと行間に（2026-10-19） ===== */
@media screen and (max-width: 767px) {
.wysiwyg p{font-size:4.1vw;line-height:1.9;}
.wysiwyg ul li{font-size:4.1vw;line-height:1.75;letter-spacing:.05em;margin-bottom:2.9vw;}
.wysiwyg ol li{font-size:4.1vw;line-height:1.8;margin-bottom:2.9vw;}
.wysiwyg figcaption{font-size:3.5vw;line-height:1.6;}
#dl-ttlbox .inner-Box > p.text, #dl-ttlbox p.text{font-size:4.1vw;line-height:1.85;}
}

/* ===== 2026-11-01 スマホ実機の指摘 ===== */
@media screen and (max-width: 767px) {
/* コラムの目次：「開く／閉じる」ボタンを「目次」の文字の高さの中央にそろえる */
#column #toc_container #toggle-toc{top:9.3vw;transform:translateY(-50%);}

/* 医師の詳細：画面下にURLバーがあるiPhoneでも、下の「閉じる」と前後ボタンが隠れないように見えている高さで組む */
#doctor-modal .doctor-window{height:94.6vh;height:94.6dvh;}
#doctor-modal .doctor-prev, #doctor-modal .doctor-next{bottom:calc(1vw + env(safe-area-inset-bottom));}
#doctor-modal .box .doctor-close{padding-bottom:calc(22vw + env(safe-area-inset-bottom));}
/* 右上の×を押しやすく（見た目の位置はそのまま、押せる範囲を44px角に） */
#doctor-modal .doctor-window > .doctor-close{top:-3.2vw;right:1.6vw;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}

/* トップ：3院のページへの追従ボタン（front-page.php の #sp-clinicbar）。最初の画面を過ぎたら下から出る */
#sp-clinicbar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;padding:2.1vw 2.7vw calc(2.1vw + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(1.2rem);-webkit-backdrop-filter:blur(1.2rem);box-shadow:0 -.4rem 1.6rem rgba(34,34,34,.12);transform:translateY(110%);transition:transform .3s ease;}
#sp-clinicbar.is-show{transform:none;}
#sp-clinicbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:13.3vw;padding:1.3vw .8vw;border-radius:1.6vw;background:var(--blue, #2A3F7E);color:#fff;text-decoration:none;line-height:1.25;text-align:center;-webkit-tap-highlight-color:transparent;}
#sp-clinicbar a small{font-size:2.7vw;letter-spacing:.04em;opacity:.85;}
#sp-clinicbar a b{font-size:3.6vw;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
/* 各院トップ：電話・アクセス・初めての方への追従ボタン（include_parts/sp-clinic-actions.php の #sp-clinicact）。見た目はトップと同じ */
#sp-clinicact{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;padding:2.1vw 2.7vw calc(2.1vw + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(1.2rem);-webkit-backdrop-filter:blur(1.2rem);box-shadow:0 -.4rem 1.6rem rgba(34,34,34,.12);transform:translateY(110%);transition:transform .3s ease;}
#sp-clinicact.is-show{transform:none;}
#sp-clinicact a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:13.3vw;padding:1.3vw .8vw;border-radius:1.6vw;background:var(--blue, #2A3F7E);color:#fff;text-decoration:none;line-height:1.25;text-align:center;-webkit-tap-highlight-color:transparent;}
#sp-clinicact a small{font-size:2.7vw;letter-spacing:.02em;opacity:.85;white-space:nowrap;}
#sp-clinicact a b{font-size:3.6vw;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.has-clinicbar footer{padding-bottom:calc(19vw + env(safe-area-inset-bottom));}
html.is-opening #sp-clinicbar, html.modal-open #sp-clinicbar, html.modal-open #sp-clinicact{display:none;}
}
@media screen and (min-width: 768px) {
#sp-clinicbar, #sp-clinicact{display:none;}
}

/* ===== 2026-11-01 共通ページのスマホ改善（表・費用一覧の目次・治療ページの追従ボタン） ===== */
@media screen and (max-width: 767px) {
/* 表：金額は1つのかたまり、「（上限）」などは入らなければ次の行に小さく（sp-ux.js の keepTokens） */
table.spux-fit .spux-nw{white-space:nowrap;}
table.spux-fit .spux-sub{display:inline-block;font-size:.84em;line-height:1.4;}
table.spux-fit td, table.spux-fit th{word-break:normal;overflow-wrap:normal;}
/* 左端が見出しの表：いちばん長い見出しが1行に入る幅を取る（sp-ux.js の rowHeadWidth） */
table.spux-fit-rh:not(.spux-fit-4) tr > *{padding-left:2.4vw !important;padding-right:2.4vw !important;}
table.spux-fit-rh tr > :first-child{width:calc(var(--spux-rh) * 1.1em);min-width:calc(var(--spux-rh) * 1.1em);}
table.spux-fit-rh1 tr > :first-child{white-space:nowrap !important;}
/* 項目名のかっこ書き（老眼対応レンズ など）は名前の下の行に */
table.spux-fit-rh tr > :first-child .spux-sub{display:block;white-space:normal;}

/* 費用一覧：画面の上に固定する目次（sp-ux.js が #spux-pagetoc を作る）。ヘッダーの真下に出す */
#spux-pagetoc{position:fixed;left:0;right:0;top:17.3vw;z-index:14;display:flex;gap:1.6vw;overflow-x:auto;scrollbar-width:none;padding:1.6vw 4vw;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(1.2rem);backdrop-filter:blur(1.2rem);box-shadow:0 .4rem 1.2rem rgba(34,34,34,.08);transform:translateY(-130%);visibility:hidden;transition:transform .25s ease, visibility 0s .25s;}
#spux-pagetoc.is-show{transform:none;visibility:visible;transition:transform .25s ease;}
#spux-pagetoc::-webkit-scrollbar{display:none;}
#spux-pagetoc button{flex:0 0 auto;display:flex;align-items:center;min-height:9.6vw;margin:0;padding:0 3.4vw;border:1px solid #C9CFDD;border-radius:10vw;background:#fff;color:var(--blue, #2A3F7E);font:inherit;font-size:3.4vw;font-weight:700;letter-spacing:.02em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#spux-pagetoc button.is-on{background:var(--blue, #2A3F7E);border-color:var(--blue, #2A3F7E);color:#fff;}
html.modal-open #spux-pagetoc, html.spux-zoom-open #spux-pagetoc{display:none;}

/* 治療ページ：電話・費用・初めての方への追従ボタン（include_parts/sp-treat-actions.php の #sp-treatact）。見た目は各院トップと同じ */
#sp-treatact{position:fixed;left:0;right:0;bottom:0;z-index:15;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;padding:2.1vw 2.7vw calc(2.1vw + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);backdrop-filter:blur(1.2rem);-webkit-backdrop-filter:blur(1.2rem);box-shadow:0 -.4rem 1.6rem rgba(34,34,34,.12);transform:translateY(110%);transition:transform .3s ease;}
#sp-treatact.is-show{transform:none;}
#sp-treatact > a, #sp-treatact > button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:13.3vw;margin:0;padding:1.3vw .8vw;border:0;border-radius:1.6vw;background:var(--blue, #2A3F7E);color:#fff;font:inherit;text-decoration:none;line-height:1.25;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
#sp-treatact small{font-size:2.7vw;letter-spacing:.02em;opacity:.85;white-space:nowrap;}
#sp-treatact b{font-size:3.6vw;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
/* 電話を押したら下から出る「どの院にかけるか」 */
#sp-treattel{position:fixed;inset:0;z-index:100001;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(12,18,40,.55);}
#sp-treattel[hidden]{display:none;}
#sp-treattel .box{padding:5.3vw 5.3vw calc(4vw + env(safe-area-inset-bottom));border-radius:4vw 4vw 0 0;background:#fff;}
#sp-treattel .ttl{margin:0 0 1.6vw;color:#222;font-size:4vw;font-weight:700;text-align:center;}
#sp-treattel .note{margin:0 0 3.2vw;color:#AA1C1C;font-size:3.4vw;line-height:1.6;text-align:center;}
#sp-treattel ul{margin:0;padding:0;list-style:none;}
#sp-treattel li + li{margin-top:2.4vw;}
#sp-treattel li a{display:flex;align-items:center;justify-content:space-between;gap:2.4vw;min-height:14.4vw;padding:0 4.8vw;border:1px solid var(--blue, #2A3F7E);border-radius:2.4vw;color:var(--blue, #2A3F7E);text-decoration:none;-webkit-tap-highlight-color:transparent;}
#sp-treattel li a span{font-size:3.7vw;font-weight:700;color:#222;}
#sp-treattel li a b{font-size:4.3vw;font-weight:700;letter-spacing:.04em;white-space:nowrap;}
#sp-treattel .close{display:block;width:100%;min-height:11.7vw;margin-top:3.2vw;border:0;background:none;color:var(--blue, #2A3F7E);font-size:3.7vw;text-decoration:underline;cursor:pointer;}
html.sp-treattel-open, html.sp-treattel-open body{overflow:hidden !important;}
html.modal-open #sp-treatact{display:none;}
}
@media screen and (min-width: 768px) {
#sp-treatact, #sp-treattel, #spux-pagetoc{display:none !important;}
}