/* ======================================== * ソニリアと世界観（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-worldview-media { flex: 0 0 calc(40% - 0.75em) !important; max-width: calc(40% - 0.75em); } .page-id-11 .creation-two-column > .character-worldview-text { flex: 0 0 calc(60% - 0.75em) !important; max-width: calc(60% - 0.75em); background: var(--color-bg-light); border-radius: 8px; } /* 世界観イメージプレースホルダー（5/4 + 二重マット額縁 / 背景透過） — トップ section-worldview.css 準拠 */ .page-id-11 .character-placeholder-worldview { position: relative; isolation: isolate; background: transparent; 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-worldview::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-worldview::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-worldview-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; } /* 左カラム: 見出し + 画像の縦並び */ .page-id-11 .character-worldview-media h3 { margin-top: 0; margin-bottom: 0.75em; color: var(--color-fuji-deep); /* #5F568E */ background: transparent; border-bottom: none; padding: 0; font-size: 1.2em; } /* ======================================== * ② 世界観 ─ コンセプトカード * ======================================== */ /* コンセプトカード（概念ごとのボックス） */ .page-id-11 .character-concept-card { background: #ffffff; border-left: 4px solid var(--color-border); border-radius: 8px; padding: 1em 1.25em; margin-bottom: 1.5em; } .page-id-11 .character-concept-card:last-child { margin-bottom: 0; } /* コンセプトカード内の見出し（グローバルh3帯スタイルを打ち消し） */ .page-id-11 .character-concept-card h3 { margin-top: 0; margin-bottom: 0.75em; color: var(--color-fuji-deep); /* #5F568E */ background: transparent; border-bottom: none; /* H4相当: 左の空色バー(7px)に文字が接しないよう左余白を確保。角丸は6px */ padding: 0 0 0 8px; border-radius: 6px; } /* 2026-08-30: 500→継承400へ単一点一致（基準: .character-soniria-hero p） */ /* CJKテキストの適切な改行制御 */ .page-id-11 .character-concept-card p { line-break: strict; overflow-wrap: break-word; } /* ======================================== * ② 世界観 ─ コンセプトカード: ラベル(eyebrow)・リードカード * ======================================== */ /* カードの役割を示す小ラベル（eyebrow） */ .page-id-11 .character-concept-eyebrow { margin: 0 0 0.35em; /* font-balance 1788579499092 R9: 246px容器に2〜3文字ラベル極小の底上げ・単行のため行増なし */ font-size: 0.83em; font-weight: 700; letter-spacing: 0.06em; color: var(--color-fuji-mid); } /* リードカード（① 世界観の名前）: 「時の行き交い」を際立たせる */ .page-id-11 .character-concept-lead h3 { font-size: 1.45em; margin-bottom: 0.45em; } /* モバイルではリード見出しをやや縮小 */ /* ======================================== * ② 世界観 ─ 左右等高化（固定ページID:11専用） * 追加日: 2026-08-22 * 目的: デスクトップ(769px以上)で左右カラムを等高化。将来のコンテンツ量変動に備え明示化。 * ======================================== */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V029) - SP isolation */ /* 中間幅(769-1024px) 右残しクロップ: 左を多めに削って右寄りを残す。PC/SP不変 */ /* moved to css/responsive-768.css:APPEND [768] (plan 1790697927646 V030) - SP isolation */ /* backdrop-filter 非対応フォールバック: 半透明のみ残す */ @supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) { .page-id-11 .character-placeholder-worldview::before { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ======================================== * 2026-09-01 fix: worldview 左右を空 tint パネルとして完全一致 * ======================================== */ .page-id-11 .creation-two-column > .character-worldview-media, .page-id-11 .creation-two-column > .character-worldview-text { background: var(--color-bg-light, #F3FAFD) !important; background-color: var(--color-bg-light, #F3FAFD) !important; opacity: 1 !important; border: none !important; border-radius: 15px !important; padding: 10px !important; } .page-id-11 .creation-two-column > .character-worldview-media::before, .page-id-11 .creation-two-column > .character-worldview-text::before { content: none !important; display: none !important; height: 0 !important; margin: 0 !important; background: none !important; } @media print { /* 印刷/PDF: mask/backdrop-filter が印刷パイプラインで無効化され ::before が全面ベール化する不具合を回避。 */ .page-id-11 .creation-two-column > .character-worldview-media, .page-id-11 .creation-two-column > .character-worldview-text { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-placeholder-worldview { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .page-id-11 .character-placeholder-worldview::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-worldview::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }