/* ========================================================= cho-spfix.css — SP(<=768px) 表示最適化 PC固定980px版のWix書き出しを、スマホで「全幅・縦積み」に整える。 方針: - 横並びカラム(.Ak0vpt)を縦積み - Grid mesh を縦積みして右側に隠れる本文/住所等を画面内へ - Pro Gallery / カスタムGrid / Wix Repeater を1列に - TOPのメインビジュアル(#comp-lxo2xur51)は原状(縦書き見出し overlay)を維持するため 全変換ルールから :not(#comp-lxo2xur51 *) で除外する。 位置補正は本CSSに一本化（cho-mobilefit.js はフォント縮小のみ）。 ========================================================= */ @media (max-width: 768px) { html, body { overflow-x: hidden !important; } /* 縦スクロールバーが幅を確保して 100vw が実表示幅を超える微見切れを防ぐ */ html { scrollbar-width: none !important; } html::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* 横並びカラム → 縦積み・全幅（MVは除外） */ #SITE_PAGES .Ak0vpt:not(#comp-lxo2xur51 *), #SITE_FOOTER .Ak0vpt { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #SITE_PAGES [id^="comp-"][class*="FDI5TK"]:not(#comp-lxo2xur51 *), #SITE_FOOTER [id^="comp-"][class*="FDI5TK"] { width: 100% !important; max-width: 100vw !important; left: 0 !important; height: auto !important; min-height: 0 !important; } #SITE_PAGES [class*="wixui-column-strip"]:not(#comp-lxo2xur51 *), #SITE_FOOTER [class*="wixui-column-strip"] { width: 100% !important; } /* Grid mesh → 縦積み（MVは除外） */ #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *), #SITE_FOOTER [data-mesh-id*="gridContainer"] { display: block !important; width: 100% !important; height: auto !important; } #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) > *, #SITE_FOOTER [data-mesh-id*="gridContainer"] > * { position: relative !important; left: 0 !important; right: auto !important; top: auto !important; width: 100% !important; max-width: 100vw !important; margin: 0 0 8px !important; grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; } #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) [class*="wixui-rich-text"], #SITE_FOOTER [data-mesh-id*="gridContainer"] [class*="wixui-rich-text"] { max-width: 100vw !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; line-break: strict !important; text-wrap: pretty; } #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) [id^="comp-"], #SITE_FOOTER [data-mesh-id*="gridContainer"] [id^="comp-"] { left: 0 !important; } #SITE_FOOTER [data-mesh-id*="gridContainer"] > * { padding: 0 16px !important; } /* Pro Gallery → 1列縦積み */ [class*="pro-gallery"], .pro-gallery, .gallery-container { width: 100% !important; height: auto !important; } [id^="pgi"], .gallery-item-container, .gallery-item-wrapper, .gallery-item-content { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: 100vw !important; height: auto !important; margin: 0 auto 8px !important; } img.gallery-item-visible, .gallery-item { position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important; max-width: 100vw !important; height: auto !important; } /* カスタムCSS Gridギャラリーを1列に（MVは除外） */ #SITE_PAGES [class*="custom-css"]:not(#comp-lxo2xur51 *) { grid-template-columns: 1fr !important; width: 100% !important; } /* Wix Repeater（横並びカード）→ 縦積み */ #SITE_PAGES [class*="wixui-repeater"]:not(#comp-lxo2xur51 *) { width: 100% !important; } #SITE_PAGES [class*="wixui-repeater"]:not(#comp-lxo2xur51 *) > div { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } #SITE_PAGES [class*="wixui-repeater"]:not(#comp-lxo2xur51 *) > div > * { width: 100% !important; max-width: 100vw !important; left: 0 !important; margin: 0 0 10px !important; } /* 年中行事プレビュー（自前コンポーネント）→ 1列・全幅・左寄せ */ #comp-ktdwlw1o { display: block !important; width: 100% !important; max-width: 100vw !important; } #cho-nenchu-preview { width: 100% !important; max-width: 100vw !important; padding: 6px 12px 4px !important; } .cho-nen-grid { grid-template-columns: 1fr !important; width: 100% !important; max-width: 100vw !important; } .cho-nen-card { width: 100% !important; max-width: 100vw !important; } /* TOP MV: 縦書き見出しをSPで収まりよく(PCサイズのままで左切れ/過大化していたのを調整) */ /* TOP MV: ヘッダー+MVで画面ぴったり(100dvh)にし、MV下の空白をなくす */ #comp-lxo2xur51 { height: calc(100vh - 90px) !important; height: calc(100dvh - 90px) !important; min-height: calc(100dvh - 90px) !important; } /* TOP MV: 縦書きタイトルは端末でグリッド合成が崩れるため、JS(cho-mobilefit)が 元の3要素を隠し自前オーバーレイ #cho-mv-ov に置換する。そのスタイル: */ #cho-mv-ov { position: absolute !important; left: 0; top: 0; right: 0; bottom: 0; display: flex !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; padding: 14px 0 14px 8px; box-sizing: border-box; z-index: 6; pointer-events: none; } #cho-mv-ov span { writing-mode: vertical-rl; white-space: nowrap; color: #111; line-height: 1.05; font-family: "wfont_bec6ea_dfb27138e1a64a329f5cf24f7a5eb66f", "wf_dfb27138e1a64a329f5cf24f7", "orig_aoyagireisyosimo_2", "Yu Mincho", serif; } #cho-mv-ov .cho-mv-m { font-size: 76px; font-weight: 700; } #cho-mv-ov .cho-mv-s { font-size: 23px; align-self: center; } #cho-mv-ov .cho-mv-u { font-size: 17px; align-self: center; } /* 本文テキストはSPで中央寄せ(MV除外) */ #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) [class*="wixui-rich-text"] { text-align: center !important; } /* もっと見る等のボタンを中央に */ #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) [id^="comp-"] { text-align: center !important; } /* 内容ラッパー(inlineContent)の固定幅を全幅化(狭いコンテナの左寄り解消) */ #SITE_PAGES [data-mesh-id$="inlineContent"]:not(#comp-lxo2xur51 *) { width: 100% !important; max-width: 100vw !important; } /* もっと見る等のボタンを中央寄せ(入れ子の固定幅コンテナを全幅化) */ #SITE_PAGES [id^="comp-"]:has(> a[class*="StylableButton"]):not(#comp-lxo2xur51 *), #SITE_PAGES [id^="comp-"]:has(> div > a[class*="StylableButton"]):not(#comp-lxo2xur51 *) { width: 100% !important; max-width: 100vw !important; left: 0 !important; text-align: center !important; } #SITE_PAGES a[class*="StylableButton"]:not(#comp-lxo2xur51 *) { display: inline-block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; } /* セクションの過大な高さ(空きすぎ)を圧縮 */ #SITE_PAGES section[class*="wixui-section"] { min-height: 0 !important; } /* 焼き込みPC高さ(min-height)による空白の根治: #SITE_PAGES内の全div/sectionのmin-heightを解除し 内容まで詰める。画像はheight指定なので潰れない。地図セクションはcho-mobilefit.jsがneedHで別途確保。 ※TOP MV(#comp-lxo2xur51)は除外。 */ #SITE_PAGES div:not(#comp-lxo2xur51):not(#comp-lxo2xur51 *), #SITE_PAGES section:not(#comp-lxo2xur51):not(#comp-lxo2xur51 *) { min-height: 0 !important; } /* 各ページのタイトル・ヒーロー帯が高すぎて下に空白ができるのを圧縮 (内容量に応じて個別に高さ指定。MV(index)は除外) */ #comp-lxo2xur1 { height: 160px !important; overflow: hidden !important; } /* about */ #comp-lxo2xur75 { height: 112px !important; overflow: hidden !important; } /* access タイトル */ #comp-lxo2xur76 { height: 150px !important; overflow: hidden !important; } /* access 360ビュー余白 */ #comp-lxo2xurc1, /* funeral 葬儀・法事 */ #comp-lxo2xur84 { /* memorial 各種供養 */ height: 132px !important; overflow: hidden !important; } #comp-lxo2xur32, /* stamps 御朱印 */ #comp-lxo2xur66 { /* charnel 納骨堂 */ height: 108px !important; overflow: hidden !important; } /* ===== フッター ===== */ /* 上部の大きな寺紋画像を非表示(下の「浄土宗 長昌寺」テキストと重複) */ #SITE_FOOTER #comp-ktf5d1ez1 { display: none !important; } /* テキストは折り返し+中央寄せ(右見切れ防止) */ #SITE_FOOTER [class*="wixui-rich-text"] { white-space: normal !important; text-align: center !important; word-break: normal !important; overflow-wrap: break-word !important; line-break: strict !important; text-wrap: pretty; } /* 情報テキストを縮小して長い行を画面内に収める */ #SITE_FOOTER [class*="font_7"], #SITE_FOOTER [class*="font_7"] span { font-size: 14px !important; line-height: 1.85 !important; } /* 列の左右余白を詰めて中央へ寄せる */ #SITE_FOOTER [data-mesh-id*="gridContainer"] > * { padding-left: 6px !important; padding-right: 6px !important; } /* ===== 長文の見切れ防止: 折り返しを強制 ===== */ #SITE_PAGES p, #SITE_PAGES h1, #SITE_PAGES h2, #SITE_PAGES h3, #SITE_PAGES h4, #SITE_PAGES li, #SITE_PAGES [class*="wixui-rich-text"] { overflow-wrap: break-word !important; word-break: normal !important; line-break: strict !important; text-wrap: pretty; white-space: normal !important; } /* ===== ギャラリーの画像重複を解消 ===== Pro Galleryは1アイテムに同一画像のpictureが2つあり縦積みで重複表示される。 2つ目以降を非表示にして1枚だけにする。 */ #SITE_PAGES .gallery-item-content > picture:not(:first-of-type) { display: none !important; } /* ===== 自前コンテンツブロックの上下余白(空きすぎ)を圧縮 ===== */ #cho-goshuin-text { padding-top: 12px !important; padding-bottom: 28px !important; } #SITE_PAGES [id^="cho-"] p { line-height: 2 !important; } /* ===== 葬儀・法事ページ: 全幅に伸びた装飾ベクター(グレーの空ブロック)を非表示 ===== */ #comp-kttbzuor1, #comp-kttbzup02, #comp-ktnynx9f, #comp-ktnz3pr0, #comp-kttc2lx5, #comp-kttc2lx31 { display: none !important; } } /* ========================================================= 電話バー(#lp-tel-cta) の改行整理 ========================================================= */ #lp-tel-cta .lp-cta-num { white-space: nowrap; } @media (max-width: 768px) { #lp-tel-cta { line-height: 1.7 !important; } #lp-tel-cta .lp-cta-lead { display: block; } #lp-tel-cta .lp-cta-nums { display: block; } #lp-tel-cta .lp-cta-sub { display: block; margin: 2px 0 0; font-size: 12px; opacity: .85; } } /* ========================================================= 追加調整 (2026-06-28) SP個別対応 ========================================================= */ @media (max-width: 768px) { /* ヘッダー(透明)裏に透けて見えるページ内ナビ(各ページのh0崩壊セクション)を非表示 */ #comp-lxo2xurc, #comp-lxo2xur0, #comp-lxo2xur74, #comp-lxo2xur65, #comp-lxo2xur36, #comp-lxo2xur7, #comp-lxo2xur83, #comp-lxo2xur31 { display: none !important; } /* フッター上部に余白(「浄土宗 長昌寺」ロゴの上が詰まりすぎ対策) */ #SITE_FOOTER { padding-top: 28px !important; } /* 葬儀・法事 詩セクション: 文字を20pxに・画像の縦横中央へ */ #comp-ktns0org1, #comp-ktns0org1 *, #comp-ktnztgj5, #comp-ktnztgj5 * { font-size: 16px !important; line-height: 2.0 !important; letter-spacing: 0 !important; } /* 葬儀・法事 最下部の空セクション(フッターとの間が広すぎ)を詰める */ #comp-ktnzulvs { height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; } } @media (max-width: 768px) { /* 空セクションを確実に圧縮(特異度を上げてグローバル規則に勝つ) */ #SITE_PAGES #comp-ktnzulvs { height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; } } @media (max-width: 768px) { /* 葬儀・法事 詩の全行を20pxに(各行が別コンポーネントのため、セクション内のテキスト全部を対象) */ /* 行ラッパーを全幅化して各フレーズを1行に収める */ /* ※この padding:3px は詩のテキスト行を1行に収めるためのもの。 写真バンド(comp-ktns0oop / comp-ktnztghp)にも当たって左右3pxの隙間を作っていたので、 :not() で写真バンドだけ除外する(除外しないと写真が全幅にならない)。 */ #SITE_PAGES #comp-lxo2xurc2 [data-mesh-id*="gridContainer"] > *:not(#comp-ktns0oop):not(#comp-ktnztghp), #SITE_PAGES #comp-lxo2xurc5 [data-mesh-id*="gridContainer"] > *:not(#comp-ktns0oop):not(#comp-ktnztghp) { width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 3px !important; padding-right: 3px !important; } /* 写真バンドは全幅(paddingなし) */ #SITE_PAGES #comp-ktns0oop, #SITE_PAGES #comp-ktnztghp { width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #SITE_PAGES #comp-lxo2xurc2 [class*="wixui-rich-text"], #SITE_PAGES #comp-lxo2xurc2 [class*="wixui-rich-text"] *, #SITE_PAGES #comp-lxo2xurc5 [class*="wixui-rich-text"], #SITE_PAGES #comp-lxo2xurc5 [class*="wixui-rich-text"] * { font-size: 16px !important; line-height: 2.0 !important; letter-spacing: 0 !important; } /* 装飾の帯(グレー/暗色のvector)を非表示 */ #comp-kto0wppx, #comp-kto0mdn7 { display: none !important; } /* 「法事お申込みから当日まで」白文字がクリーム背景で見えない → 濃色に */ #SITE_PAGES #comp-kto0xa8q, #SITE_PAGES #comp-kto0xa8q * { color: #3a2f23 !important; } } @media (max-width: 768px) { /* 「葬儀から四十九日までの流れ」白文字→濃色(視認性) */ #SITE_PAGES #comp-ktnynxad, #SITE_PAGES #comp-ktnynxad * { color: #3a2f23 !important; } /* 葬儀詩を画像の縦中央へ: 詩の実ラッパー(inlineContent,高さ640)の中で詩(約392)をflex中央寄せ。高さ不変=overlapしない */ #SITE_PAGES #comp-ktns0oop [data-mesh-id$="inlineContent"], #SITE_PAGES #comp-ktnztghp [data-mesh-id$="inlineContent"] { display: flex !important; flex-direction: column !important; justify-content: center !important; height: 640px !important; } } @media (max-width: 768px) { /* aboutページ: 最下部(畳の写真)とフッターの間の空セクションを詰める */ #comp-ktmefzpu { height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; } } /* ========================================================= 背景画像が無いページ(stamps/news等)にも和紙背景を表示(全幅)。 背景を持つページ(about等)は固定wow-imageが上に被さるため影響なし。 ========================================================= */ /* 背景画像が無いページ(stamps/news等)に和紙(家紋)背景をタイルで敷く。 html背景はページ全体を覆い隙間が出ない。固定(attachment:fixed)はモバイル非対応のため使わない。 家紋背景を自前で持つページ(about/funeral等)はその背景が上に重なるため影響なし。 */ html { background-color: #efe7d4 !important; background-image: url("/chosyozi/assets/img/9f0232578eb24e11.jpg?v=20260627b") !important; background-repeat: repeat !important; background-position: top center !important; background-size: auto !important; background-attachment: scroll !important; } /* Wix pageBackground(washi wow-image)は実機(iOS/LINE)で白いプレースホルダが残り 「白枠」になる。容器にクリーム色を敷き、画像未読込でも白くしない(読込後はwashi)。 */ #SITE_BACKGROUND, [id^="pageBackground"], [id^="bgMedia_pageBackground"], [id^="bgLayers_pageBackground"], [id*="pageBackground"], [id*="bgMedia_pageBackground"], [id*="bgLayers_pageBackground"] { background-color: #efe7d4 !important; } @media (max-width: 768px) { /* access: 「（詳しい道順はお問い合わせください）」の一文を非表示 */ #comp-ktuurf1g { display: none !important; } } @media (max-width: 768px) { /* seasons: 写真MV(青空背景の年中行事カラム)を非表示にし、他ページ同様テキストタイトルのみに */ #comp-ktmir375, #comp-ktmir37a1 { display: none !important; } } @media (max-width: 768px) { /* stamps: 御朱印情報の上にある空要素(白帯の正体)を詰める */ #comp-ku0g1mdi { display: none !important; } } @media (max-width: 768px) { /* seasons 年中行事カード(cho-nenchu-events): content-box+paddingで右にはみ出すのを修正 */ #cho-nenchu-events { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; margin-top: 24px !important; } #cho-nenchu-events * { box-sizing: border-box !important; max-width: 100% !important; } /* タイトル「年中行事」を他ページと同じ筆文字フォント・サイズに */ #cho-nenchu-events > h2 { font-family: "wfont_bec6ea_dfb27138e1a64", "Yu Mincho", serif !important; font-size: 34px !important; font-weight: 400 !important; } } /* ========================================================= 追加調整 (2026-06-28 第2弾) 実機(390-430px)での崩れ対応 ========================================================= */ @media (max-width: 768px) { /* 固定幅の本文・住所枠が左に寄る(右にはみ出す)のを中央寄せに統一 */ #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) > * { margin-left: auto !important; margin-right: auto !important; } #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) [class*="wixui-rich-text"] { margin-left: auto !important; margin-right: auto !important; float: none !important; } /* ===== フッターを全幅・中央寄せ(980px列ストリップ CeUMmm が右へずらす元凶を制約) ===== */ #SITE_FOOTER [class*="CeUMmm"], #SITE_FOOTER [class*="Ak0vpt"], #SITE_FOOTER [class*="FDI5TK"], #SITE_FOOTER [class*="column-strip"], #SITE_FOOTER [data-mesh-id] { width: 100% !important; max-width: 100vw !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } #SITE_FOOTER [data-mesh-id*="gridContainer"] > * { width: 100% !important; max-width: 100vw !important; left: 0 !important; margin: 0 0 6px !important; padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; text-align: center !important; } #SITE_FOOTER p, #SITE_FOOTER [class*="font_7"] { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; text-align: center !important; box-sizing: border-box !important; } #SITE_FOOTER [class*="font_7"] span { display: inline !important; width: auto !important; float: none !important; } #SITE_FOOTER [class*="font_7"], #SITE_FOOTER [class*="font_7"] span { font-size: 13px !important; } /* ===== charnel(納骨堂): 年中行事表のあとの納骨壇写真2枚を非表示 ===== */ #comp-lxo2xur69, #comp-kttd73v6, #comp-ktqwdyu3 { display: none !important; } } /* ========================================================= 追加調整 (2026-06-28 第6弾) ========================================================= */ @media (max-width: 768px) { /* フッター右ずれの真因: 列ストリップ CeUMmm が min-width:980px(max-width:100vwに勝つ)＋padding-left:14px。 min-width:0 と padding:0 で根治。N8MGzv だけ左右対称paddingを持たせて中央化。 */ #SITE_FOOTER * { max-width: 100vw !important; } #SITE_FOOTER [class*="CeUMmm"], #SITE_FOOTER [class*="Ak0vpt"], #SITE_FOOTER [class*="FDI5TK"], #SITE_FOOTER [class*="wixui-column-strip"], #SITE_FOOTER [data-mesh-id] { min-width: 0 !important; width: 100% !important; max-width: 100vw !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; transform: none !important; } #SITE_FOOTER [class*="N8MGzv"] { min-width: 0 !important; width: 100% !important; max-width: 100vw !important; left: 0 !important; box-sizing: border-box !important; padding-left: 16px !important; padding-right: 16px !important; } /* 白枠対策(実機): 列/セクションの背面にクリームを敷く(画像レイヤー自体には敷かない=写真を覆わない)。 ※[id^=bgLayers]/[id^=bgMedia] への着色はMVのオーバーレイ層まで覆い写真を消すため禁止。 列(FDI5TK)・セクション(Le88gL)の背面のみクリーム化(写真は前面なので影響なし)。 */ /* 「白枠」の真因(WebKit/iOSで判明): memorialの装飾SVGベクター comp-kttcoznv が白塗り(fill:#fff)で 左側を覆っていた。これを非表示に。 */ #comp-kttcoznv { display: none !important; } /* 画像コンテナの背面のみクリーム(遅延読込の白プレースホルダ保険・画像内容は前面なので覆わない・MV除外) */ #SITE_PAGES wow-image:not(#comp-lxo2xur51 *), #SITE_PAGES [id^="bgMedia"]:not(#comp-lxo2xur51 *) { background-color: #efe7d4 !important; } } /* ========================================================= 追加調整 (2026-06-28 第3弾) 全ページの「右に寄る」を一括是正 原因: Wixの容器が画面幅を超える幅(438/426/980=CeUMmm等)で、その中で 中央寄せされた中身が画面に対して右へずれる。全要素を画面幅にキャップ。 ========================================================= */ @media (max-width: 768px) { /* TOP「長昌寺とは」ティーザー(comp-lxo2xur53)はテキスト列(comp-ktdvfg1m)と本堂写真列(comp-ktdvfg27)が 列ストリップ(grid)で並ぶ。テキスト列の行高が98px固定でSPだと本文が溢れ写真列に被る。 列ストリップをblock縦積み化し、各列・段落をheight:autoにして写真を押し下げる(comp-lxo2xur53限定・他不干渉)。 */ #comp-lxo2xur53, #comp-lxo2xur53 [class*="Ak0vpt"], #comp-lxo2xur53 [class*="CeUMmm"], #comp-lxo2xur53 [class*="wixui-column-strip"] { display: block !important; height: auto !important; min-height: 0 !important; } /* テキスト列だけ height:auto で伸ばす(本文を収める)。写真列(comp-ktdvfg27)は高さ維持=写真を消さない */ #comp-ktdvfg1m { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; position: relative !important; } #comp-ktdvfg1m div, #comp-ktdvfg1m p, #comp-ktdvfg1m [class*="wixui-rich-text"] { height: auto !important; min-height: 0 !important; } /* 写真列はgrid行高に依存していたためblock化で潰れる→固定高さ240pxを与え、背景/wow-imageを枠いっぱいに表示 */ /* ↓ 24行目の汎用FDI5TKルール(height:auto・詳細度2,2,0)が写真列を潰すため、3 idsで確実に勝たせる */ #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 { display: block !important; width: 100% !important; height: 240px !important; min-height: 240px !important; position: relative !important; overflow: hidden !important; } #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 [id^="bgMedia"], #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 [id^="bgLayers"], #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 wow-image, #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 [id^="img_"] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 wow-image img, #SITE_PAGES #comp-lxo2xur53 #comp-ktdvfg27 img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media (max-width: 768px) { /* 本文(font_8系)が18pxで端末では大きすぎ→1行の文字数が少なく改行が崩れる。 15pxに下げて1行に多く収め、読みやすい折り返しにする。 */ #SITE_PAGES [class*="font_8"], #SITE_PAGES [class*="font_8"] * { font-size: 15px !important; line-height: 1.9 !important; } /* ===== 全ページ左右余白の統一 ===== 本文セル(N8MGzv)はページごとに padding/幅がバラバラ(about=pl18/pr0, access=中央357 等)で 左右がそろわない。全N8MGzvを「全幅・box-sizing・左右20px」に統一して揃える。 */ #SITE_PAGES [class*="N8MGzv"]:not(#comp-lxo2xur51 *) { width: 100% !important; max-width: 100vw !important; left: 0 !important; box-sizing: border-box !important; padding-left: 20px !important; padding-right: 20px !important; } #SITE_PAGES [class*="N8MGzv"]:not(#comp-lxo2xur51 *) [class*="wixui-rich-text"] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* contact等: N8MGzvでない本文容器(jko4jB内の画面幅超ラッパー)も画面幅に制約し左右対称に */ #SITE_PAGES [class*="jko4jB"]:not(#comp-lxo2xur51 *), #SITE_PAGES [class*="jko4jB"]:not(#comp-lxo2xur51 *) * { max-width: 100vw !important; box-sizing: border-box !important; } } @media (max-width: 768px) { /* 980px等の列ストリップ/メッシュ容器を画面幅に制約(中身の右寄りの主因)。 ※全要素への max-width は about等のレイアウトを壊すため使わず、構造容器のみに限定。 */ #SITE_PAGES [class*="CeUMmm"]:not(#comp-lxo2xur51 *), #SITE_PAGES [class*="CohWsy"]:not(#comp-lxo2xur51 *), #SITE_PAGES [class*="Oqnisf"]:not(#comp-lxo2xur51 *), #SITE_PAGES [data-mesh-id$="inlineContent"]:not(#comp-lxo2xur51 *), #SITE_PAGES [data-mesh-id*="gridContainer"]:not(#comp-lxo2xur51 *) { width: 100% !important; max-width: 100vw !important; left: 0 !important; margin-left: 0 !important; transform: none !important; } } /* ========================================================= 全ビューポート共通の個別調整（2026-07-15） ※@mediaの外＝PC/SP両方に適用 ========================================================= */ /* TOP MVの半透明パネル枠(gyovE9)を撤去。縦書きタイトルは既にJSで非表示のため枠ごと消す。 */ #comp-lxo2xur51 .gyovE9 { display: none !important; } /* 熊碓山の扁額(insta_2)をギャラリータイルで全体表示（cover切り抜きをやめ全景を見せる） */ img.gallery-item[src*="insta_2"], [class*="gallery-item"] img[src*="insta_2"] { object-fit: contain !important; background: #2b2118 !important; } /* about「ご住職より」横の扁額画像(新)を全景表示（Wixのcoverを上書き） */ #comp-ktmhkgj61 img, img[src*="kumausu-gaku-full"] { object-fit: contain !important; background: #2b2118 !important; } /* 差し替えた写真6点。 contain(全景表示)にすると左右に大きな余白が出てしまったため、 cho-mobilefit.js の fitFrames() が「枠の高さを写真の縦横比に合わせて」から cover する。 = 余白なし・見切れなしの両立。ここでは JS が効くまでの間に 一瞬 cover で大きく切れて見えるのを防ぐため contain を初期値にしておく。 */ img[src*="cho-charnel"], img[src*="cho-top-about"], img[src*="cho-icho"], img[src*="cho-eitai"], img[src*="cho-mizuko"], img[src*="cho-hiroma"] { object-fit: contain; object-position: 50% 50%; } /* 納骨堂ページ: 本文の右側の写真(納骨堂地蔵)を非表示。 3カラム[写真|本文|写真]の右を消すと、残りが自動で広がって隙間なく埋まる(実測済み)。 */ #comp-kttd6egs { display: none !important; } /* ========================================================= ちらつき/カクつき対策（2026-07-17） ========================================================= */ /* TOP MVの旧タイトル(長昌寺/浄土宗/小樽の四季を感じる)は JS で隠していたため、 JSが動くまでの一瞬だけ表示されて「ちらっと映る」。CSSで最初から隠す。 ※JS側(cho-mobilefit)でも同じIDを非表示にしており、二重で担保している。 */ #comp-ktdlr1rx, #comp-ktdlz6nm, #comp-ktdm0w5l { visibility: hidden !important; } /* スクロールのカクつき対策: ページ背景は position:fixed の大きな画像(980x844/実画像1055x1491)で、 固定要素は本来スクロールのたびにCPUで再描画される。 専用のGPUレイヤーへ載せて、スクロール中の再描画を止める。 */ [id^="pageBackground_"], #SITE_HEADER { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* SPの写真の左右余白を撤廃(実測して原因を特定した2件) ① 法事の流れの写真: 左に16pxの余白＋右へ16pxはみ出していた。 真因は .cho-fn-flow が box-sizing:content-box のまま width:390px + padding:16px = 実寸422px になっていたこと(コンテンツが x=16 から始まり画面外へ溢れる)。 → border-box にして枠内へ収め、写真だけ padding を打ち消して全幅にする。 ② 葬儀/法事の写真バンド: 左に3pxの隙間。 真因は祖先 #comp-ktns0oop / #comp-ktnztghp (Wixのcolumn-strip)に padding:3px が 焼き込まれていること(実測で特定)。→ SPでは padding を0にする。 */ @media (max-width: 768px) { .cho-fn-flow { box-sizing: border-box !important; } .cho-houji-photo { width: 100vw !important; max-width: 100vw !important; margin-left: -16px !important; margin-right: -16px !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; } } /* ========================================================= funeral(葬儀・法事)ページ 文言差し替え用スタイル（2026-07-15） ========================================================= */ /* 導入文オーバーレイ（背景写真の上に白文字で中央表示） */ .cho-fn-introov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; box-sizing: border-box; pointer-events: none; z-index: 5; } .cho-fn-introov p { color: #fff; margin: 0 0 1.15em; line-height: 2; font-size: 19px; font-weight: 500; max-width: 660px; text-shadow: rgba(0,0,0,.55) 0 2px 8px, rgba(0,0,0,.35) 0 0 2px; } .cho-fn-introov p:last-child { margin-bottom: 0; } /* 「流れ」本文（番号ステップの代わりに入れる説明文） */ .cho-fn-flow { max-width: 800px; margin: 0 auto; text-align: left; padding: 8px 24px; } .cho-fn-flow p { font-size: 16px; line-height: 2; color: #4a443b; margin: 0 0 1.3em; } .cho-fn-flow p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .cho-fn-introov { padding: 18px; } .cho-fn-introov p { font-size: 16px; line-height: 1.95; } .cho-fn-flow { padding: 8px 16px; } .cho-fn-flow p { font-size: 15px; } } /* ========================================================= TOP セクション ティーザー（葬儀・法事 / 納骨堂 / 永代供養） TOPの「長昌寺とは」(#comp-ktdvffzg)と同じ見た目に揃える: ・カードの囲み(枠線/背景/影/角丸/ボタン)は無し ・本文は明朝20px・中央寄せで左側、写真は右側で右端まで ・導線は茶色ボタンではなく「もっと見る ——」のテキストリンク 写真は縦横比がバラバラなので、高さを「長昌寺とは」と同じ569pxに固定し 幅は auto にする = どの写真も全体が見えて余白も出ない。 ========================================================= */ .cho-portal { margin: 0; padding: 0 0 46px; position: relative; z-index: 5; } .cho-portal-card { display: flex; align-items: center; justify-content: flex-end; text-decoration: none; color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; } .cho-portal-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; text-align: center; } .cho-portal-copy { font-family: tsukushioldmincho,"ms mincho","ヒラギノ明朝 pro w3","hiragino mincho pro",serif; font-size: 20px; line-height: 2.1; color: #000; margin: 0 0 22px; max-width: 420px; } /* 「もっと見る ——」(長昌寺とは と同じ体裁) */ .cho-portal-more { display: inline-flex; align-items: center; gap: 10px; font-family: tsukushioldmincho,"ms mincho","ヒラギノ明朝 pro w3","hiragino mincho pro",serif; font-size: 15px; color: #000; letter-spacing: .06em; background: none; padding: 0; border-radius: 0; box-shadow: none; font-weight: 400; } .cho-portal-line { display: block; width: 34px; height: 1px; background: #000; transition: width .25s ease; } .cho-portal-card:hover .cho-portal-line { width: 48px; } .cho-portal-card:hover .cho-portal-copy { opacity: .82; } /* 写真: 高さを揃えて幅は写真なり(全体が見える・余白なし) */ .cho-portal-img { flex: 0 0 auto; display: block; line-height: 0; } .cho-portal-img img { display: block; height: 569px; width: auto; max-width: 60vw; object-fit: contain; } @media (max-width: 768px) { .cho-portal { padding: 0 0 30px; } .cho-portal-card { flex-direction: column; align-items: stretch; } .cho-portal-body { padding: 22px 20px 26px; order: 1; } .cho-portal-copy { font-size: 16px; line-height: 2; margin: 0 0 18px; max-width: none; } .cho-portal-img { order: 2; width: 100%; } /* SPは幅いっぱい・高さは写真なり(全体が見える・余白なし) */ .cho-portal-img img { width: 100%; height: auto; max-width: 100%; } } /* ========================================================= Instagram 追従CTA（右下・全ページ）＋ 法事の流れ画像（2026-07-16） ========================================================= */ /* PC右下のLINE追従ボタン。LINEロゴは緑の吹き出しなので、地色は白にして視認性を出す。 */ #cho-line-fab { position: fixed; right: 16px; bottom: 72px; z-index: 100000; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e2dac9; box-shadow: 0 4px 14px rgba(0,0,0,.30); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } #cho-line-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,.38); } #cho-line-fab img { display: block; width: 39px; height: 39px; } @media (max-width: 768px) { #cho-line-fab { width: 50px; height: 50px; right: 12px; bottom: 66px; } } /* 法事の流れ：法要写真＋合掌イラスト組み込み */ .cho-houji { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; text-align: left; } .cho-houji-photo { flex: 0 0 330px; max-width: 46%; height: auto; border: 1px solid #d9cdb5; border-top: 3px solid #cdac51; border-radius: 3px; box-shadow: 0 3px 14px rgba(90,70,45,.12); } .cho-houji-txt { flex: 1; min-width: 260px; } .cho-houji-chara { width: 98px; height: auto; align-self: flex-end; margin-bottom: -4px; } @media (max-width: 768px) { .cho-houji { gap: 14px; } .cho-houji-photo { flex-basis: 100%; max-width: 100%; } .cho-houji-chara { width: 74px; } } /* ========================================================= ロゴサイズ(PC/SP)＋SP2等分CTA＋法事SP調整（2026-07-16 修正） ========================================================= */ .cho-logo-img { height: 84px; width: auto; } @media (max-width: 768px) { .cho-logo-img { height: 46px; } } /* ロゴのリンク(TOPへ)。元テキスト「浄土宗/長昌寺」が持っていた導線の復活。 line-height:0 で に余分な行の高さが付かないようにし、当たり判定を画像ピッタリにする。 */ .cho-logo-link { display: block; line-height: 0; text-decoration: none; border: 0; } .cho-logo-link:hover { opacity: .82; transition: opacity .2s; } /* SP: 法事イラストのはみ出し防止（縦積み・中央） */ @media (max-width: 768px) { .cho-houji { flex-direction: column; align-items: center; gap: 12px; } .cho-houji-photo { flex: none; width: 100%; max-width: 100%; } .cho-houji-txt { min-width: 0; width: 100%; } .cho-houji-chara { width: 96px; align-self: center; margin: 2px 0 0; } } /* SP: 電話｜Instagram の2等分 追従CTA（PCは非表示＝既存FAB/電話バーのまま） */ #cho-sp-cta { display: none; } @media (max-width: 768px) { #cho-sp-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001; display: flex; height: 56px; box-shadow: 0 -2px 12px rgba(0,0,0,.28); } #cho-sp-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; } #cho-sp-cta .cho-sp-tel { background: linear-gradient(135deg,#70583f,#4a3a2c); } #cho-sp-cta .cho-sp-line { background: #06C755; } /* LINEブランドカラー */ #cho-sp-cta svg { display: block; } #lp-tel-cta { display: none !important; } #cho-line-fab { display: none !important; } body { padding-bottom: 56px !important; } } /* 見出し「北海道記念保護樹木」(9文字)対策。 既定は 箱318px + 字間0.7em(インライン指定)で、9文字だとPC/SPとも2行になり 他の見出し(歴史/本堂/御本尊=1行)と揃わない。字間を詰めて1行に収める。 ・字間0.15em: PC=文字幅373/箱400(余裕27px)、SP360=文字幅311/箱360(余裕50px)。 0.2emだとPC余裕11px/SP390余裕1pxしかなく、筆webfontの読込失敗時に2行へ崩れるため0.15emを採用。 ・PCのみ本文(comp-ktmfdsd4)と同じ 左49px/幅400px に合わせて左端を揃える。 ・SPは36pxのままだと360px幅で溢れるため30pxへ。 */ #comp-ktmfdsd21 h3 span { letter-spacing: 0.15em !important; } @media (min-width: 769px) { #comp-ktmfdsd21 { left: 49px !important; width: 400px !important; } } @media (max-width: 768px) { #comp-ktmfdsd21 h3 span { font-size: 30px !important; } } /* ========================================================= 第33弾(2026-07-24) ========================================================= */ /* --- 葬儀/法事の写真バンドのラベル --------------------------- PCには筆文字タブ「葬儀」「法事」(comp-kttbzupf2/kttbzupb2)があるが、