/* ======================================== * ソニリアと世界観（ID:11）: ① ソニリアについて * 読み込み順: 子テーマstyle.cssより後（functions.php で登録） * 旧インラインstyle（flex: 0 0 40% / 60%）をクラス化して移行 * ======================================== */ /* コンテナの gap: 1.5em（追加CSS ID:41 の .creation-two-column 定義と同値）を考慮し、 各カラム幅から gap の半分（0.75em）を差し引くことで、40% + 60% + gap が 正確にコンテナ幅に収まる。em 単位を使用することでフォントサイズ変更時も整合性が保たれる。 */ .page-id-11 .creation-two-column > .character-soniria-media { flex: 0 0 calc(40% - 0.75em) !important; max-width: calc(40% - 0.75em); } .page-id-11 .creation-two-column > .character-soniria-text { flex: 0 0 calc(60% - 0.75em) !important; max-width: calc(60% - 0.75em); } .page-id-11 .character-soniria-media { display: block; min-width: 0; overflow: hidden; } /* ソニリア画像プレースホルダー（5/4 + 二重マット額縁 + ヒーロー背景） — トップ section-soniria.css 準拠 */ .page-id-11 .character-placeholder-soniria { position: relative; isolation: isolate; background: linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)), linear-gradient(135deg, #8ED1E0 0%, #BBB7DA 50%, #F3FAFD 100%); border: 1px solid var(--color-border, #DCE6EE); border-radius: 8px; display: block; width: 100%; max-width: 100%; min-width: 0; flex: none; box-sizing: border-box; margin-inline: 0; aspect-ratio: 5 / 4; overflow: hidden; box-shadow: 0 1px 3px rgba(31,32,65,0.06), 0 6px 16px rgba(31,32,65,0.06), inset 0 0 0 1px rgba(255,255,255,0.90); } .page-id-11 .character-placeholder-soniria::before { content: ""; position: absolute; inset: 0; padding: 7px; background: rgba(255,255,255,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 8px; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; pointer-events: none; z-index: 1; } .page-id-11 .character-placeholder-soniria::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--color-fuji, #BBB7DA); border-radius: 6px; pointer-events: none; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65); } .page-id-11 .character-soniria-img { display: block; width: 100%; height: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center center; border: none; border-radius: 0; position: relative; z-index: 0; background: transparent; } /* ======================================== * ① ソニリアについて ─ ヒーロー（キャッチコピー+説明） * ======================================== */ /* キャッチコピー: グラデーションラッパーの上に配置 */ /* plan 1788588779809: ｜除去・境界改行のみ（PC/タブレット1行・モバイル2行・中央揃え） */ .page-id-11 .character-soniria-hero-title { background: #ffffff; border-bottom: none; padding: 0.5em 0.8em; border-radius: 8px; margin: 0 0 0.5em; font-size: 1.2em; color: var(--color-fuji-deep); text-align: center; white-space: normal; overflow-wrap: break-word; /* text-wrap:balance は境界制御と競合するためhero-titleでは無効化 */ text-wrap: none; } /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V016) - SP isolation */ /* 前半/後半フレーズ: 内部では割らない（wrap機会はsep前後のみ） */ .page-id-11 .character-soniria-hero-phrase { display: inline-block; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; } /* 非文字装飾セパレータ（PC/タブレット: 縦線・読み上げ/改行/禁則に影響なし） */ .page-id-11 .character-soniria-hero-sep { display: inline-block; width: 1px; height: 1em; vertical-align: middle; margin: 0 0.6em; background: linear-gradient(180deg, var(--color-fuji-mid, #7369A0) 0%, var(--color-sky, #8ED1E0) 100%); border-radius: 1px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* 説明文エリア（グラデーション背景 + 内側白カード — 2026-09-02 fix: 二重構造で可読性確保） */ .page-id-11 .character-soniria-hero { background: linear-gradient(135deg, #e8f4fa 0%, #ece7f5 100%); border: 1px solid var(--color-border, #DCE6EE); box-shadow: var(--card-shadow, 0 1px 3px rgba(31,32,65,0.06)); border-radius: var(--card-radius, 8px); padding: 10px; margin-bottom: 1em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-soniria-hero-card { background: rgba(255,255,255,0.85); border: 1px solid var(--color-border, #DCE6EE); border-radius: 8px; padding: 1em 1.5em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ヒーロー内 h3: グローバルの「帯」スタイルを打ち消し */ .page-id-11 .character-soniria-hero h3 { background: transparent; border-bottom: none; padding: 0; margin: 0 0 0.75em; font-size: 1.2em; color: var(--color-fuji-deep); text-align: left; /* 左揃えに統一（説明文と行頭を揃える） */ text-wrap: balance; /* キャッチコピー折り返し時の行長均等化 */ } .page-id-11 .character-soniria-hero p, .page-id-11 .character-soniria-hero-card p { margin-bottom: 0.5em; color: var(--color-text); text-align: left; /* 説明文は左揃え（中央揃えのガタつき防止） */ } .page-id-11 .character-soniria-hero p:last-child, .page-id-11 .character-soniria-hero-card p:last-child { margin-bottom: 0; } /* ======================================== * ① ソニリアについて ─ 好き・得意（2カード横並び） * ======================================== */ /* design-policy §4 カード共通仕様 */ .page-id-11 .character-soniria-likes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1em; } .page-id-11 .character-likes-card { background: #ffffff; border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; } /* カード内 h3: 帯スタイルを打ち消し */ .page-id-11 .character-likes-card h3 { background: transparent; border-bottom: none; /* H4相当: 左の空色バー(7px)に文字が接しないよう左余白を確保。角丸は6px */ padding: 0 0 0 8px; border-radius: 6px; margin: 0 0 .75rem; font-size: 1.05em; color: var(--color-fuji-deep); } .page-id-11 .character-likes-card ul { list-style: none; margin: 0; padding: 0; } .page-id-11 .character-likes-card li { display: flex; align-items: baseline; /* ✓ とテキスト1行目のベースラインを揃える */ gap: 0.5em; padding-left: 0; /* absolute 配置をやめる */ margin-bottom: 0.5em; color: var(--color-text); } .page-id-11 .character-likes-card li:last-child { margin-bottom: 0; } .page-id-11 .character-likes-card li::before { content: "✓"; position: static; /* absolute を解除し flex アイテム化 */ flex: 0 0 auto; color: var(--color-fuji-mid); font-weight: bold; } /* モバイル: 縦積み（40/60固定とmin-widthを解除）+ 好き・得意 1列化 */ /* ======================================== * ① ソニリアについて ─ キャッチコピー1行化 * 追加日: 2026-08-20 / 温存: 2026-08-30 font-unify plan 1788064902319 — white-space:nowrap(221) / break-word(233) は意図ありとして温存、anywhere等への無差別置換は行わない * 目的: デスクトップで1行に収める。768px以下では折り返し許可。 * ======================================== */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V017) - SP isolation */ /* plan 1788714920275: ソニリア hero-title 768px以上1行保証 * 実測 (2026-09-07 Playwright Chromium fonts.ready後): * 835:+2.9NG / 850:+0.6NG / 880-980余裕<20 / 1025:+46.5NG / 1050:+31.5NG / 1075:+16.5NG / 1100:+1.5NG / 1125:-13.5(余裕不足) * 手段はフォント縮小・白余白詰めを優先。文言・中央・縦線sep・改行仕様は維持。下限0.78em死守。h3全体nowrap化は禁止。 * カスケード注意: 835-1024のfont/sepはmobile-nav.css 769-1024 !important則が勝つため本ファイルではtint水平のみ上書き。 * 769-834はresponsive-834の高詳細度 !important則が勝つため本帯は835-1024に限定し834に波及させない。 * 1025-1150は本ファイルが勝者(mobile-nav max 1024)のためfont/padding/sep/tintを集約。1151+は基底1.1emを維持。 */ /* 835-1024: tint水平のみ 10px→8px (左右対称・上下10px維持。have約+4px。font/sepはmobile-nav側で 0.78emフロア＋sep 0.35em化) body付与で(0,3,1)＋!importantに格上げし後方基底10px則(0,3,0)に勝つ。834帯(垂直6px)・768・1151+・他頁不変 */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V018) - SP isolation */ /* 1025-1150: 横並び60%帯のcliff解消 (1025で+46.5NG→1.0em固定＋白余白詰めで約40px余裕。1151+は1.1em維持) plan 1788744437104: 見た目維持優先で微圧縮のみ (padding 0.4em 0.4em→0.4em 0.3emで約10-15px確保)。0.95em以下への大幅縮小なし。不足分は②is-wrappedで吸収。 */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V019) - SP isolation */ /* plan 1788947542540 §A: 835-1024最悪条件（Zen Maru実読込＋バー有り）でneed+15〜20px .character-soniria-media, .page-id-11 .creation-two-column > .character-soniria-text { background: var(--color-bg-fuji, #F6F3FB) !important; background-color: var(--color-bg-fuji, #F6F3FB) !important; opacity: 1 !important; border: none !important; border-radius: 15px !important; padding: 10px !important; } /* 汎用 4pxグラデ帯を完全除去 — tint パネルは帯を持たない */ .page-id-11 .creation-two-column > .character-soniria-media::before, .page-id-11 .creation-two-column > .character-soniria-text::before { content: none !important; display: none !important; height: 0 !important; margin: 0 !important; background: none !important; } @media print { /* plan 1788588779809: hero-title sepの印刷可視化（gradient＋border fallback） */ /* 印刷/PDF: mask/backdrop-filter が印刷パイプラインで無効化され ::before が全面ベール化する不具合を回避。 */ .page-id-11 .creation-two-column > .character-soniria-media, .page-id-11 .creation-two-column > .character-soniria-text { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-placeholder-soniria { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-placeholder-soniria::before { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: transparent !important; mask: none !important; -webkit-mask: none !important; mask-composite: unset !important; -webkit-mask-composite: unset !important; padding: 0 !important; border: 7px solid rgba(255,255,255,0.5) !important; border-radius: 8px !important; } .page-id-11 .character-placeholder-soniria::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-soniria-hero-title { text-align: center; } .page-id-11 .character-soniria-hero-sep { -webkit-print-color-adjust: exact; print-color-adjust: exact; /* gradientが無効な印刷パイプライン向けfallback（縦線時はleft borderで可視化） */ border-left: 1px solid var(--color-fuji-mid, #7369A0); } .page-id-11 .character-soniria-hero-sep::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* plan 1788744437104 ②: 折れたら sep非表示 (481px以上のみ・<=480水平装飾・print不変) 1行時: sep表示 (現状通り縦線)。2行時 (is-wrapped時): sepを display:none (幅・マージンも0)。 CSSのみでは折返し検出不可のため js/soniria-hero-wrap.js が h3.is-wrapped をトグル。非JS時は現状表示で無害。 詳細度 (0,4,0)+!important で既存sep則 (mobile-nav (0,2,0)+!important / 768 (0,2,0)) に勝つ。 */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V027) - SP isolation */ /* plan 1788772537666 §1.3 第二の矢 (必須・信頼回復フォールバック・481px以上限定・480以下/print不変): is-wrapped時でも前半・後半が密着しないよう first側に margin-right:0.25em (半角相当) の保険ギャップ。 真の2行時は行末余白として無害、誤検出の1行時は半角スペースとして読める。sep自体は display:none 維持。 保険は first側に持たせ2行中央崩れを起こさない。値は 0.25em固定 (フォント依存回避)。 詳細度 (0,4,0)+!important で既存 is-wrapped sep則と同等以上。 */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V028) - SP isolation */