/* brand-jewel.css — ジュエルクリニック(CLINIC_BRAND=jewel)の見た目の上書き * * v75(2026-09-09)。server/lib/brand-page.js が、既定でないブランドのときだけ * の直前へ を差し込む。 * 既定(davide)の配信物にはこのファイルは 1 行も入らない。 * * ■ここに書くもの/書かないもの * ・書く: 素材(イラスト)の差し替え口と、最小限の色調整。 * ・書かない: 配色トークン(--action-primary など)。それは config/brands/jewel.json の * palette を /brand.js が当てる(色の出どころを 2 つに割らない)。 * ・書かない: レイアウト。器はダビデと同じものを使う。例外は院名が長いことで SP に出る * 横のはみ出しの吸収と、v118 の質問チャット(/faq/・埋め込みの窓の中)だけ。 * v118(2026-09-27、発注者「配置や、キャラクターをジュエルクリニックにあわせて」)で、 * 質問チャットは公式サイト(https://aoyamajewel-c.com/)の見た目と配置に合わせる * (最後の節。body.faq-page の中だけに効き、機能一覧・はだプラン診断は変えない)。 * * ■読み込み順 * すべての の後( 直前)に入るので、同じ詳細度なら必ずこちらが勝つ。 * 詳細度が要る 1 か所(.home-head-mascot)だけ、元の宣言と同じ形のセレクタで書く。 * * ■素材はレーン E が納品(public/assets/images/jewel-v1/) * 届くまで url() は 404 になるが、背景画像なので描画されないだけで崩れない * (カードは .home-art の地色 #f7f0e6 が見える)。ファイル名はここが仕様。 */ :root { /* 機能カードの画像。v50-visual.css の :root(v67 のダビデ版)を差し替える。 url() は相対パスで書く(このファイルは /assets/css/ から配信されるので ../images/jewel-v1/… は /assets/images/jewel-v1/… を指す)。 v76(2026-09-09): QA(合否テスト)はこの院では出さない(config/brands/jewel.json の modules に qa が無い)ので、card-qa の行は落とした。存在しないファイルを指す 宣言を残すと、本番で 404 を 1 本増やすだけになる(トップで実測)。 */ --v50-card-skin: url("../images/jewel-v1/card-skin.webp"); /* public/assets/images/jewel-v1/card-skin.webp */ --v50-card-chat: url("../images/jewel-v1/card-chat.webp"); /* public/assets/images/jewel-v1/card-chat.webp */ /* 機能一覧の見出しに立つ案内役。案内役(女の子)はダビデと同じ人物なので (発注者確認 2026-09-09)、共用の v50 の素材をそのまま使う。ダビデの --v50-mascot-* を変数ごと奪わないよう、ジュエル用の名前を足して参照する。 v76(2026-09-09): 以前はここが jewel-v1/mascot-greet.webp を指していたが、 その絵は作らない決まりなので本番で 404 になり、トップの見出しの左が空いていた (実測)。共用の素材へ向け直す。 */ --jewel-mascot-greet: url("../images/v50/mascot-greet.webp"); /* public/assets/images/v50/mascot-greet.webp(全院で共用) */ /* 機能一覧の文字色・輪郭の紺(--portal-* / home.css:20-30)をジュエルの色へ。 いずれも「明るい地の上の文字・アウトライン」にしか使われていない (home.css:233/238/259/262/275/276 で実測)ので、白地とのコントラストだけを見る。 #a93c5e on #ffffff = 6.01:1(AA 通常文字 4.5:1 を満たす) #7d2a44 on #ffffff = 9.19:1 暗い紺の面(ヒーローの帯)は v65 で既に廃止済みで、ここでは作らない。 */ --portal-brand: #a93c5e; --portal-brand-mid: #a93c5e; --portal-brand-deep: #7d2a44; --portal-link: #a93c5e; } /* ── 紺の目盛りをジュエルの色へ(v75、A2)───────────────────────────── * config/brands/jewel.json の palette は --action-primary 系だけを差し替える。 * ところがトップの入口ボタン(.home-entry、home.css:191/218)・機能カードの枠 * (home.css:147)・事実の札の文字(home.css:338)・共通ヘッダーや部品(design.css)は * --navy-* / --brand* を直に参照しているので、palette だけでは紺のまま残る。 * ここで同じ役割・同じ明るさのバラ色へ 1 対 1 で写す(明るさを合わせるので、 * 元の配色で通っていたコントラストの関係がそのまま保たれる)。 * * ★セレクタに body を含めるのが要点。design.css:1048-1075 の * :where(body[data-ui-theme="clinical-learning"], body:has(#skin-app), …) が * 同じ名前を **body 要素** で再定義しており、:root(html)だけに書くと * はだプラン診断の画面には届かない。:where() の詳細度は 0 なので、 * 詳細度 0,0,1 の body が必ず勝つ(/brand.js が palette に対して行うのと同じ手)。 * * ★白地に載る文字として使われる値のコントラスト(実測値。AA 通常文字は 4.5:1) * #7d2a44 on #ffffff = 9.19:1 / on #fbe9ef = 7.87:1 * #93334f on #ffffff = 7.43:1 * #a93c5e on #ffffff = 6.01:1 * #4d1729 on #ffffff = 14.3:1(白文字を載せる濃い面としても使う) * #c2496f on #ffffff = 4.69:1(枠線・進捗バー等の面が主で、文字は上の 3 色) * 暗い紺の帯は作らない(v65 の指摘)。濃い側は面ではなくボタンの押下・フッターに限る。 */ :root, body { --navy-950: #3d1220; --navy-900: #4d1729; --navy-800: #4d1729; --navy-700: #7d2a44; --navy-600: #93334f; --navy-500: #a93c5e; --navy-400: #c2496f; --navy-100: #fbe9ef; /* --brand 系は design.css の :root で --navy-700 / --navy-500 / --navy-100 と 同じ値を持つ別名(design.css:38-41)。はだプラン診断の画面はこちらを多く使う。 */ --brand: #7d2a44; --brand-electric: #a93c5e; --brand-soft: #fbe9ef; --brand-softer: #fdf5f8; /* トップの地色(home.css:32、青みがかった灰)。カードが桃色になるので地も温かい側へ。 */ --portal-bg: #f6eff2; /* v79 是正 J-05(2026-09-14): 院内の全画面パネル(intake.css .intake-overlay)の地。 既定は --bg(#eef1f7、青みがかった灰)だが、ページの地は両院とも --cream(#f8f6f1)なので、 この院では帯の下をページと同じ温かい地に合わせる(帯そのものは --navy-800 = #4d1729)。 */ --intake-scrim-base: var(--cream); } /* 機能一覧の案内役。home.css:80 の `body.home-page .home-head-mascot` が background 一括指定で --v50-mascot-greet を敷いているため、同じ詳細度(0,1,1)の セレクタで background-image だけを上書きする(読み込み順でこちらが後になる)。 */ body.home-page .home-head-mascot { background-image: var(--jewel-mascot-greet); } /* ヒーロー配置版(v50-visual.css:157)も同じ絵にそろえる。 */ .home-head-mascot { background-image: var(--jewel-mascot-greet); } /* 機能一覧の見出し(院名)を SP で折り返さずに収める。 ジュエルの院名はダビデ(8 文字)より長く、375px では案内役(80px)と並べると 1 行に収まらない。home.css:70 の .home-head は flex-wrap: nowrap なので、 縮まない見出し(実測 316px)がそのまま外へ出て、ページ全体が横に 66px はみ出していた (375px で scrollWidth 426 / clientWidth 360 を実測)。 ・折り返しを許すと「ジュエルクリ/ニック恵比寿」のように語の途中で切れる(実測)。 word-break は auto-phrase でも keep-all でも切れ目は同じで、日本語として読みづらい。 ・そこで見出しを次の行へ送り、行いっぱい(330px)を使わせる。文字を小さくせず、 語の途中でも切れない(実測: 1 行・316px・はみ出しなし)。 640px 以上は元から余裕があるので触らない。 */ @media (max-width: 639px) { .home-head { flex-wrap: wrap; } .home-head .home-title { min-width: 0; } } /* ══ v83 依頼 9/10(2026-09-16) /faq/ 入口の見出しだけジュエルで一段小さく ══ 560px 以下の入口は「見出し行の右に挿絵(96px)」の 2 行組み(public/faq/faq.css)。 見出しの入る幅は 375 で 125px になり、ジュエルの「肌と医療脱毛のご質問」は 19px・18px だと「肌と|医療脱毛の|ご質問」の 3 行になる(実測)。17px なら 「肌と医療脱毛の」が 119px で 2 行に収まる。本文 14px より大きい階層は保つ。 ダビデの見出し(「医療脱毛Q&A」)は短く 19px で 1 行なのでここでは触らない。 */ @media (max-width: 560px) { .faq-page .faq-panel .faq-question-title { font-size: 17px; } } /* ══ v115(2026-09-26) /faq/ の会話欄を PC で画面の高さまで伸ばす ══ 発注者の指示「キャンペーンなど情報が多すぎて短いので画像でだすなどして分かりやすく」(本番 1920 幅の画面の写し付き)。 900px 以上の会話欄は faq.css の max-height: clamp(240px, 42vh, 520px) で、1920×1080 でも 454px しかなく、 キャンペーンのカード(画像+価格・期間)が枠の途中で切れていた(実測 2026-09-26: カードの期間の下端は吹き出しの上端から 531px)。 会話が始まった後の会話欄の上は 226px(見出し・状態の 1 行)、下は固定の入力欄 73px なので、 画面の高さから 300px を引いた高さまで伸ばす(1080 で 780px、800 で 500px。上限 860px)。 中身が少ないうちは今までどおり中身の高さ(伸びるのは上限だけ)。低い画面(620px 以下)は faq.css の規則のまま。 ダビデは読み込まないファイルなので変わらない。 */ @media (min-width: 900px) and (min-height: 621px) { .faq-page .chat-log { max-height: clamp(240px, calc(100vh - 300px), 860px); } } /* スマホ(560px 以下)は外枠 20+パネル 20+会話欄 18+吹き出し 15px の余白が左右に重なり、375 で答えの幅が 224px、 キャンペーンのカードが 197px しかなかった(本番の実測 2026-09-26)。会話欄の左右だけ 18→10px に詰める (上下の余白・固定の入力欄の逃げは変えない)。 */ @media screen and (max-width: 560px) { .faq-page .chat-log { padding-left: 10px; padding-right: 10px; } } /* ══ v118(2026-09-27) 質問チャットをジュエルの公式サイトの見た目と配置へ ══ 発注者の指示「配置や、キャラクターをジュエルクリニックにあわせて」。 公式サイト(https://aoyamajewel-c.com/)の実測(2026-09-27、Playwright): 文字 #282828・本文はゴシック/見出しは明朝(Noto Serif JP)で中央寄せ、下に朱の英字の小見出し 差し色 朱 #EF5A6F・枠 砂色 #D4BDAC・淡い面 #FFF7F2・強い面と主な釦は炭 #282828 よくある質問は灰 #F3F4F6 の行に「Q」と山形・カードの角 12px/小物 4px・キャラクターは無い ここはその写し。/faq/ と埋め込みの窓(同じ文書)の body.faq-page の中だけに効く (機能一覧・はだプラン診断・共通のヘッダーは変えない。ダビデはこのファイルを読まない)。 案内役の絵(jewel-v1/guide-*.webp)は server/lib/brand-page.js の BRAND_GUIDE_ART と下の変数で差し替える。 ★文字のコントラスト(AA 通常文字 4.5:1) #282828 on #ffffff = 14.7:1 / on #f3f4f6 = 13.4:1 / 白 on #282828 = 14.7:1 #5e554f on #ffffff = 7.27:1 / on #fff7f2 = 6.87:1 / on #f3f4f6 = 6.60:1 #c9344e on #ffffff = 5.14:1 / on #fff7f2 = 4.86:1 / 白 on #c9344e = 5.14:1 #b02a45 on #fdeef0 = 5.72:1 公式の朱 #EF5A6F は白地で 3.30:1 なので文字には使わず、線・印・点・フォーカスの輪(3:1 以上)にだけ使う。 */ body.faq-page .faq-app, body.faq-page .v61-foot, body.faq-page .faq-suggest-listbox { --jw-ink: #282828; --jw-ink-2: #5e554f; --jw-coral: #ef5a6f; --jw-coral-text: #c9344e; --jw-coral-deep: #b02a45; --jw-peach: #fff7f2; --jw-rose-soft: #fdeef0; --jw-taupe: #d4bdac; --jw-taupe-deep: #a8876f; --jw-line: #ece2da; --jw-row: #f3f4f6; --jw-row-hover: #e9ebee; --ink: var(--jw-ink); --ink-2: var(--jw-ink-2); --paper: #ffffff; --cream: var(--jw-peach); --line-1: var(--jw-line); --gold-line: var(--jw-coral); --gold-text: var(--jw-coral-deep); --gold-soft: var(--jw-rose-soft); --navy-100: var(--jw-rose-soft); --navy-500: var(--jw-coral-text); --navy-600: var(--jw-coral-deep); --navy-700: var(--jw-ink); --navy-900: #4a4a4a; --info: var(--jw-taupe-deep); --action-primary: var(--jw-coral-text); --action-primary-foreground: #ffffff; --shadow-float: 0 12px 32px rgba(40, 40, 40, .14); --shadow-bar: 0 -6px 18px rgba(40, 40, 40, .08); /* design.css の body の変数(:where(body[data-ui-theme="clinical-learning"]))に残る紺・金も写す (共通の釦 .btn.ghost・文字 .muted・リンク・フォーカスの輪・影の色。実測で紺が残っていた)。 */ color: var(--jw-ink); --text: var(--jw-ink); --muted: var(--jw-ink-2); --muted-strong: var(--jw-ink); --text-link: var(--jw-ink); --text-status-info: var(--jw-ink); --icon-quiet: #6e6560; --line: var(--jw-line); --line-strong: #dccfc5; --line-control: #a08f84; --action-secondary: #ffffff; --action-secondary-text: var(--jw-ink); --action-primary-hover: var(--jw-coral-deep); --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px var(--jw-coral-text); --ring: var(--focus-ring); --accent: var(--jw-coral); --accent-strong: var(--jw-coral-deep); --accent-soft: var(--jw-rose-soft); --accent-pale: var(--jw-peach); --brand: var(--jw-ink); --brand-electric: var(--jw-coral-text); --brand-soft: var(--jw-rose-soft); --brand-softer: var(--jw-peach); --surface-2: var(--jw-peach); --surface-3: var(--jw-row); --bg: var(--jw-peach); --info-soft: var(--jw-peach); --navy-400: var(--jw-coral); --navy-800: var(--jw-ink); --navy-950: var(--jw-ink); --shadow-xs: 0 1px 2px rgba(40, 40, 40, .06); --shadow-sm: 0 1px 2px rgba(40, 40, 40, .05), 0 3px 10px rgba(40, 40, 40, .045); --shadow: 0 2px 5px rgba(40, 40, 40, .055), 0 10px 26px rgba(40, 40, 40, .065); --shadow-lg: 0 10px 24px rgba(40, 40, 40, .11), 0 24px 48px rgba(40, 40, 40, .09); --shadow-hover: 0 6px 14px rgba(40, 40, 40, .10), 0 16px 34px rgba(40, 40, 40, .13); } /* 「本文へ移動」(フォーカスしたときだけ出る)も同じ色に。 */ .faq-page .skip-link { border-color: #ef5a6f; color: #282828; } /* 影と輪はフォーカスしたときだけ(design.css の :not(:focus) の影なしを崩さない)。紺の影・輪が残っていた(Tab で実測)。 */ .faq-page .skip-link:focus { outline-color: #c9344e; box-shadow: 0 10px 24px rgba(40, 40, 40, .11), 0 24px 48px rgba(40, 40, 40, .09); } /* 地: 生成りの絹の帯と紙目をやめ、公式の淡い桃の無地にする(帯は body::before、紙目は html の背景)。 */ html:has(> body.faq-page) { background: #fff7f2; } body.faq-page::before { display: none; } /* 白いカードは枠も影も無し(公式のカードと同じ平らな白)。金の上線(v60-base.css の .v62-card)も外す。 */ .faq-page .faq-panel.v62-card { border: 0; box-shadow: none; } /* 入口: 案内役を丸い額に入れる(絵は胸から上の四角。下の切り口を丸で収める)。 */ .faq-page .faq-entry-art { border: 1px solid var(--jw-line); border-radius: 50%; background: #ffffff; object-fit: cover; } .faq-page .faq-intro-art { background: var(--jw-peach); } /* 見出しは公式の見出しの形(明朝・字間・下に朱の英字)。英字は読み上げない(content の / の後の代替文を空に)。 */ .faq-page .faq-panel .faq-question-title { color: var(--jw-ink); font-family: var(--font-serif); font-weight: 600; letter-spacing: .06em; line-height: 1.5; /* 折り返すときは語の途中で切らない(対応するブラウザだけ。無ければ今までどおりの折り返し)。 */ word-break: auto-phrase; text-wrap: balance; } .faq-page .faq-panel .faq-question-title::after { display: block; margin-top: 2px; color: var(--jw-coral-text); font-family: "Helvetica Neue", Arial, var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: .08em; line-height: 1.5; content: "Question Chat"; content: "Question Chat" / ""; } .faq-page .faq-lead { color: var(--jw-ink-2); letter-spacing: .04em; } .faq-page .faq-trust { color: var(--jw-ink-2); font-weight: 500; } /* 561px 以上: 案内役を見出しの上の真ん中に置き、見出し・案内文を中央寄せ(公式の見出しと同じ組み)。 560px 以下は v83 の 2 行組み(案内役と見出しの横並び+右に挿絵)のまま= 1 画面目に質問の行を残す。 */ @media (min-width: 561px) { .faq-page .faq-intro-copy { text-align: center; } .faq-page .faq-entry-heading { flex-direction: column; justify-content: center; gap: 12px; } .faq-page .faq-entry-heading > .faq-question-title { flex: 0 0 auto; width: 100%; font-size: 24px; } .faq-page .faq-entry-heading .faq-entry-art { width: 88px; height: 88px; } .faq-page .faq-lead, .faq-page .faq-trust { margin-inline: auto; } .faq-page .faq-lead { margin-top: 12px; line-height: 1.9; } /* 中央寄せの段で「料|金」のように語の途中で割れていた(窓 580 で実測)ので、見出しと同じく語で折る。 560px 以下は案内文の段が細く(320 で 121px)、語で折ると行が増えて質問の行が 1 画面目から押し出される(実測 +45px)ので入れない。 */ .faq-page .faq-lead, .faq-page .faq-trust { word-break: auto-phrase; text-wrap: pretty; } .faq-page .faq-representative { margin-top: 28px; padding-top: 0; border-top: 0; } .faq-page .faq-section-heading { margin-bottom: 16px; text-align: center; } .faq-page .faq-popular-topics { justify-content: center; } } /* 561〜899px(埋め込みの窓・タブレット): 素の組み(faq.css の max-width: 899px)は挿絵を案内文の下へ折り返すので、 窓(幅 580)では案内役を縦に積んだぶん「よくある質問」が 1 画面目から押し出された(実測 見出し 660 / 入力欄 670、 v117 は 535)。900px 以上と同じく挿絵を右に並べ、案内役の丸も一回り小さくして高さを詰める。 */ @media (min-width: 561px) and (max-width: 899px) { .faq-page .faq-intro { flex-wrap: nowrap; } .faq-page .faq-intro-copy { flex: 1 1 auto; } .faq-page .faq-intro-art { flex: 0 0 auto; width: clamp(150px, 28vw, 220px); margin-inline: 0; } .faq-page .faq-entry-heading .faq-entry-art { width: 72px; height: 72px; } } /* 560px 以下: 1 段目= 案内役+見出し(行いっぱい)、2 段目= 案内文+右に挿絵(96px)、3 段目= 裏づけの 1 行。 v83 の組み(挿絵を見出しの右)のままだと見出しの幅が 110px しかなく「肌と|医療脱毛の|ご質問」の 3 行に割れていた (実測 375)。挿絵を案内文の横へ移すと見出しは 1 行(375)に収まり、入口の高さは変わらない。 */ @media (max-width: 560px) { .faq-page .faq-intro-copy > .faq-entry-heading { grid-column: 1 / -1; grid-row: 1; } .faq-page .faq-intro-copy > .faq-lead { grid-column: 1; grid-row: 2; margin-top: 8px; } .faq-page .faq-intro-copy > .faq-trust { grid-column: 1 / -1; grid-row: 3; } .faq-page .faq-intro-art { grid-column: 2; grid-row: 2; align-self: start; margin-top: 12px; } .faq-page .faq-panel .faq-question-title { letter-spacing: .02em; } .faq-page .faq-entry-heading .faq-entry-art { width: 52px; height: 52px; } } .faq-page .faq-section-heading h2 { color: var(--jw-ink); font-family: var(--font-serif); font-size: 19px; font-weight: 600; letter-spacing: .06em; } /* テーマの札: 白地+砂色の枠、選んだ札は朱の面(公式の「女性メニュー」の札と同じ朱)。 白い文字を載せる面は色の検査が静的に読めるよう、値(--jw-coral-text / --jw-coral-deep と同じ)を直に書く。 */ .faq-page .faq-popular-topic { border: 1px solid var(--jw-taupe); background: #ffffff; color: var(--jw-ink); font-weight: 500; } .faq-page .faq-popular-topic.active { border-color: #c9344e; background: #c9344e; color: #ffffff; } @media (hover: hover) { .faq-page .faq-popular-topic:hover { border-color: var(--jw-coral-text); background: var(--jw-rose-soft); color: var(--jw-coral-deep); } .faq-page .faq-popular-topic.active:hover { background: #b02a45; color: #ffffff; } } .faq-page .faq-topics-toggle { border: 1px solid var(--jw-taupe); background: #ffffff; color: var(--jw-ink); } /* 質問の行: 公式の「医療脱毛のよくある質問」と同じ灰の行・太字の Q・右の山形(押すと聞ける)。 */ .faq-page .faq-question-chip { border: 0; border-radius: 4px; background: var(--jw-row); color: var(--jw-ink); } @media (hover: hover) { .faq-page .faq-question-chip:hover { border: 0; background: var(--jw-row-hover); } } .faq-page .faq-representative-chip { padding-right: 42px; font-size: 15px; } @media (min-width: 561px) { .faq-page .faq-representative-chip { min-height: 56px; } } .faq-page .faq-representative-chip::before { color: var(--jw-ink); font-family: "Helvetica Neue", Arial, var(--font-sans); font-size: 17px; } .faq-page .faq-representative-chip::after { position: absolute; top: 50%; right: 19px; width: 7px; height: 7px; margin-top: -4px; border-right: 2px solid var(--jw-ink-2); border-bottom: 2px solid var(--jw-ink-2); transform: rotate(-45deg); content: ""; } .faq-page .faq-representative-skeleton .faq-representative-chip::after { content: none; } /* 会話: 欄は淡い桃の面、答えは白い吹き出し、自分の質問は炭の吹き出し(--navy-700)。 */ .faq-page .chat-log { border: 0; background: var(--jw-peach); } .faq-page .chat-log .bubble.bot { border-color: var(--jw-line); } .faq-page .chat-log .bubble.bot .bb-label { color: var(--jw-coral-text); } .faq-page .chat-log .bubble.bot .bb-label::before { border-color: var(--jw-line); background-color: #ffffff; background-position: 50% 50%; background-size: cover; } .faq-page .chat-log .bubble.bot .bb-label .bb-label-ai { border-color: var(--jw-coral-text); color: var(--jw-coral-deep); } .faq-page .faq-typing-dot { background: var(--jw-coral); } /* 案内役の顔(答えの札・入力中)。faq.css の .faq-page の変数を上書きする。 変数の中の url() は「使う側」(/faq/faq.css)から解決されるので、相対(../images/…)だと /images/jewel-v1/… になり 404 だった(実測 2026-09-27)。根からの絶対パスで書く (埋め込みの窓の中も同じ院のサーバーの文書なので、そのまま届く)。 */ .faq-page { --faq-mascot-greet: url("/assets/images/jewel-v1/guide-greet.webp"); --faq-mascot-think: url("/assets/images/jewel-v1/guide-think.webp"); } /* v125(2026-10-05): 緊急の注意の欄(「クリニックへ直接相談」の電話の釦)がある答えが、375px で吹き出しの枠から約 28px はみ出していた。答えの欄(.faq-answer-content は grid)の列が、電話の釦の院名(faq.css の .faq-call-link > span は折り返し禁止)の 幅まで広がるため。列を吹き出しの幅に収め、院名は折り返してよいことにする(電話番号 .faq-care-phone は折らない)。 ただし院名を語の途中で割らない(「ジュエルクリニック恵比／寿」。v109 VIS-11 の .faq-care-name と同じ理由で keep-all)。 院名(14px 太字で 169px)は 375px の吹き出しの釦の中(141px)に入らないので、スマホでは電話の釦のある吹き出しを 段のある吹き出し(faq.css の .has-visual)と同じ全幅・左右 12px にし、注意の欄・釦の左右の余白を詰め、院名だけ 13px にする (電話番号は 14px のまま)。360px でも 1 行に入る。入らない幅(320px)は語の切れ目「ジュエルクリニック／恵比寿」で折れる。 */ .faq-page .faq-answer-content, .faq-page .faq-answer-more-body, .faq-page .faq-answer-tools { grid-template-columns: minmax(0, 1fr); } .faq-page .faq-call-link > span:not(.faq-care-phone) { min-width: 0; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; } @media (max-width: 560px) { .faq-page .chat-log .bubble.bot:has(.faq-call-links) { width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; } .faq-page .faq-guidance:has(.faq-call-links) { padding-left: 12px; padding-right: 12px; } .faq-page .faq-call-link { padding-left: 10px; padding-right: 10px; } .faq-page .faq-call-link > span:not(.faq-care-phone) { font-size: 13px; } }