に付けるため、 `body.home` セレクタは match しない。`.home` (class only) で指定すること。 */ .home#body_wrap, body, html { overflow-x: clip; } body, .home#body_wrap { background: #ffffff !important; } /* ---- SWELL親コンテナの背景を透明化 ---- */ .home #content, .home #main_content, .home .l-content, .home .l-mainContent, .home main, .home article, .home .post_content, .home .p-articleThumb, .home .c-pageTitle, .home .p-breadcrumb { background: transparent !important; } /* ---- SWELLヘッダーのドロップシャドウ/ボーダー打ち消し ---- */ .home .l-header, .home #header, .home header.l-header, .home .l-header__inner { box-shadow: none !important; border-bottom: none !important; filter: none !important; } .home .l-header::after, .home .l-header::before { display: none !important; content: none !important; } /* ---- home: パンくず帯を完全非表示 ---- */ .home .p-breadcrumb, .home .c-breadcrumb, .home .p-breadcrumbList, .home .breadcrumb, .home [class*="breadcrumb"], .home [class*="Breadcrumb"] { display: none !important; } /* ---- home: 本文ラッパーの上下余白を完全殺し ---- 重要: SWELLは WordPress の body_class をではなく

に付ける。したがって `body.home ...` では刺さらない。`.home ...` か `#body_wrap.home ...` を使うこと。 SWELL親テーマが vertical spacing を注入する箇所: - .l-content { padding-top: 4em; margin: 0 auto 6em } - .top #content { padding-top: 4em } - .l-mainContent__inner > .post_content { margin: 4em 0 } */ .home #content, .top #content, .home #content.l-content, .home .l-content, .home #main_content, .home main.l-mainContent, .home .l-mainContent, .home .l-mainContent__inner, .home .l-mainContent__inner > .post_content, .home .post_content, .home main, .home article { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ---- フルブリード: SWELL親コンテナから突き抜けてviewport全幅を確保 ---- これで .hubride-fv / .hubride-section が左右端まで広がり、親コンテナとの背景色差や幅の制限が解消される。 */ .hubride-fv, .hubride-section { width: 100vw; max-width: 100vw; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; } /* ---- SWELL親テーマの見出しデフォルトを無効化 ---- SWELLは記事本文の h2/h3 に背景色・ボーダー・飾り罫を自動適用するため、 HUBRIDEセクション内では完全にフラット化する。 */ .hubride-section h2, .hubride-section h3, .hubride-section h4 { background: none !important; border: none !important; padding: 0 !important; box-shadow: none !important; color: inherit !important; } .hubride-section h2::before, .hubride-section h2::after, .hubride-section h3::before, .hubride-section h3::after, .hubride-section h4::before, .hubride-section h4::after { display: none !important; content: none !important; background: none !important; border: none !important; } /* ---- ruby の読みは非表示（デザイン上不要）---- */ .hubride-section rt, .hubride-split rt, .hubride-cta-block rt { display: none; } /* ---- 共通スクロールリビール ---- */ .hubride-reveal { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hubride-reveal { opacity: 1; transform: none; transition: none; } } /* ---- 共通セクションラッパ ---- */ .hubride-section { padding: 6rem 1.5rem; color: var(--hb-text); } .hubride-section--alt { background: var(--hb-bg-alt); } .hubride-section__inner { max-width: 1040px; margin: 0 auto; } .hubride-section__label { font-family: var(--hb-sans); font-size: 0.85rem; letter-spacing: 0.2em; color: #999; margin: 0 0 0.6rem; text-align: center; text-transform: uppercase; opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; } .is-revealed .hubride-section__label { opacity: 1; transform: translateY(0); transition-delay: 0s; } /* 詳細度 (0,2,0)=20 に引き上げてSWELLの .post_content h2 (0,1,1)=11 を上書き */ .hubride-section .hubride-section__title { font-family: var(--hb-sans); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.9rem); letter-spacing: 0.04em; text-align: center; margin: 0 0 3rem; line-height: 1.5; opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; } .is-revealed .hubride-section__title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .hubride-section__lead { text-align: center; font-size: 0.95rem; line-height: 2; color: var(--hb-text-sub); margin: -1.5rem 0 3rem; opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; } .is-revealed .hubride-section__lead { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } /* ---- 共通コンテンツフェードイン ---- ラベル(0s) → タイトル(0.2s) → コンテンツ(0.4s) の順で段階表示 */ .hubride-split__label, .hubride-split__title { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; } .is-revealed .hubride-split__label { opacity: 1; transform: translateY(0); transition-delay: 0s; } .is-revealed .hubride-split__title { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .hubride-split__text, .hubride-split__more, .hubride-stats__grid, .hubride-reasons__grid, .hubride-services__grid, .hubride-voices__marquee, .hubride-blog__grid, .hubride-cta-block__text, .hubride-cta-block__buttons { opacity: 0; transform: translateY(16px); transition: opacity 0.8s ease, transform 0.8s ease; } .is-revealed .hubride-split__text, .is-revealed .hubride-split__more, .is-revealed .hubride-stats__grid, .is-revealed .hubride-reasons__grid, .is-revealed .hubride-services__grid, .is-revealed .hubride-voices__marquee, .is-revealed .hubride-blog__grid, .is-revealed .hubride-cta-block__text { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .is-revealed .hubride-cta-block__buttons { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } /* Split メディア（画像・動画）: 右 or 左からスライドイン */ .hubride-split__media { opacity: 0; transform: translateX(30px); transition: opacity 0.9s ease, transform 0.9s ease; } .hubride-split--image-left .hubride-split__media { transform: translateX(-30px); } .is-revealed .hubride-split__media { opacity: 1; transform: translateX(0); transition-delay: 0.3s; } /* サービスカード: 1枚ずつ遅延 */ .hubride-service { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease; } .is-revealed .hubride-service:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .is-revealed .hubride-service:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } .is-revealed .hubride-service:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } .is-revealed .hubride-service:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; } /* Reasonカード: 1枚ずつ遅延 */ .hubride-reason { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .is-revealed .hubride-reason:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } .is-revealed .hubride-reason:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } .is-revealed .hubride-reason:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } /* prefers-reduced-motion: 全エフェクト無効化 */ @media (prefers-reduced-motion: reduce) { .hubride-split__label, .hubride-split__title, .hubride-split__text, .hubride-split__more, .hubride-split__media, .hubride-stats__grid, .hubride-reasons__grid, .hubride-services__grid, .hubride-voices__marquee, .hubride-blog__grid, .hubride-cta-block__text, .hubride-cta-block__buttons, .hubride-service, .hubride-reason { opacity: 1; transform: none; transition: none; } } .hubride-link { font-family: var(--hb-sans); color: var(--hb-text); text-decoration: none; letter-spacing: 0.08em; border-bottom: 1px solid var(--hb-text); padding-bottom: 2px; transition: opacity 0.3s ease; } .hubride-link:hover { opacity: 0.6; } /* ============================================================ 2. 提供実績 (Stats) ============================================================ */ .hubride-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); margin-top: 3rem; overflow: hidden; } .hubride-stats__item { text-align: center; padding: 2rem 1rem; min-height: 10rem; min-width: 0; overflow: hidden; } .hubride-stats__number { font-family: var(--hb-sans); font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 7rem); font-style: italic; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-indent: -0.08em; line-height: 1.1; color: #f7f7f7; -webkit-text-stroke: 3px var(--hb-text); paint-order: stroke fill; white-space: nowrap; opacity: 0; transform: translateY(20px); transition: opacity 1.4s ease, transform 1.4s ease; } .hubride-stats__suffix { font-size: 0.33em; font-weight: 400; margin-left: 0.05em; color: var(--hb-text); -webkit-text-stroke: 0; letter-spacing: 0; } .hubride-stats__number.is-visible { opacity: 1; transform: translateY(0); } .hubride-stats__label { margin-top: 0.8rem; font-family: var(--hb-sans); font-size: clamp(0.95rem, 1.2vw, 1.3rem); font-weight: 500; line-height: 2; color: var(--hb-text-sub); letter-spacing: 0.1em; } .hubride-stats__note-inline { font-size: 0.3em !important; font-weight: 400 !important; color: #999 !important; letter-spacing: 0.05em !important; margin-left: 0.5em; vertical-align: baseline; } /* ============================================================ 3. ストーリー (Story) — sumu-hotel 風 split レイアウト ============================================================ */ .hubride-story, .hubride-services, .hubride-blog { background: transparent; position: relative; } .hubride-story::before, .hubride-services::before, .hubride-blog::before { content: ""; position: absolute; top: 0; left: 5%; right: 5%; bottom: 0; background: var(--hb-bg-alt); border-radius: 24px; z-index: 0; } .hubride-story > *, .hubride-services > *, .hubride-blog > * { position: relative; z-index: 1; } /* ============================================================ Split layout (左右非対称2カラム / image + text) sumu-hotel 参考: grid-template-columns 0.75fr 1.25fr ============================================================ */ .hubride-split { display: grid; gap: 3rem; align-items: center; max-width: 1200px; margin: 0 auto; } .hubride-split--image-right { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .hubride-split--image-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .hubride-split__media { position: relative; aspect-ratio: 4 / 3; background: #ebe9e3; border-radius: var(--hb-radius-lg); overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } .hubride-split__media img, .hubride-split__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .hubride-split__media img { transform: scale(1); transition: transform 12s ease-out; } .is-revealed .hubride-split__media img { transform: scale(1.08); } .hubride-split__media-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #aaa; font-family: var(--hb-sans); font-size: 0.85rem; letter-spacing: 0.08em; } .hubride-split__body { padding: 0 1rem; } .hubride-split__label { font-family: var(--hb-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; color: #999; text-transform: uppercase; margin: 0 0 1.2rem; } .hubride-split .hubride-split__title { font-family: var(--hb-sans); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.6; letter-spacing: 0.04em; margin: 0 0 1.6rem; color: var(--hb-text); } .hubride-split__text { font-family: var(--hb-sans); font-size: 0.95rem; font-weight: 500; line-height: 2; color: var(--hb-text-sub); margin: 0 0 2rem; } .hubride-split__more { margin-top: 1.5rem; } /* メディア取材セクション — 縦長動画対応 */ .hubride-media .hubride-split { grid-template-columns: 2fr 1fr; } .hubride-media .hubride-split__media { aspect-ratio: 9 / 16; max-height: 900px; } /* ---- Background marquee text (About HUBRIDE) ---- */ .hubride-about { overflow: hidden; position: relative; } .hubride-marquee { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; } .hubride-marquee__track { display: flex; white-space: nowrap; animation: hubride-marquee-scroll 12s linear infinite !important; will-change: transform; backface-visibility: hidden; } .hubride-marquee__img { height: 25rem; width: 125rem; flex-shrink: 0; display: block; opacity: 0.5; background-image: url('../img/hubride-text-slide.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; } @keyframes hubride-marquee-scroll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .hubride-about .hubride-section__inner { position: relative; z-index: 1; } /* ============================================================ 4. 選ばれる理由 (Reasons) ============================================================ */ .hubride-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .hubride-reason { padding: 5rem 1.5rem 2rem; text-align: center; border-top: 1px solid var(--hb-border); } .hubride-reason__num { display: block; font-family: var(--hb-sans); font-size: clamp(1.8rem, 2.5vw, 2.8rem); font-weight: 400; letter-spacing: 0.05em; color: var(--hb-text); margin-bottom: 1rem; } .hubride-reason .hubride-reason__title { font-family: var(--hb-sans); font-weight: 500; font-size: clamp(0.9rem, 1.4vw, 1.6rem); letter-spacing: 0.05em; line-height: 1.6; margin: 2rem 0 1rem; } .hubride-reason__text { font-family: var(--hb-sans); font-size: 0.95rem; font-weight: 500; line-height: 2; color: var(--hb-text-sub); margin: 0; text-align: left; } .hubride-reasons__more { margin-top: 3rem; text-align: center; } /* ============================================================ 5. サービス (Services) ============================================================ */ .hubride-stats .hubride-section__inner, .hubride-media .hubride-section__inner, .hubride-story .hubride-section__inner, .hubride-reasons .hubride-section__inner, .hubride-about .hubride-section__inner, .hubride-services .hubride-section__inner, .hubride-voices .hubride-section__inner, .hubride-blog .hubride-section__inner, .hubride-cta-block .hubride-section__inner { max-width: none !important; padding: 0 7% !important; } .hubride-story .hubride-split, .hubride-media .hubride-split, .hubride-about .hubride-split { max-width: none; } .hubride-story .hubride-split__label, .hubride-media .hubride-split__label, .hubride-about .hubride-split__label, .hubride-reasons .hubride-section__label, .hubride-voices .hubride-section__label, .hubride-blog .hubride-section__label, .hubride-services .hubride-section__label { font-size: clamp(0.8rem, 1vw, 1.1rem); } .hubride-stats .hubride-section__title, .hubride-story .hubride-split__title, .hubride-media .hubride-split__title, .hubride-about .hubride-split__title, .hubride-reasons .hubride-section__title, .hubride-voices .hubride-section__title, .hubride-blog .hubride-section__title, .hubride-services .hubride-section__title { font-size: clamp(1.4rem, 2.5vw, 2.8rem) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; line-height: 1.6 !important; } .hubride-story .hubride-split__text, .hubride-media .hubride-split__text, .hubride-about .hubride-split__text, .hubride-reasons .hubride-reason__text { font-size: clamp(0.95rem, 1.2vw, 1.3rem); } .hubride-services { scroll-margin-top: 80px; } .hubride-services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3rem; } .hubride-service { display: flex; flex-direction: column; padding: 2rem 1.5rem; background: #ffffff; border: 1px solid var(--hb-border); border-radius: var(--hb-radius); text-decoration: none; color: var(--hb-text); position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; } .hubride-service:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); } .hubride-service__kicker { display: block; font-family: var(--hb-sans); font-size: 0.8rem; letter-spacing: 0.2em; color: #999; margin-bottom: 1rem; } .hubride-service--retail .hubride-service__kicker { color: var(--hb-retail); } .hubride-service--dent .hubride-service__kicker { color: var(--hb-dent); } .hubride-service--coating .hubride-service__kicker { color: var(--hb-coating); } .hubride-service--purchase .hubride-service__kicker { color: var(--hb-purchase); } .hubride-service .hubride-service__title { font-family: var(--hb-sans); font-weight: 500; font-size: clamp(0.9rem, 1.4vw, 1.6rem); letter-spacing: 0.05em; line-height: 1.6; margin: 0 0 1rem; white-space: nowrap; } .hubride-service__text { font-family: var(--hb-sans); font-size: clamp(0.85rem, 1vw, 1.3rem); font-weight: 500; line-height: 2; color: var(--hb-text-sub); margin: 0 0 1.6rem; flex: 1; } .hubride-service__arrow { display: inline-block; font-family: var(--hb-sans); font-size: 0.9rem; letter-spacing: 0.1em; border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-top: auto; align-self: flex-end; } /* ============================================================ 6. お客様の声 (Voices) ============================================================ */ /* ---- Voice Slider ---- */ .hubride-voices__slider { position: relative; margin: 3rem auto 0; overflow: hidden; padding: 0 3rem; } .hubride-voices__track { display: flex; gap: 1.5rem; will-change: transform; touch-action: pan-y; } .hubride-voices__swipe-hint { display: none; } .hubride-voices__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .hubride-voices__arrow--prev { left: 0; } .hubride-voices__arrow--next { right: 0; } .hubride-voices__track .hubride-voice { flex: 0 0 calc(50% - 0.75rem); min-width: 280px; transition: transform 0.5s ease, opacity 0.5s ease; } .hubride-voices__arrow { flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--hb-border); border-radius: 50%; background: #fff; color: var(--hb-text); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, border-color 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .hubride-voices__arrow:hover { background: var(--hb-bg-alt); border-color: var(--hb-text); } @media (max-width: 820px) { .hubride-marquee__track { animation-duration: 6s !important; } .hubride-voices__track .hubride-voice { flex: 0 0 100%; min-width: 0; } .hubride-voices__slider { padding: 0; overflow: hidden; } .hubride-voices__arrow { display: none !important; } .hubride-voices__swipe-hint { display: none !important; } .hubride-voices .hubride-section__inner { margin-left: -0.75rem; margin-right: -0.75rem; } .hubride-voice { padding: 2rem 1.25rem; } } .hubride-voice { background: var(--hb-bg-alt); padding: 2.5rem 2rem; border-radius: var(--hb-radius); position: relative; } .hubride-voice__meta { font-size: clamp(0.8rem, 0.9vw, 1rem); letter-spacing: 0.08em; color: #999; margin: 0 0 1rem; } .hubride-voice .hubride-voice__title { font-family: var(--hb-sans); font-weight: 700; font-size: clamp(1.1rem, 1.3vw, 1.5rem); line-height: 2; letter-spacing: 0.06em; margin: 0 0 1rem; } .hubride-voice__text { font-family: var(--hb-sans); font-size: clamp(0.9rem, 1.1vw, 1.3rem); font-weight: 500; line-height: 2; color: var(--hb-text-sub); margin: 0 0 2rem; } .hubride-voices__more { margin-top: 3rem; text-align: center; } /* ============================================================ 7. 新着記事 (Blog) ============================================================ */ .hubride-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; } .hubride-blog__card { display: block; text-decoration: none; color: var(--hb-text); transition: opacity 0.3s ease; } .hubride-blog__card:hover { opacity: 0.75; } .hubride-blog__thumb { display: block; aspect-ratio: 16 / 10; background: #e8e8e6; overflow: hidden; border-radius: var(--hb-radius); margin-bottom: 1rem; } .hubride-blog__thumb-img, .hubride-blog__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .hubride-blog__card:hover .hubride-blog__thumb-img, .hubride-blog__card:hover .hubride-blog__thumb img { transform: scale(1.04); } .hubride-blog__cat { display: inline-block; font-size: clamp(0.7rem, 0.8vw, 0.95rem); letter-spacing: 0.1em; color: #999; margin-bottom: 0.4rem; } .hubride-blog__card .hubride-blog__title { font-family: var(--hb-sans); font-weight: 700; font-size: clamp(1rem, 1.2vw, 1.3rem); line-height: 2; letter-spacing: 0.04em; margin: 0 0 0.4rem; } .hubride-blog__date { font-size: clamp(0.75rem, 0.85vw, 1rem); color: #999; letter-spacing: 0.08em; } .hubride-blog__empty { text-align: center; color: #999; padding: 3rem 0; } .hubride-blog__more { margin-top: 3rem; text-align: center; } /* ============================================================ 8. CTA ブロック ============================================================ */ .hubride-cta-block { text-align: center; background: #ffffff; } .hubride-cta-block .hubride-cta-block__title { font-family: var(--hb-sans); font-weight: 700; font-size: clamp(1.4rem, 2.5vw, 2.8rem); letter-spacing: 0.04em; line-height: 1.6; margin: 0 0 1.2rem; } .hubride-cta-block__text { font-family: var(--hb-sans); font-size: clamp(0.95rem, 1.2vw, 1.3rem); font-weight: 500; line-height: 2; color: var(--hb-text-sub); margin: 0 0 2.4rem; } .hubride-cta-block__buttons { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; } /* WP 自動改行でボタン間に
が挟まると flex-column で巨大スペースになるため抑止 */ .hubride-cta-block__buttons br { display: none; } .hubride-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 1rem 2rem; font-family: var(--hb-sans); font-size: clamp(0.85rem, 1vw, 1rem); font-weight: 600; letter-spacing: 0.08em; text-decoration: none; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 12px rgba(0, 0, 0, 0.06); transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease; } .hubride-btn:hover { transform: none; } /* .hubride-btn バリアントは枠線なしで統一。ghost は背景薄グレーで視認性確保。 */ .hubride-btn--primary { background: rgba(26, 26, 26, 0.85); color: #ffffff; border: none; } .hubride-btn--primary:hover { background: rgba(26, 26, 26, 1); } .hubride-btn--line { background: rgba(6, 199, 85, 0.85); color: #ffffff; border: none; } .hubride-btn--line:hover { background: rgba(6, 199, 85, 1); } .hubride-btn--ghost { background: var(--hb-bg-alt, #f7f7f7); color: #1a1a1a; border: none; } .hubride-btn--ghost:hover { background: #ececec; } /* ============================================================ スマホ調整 ============================================================ */ @media (max-width: 1280px) { .hubride-services__grid { grid-template-columns: repeat(2, 1fr); } .hubride-stats .hubride-section__inner, .hubride-media .hubride-section__inner, .hubride-story .hubride-section__inner, .hubride-reasons .hubride-section__inner, .hubride-about .hubride-section__inner, .hubride-services .hubride-section__inner, .hubride-voices .hubride-section__inner, .hubride-blog .hubride-section__inner, .hubride-cta-block .hubride-section__inner { max-width: 1040px; padding: 0; } } /* PC 時は SP用改行
を非表示にして1行表示 */ @media (min-width: 821px) { .hubride-sp-br { display: none; } } @media (max-width: 820px) { .hubride-section { padding: 3rem 1.25rem 4.5rem; } /* SP: Achievements（.hubride-stats）だけ上余白を広めにとる */ .hubride-stats { padding-top: 5.5rem; } /* SP: Media（.hubride-media）は上余白を狭く */ .hubride-media { padding-top: 1.5rem; } /* SP: 中央寄せの本文・リード系は inline-block + text-align:left で「ブロック位置は中央／テキストは左寄せ」のハイブリッド。複数行改行時の左端が揃ってバラつき感が無くなる。全 HUBRIDE ページ共通ルール。 ※ セクションタイトル（.hubride-section__title / .hubride-hero__title / .hubride-cta-block__title）は中央寄せを維持する。 */ .hubride-section__lead, .hubride-hero__lead, .hubride-split__text, .hubride-reason__text, .hubride-feature__text, .hubride-story__body p, .hubride-voice__text, .hubride-vehicle-type__desc, .hubride-cta-block__text, .hubride-intro__body { display: inline-block; text-align: left; max-width: 100%; } .hubride-section__title { margin-bottom: 2rem; } /* SP: セクションタイトルは和文単位で賢く折り返し（"つ" と "なぐ" で分割されるのを防止） */ .hubride-section__title, .hubride-services .hubride-section__title, .hubride-reasons .hubride-section__title, .hubride-voices .hubride-section__title, .hubride-blog .hubride-section__title { word-break: keep-all; overflow-wrap: normal; } /* SP 用の任意改行：PC では hidden（下で上書き） */ .hubride-sp-br { display: inline; } /* SP: サービス/リーズンのカード内タイトルを大きく（統一スタイル） */ .hubride-service .hubride-service__title, .hubride-reason .hubride-reason__title { font-size: 1.25rem; white-space: normal; } .hubride-stats__grid { grid-template-columns: 1fr; gap: 1.5rem; } .hubride-stats__number { font-size: clamp(4rem, 18vw, 8rem); } .hubride-reasons__grid, .hubride-blog__grid, .hubride-services__grid { grid-template-columns: 1fr; gap: 1.5rem; } .hubride-media .hubride-split__media { margin: 0 auto; max-width: 100%; width: 100%; } .hubride-service { padding: 2rem 1.5rem; } .hubride-btn { min-width: 0; width: 100%; } .hubride-cta-block__buttons { flex-direction: column; } /* Split レイアウトは mobile で 1カラムスタック（image 先 → text 後） */ .hubride-split, .hubride-split--image-left, .hubride-split--image-right, .hubride-media .hubride-split { grid-template-columns: 1fr; gap: 2rem; } .hubride-split__body { padding: 0; } /* MEDIA本文: PC では
で意図的に改行してるが SP では自然折り返しに任せる br は置換元素なので !important + 広めのセレクタで確実に無効化 */ .hubride-media br, .hubride-media p br, .hubride-media .hubride-split__body br, .hubride-media .hubride-split__text br { display: none !important; } } /* 480px 以下の専用ルールは廃止（820px で 1 カラム化済み） */