/* ============================================================================= * works-design.css — WORKSページ「完成版」CSS（通常読み込み用） * 由来: staging-works.js 内 baseCss/regenCss/investCss/developCss/overseasCss * （document.head.appendChild で後注入していたものを通常CSS化） * 使い方: 子テーマ /css/works-design.css として設置し、で先読み enqueue。 * （functions.php の enqueue スニペット参照） * 注意: 元コードは全宣言 !important。挙動を変えないためそのまま保持しています。 * ============================================================================= */ /* ========== ページヘッダー ========== */ body:not(.wp-admin) #page_header { height: 40vh !important; min-height: 40vh !important; overflow: hidden !important; } body:not(.wp-admin) #page_header .bg_image { height: 100% !important; } body:not(.wp-admin) #page_header #tab_button_list { max-width: min(800px, 92vw) !important; } /* ========== タブボタン ========== */ #tab_button_list li a { font-size: 14px !important; color: #000000 !important; background: rgba(255,255,255,0.8) !important; } #tab_button_list li a:hover { color: #ffffff !important; background: #333333 !important; } #tab_button_list li a.active { color: #ffffff !important; background: #000000 !important; } .page-template-page-design2 #tab_button_list { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } .page-template-page-design2 #tab_button_list * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } /* ========== 背景色 ========== */ .page-template-page-design2 #design_content_id1 { background-color: #ffffff !important; } .page-template-page-design2 #design_content_id2 { background-color: #fcfcfc !important; } .page-template-page-design2 #design_content_id3 { background-color: #ffffff !important; } .page-template-page-design2 #design_content_id4 { background-color: #fcfcfc !important; } html { overflow-x: hidden !important; } /* ========== セクションタイトル（ABOUT準拠） ========== */ .page-template-page-design2 .dc_content { display: flex !important; flex-direction: column !important; } .page-template-page-design2 .sub_title { text-align: center !important; margin: 0 !important; padding: 0 !important; text-transform: none !important; } #design_content_id1 .sub_title, #design_content_id2 .sub_title, #design_content_id3 .sub_title, #design_content_id4 .sub_title { margin: 0 !important; } .page-template-page-design2 h2.catch { order: -1 !important; text-align: center !important; margin: 0 0 4px 0 !important; padding: 0 !important; display: inline-block !important; width: 100% !important; } .page-template-page-design2 .catch_text { text-align: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ========== scroll-margin-top ========== */ #design_content_id1, #design_content_id2, #design_content_id3, #design_content_id4 { scroll-margin-top: 0 !important; padding-top: 100px !important; padding-bottom: 80px !important; margin-top: -100px !important; } /* ========== ベースレスポンシブ ========== */ @media (max-width: 767px) { body:not(.wp-admin) #page_header { height: 20vh !important; min-height: 20vh !important; box-sizing: border-box !important; } } @media (max-width: 767px) { #tab_button_list li a { font-size: 12px !important; } body.page .post_content { font-size: 14px !important; } } /* ===== ヘッダーテキスト余白調整（全拠点共通） ===== */ #design_content_id4 .c-header-text { display: flex !important; flex-direction: column !important; gap: 4px !important; line-height: 1.4 !important; } #design_content_id4 .c-header-en { margin: 0 !important; line-height: 1.2 !important; } #design_content_id4 .c-header-ja { margin: 0 !important; line-height: 1.3 !important; } #design_content_id4 .c-header-desc { margin: 0 !important; line-height: 1.5 !important; } /* ── 不動産再生事業 (id1) CSS ── */ #design_content_id1 .regeneration-intro { padding: 0 !important; margin: 0 !important; } #design_content_id1 .regen-section { background: #fff !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; padding: 0 48px 64px !important; box-sizing: border-box !important; } #design_content_id1 .regen-intro { max-width: 860px !important; margin: 0 auto 40px !important; } #design_content_id1 .regen-intro p { font-size: 13.5px !important; line-height: 2 !important; color: #555 !important; text-align: center !important; margin: 0 !important; } #design_content_id1 .regen-label { font-size: 11px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: #000 !important; display: flex !important; align-items: center !important; gap: 12px !important; max-width: 1100px !important; margin: 0 auto 28px !important; } #design_content_id1 .regen-label::after { content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(0,48,112,0.12) !important; } #design_content_id1 .regen-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: 1100px !important; margin: 0 auto !important; align-items: stretch !important; } #design_content_id1 .regen-card { background: #f8f6f2 !important; border: 1px solid rgba(0,48,112,0.12) !important; position: relative !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; transition: none !important; display: flex !important; flex-direction: column !important; box-shadow: none !important; border-radius: 0 !important; height: 100% !important; } #design_content_id1 .regen-card.visible { opacity: 1 !important; transform: translateY(0) !important; } #design_content_id1 .regen-card:hover { box-shadow: 0 16px 48px rgba(0,48,112,0.10) !important; transform: translateY(-4px) !important; } #design_content_id1 .regen-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; background: #003070 !important; z-index: 1 !important; } #design_content_id1 .regen-num { font-size: 72px !important; font-weight: 300 !important; color: rgba(0,48,112,0.04) !important; position: absolute !important; top: 4px !important; right: 10px !important; line-height: 1 !important; pointer-events: none !important; user-select: none !important; z-index: 0 !important; } #design_content_id1 .regen-before-wrap { padding: 20px 20px 0 24px !important; position: relative !important; z-index: 1 !important; } #design_content_id1 .regen-tag { font-size: 10px !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; margin-bottom: 6px !important; display: block !important; } #design_content_id1 .regen-tag.before { color: #999 !important; } #design_content_id1 .regen-tag.after { color: #b8975a !important; } #design_content_id1 .regen-before-img { width: 55% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; display: block !important; filter: grayscale(15%) !important; border: 1px solid rgba(0,48,112,0.08) !important; height: auto !important; border-radius: 0 !important; } #design_content_id1 .regen-arrow { padding: 6px 0 6px 24px !important; font-size: 16px !important; color: #b8975a !important; position: relative !important; z-index: 1 !important; display: block !important; } #design_content_id1 .regen-after-wrap { padding: 0 20px 0 24px !important; position: relative !important; z-index: 1 !important; } #design_content_id1 .regen-after-scroll { display: flex !important; gap: 8px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 8px !important; scrollbar-width: thin !important; scrollbar-color: rgba(0,48,112,0.2) transparent !important; } #design_content_id1 .regen-after-scroll::-webkit-scrollbar { height: 4px !important; } #design_content_id1 .regen-after-scroll::-webkit-scrollbar-track { background: transparent !important; } #design_content_id1 .regen-after-scroll::-webkit-scrollbar-thumb { background: rgba(0,48,112,0.2) !important; border-radius: 2px !important; } #design_content_id1 .regen-after-img { flex: 0 0 100% !important; width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; object-position: center !important; display: block !important; border-radius: 0 !important; } #design_content_id1 .regen-body { padding: 16px 20px 20px 24px !important; position: relative !important; z-index: 1 !important; } #design_content_id1 .regen-card-title { font-size: 14px !important; font-weight: 600 !important; color: #003070 !important; letter-spacing: 0.04em !important; margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(0,48,112,0.12) !important; border-left: none !important; line-height: 1.5 !important; } #design_content_id1 .regen-info { font-size: 12px !important; line-height: 1.9 !important; color: #666 !important; } /* スワイプUI */ .regen-after-scroll { position: relative !important; } .ras-dots { display: flex !important; justify-content: center !important; gap: 8px !important; padding: 1rem 0 !important; } .ras-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(0,0,0,0.15) !important; transition: background 0.3s ease, transform 0.3s ease !important; } .ras-dot.is-active { background: #c4a882 !important; transform: scale(1.3) !important; } .ras-hint { display: flex !important; position: absolute !important; top: 50% !important; right: 1.2rem !important; transform: translateY(-50%) !important; flex-direction: column !important; align-items: center !important; gap: 0.3rem !important; opacity: 1 !important; transition: opacity 0.5s ease !important; pointer-events: none !important; z-index: 5 !important; } .ras-hint.is-hidden { opacity: 1 !important; } .ras-hint-arrow { display: block !important; width: 20px !important; height: 20px !important; border-top: 1.5px solid rgba(255,255,255,0.8) !important; border-right: 1.5px solid rgba(255,255,255,0.8) !important; transform: rotate(45deg) !important; animation: ras-nudge 1.5s ease-in-out infinite !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) !important; } .ras-hint-text { font-size: 0.55rem !important; font-weight: 300 !important; letter-spacing: 0.1em !important; color: rgba(255,255,255,0.8) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } @keyframes ras-nudge { 0%, 100% { transform: rotate(45deg) translateX(0); } 50% { transform: rotate(45deg) translateX(5px); } } @media (max-width: 991px) { #design_content_id1 .regen-grid { grid-template-columns: 1fr !important; max-width: 480px !important; } #design_content_id1 .regen-section { padding: 0 24px 40px !important; } } /* ── 国内投資事業 (id2) CSS ── */ #design_content_id2 .jisseki-section { padding: 0 !important; margin: 0 !important; background: none !important; width: auto !important; margin-left: 0 !important; } #design_content_id2 .invest-section { background: #fcfcfc !important; padding: 0 48px 64px !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; box-sizing: border-box !important; } #design_content_id2 .invest-intro { max-width: 860px !important; margin: 0 auto 40px !important; } #design_content_id2 .invest-intro p { font-size: 13.5px !important; line-height: 2 !important; color: #555 !important; text-align: center !important; margin: 0 !important; } #design_content_id2 .invest-label { font-size: 11px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: #000 !important; display: flex !important; align-items: center !important; gap: 12px !important; max-width: 1100px !important; margin: 0 auto 28px !important; } #design_content_id2 .invest-label::after { content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(0,48,112,0.12) !important; } #design_content_id2 .invest-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: 1100px !important; margin: 0 auto !important; } #design_content_id2 .invest-card { background: #f8f6f2 !important; border: 1px solid rgba(0,48,112,0.12) !important; position: relative !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; transition: none !important; display: flex !important; flex-direction: column !important; box-shadow: none !important; border-radius: 0 !important; } #design_content_id2 .invest-card.visible { opacity: 1 !important; transform: translateY(0) !important; } #design_content_id2 .invest-card:hover { box-shadow: 0 16px 48px rgba(0,48,112,0.10) !important; transform: translateY(-4px) !important; } #design_content_id2 .invest-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; background: #003070 !important; z-index: 1 !important; } #design_content_id2 .invest-card-img { width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; display: block !important; height: auto !important; border-radius: 0 !important; } #design_content_id2 .invest-card-body { padding: 20px 20px 20px 24px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; position: relative !important; z-index: 1 !important; } #design_content_id2 .invest-card-title { font-size: 15px !important; font-weight: 600 !important; color: #003070 !important; letter-spacing: 0.04em !important; margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(0,48,112,0.12) !important; border-left: none !important; padding-left: 0 !important; line-height: 1.5 !important; } #design_content_id2 .invest-card-info { font-size: 12px !important; line-height: 1.9 !important; color: #666 !important; } @media (max-width: 991px) { #design_content_id2 .invest-grid { grid-template-columns: 1fr 1fr !important; } #design_content_id2 .invest-section { padding: 0 24px 40px !important; } } @media (max-width: 767px) { #design_content_id2 .invest-grid { grid-template-columns: 1fr !important; max-width: 420px !important; } } /* ── 不動産開発 (id3) CSS ── */ #design_content_id3 .project-cards-section { padding: 0 !important; margin: 0 !important; } #design_content_id3 .develop-section { background: #fff !important; padding: 0 48px 64px !important; width: 100vw !important; margin-left: calc(-50vw + 50%) !important; box-sizing: border-box !important; } #design_content_id3 .develop-intro { max-width: 860px !important; margin: 0 auto 40px !important; } #design_content_id3 .develop-intro p { font-size: 13.5px !important; line-height: 2 !important; color: #555 !important; text-align: center !important; margin: 0 !important; } #design_content_id3 .develop-label { font-size: 11px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: #000 !important; display: flex !important; align-items: center !important; gap: 12px !important; max-width: 1100px !important; margin: 0 auto 28px !important; } #design_content_id3 .develop-label::after { content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(0,48,112,0.12) !important; } #design_content_id3 .develop-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: 1100px !important; margin: 0 auto !important; } #design_content_id3 .develop-card { background: #f8f6f2 !important; border: 1px solid rgba(0,48,112,0.12) !important; position: relative !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; transition: none !important; display: flex !important; flex-direction: column !important; box-shadow: none !important; border-radius: 0 !important; } #design_content_id3 .develop-card.visible { opacity: 1 !important; transform: translateY(0) !important; } #design_content_id3 .develop-card:hover { box-shadow: 0 16px 48px rgba(0,48,112,0.10) !important; transform: translateY(-4px) !important; } #design_content_id3 .develop-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; background: #003070 !important; z-index: 1 !important; } #design_content_id3 .develop-card-img { width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; display: block !important; height: auto !important; border-radius: 0 !important; } #design_content_id3 .develop-card-body { padding: 20px 20px 20px 24px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; position: relative !important; z-index: 1 !important; } #design_content_id3 .develop-card-title { font-size: 15px !important; font-weight: 600 !important; color: #003070 !important; letter-spacing: 0.04em !important; margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(0,48,112,0.12) !important; border-left: none !important; padding-left: 0 !important; line-height: 1.5 !important; } #design_content_id3 .develop-card-info { font-size: 12px !important; line-height: 1.9 !important; color: #666 !important; } @media (max-width: 991px) { #design_content_id3 .develop-grid { grid-template-columns: 1fr 1fr !important; } #design_content_id3 .develop-section { padding: 0 24px 40px !important; } } @media (max-width: 767px) { #design_content_id3 .develop-grid { grid-template-columns: 1fr !important; max-width: 420px !important; } } /* ── 海外事業 (id4) CSS ── */ #design_content_id4 { --navy: #003070; --gold: #b8975a; --gold-light: #d4b07a; --off-white: #f8f6f2; --mid: #555; --border: rgba(0,48,112,0.12); } #design_content_id4, #design_content_id4 .dc_content, #design_content_id4 .dc_content_inner, #design_content_id4 .section_inner { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } #design_content_id4 .countries-wrap { max-width: 960px !important; margin: 0 auto !important; padding: 0 32px 80px !important; box-sizing: border-box !important; } #design_content_id4 .c-header { display: flex !important; align-items: center !important; position: relative !important; overflow: hidden !important; min-height: 300px !important; padding: 0 !important; border-top: 1px solid var(--border) !important; opacity: 1 !important; transform: none !important; transition: none !important; border-radius: 4px !important; } body.page-template-page-design2 #design_content_id4 .c-header { display: flex !important; align-items: center !important; border-radius: 4px !important; } #design_content_id4 .c-header.in-view { opacity: 1 !important; transform: translateY(0) !important; } #design_content_id4 .c-header-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; z-index: 1 !important; } #design_content_id4 .c-header-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.8s ease !important; } #design_content_id4 .c-header-img:hover img { transform: scale(1.05) !important; } #design_content_id4 .c-header-img::after { content: '' !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 20%, rgba(0,0,0,0.32) 50%, rgba(0,0,0,0.18) 80%, rgba(0,0,0,0) 100%) !important; pointer-events: none !important; z-index: 2 !important; } #design_content_id4 .c-header-num { display: none !important; } #design_content_id4 .c-header-text { position: absolute !important; top: 50% !important; left: 0 !important; width: 100% !important; transform: translateY(-50%) !important; z-index: 2 !important; padding: 0 5% !important; color: #fff !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } #design_content_id4 .c-header-text h2, #design_content_id4 .c-header-text p { display: block !important; line-height: 1.8 !important; white-space: normal !important; word-break: break-word !important; } #design_content_id4 .c-header-en { font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.4em !important; color: #fff !important; text-transform: uppercase !important; margin-bottom: 8px !important; } #design_content_id4 .c-header-ja { font-size: 28px !important; font-weight: 300 !important; color: #fff !important; letter-spacing: 0.08em !important; line-height: 1.4 !important; margin-bottom: 16px !important; } #design_content_id4 .c-header-desc { font-size: 13px !important; font-weight: 300 !important; line-height: 2 !important; color: rgba(255,255,255,0.9) !important; max-width: 460px !important; } #design_content_id4 .cards-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; box-sizing: border-box !important; width: 100% !important; align-items: stretch !important; padding-bottom: 48px !important; } #design_content_id4 .cards-grid.single-col { grid-template-columns: 1fr !important; max-width: 440px !important; } #design_content_id4 .company-card { background: #f8f6f2 !important; border: 1px solid rgba(0,48,112,0.12) !important; border-radius: 0 !important; padding: 24px !important; position: relative !important; overflow: hidden !important; opacity: 1 !important; transform: none !important; transition: none !important; box-shadow: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; flex: unset !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; } #design_content_id4 .company-card.visible { opacity: 1 !important; transform: translateY(0) !important; } #design_content_id4 .company-card:hover { box-shadow: 0 20px 60px rgba(0,48,112,0.10) !important; transform: translateY(-4px) !important; } #design_content_id4 .company-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 3px !important; height: 100% !important; background: #003070 !important; z-index: 1 !important; } #design_content_id4 .card-logo { height: 52px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; display: block !important; margin-bottom: 24px !important; filter: none !important; } #design_content_id4 .card-name { font-size: 17px !important; font-weight: 600 !important; color: #003070 !important; line-height: 1.5 !important; margin-bottom: 20px !important; padding-bottom: 16px !important; border-bottom: 1px solid rgba(0,48,112,0.12) !important; border-left: none !important; letter-spacing: 0.02em !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #design_content_id4 .card-body { font-size: 13.5px !important; line-height: 1.9 !important; color: #555 !important; margin-bottom: 10px !important; } #design_content_id4 .biz-boxes { display: flex !important; flex-direction: column !important; gap: 14px !important; margin-top: 4px !important; } #design_content_id4 .biz-box { padding: 18px 0 !important; background: transparent !important; border: none !important; position: relative !important; } #design_content_id4 .biz-box::before { content: '' !important; display: none !important; } #design_content_id4 .biz-box h4 { font-size: 13px !important; font-weight: 500 !important; color: #003070 !important; letter-spacing: 0.08em !important; margin-bottom: 4px !important; padding: 0 !important; border: none !important; } #design_content_id4 .biz-box p { font-size: 13px !important; line-height: 1.5 !important; color: #555 !important; margin: 0 !important; } #design_content_id4 .project-section { margin-top: 28px !important; padding-top: 24px !important; border-top: 1px solid rgba(0,48,112,0.12) !important; } #design_content_id4 .project-label { font-size: 11px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: #000 !important; margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; } #design_content_id4 .project-label::after { content: '' !important; flex: 1 !important; height: 1px !important; background: rgba(0,48,112,0.12) !important; } #design_content_id4 .project-item { margin-bottom: 24px !important; } #design_content_id4 .project-item:last-child { margin-bottom: 0 !important; } #design_content_id4 .project-title { font-size: 13px !important; font-weight: 500 !important; color: #003070 !important; margin-bottom: 8px !important; line-height: 1.5 !important; border-left: none !important; padding-left: 0 !important; } #design_content_id4 .project-meta { font-size: 12.5px !important; color: #555 !important; line-height: 1.8 !important; margin-bottom: 12px !important; text-wrap: balance !important; word-break: keep-all !important; } #design_content_id4 .project-images { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } #design_content_id4 .project-images img { width: 100% !important; aspect-ratio: 4/3 !important; object-fit: cover !important; display: block !important; height: auto !important; border-radius: 0 !important; } #design_content_id4 .kh-projects { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto 1fr !important; gap: 6px 8px !important; align-items: end !important; } #design_content_id4 .kh-projects .project-title { align-self: end !important; } #design_content_id4 .kh-projects .project-meta { align-self: start !important; } #design_content_id4 .staff-photo { margin-top: 20px !important; } #design_content_id4 .staff-photo img { width: 100% !important; height: 220px !important; object-fit: cover !important; object-position: center 20% !important; display: block !important; } /* 写真差し替え予定：外観・断面図を非表示（枠のみ残す） */ #design_content_id4 .project-images img[alt="外観"], #design_content_id4 .project-images img[alt="断面図"] { visibility: hidden !important; background: #f0f0f0 !important; border: 2px dashed #ccc !important; } body.page-template-page-design2 #design_content_id4 .c-header-text { position: absolute !important; top: 50% !important; left: 0 !important; width: 100% !important; transform: translateY(-50%) !important; z-index: 2 !important; padding: 0 5% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; box-sizing: border-box !important; } @media (max-width: 991px) { #design_content_id4 .c-header { min-height: 220px !important; padding: 0 !important; } #design_content_id4 .c-header-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; } #design_content_id4 .c-header-text { padding: 20px !important; width: 100% !important; box-sizing: border-box !important; } body.page-template-page-design2 #design_content_id4 .c-header-text { padding: 20px !important; } #design_content_id4 .c-header-ja { font-size: 22px !important; } #design_content_id4 .c-header-en { font-size: 11px !important; } #design_content_id4 .cards-grid { grid-template-columns: 1fr !important; } /* シンガポール mobile fix — spec (1,4,1) beats style.css (1,1,1) */ } /* ===== タブレット追加修正 (768px〜1024px) ===== */ @media (min-width: 768px) and (max-width: 1199px) { /* Fix 3: アメリカのテキスト重なり解消 */ #design_content_id4 .c-header:last-child .c-header-text { left: 24px !important; right: 24px !important; width: auto !important; max-width: 60% !important; } #design_content_id4 .c-header:last-child .c-header-text .c-header-en, #design_content_id4 .c-header:last-child .c-header-text .c-header-ja, #design_content_id4 .c-header:last-child .c-header-text .c-header-desc { position: static !important; transform: none !important; } /* Fix 4: LLM画像を横2列に */ #design_content_id4 .staff-photo { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* Fix 5 removed by Group F 2026-04-27 - footer banner restored to default 348px × 2 */ } .project-image { width: 100% !important; height: auto !important; object-fit: cover !important; } .card-body { text-align: left !important; } #design_content_id1 .regen-intro p { text-align: left !important; } #design_content_id2 .invest-intro p, #design_content_id3 .develop-intro p { text-align: left !important; } /* ============================================================================= * 追加: 旧 forceStyles() がJSで付けていたモバイル余白（CSS化） * ============================================================================= */ @media (max-width: 768px) { .page-template-page-design2 #design_content_id1, .page-template-page-design2 #design_content_id2, .page-template-page-design2 #design_content_id3, .page-template-page-design2 #design_content_id4 { padding-top: 40px !important; padding-bottom: 40px !important; margin-top: 0 !important; } } /* ============================================================================= * 追加: functions.php がインラインで出していたWORKS関連CSS（CSS化） * - #design_content_id4 の padding-bottom 除去（旧 wp_footer Fix v2 のCSS版） * - Singapore .c-header-en 黒文字（旧 inline color 上書きの最終形） * ============================================================================= */ .page-template-page-design2 #design_content_id4 { padding-bottom: 0 !important; } /* === FOUC fix v2: EN WORKS (page-id-1085) Real Estate Revitalization セクション全体を初期非表示→JS完了で表示 === 旧approach(部分display:none)は空箱ポップインが残るため、セクション全体をopacity:0で隠し、 init()完了時に body.regen-ready を付与して即フェードイン表示する。 フェイルセーフ: staging-works.js の setTimeout で約2秒後に必ず表示し永久空白を防止。 （当サイトは全要素 animation !important 無効化のためCSSアニメ方式は不可。2026-06-17 v3更新） 2026-06-17 更新 */ body.page-id-1085 #design_content_id1 { opacity: 0; } body.page-id-1085.regen-ready #design_content_id1 { opacity: 1; transition: opacity .25s ease; }