/* 復帰ボタンはバーの兄弟なので、カスタムプロパティは両方に定義する（子孫へは継承される） */ .ifj-bar, .ifj-revive { --ifj-ink: #16211f; --ifj-accent: #10b4b9; /* ブランド色 #10b4b9 は白に対して 2.6:1 しかない。用途ごとに必要な比率が違うので 3 段持つ（実測値。淡色帯 #edf7f7 上 / 白上）: #10b4b9 … 2.3 / 2.6 → 塗り・上端罫線などの装飾のみ #0d8f93 … 3.6 / 3.9 → 枠線・フォーカスリング（非テキストは 3:1 / WCAG 1.4.11・2.4.11） #0a7477 … 5.1 / 5.6 → テキスト（通常文字は 4.5:1。12px 太字は「大きな文字」に当たらない） */ --ifj-accent-dark: #0d8f93; --ifj-accent-text: #0a7477; --ifj-line: #dfe6e4; --ifj-muted: #5c6b68; } /* テーマ側の指定が紛れ込まないよう、この配下だけ箱モデルを固定する */ .ifj-bar, .ifj-bar *, .ifj-bar *::before, .ifj-bar *::after, .ifj-revive, .ifj-revive * { box-sizing: border-box; } /* 全幅の帯にすると、広い画面では白地の大半が空白になる。中央寄せのカードにして 左右はページを見せる（ウィジェットが 580px 固定なので、全幅にする必然性がない） */ .ifj-bar { position: fixed; bottom: 0; left: 50%; width: 100%; max-width: 600px; /* ウィジェット 580px を左右 9px で包む */ z-index: 9990; background: #fff; border: 1px solid var(--ifj-line); border-bottom: 0; /* 上端のティール罫線は、サイト各所の細い罫線（information 見出し等）と揃えるための ブランド接続。無彩色のままだとカードだけ世界観から浮く */ border-top: 2px solid var(--ifj-accent); border-radius: 16px 16px 0 0; overflow: hidden; /* 帯の角をカードの角丸に合わせて落とす */ box-shadow: 0 -4px 20px rgba(22, 33, 31, .07); font-family: inherit; color: var(--ifj-ink); padding-bottom: env(safe-area-inset-bottom, 0px); /* 下からせり出す。transform はレイアウトを発生させないので本文を動かさない */ transform: translateX(-50%) translateY(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .ifj-bar.is-in { transform: translateX(-50%) translateY(0); } /* カードが max-width に届かず画面端まで伸びているときは、左右の枠線が画面の際に 張り付いて見えない。それでいて box-sizing:border-box なので内容幅を 2px 削り、 375px の iPhone では基準幅(375px)を 373px に割って 0.995 倍の無意味な縮小を 招いていた。見えない枠線を落として、最も一般的な幅を素通しにする （border-bottom を 0 にしているのと同じ理由。画面の外に接する辺は描かない） */ @media screen and (max-width: 600px) { .ifj-bar { border-left: 0; border-right: 0; } } /* 横向きの低い viewport（iPhone SE 等・カード高 ≈345px が入り切らない）では、bottom:0 で 上へ伸びるカード上端（行1 の ☎ ×）が画面外へクリップされ、overflow:hidden＋縦スクロール不可で × に届かず閉じられない（Escape は no-op・.fNavi-wrap は display:none）。viewport 高に収め、 内部を縦スクロール可能にして上端コントロールへ到達させる。カード高が足りる通常時は非マッチ */ @media screen and (max-height: 460px) { .ifj-bar { max-height: 100vh; max-height: 100dvh; overflow-x: hidden; overflow-y: auto; } } /* 既定（PC・および SP で 375px 以上）は素通し。JS が SP かつ 375px 未満のときだけ __scale に transform と縮小率(--ifj-scale)を、__viewport に縮んだ高さを書く */ .ifj-bar__viewport { overflow: hidden; } .ifj-bar__scale { transform-origin: top left; } /* ツールバーとウィジェットを同じ列幅に揃える（580px = ストランザ公式指定幅）。 揃えないとタブの端が予約枠の端とズレて、後付け感が出る。 幅のメディアクエリではなく PHP が付ける SP クラスで分岐する（分岐基準を is_mobile に 一本化するため。$ifj_is_sp のコメント参照） */ .ifj-bar:not(.ifj-bar--sp) .ifj-bar__col, .ifj-bar:not(.ifj-bar--sp) .ifj-bar__inner { max-width: 580px; margin-inline: auto; } /* 帯の背景は全幅に敷く（中途半端な幅で切ると、全幅の白いバーの上に グレーの板が浮いているように見えてツールバーとして読めない） */ .ifj-bar__row { /* 無彩色のグレーではなくティールの淡色。サイトの色域に寄せつつ、 白いボタンを浮かせるだけのコントラストは確保する */ background: #edf7f7; border-bottom: 1px solid var(--ifj-line); } /* 操作できるものだけを白いボタンとして帯の上に浮かせる （押せる範囲を輪郭で示すため。文字だけ並べるとタブに見えない） */ .ifj-bar__col { display: flex; align-items: stretch; gap: 6px; padding: 7px; } /* 見出しは操作できないので、ボタンの輪郭を持たせない */ .ifj-bar__label { flex: none; display: flex; align-items: center; padding: 0 8px; /* カードの見出し。タブ(13px)より一段大きくして見出しとして読ませる。行の高さは タブ/電話/×（min-height 30〜44px）が支配するので、この程度では行高もカード高も変わらない */ font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--ifj-accent-text); white-space: nowrap; } /* 再診は「別サイトへ出る」操作なので、タブ（この場に留まる操作）と見た目を分ける。 枠を持たせるとタブと並んで見えるため、下線のテキストリンクにする */ .ifj-bar__saishin { flex: none; display: flex; align-items: center; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ifj-accent-text); text-decoration: underline; white-space: nowrap; } .ifj-bar__saishin:hover { color: var(--ifj-ink); } .ifj-bar__saishin:focus-visible { outline: 2px solid var(--ifj-accent-dark); outline-offset: 1px; } /* タブの補足「（初めての方）」は主ラベルより弱く見せる。主語(13px)と同サイズだと主従が弱いので 一段小さくする。1 行のまま（既存の white-space:nowrap） */ .ifj-tab__note { font-size: 11px; font-weight: 400; } /* 再診は別サイトへ出る。末尾のシェブロンで遷移を示す。装飾なので aria-hidden の SVG(path)で描き、 アクセシブル名は可視テキスト「2回目以降の方」に保つ（文字の › は小さいので path にした）。 viewBox 8 6 8 12 は path の外接。文字と同程度の高さに見せ、幅は縦横比に合わせる */ .ifj-bar__saishin svg { flex: none; width: .7em; height: 1.05em; margin-left: .25em; } /* 電話は主要な予約導線なので、輪郭の × と差をつけて「塗り」で主役にする （ダークティール塗り＋白アイコン。白 vs #0a7477 は約 5.6:1 で非テキスト 3:1 を満たす）。 × は輪郭のままにして従に見せる（主従を塗りと色で表す） */ .ifj-bar__tel { flex: none; width: 30px; display: flex; align-items: center; justify-content: center; background: var(--ifj-accent-text); border: 1px solid var(--ifj-accent-text); border-radius: 50%; color: #fff; } .ifj-bar__tel svg { width: 14px; height: 14px; } .ifj-bar__tel:hover { filter: brightness(.92); } .ifj-bar__tel:focus-visible { outline: 2px solid var(--ifj-accent-dark); outline-offset: 1px; } /* 閉じるは副次的な操作。タブと同じ角丸の箱にすると重要度が並んで見えるので、 押せることは枠で示しつつ丸くして役割を分ける */ .ifj-bar__close { flex: none; width: 30px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--ifj-accent-dark); border-radius: 50%; color: var(--ifj-muted); cursor: pointer; } .ifj-bar__close svg { width: 14px; height: 14px; } .ifj-bar__close:hover { background: #f0fafa; border-color: var(--ifj-accent-text); color: var(--ifj-ink); } .ifj-bar__close:focus-visible, .ifj-tabs [role="tab"]:focus-visible { outline: 2px solid var(--ifj-accent-dark); outline-offset: 1px; } /* タブは内容幅に締めて見出しの隣に置く（flex:1 で伸ばすと「おとな」の 3 文字に対して ボタンが間延びする）。余りは閉じるボタンの手前に寄せる */ .ifj-tabs { display: flex; flex: 0 1 auto; gap: 4px; margin-right: auto; min-width: 0; } /* 枠線は「押せる範囲」を示す唯一の手がかり。淡い帯の上では白い塗り自体では 境界を示せない（白 vs どんな淡色帯でも最大 1.8:1 で、3:1 に原理的に届かない）ため、 枠線が 3:1 を負う（WCAG 1.4.11）。#dfe6e4 は白に対して 1.27:1 しかなく不足だった */ .ifj-tabs [role="tab"] { flex: 0 1 auto; min-width: 0; min-height: 30px; padding: 0 24px; font: inherit; font-size: 13px; font-weight: 600; background: #fff; color: var(--ifj-muted); border: 1px solid var(--ifj-accent-dark); border-radius: 6px; /* 幅が足りないとき、タブに「文字を折り返して縦に伸びる」逃げ道を与えない。 min-width:0 と相まって黙って複数行になり、行が縦に伸びるだけで崩れが目に留まらない。 逃げ道を塞げば、足りない幅は「文字がボタンからはみ出す」形で現れて検出できる。 幅不足の大半はカード全体の縮小（fit()）が引き取る。ここへ実際に至るのは、 SP では行2 に「おとな（初めての方）」＋「お子さま（初めての方）」が収まらない幅 （375px 未満・fit() の縮小が追いつく前）、PC では長い文言を 1 行に流し込む経路 */ white-space: nowrap; cursor: pointer; } /* SP はタブが行2に 2 つ並ぶ（下の 2 段化を参照）。padding 24px は 1 個あたり左右 48px を食い、 「おとな（初めての方）」＋「お子さま（初めての方）」が 375px に収まらなくなる。 10px に詰めると 345px（実測）で収まる。PC は 580px 幅に余裕があるので 24px のまま */ .ifj-bar--sp .ifj-tabs [role="tab"] { padding: 0 10px; } /* SP: ヘッダを 2 段にする。新文言（おとな（初めての方）等）は 1 行の col に収まらない （実測 531px > 375px）。col を flex-wrap にし、タブだけ次行へ送る: 行1 = 予約 …余白… 2回目以降の方 › ┃ ☎ ×（予約は左、再診以降は saishin の margin-left:auto で右へ） 行2 = タブ（order:2・flex-basis:100% で単独行） 再診は行1 に残すが、× の隣に詰まって閉じる操作と混同されないよう、☎ との間に区切りの余白 （tel の margin-left:14px。flex gap 6px と合わせて実質 20px）を入れて「リンク」と「アイコン群」を 視覚的に分ける。PC は 580px 幅に 1 行で収まるので変えない（この分岐は .ifj-bar--sp に限る）。 .ifj-tabs の既定 margin-right:auto（PC 単行で × を右へ送る用）は SP では 0 に戻す */ .ifj-bar--sp .ifj-bar__col { flex-wrap: wrap; } .ifj-bar--sp .ifj-tabs { order: 2; flex-basis: 100%; margin: 0; } .ifj-bar--sp .ifj-bar__saishin { margin-left: auto; } .ifj-bar--sp .ifj-bar__tel { margin-left: 14px; } /* SP: カードを出す間はモバイルヘッダ（css/style_sp.css の header は z-index:10000）と、 その内側の固定ハンバーガー .h_menu より上へ出す。さもないと横向き（812×375）で ヘッダ高が伸び、カードの操作行（再診・電話・×）がヘッダ領域に入り、header(10000) > カード(9990) で操作行のタップがヘッダに吸われて閉じられない（ハンバーガーが × を覆い、 タップで sidr が開いてしまう）。sidr ドロワー（z-index:999999）より下に保つので、 メニューは従来どおりカードの上に開ける。hidden 時は display:none なので表示中だけ効く。 PC の .ifj-bar は 9990 のまま（PC にこのモバイルヘッダは無い） */ .ifj-bar--sp { z-index: 10001; } .ifj-tabs [role="tab"]:hover { background: #f0fafa; border-color: var(--ifj-accent-text); color: var(--ifj-ink); } /* 選択タブは帯 #edf7f7 と近い #d9f0f0 だと塗りだけでは判別しづらい。塗りを一段濃く（#c9ebeb）し、 枠線も accent-text へ濃くして選択を強める。枠線を濃くするのは、塗りを濃くすると 枠線(accent-dark) vs 塗り が 3:1 に近づくため（accent-text 枠なら余裕を持って満たす）。 塗り・枠線・太字・濃い文字色で示す（いずれも色単独の手がかりではない） */ .ifj-tabs [role="tab"][aria-selected="true"] { background: #c9ebeb; border-color: var(--ifj-accent-text); color: var(--ifj-ink); font-weight: 700; } .ifj-pane iframe { display: block; border: 0; } /* URL 未設定時のエラー（buildFrame が iframe の代わりに出す）。web 由来で黙って動かさない方針の 可視サイン。枠は確保しつつ、明らかに通常状態でないと分かる体裁にする */ .ifj-pane__error { display: flex; align-items: center; justify-content: center; min-height: 120px; margin: 0; padding: 16px; font-size: 13px; font-weight: 600; text-align: center; color: #b00020; } /* 再診 URL 未設定時のエラー（リンクの代わり） */ .ifj-bar__saishin--error { color: #b00020; text-decoration: none; cursor: default; } /* 予約サイトへの常設リンク（SP のみ・ウィジェットの下）。ウィジェット(iframe)が表示できない ときの初診の避難先。iframe の成否は cross-origin で検知できないので「失敗時だけ出す」が できず常時置く。カード占有率を上げすぎないよう高さは抑える（暴走検知の上限内に収める）。 .ifj-bar__scale の内側なので、狭い幅では fit() のカード縮小に一緒に追従する */ .ifj-bar__fallback { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 4px 16px; border-top: 1px solid var(--ifj-line); font-size: 13px; font-weight: 600; color: var(--ifj-accent-text); text-decoration: underline; text-align: center; } .ifj-bar__fallback:hover { color: var(--ifj-ink); } .ifj-bar__fallback:focus-visible { outline: 2px solid var(--ifj-accent-dark); outline-offset: -2px; } /* 復帰ボタン（バーを閉じている間だけ出る） */ .ifj-revive { position: fixed; left: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; height: 40px; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; background: #fff; color: var(--ifj-ink); /* 高さが変わっても丸のままになるよう、固定値ではなく十分大きい半径にする */ border: 1px solid var(--ifj-accent-dark); border-radius: 999px; box-shadow: 0 2px 12px rgba(22, 33, 31, .16); cursor: pointer; } /* display:flex は UA スタイルの [hidden]{display:none} に勝ってしまうので明示的に打ち消す */ .ifj-revive[hidden] { display: none; } .ifj-revive:hover { background: #f7faf9; } .ifj-revive:focus-visible { outline: 2px solid var(--ifj-accent-dark); outline-offset: 2px; } /* is_mobile() は iPad を PC 扱いするので、このカードは指でも操作される。 ポインタが粗い端末でだけ 44px（WCAG 2.5.5）まで広げる。 マウスの PC は 30px のままで、カード高は 247px（タッチ時は 261px。帯の余白を広げた分）。 44px は CSS px 基準（WCAG 2.5.5）なので、描画後の実寸で 44 CSS px 要る。 カードが縮む SP では 44px と書いただけでは足りない: fit() の transform が ターゲットも一緒に縮め、320px では 44 × 0.853 = 37.5px にしかならない。 そこで縮小率の逆数を掛け、transform を通った後にちょうど 44 CSS px になるようにする （--ifj-scale は fit() が __scale に書く。素通しのときは未設定で fallback の 1）。 カードは narrow 幅でその分だけ縦に伸びるが、ターゲットサイズを優先する。 iPad が補正不要なのは、あちらは縮むのがカードではなくページ全体だから: header.php が PC に viewport width=1300 を出すため、iPad ではレイアウト幅が物理幅 ではなく常に 1300px になり、画面全体が 0.57〜0.79 倍（機種による）に縮む。 周囲のボタンも同率で縮んでおり CSS px では 44px のままなので、ここだけ戻すと 周囲から浮く（実寸 25〜35pt には届かないが、HIG の 44pt は物理基準で WCAG の 要件ではない。30px 比では 46% 広く、改善としては効いている）。 SP はカードだけが縮み、周囲の .fNavi-wrap 等は 1:1 のままなので、この理屈が 当てはまらない＝補正する。 Android タブレットは is_mobile() が SP 側へ落とすので、この規則の実質の対象は iPad */ @media (pointer: coarse) { .ifj-tabs [role="tab"] { min-height: calc(44px / var(--ifj-scale, 1)); } .ifj-bar__close { width: calc(44px / var(--ifj-scale, 1)); } .ifj-bar__close svg { width: 17px; height: 17px; } .ifj-bar__tel { width: calc(44px / var(--ifj-scale, 1)); } .ifj-bar__tel svg { width: 17px; height: 17px; } /* SP の 2 段ヘッダでは行1にタブ（min-height 44px）が居らず、電話・× は行の高さに引きずられて 潰れる（align-items:stretch で行の高さ＝文字高になる）。行1 側にも同じ 44px 下限を与えて タッチターゲットを保つ。再診も行1 に居るが、tel/close の 44px が行高を決め align-items:stretch で伸びるので追加下限は要らない。PC は 1 段でタブと同じ行に居るので、この補正は SP に限る */ .ifj-bar--sp .ifj-bar__tel, .ifj-bar--sp .ifj-bar__close { min-height: calc(44px / var(--ifj-scale, 1)); } /* ボタンはタッチ端末で最初に触られる要素。ここを外すと拡大の意味がない。 復帰ボタンはカードの外（縮小の対象外）なので補正しない */ .ifj-revive { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .ifj-bar { transition: none; } } /* 固定オーバーレイを紙に焼き込まない（料金表や地図を印刷したときに 紙面下部を占有してしまう） */ @media print { .ifj-bar, .ifj-revive { display: none; } } /* 排他: カードを出す間だけ SP の既存固定バーを退場させる（二段重ねの回避）。 .fNavi-wrap（footer.php / css/style_sp.css）は fixed; bottom:0; z-index:9000。 カードを上に重ねて覆うのではなく display:none にする。重ねる方式では、隠れたはずの .fNavi-wrap がフォーカス可能・支援技術から可視のまま残り、さらに半透明 （rgba(255,178,189,.95)）なので透ける。 footer.php の markup は変更せず、body のクラスを起点にここで隠す */ body.ifj-bar-open .fNavi-wrap { display: none; } /* カードを出す間は SP フッターの予約余白も畳む。page_scroll.js が window.load で footer に margin-bottom = .fNavi-wrap 高（≈50px）をインラインで書く。カード開放で .fNavi-wrap は display:none になるが、この余白は残り、body.ifj-has-bar のカード高ぶん padding-bottom と二重になって最下部に隙間ができる。カード開放中だけ 0 に戻す（インライン style を上書きするため !important。PC には