@charset "utf-8"; /* ========================================================================== llmo-blocks.css — 要約ボックス／比較表（2026-08-25 追加・LLMO/GEO） AI検索（Perplexity・ChatGPT・Claude・Gemini 等）が事実を抽出しやすいよう、 トップページに「結論の要約」と「治療法の比較表」をセマンティックに置くための 専用レイヤー。既存 CSS は一切書き換えず、 の 1行を外せば スタイルだけ元へ戻る（HTML ブロックはプレーン表示で残る）。 読み込み順：… → top-natural.css → theme-sumi.css → top-light.css → 本ファイル 配色は theme-sumi.css の :root 変数（--kinari / --sand / --wood / --bark 等）を使う。 ========================================================================== */ /* ---- 共通の器 ---- */ .llmoBlock{ background:var(--kinari); padding:70px 0 10px; } /* 既存 .comBlock div.comContent（padding 70/20・max-width 1000・中央寄せ）と 左右の基準線を揃える。enTitle を持たないので、狭い幅では .noEnTitle と同じ 20px にする */ .llmoBlock .llmoInner{ max-width:1000px; margin-left:auto; margin-right:auto; /* 既存 .comBlock div.comContent と完全に同じ値にする。 20px にしていたため、狭い幅で日経カード（左70px）と左端が 50px ずれていた。70px は縦組みの英字ラベル用の余白で、 このブロックにラベルは無いが、隣と枠を揃えることを優先する */ padding-left:70px; padding-right:20px; box-sizing:border-box; } @media screen and (min-width:920px){ .llmoBlock .llmoInner{ padding-right:70px; } } /* ---- 1. 結論要約ボックス ---- */ .llmoSummary{ border:1px solid var(--sand); border-top:3px solid var(--wood); background:var(--paper); padding:34px 34px 28px; box-sizing:border-box; } .llmoSummary > h2{ margin:0 0 1.6em; font-family:"Shippori Mincho", serif; font-size:1.9rem; letter-spacing:.16em; line-height:1.65em; color:var(--bark); } .llmoSummary > h2 span{ display:block; margin-bottom:.9em; font-size:1.15rem; letter-spacing:.38em; color:var(--wood-dark); } .llmoSummary dl{ margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 28px; } .llmoSummary dl div{ border-top:1px solid rgba(194,176,135,.6); padding-top:20px; } .llmoSummary dt{ font-family:"Shippori Mincho", serif; font-size:1.62rem; letter-spacing:.04em; line-height:1.7em; color:var(--wood-dark); margin-bottom:.85em; } .llmoSummary dd{ margin:0; font-size:1.45rem; line-height:1.9em; letter-spacing:.01em; color:var(--ink); } /* ---- 2. 比較表 ---- */ .llmoCompare{ margin-top:70px; } .llmoCompare > h2{ margin:0 0 .6em; font-family:"Shippori Mincho", serif; font-size:1.9rem; letter-spacing:.16em; color:var(--bark); } .llmoCompare > h2 span{ display:block; margin-bottom:.9em; font-size:1.15rem; letter-spacing:.38em; color:var(--wood-dark); } .llmoCompare .llmoLead{ margin:0 0 2.2em; font-size:1.5rem; line-height:2em; color:var(--ink); } /* 横に広い表はスマホでははみ出すため、枠内でだけ横スクロールさせる */ .llmoTableWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .llmoCompare table{ width:100%; min-width:820px; table-layout:fixed; border-collapse:collapse; background:var(--paper); font-size:1.35rem; line-height:1.85em; color:var(--ink); } .llmoCompare caption{ caption-side:top; text-align:left; padding-bottom:.9em; font-size:1.25rem; letter-spacing:.08em; color:var(--wood-dark); } .llmoCompare th, .llmoCompare td{ border:1px solid rgba(194,176,135,.55); padding:13px 14px; vertical-align:top; text-align:left; } .llmoCompare thead th:first-child{ width:16%; } .llmoCompare thead th{ background:var(--sumi-mid); color:var(--sand); font-family:"Shippori Mincho", serif; font-weight:500; letter-spacing:.08em; } /* 当院の列だけ地を起こして視線を止める（比較の優劣ではなく現在地の明示） */ .llmoCompare thead th.llmoOurs{ background:var(--bark); color:#e8d9b4; } .llmoCompare tbody th{ width:16%; background:rgba(244,241,233,.9); font-weight:500; letter-spacing:.06em; color:var(--bark); } .llmoCompare td.llmoOurs{ background:rgba(194,176,135,.14); } /* ---- 3. 自由診療の注記（医療広告ガイドラインの限定解除要件） ---- */ .llmoNote{ margin-top:34px; border-left:2px solid var(--wood); padding:4px 0 4px 20px; } .llmoNote h3{ margin:0 0 .8em; font-size:1.45rem; letter-spacing:.1em; color:var(--wood-dark); font-family:"Shippori Mincho", serif; font-weight:500; } .llmoNote ul{ margin:0; padding:0; list-style:none; } .llmoNote li{ font-size:1.35rem; line-height:1.95em; color:var(--ink); padding-left:1.1em; text-indent:-1.1em; } .llmoNote li::before{ content:"・"; color:var(--wood); } /* ---- タブレット ---- */ @media screen and (max-width:1024px){ .llmoBlock{ padding:56px 0 10px; } .llmoSummary{ padding:32px 28px 26px; } .llmoSummary dl{ gap:0 24px; } } /* ---- スマートフォン ---- */ @media screen and (max-width:768px){ .llmoBlock{ padding:46px 0 6px; } .llmoSummary{ padding:26px 22px 20px; } .llmoSummary > h2{ font-size:1.65rem; margin-bottom:1.3em; } .llmoSummary > h2 span, .llmoCompare > h2 span{ font-size:1.05rem; letter-spacing:.3em; } .llmoSummary dt{ font-size:1.55rem; } .llmoSummary dd, .llmoCompare .llmoLead{ font-size:1.4rem; line-height:1.9em; } .llmoNote h3{ font-size:1.35rem; } .llmoNote li{ font-size:1.25rem; } .llmoSummary dl{ grid-template-columns:1fr; gap:0; } .llmoSummary dl div{ padding:18px 0; } .llmoSummary dl div:last-child{ padding-bottom:0; } .llmoCompare{ margin-top:50px; } .llmoCompare > h2{ font-size:1.65rem; } /* ---- 比較表：横スクロールをやめ、1項目=1カードに積む ---- 4列 820px を 375px に収めるのは無理があり、横スクロールは 「表の右側に何かある」ことに気づけない。項目ごとに区切って縦に並べる。 列名は HTML の data-label から ::before で出す。 */ .llmoTableWrap{ overflow-x:visible; } .llmoCompare table{ min-width:0; width:100%; display:block; font-size:1.35rem; } .llmoCompare thead{ display:none; } /* 列見出しは各セルの data-label が担う */ .llmoCompare tbody, .llmoCompare tbody tr, .llmoCompare tbody th, .llmoCompare tbody td{ display:block; width:auto; } .llmoCompare tbody tr{ border:1px solid rgba(194,176,135,.55); margin-bottom:18px; } .llmoCompare tbody tr:last-child{ margin-bottom:0; } .llmoCompare tbody th{ background:var(--sumi-mid); color:var(--sand); font-family:"Shippori Mincho", serif; font-weight:500; font-size:1.45rem; letter-spacing:.08em; border:0; padding:12px 14px; } .llmoCompare tbody td{ border:0; border-top:1px solid rgba(194,176,135,.4); padding:12px 14px; } .llmoCompare tbody td::before{ content:attr(data-label); display:block; margin-bottom:.45em; font-size:1.15rem; letter-spacing:.06em; line-height:1.5; color:var(--wood-dark); } /* 当院の列は地を起こして、どれが自院かひと目で分かるようにする */ .llmoCompare tbody td.llmoOurs{ background:rgba(194,176,135,.14); } .llmoCompare tbody td.llmoOurs::before{ color:var(--bark); font-weight:600; } /* table を display:block にすると caption が内容幅に潰れて 「異な／ります／す）」のように数文字ずつ折り返す。明示的に横幅を与える */ .llmoCompare caption{ display:block; width:100%; box-sizing:border-box; font-size:1.2rem; line-height:1.7; text-align:left; } } /* ---- 日本語の折り返し品質（2026-08-26）---- 見出しは文節で折り返し、最終行に1文字だけ残るのを防ぐ。 本文は禁則を厳密に効かせ、入りきらない語だけを折る。 未対応ブラウザでは既定の折り返しに戻るだけで崩れない。 */ .llmoSummary > h2, .llmoCompare > h2, .llmoSummary dt, .llmoNote h3{ word-break:auto-phrase; text-wrap:pretty; } /* 本文にあたる要素は行を埋める。文節折り返しは見出し側だけに残す （理由は theme-hakuji.css の同趣旨のコメントを参照） */ .llmoSummary dd, .llmoCompare .llmoLead, .llmoCompare td, .llmoCompare th, .llmoNote li{ line-break:strict; overflow-wrap:break-word; word-break:normal; }