@charset "UTF-8"; /* ========================================================================== Template: 民泊運営代行 (インビックス) v3 - Soft Blue Edition File: page-minpaku-unei-daiko.css Theme: SWELL Child ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+Antique:wght@400;500;700;900&family=Inter:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* ========================================================================== WordPress構造リセット（SWELL親テーマのコンテナを無効化）重要: SWELL は body_class() をではなく

に出力するため、 selector は `#body_wrap.mu-page` を起点にする必要がある。 SWELLの DOM 構造:

← 非表示化
← 非表示化

← 当テンプレート ========================================================================== / html, body { overflow-x: clip !important; / sticky を壊さずに横スクロールだけ防ぐ / } / SWELL ページタイトルのみ非表示（パンくずは表示する） / #body_wrap.mu-page .c-pageTitle { display: none !important; } / SWELL ページコンテンツ領域のみを全幅化（ヘッダー・パンくずの .l-container は触らない） / #body_wrap.mu-page #content, #body_wrap.mu-page #main_content, #body_wrap.mu-page .l-mainContent, #body_wrap.mu-page .l-mainContent__inner, #body_wrap.mu-page .l-article, #body_wrap.mu-page .post_content, #body_wrap.mu-page .entry-content, #body_wrap.mu-page main.mu-page { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } / post_content の上下余白のみ除去（ヒーローがパンくず直下に自然につながる） / #body_wrap.mu-page .post_content { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } / 最終 CTA とフッターの間の不要な余白を除去 / #body_wrap.mu-page .l-mainContent__inner, #body_wrap.mu-page #main_content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #body_wrap.mu-page main.mu-page { margin-bottom: 0 !important; } / SWELL footer.php が出力する下部パンくず・before_footer ウィジェットを非表示 body_wrap の直下（#content の外）にある要素を狙う / #body_wrap.mu-page > #before_footer_widget, #body_wrap.mu-page > .w-beforeFooter, #body_wrap.mu-page > #breadcrumb, #body_wrap.mu-page > .p-breadcrumb, #body_wrap.mu-page #content ~ #breadcrumb, #body_wrap.mu-page #content ~ #before_footer_widget, #body_wrap.mu-page #content ~ .w-beforeFooter, #body_wrap.mu-page #content ~ .p-breadcrumb { display: none !important; } / フッター自体の上マージンも除去 / #body_wrap.mu-page #footer, #body_wrap.mu-page #footer.l-footer, #body_wrap.mu-page .l-footer { margin-top: 0 !important; padding-top: 0 !important; } / ========================================================================== VARIABLES & BASE ========================================================================== / main.mu-page { background: var(--u-cream); } .mu-page { / Blue palette (logo-based) / --u-blue-deep: #1a4b8c; --u-blue-main: #2d6bb8; --u-blue-mid: #4ba3d9; --u-blue-light: #7bc4e8; --u-blue-pale: #b8dcf0; --u-blue-mist: #F0F5FA; / Accent / --u-gold: #d4b87a; --u-gold-light: #e8d9b5; --u-gold-pale: #f5efde; / Neutral / --u-cream: #FEFBF3; --u-cream-blue: #F0F5FA; --u-cream-deep: #F0F5FA; --u-white: #ffffff; / Text / --u-text-dark: #2d3b52; --u-text-dark-2: #5a6b82; --u-text-dark-3: #8594a8; --u-text-light: rgba(255, 255, 255, 0.96); --u-text-light-2: rgba(255, 255, 255, 0.75); --u-text-light-3: rgba(255, 255, 255, 0.55); / Shadows (blue-tinted, soft) / --u-shadow-sm: 0 4px 12px rgba(26, 75, 140, 0.06); --u-shadow-md: 0 10px 30px rgba(26, 75, 140, 0.08); --u-shadow-lg: 0 20px 50px rgba(26, 75, 140, 0.12); --u-shadow-xl: 0 30px 70px rgba(26, 75, 140, 0.15); --u-shadow-blue: 0 15px 40px rgba(75, 163, 217, 0.25); / Fonts - Google Fonts (ゴシック系で統一) / --u-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif; --u-font-serif: "Zen Kaku Gothic Antique", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif; --u-font-en: "Inter", "Helvetica Neue", Arial, sans-serif; / Easing - softer / --u-ease: cubic-bezier(0.33, 1, 0.68, 1); --u-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --u-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--u-font-sans); color: var(--u-text-dark); line-height: 1.85; font-feature-settings: "palt"; font-weight: 400; font-size: 16px; } .mu-page { box-sizing: border-box; } .mu-page a { color: inherit; text-decoration: none; transition: color 0.4s var(--u-ease); } .mu-page .sp-only { display: none; } .mu-page .pc-only { display: inline; } @media (max-width: 820px) { .mu-page .sp-only { display: inline; } .mu-page .pc-only { display: none; } } /* ========================================================================== CONTAINER ========================================================================== / .mu-page .mu-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; } .mu-page .mu-container-narrow { max-width: 900px; } @media (max-width: 820px) { .mu-page .mu-container { padding: 0 20px; } } / ========================================================================== SECTION HEAD ========================================================================== / .mu-page .mu-section-head { text-align: center; margin-bottom: 70px; position: relative; z-index: 2; padding-top: 2.5em; / 絶対位置の .mu-title-mark 用のスペース / } .mu-page .mu-eyebrow { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 24px; } .mu-page .mu-eyebrow-line { display: inline-block; width: 40px; height: 1px; background: var(--u-blue-mid); border-radius: 2px; } .mu-page .mu-eyebrow-en { font-family: var(--u-font-en); font-style: italic; font-size: 0.88rem; letter-spacing: 0.3em; color: var(--u-blue-main); font-weight: 500; } .mu-page .mu-section-title { font-family: var(--u-font-serif); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.6; letter-spacing: 0.03em; margin: 0 0 22px; color: var(--u-text-dark); display: inline-block; } .mu-page .mu-section-head-dark .mu-section-title { color: var(--u-text-light); } .mu-page .mu-section-head-dark .mu-section-lead { color: var(--u-text-light-2); } .mu-page .mu-section-head .mu-section-title .mu-title-mark, .mu-page .mu-title-mark { position: absolute !important; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; display: block; font-family: var(--u-font-en); font-style: italic; font-size: 1rem; letter-spacing: 0.25em; color: var(--u-blue-mid); margin: 0 !important; opacity: 0.85; font-weight: 500; white-space: nowrap; } .mu-page .mu-section-head-dark .mu-title-mark { color: var(--u-blue-light); } .mu-page .mu-section-title em { font-style: normal; color: var(--u-blue-main); font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(123, 196, 232, 0.35) 65%); padding: 0 4px; } .mu-page .mu-section-head-dark .mu-section-title em { color: var(--u-blue-light); background: linear-gradient(180deg, transparent 65%, rgba(26, 75, 140, 0.5) 65%); } .mu-page .mu-section-lead { font-size: 1rem; line-height: 2.1; max-width: 720px; margin: 0 auto; color: var(--u-text-dark-2); } @media (max-width: 820px) { .mu-page .mu-section-head { margin-bottom: 48px; } } @media (max-width: 600px) { / SPでは改行しやすいリード文を左寄せに / .mu-page .mu-section-lead { text-align: left; } } / ========================================================================== FIXED CTA (Desktop Right Sidebar) ========================================================================== / .mu-page .mu-fixed-cta { position: fixed; top: 50%; right: 0; transform: translateY(-50%) translateX(100%); z-index: 100; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--u-ease), transform 0.6s var(--u-ease), visibility 0s 0.6s; } .mu-page .mu-fixed-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); transition: opacity 0.6s var(--u-ease), transform 0.6s var(--u-ease); } .mu-page .mu-fixed-cta-phone, .mu-page .mu-fixed-cta-mail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 82px; padding: 16px 10px; text-decoration: none; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.4; text-align: center; border-radius: 18px 0 0 18px; transition: all 0.4s var(--u-ease); } .mu-page .mu-fixed-cta-phone { background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); box-shadow: -4px 6px 20px rgba(26, 75, 140, 0.2); } .mu-page .mu-fixed-cta-phone:hover { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); color: var(--u-white); width: 90px; } .mu-page .mu-fixed-cta-mail { background: var(--u-white); color: var(--u-blue-main); border: 1px solid var(--u-blue-pale); border-right: none; box-shadow: -4px 6px 20px rgba(26, 75, 140, 0.1); } .mu-page .mu-fixed-cta-mail:hover { background: var(--u-cream-blue); color: var(--u-blue-deep); width: 90px; } @media (max-width: 1100px) { .mu-page .mu-fixed-cta { display: none; } } / ========================================================================== FIXED CTA (Mobile Bottom) ========================================================================== / .mu-page .mu-sp-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100; display: flex; gap: 8px; transform: translateY(calc(100% + 20px)); transition: transform 0.5s var(--u-ease); } .mu-page .mu-sp-cta.is-visible { transform: translateY(0); } .mu-page .mu-sp-cta-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; font-size: 0.875rem; font-weight: 700; text-decoration: none; letter-spacing: 0.05em; border-radius: 16px; box-shadow: 0 8px 24px rgba(26, 75, 140, 0.2); } .mu-page .mu-sp-cta-phone { background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); } .mu-page .mu-sp-cta-mail { background: var(--u-white); color: var(--u-blue-main); border: 1px solid var(--u-blue-pale); } @media (min-width: 1101px) { .mu-page .mu-sp-cta { display: none; } } / ========================================================================== HERO - Soft Blue Gradient ========================================================================== / .mu-page .mu-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 900px; padding: 40px 0 40px; background: linear-gradient(180deg, #e8f1fa 0%, #d3e6f4 50%, #c5dcec 100%); color: var(--u-text-dark); overflow: hidden; display: flex; align-items: flex-start; padding-top: 12vh; } / 背景写真（右側に配置、写真の雰囲気を活かす） / .mu-page .mu-hero::before { content: ""; position: absolute; inset: 0; background: url('../img/minpaku_daiko/hero.png') center right / cover no-repeat; opacity: 0.7; z-index: 0; pointer-events: none; } / 青グラデで左側（テキスト領域）の可読性を確保しつつ、右側の写真を残す / .mu-page .mu-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(232, 241, 250, 0.96) 0%, rgba(232, 241, 250, 0.88) 30%, rgba(211, 230, 244, 0.45) 60%, rgba(197, 220, 236, 0.15) 100%); z-index: 0; pointer-events: none; } @media (max-width: 900px) { / モバイルではテキスト全体に薄めのオーバーレイ / .mu-page .mu-hero::before { background-position: center; opacity: 0.35; } .mu-page .mu-hero::after { background: linear-gradient(180deg, rgba(232, 241, 250, 0.9) 0%, rgba(232, 241, 250, 0.75) 50%, rgba(211, 230, 244, 0.7) 100%); } } .mu-page .mu-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .mu-page .mu-hero-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; animation: blobFloat 18s var(--u-ease-soft) infinite alternate; } .mu-page .mu-hero-blob-1 { width: 520px; height: 520px; top: -14%; left: -8%; background: radial-gradient(circle, var(--u-blue-light) 0%, transparent 65%); opacity: 0.45; } .mu-page .mu-hero-blob-2 { width: 620px; height: 620px; bottom: -18%; right: -10%; background: radial-gradient(circle, var(--u-blue-mid) 0%, transparent 65%); animation-delay: -6s; opacity: 0.3; } .mu-page .mu-hero-blob-3 { width: 440px; height: 440px; top: 45%; left: 40%; background: radial-gradient(circle, var(--u-white) 0%, transparent 70%); animation-delay: -12s; opacity: 0.45; } @keyframes blobFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.1); } 100% { transform: translate(-20px, 40px) scale(0.95); } } .mu-page .mu-hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(26, 75, 140, 0.05) 1px, transparent 0); background-size: 32px 32px; opacity: 0.6; } / ------------------------------------------ 「まるっと」装飾円（Hero rings） ------------------------------------------ / .mu-page .mu-hero-ring { position: absolute; color: var(--u-blue-main); pointer-events: none; opacity: 0; animation: ringFadeIn 1.4s var(--u-ease-out) 0.2s forwards; } .mu-page .mu-hero-ring-1 { width: clamp(480px, 55vw, 760px); height: clamp(480px, 55vw, 760px); top: -14%; right: -12%; color: var(--u-blue-main); opacity: 0; animation: ringFadeIn 1.6s var(--u-ease-out) 0.2s forwards, ringRotate 80s linear infinite; } .mu-page .mu-hero-ring-2 { width: clamp(280px, 32vw, 460px); height: clamp(280px, 32vw, 460px); bottom: -8%; left: -6%; color: var(--u-blue-light); opacity: 0; animation: ringFadeIn 1.6s var(--u-ease-out) 0.5s forwards, ringFloat 14s var(--u-ease-soft) infinite alternate; } .mu-page .mu-hero-ring-3 { width: clamp(160px, 18vw, 240px); height: clamp(160px, 18vw, 240px); top: 18%; left: 38%; color: var(--u-blue-mid); opacity: 0; animation: ringFadeIn 1.6s var(--u-ease-out) 0.8s forwards, ringRotate 60s linear infinite reverse; } .mu-page .mu-hero-ring-1 circle, .mu-page .mu-hero-ring-3 circle { opacity: 0.6; } .mu-page .mu-hero-ring-2 circle { opacity: 0.35; } @keyframes ringFadeIn { to { opacity: 1; } } @keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ringFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -30px); } } / ------------------------------------------ 回転するバッジ円（NO ROUND badge） ------------------------------------------ / .mu-page .mu-hero-badge-round { position: absolute; top: 12%; right: 5%; width: clamp(130px, 12vw, 170px); height: clamp(130px, 12vw, 170px); z-index: 3; pointer-events: auto; opacity: 0; animation: ringFadeIn 1s var(--u-ease-out) 1.2s forwards; filter: drop-shadow(0 10px 30px rgba(26, 75, 140, 0.15)); } .mu-page .badge-round-svg { width: 100%; height: 100%; animation: ringRotate 22s linear infinite; } .mu-page .badge-round-text { font-family: var(--u-font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.15em; fill: var(--u-blue-deep); } .mu-page .badge-round-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .mu-page .badge-round-label { font-family: var(--u-font-en); font-size: 0.72rem; letter-spacing: 0.25em; color: var(--u-blue-main); font-weight: 500; } .mu-page .badge-round-main { font-family: var(--u-font-serif); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--u-blue-deep); letter-spacing: 0.05em; } @media (max-width: 767px) { .mu-page .mu-hero-badge-round { display: none; } } .mu-page .mu-hero-container { position: relative; z-index: 2; max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 32px; } / Hero top / .mu-page .mu-hero-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; animation: fadeUp 1s var(--u-ease-out) 0.1s both; } .mu-page .mu-hero-breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--u-font-en); font-size: 0.875rem; letter-spacing: 0.25em; color: var(--u-text-dark-3); } .mu-page .mu-hero-breadcrumb .current { color: var(--u-blue-main); } .mu-page .mu-hero-breadcrumb svg { color: var(--u-blue-mid); opacity: 0.6; } .mu-page .mu-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; } .mu-page .mu-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; color: var(--u-blue-deep); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(75, 163, 217, 0.3); border-radius: 100px; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(26, 75, 140, 0.08); } .mu-page .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--u-blue-mid); box-shadow: 0 0 10px var(--u-blue-light); animation: badgePulse 2.5s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } / Hero main layout（統計パネル削除後は左寄せ、右側に写真を見せる） / .mu-page .mu-hero-main { display: block; } .mu-page .mu-hero-content { max-width: 720px; } @media (max-width: 900px) { .mu-page .mu-hero-content { max-width: 100%; } } / Hero content - 編集的タイポグラフィレイアウト / .mu-page .mu-hero-mini { display: inline-block; padding: 8px 18px; margin-bottom: 22px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.15em; color: var(--u-blue-main); background: rgba(255, 255, 255, 0.85); border-left: 3px solid var(--u-blue-main); animation: fadeUp 1s var(--u-ease-out) 0.2s both; } .mu-page .mu-hero-title { font-family: var(--u-font-serif); font-size: clamp(2rem, 4.8vw, 3.6rem); font-weight: 900; line-height: 1.25; letter-spacing: 0.01em; color: var(--u-text-dark); margin: 0 0 18px; } .mu-page .mu-hero-brand-line { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; animation: fadeUp 1s var(--u-ease-out) 1.3s both; } .mu-page .mu-hero-brand-bar { display: inline-block; width: 40px; height: 2px; background: var(--u-blue-main); } .mu-page .mu-hero-brand-en { font-family: var(--u-font-en); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.35em; color: var(--u-blue-deep); text-transform: uppercase; } .mu-page .hero-title-line { display: block; overflow: hidden; } .mu-page .hero-title-chunk { display: inline-block; opacity: 0; transform: translateY(50%); transition: opacity 1s var(--u-ease-out), transform 1s var(--u-ease-out); transition-delay: var(--char-delay, 0s); position: relative; vertical-align: bottom; } .mu-page .hero-title-chunk.is-in { opacity: 1; transform: translateY(0); } .mu-page .hero-title-highlight { color: var(--u-blue-deep); position: relative; background: transparent; padding: 0; font-weight: 900; z-index: 1; } .mu-page .mu-hero-lead { font-size: 0.95rem; line-height: 1.85; color: var(--u-text-dark-2); margin: 0 0 26px; max-width: 640px; animation: fadeUp 1s var(--u-ease-out) 0.9s both; } / 対応エリア補足ノート / .mu-page .mu-hero-area-note { display: inline-flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; padding: 10px 16px; max-width: 720px; font-size: 0.88rem; line-height: 1.6; color: var(--u-text-dark-2); background: rgba(75, 163, 217, 0.08); border-left: 3px solid var(--u-blue-mid); animation: fadeUp 1s var(--u-ease-out) 1s both; } .mu-page .mu-hero-area-note-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; color: var(--u-blue-main); margin-top: 1px; } .mu-page .mu-hero-area-note strong { color: var(--u-blue-deep); font-weight: 700; } .mu-page .mu-hero-cta-group { display: flex; flex-wrap: wrap; gap: 14px; animation: fadeUp 1s var(--u-ease-out) 1.1s both; } / CTA Buttons / .mu-page .mu-btn { display: inline-flex; align-items: center; gap: 18px; padding: 20px 30px; border-radius: 16px; text-decoration: none; cursor: pointer; border: none; position: relative; overflow: hidden; transition: all 0.5s var(--u-ease); } .mu-page .mu-btn-primary { background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); box-shadow: 0 12px 30px rgba(26, 75, 140, 0.25); } .mu-page .mu-btn-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); opacity: 0; transition: opacity 0.5s var(--u-ease); } .mu-page .mu-btn-primary:hover::before { opacity: 1; } .mu-page .mu-btn-primary:hover { transform: translateY(-4px); color: var(--u-white); box-shadow: 0 20px 40px rgba(26, 75, 140, 0.35); } .mu-page .mu-btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--u-blue-deep); border: 1.5px solid var(--u-blue-mid); backdrop-filter: blur(10px); } .mu-page .mu-btn-ghost:hover { background: var(--u-white); border-color: var(--u-blue-deep); color: var(--u-blue-deep); transform: translateY(-4px); box-shadow: 0 15px 30px rgba(26, 75, 140, 0.15); } .mu-page .mu-btn-content { position: relative; z-index: 2; display: flex; flex-direction: column; text-align: left; gap: 2px; } .mu-page .mu-btn-sub { font-size: 0.875rem; letter-spacing: 0.08em; opacity: 0.85; font-weight: 500; } / ヒーローの電話ボタン内の電話番号を太字＋キラリ演出 / .mu-page .mu-btn-ghost { position: relative; overflow: hidden; } .mu-page .mu-btn-ghost .mu-btn-main { font-family: var(--u-font-serif); font-size: 1.45rem; font-weight: 900; letter-spacing: 0.05em; color: var(--u-blue-deep); } .mu-page .mu-btn-ghost::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 55%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); pointer-events: none; z-index: 1; opacity: 0; animation: phoneShine 4.5s ease-in-out 2s infinite; } @keyframes phoneShine { 0%, 85%, 100% { left: -60%; opacity: 0; } 88% { opacity: 1; } 96% { opacity: 1; } 99% { left: 130%; opacity: 0; } } .mu-page .mu-btn-main { font-family: var(--u-font-serif); font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; } .mu-page .mu-btn-arrow { position: relative; z-index: 2; display: inline-flex; transition: transform 0.4s var(--u-ease); } .mu-page .mu-btn:hover .mu-btn-arrow { transform: translateX(6px); } / Hero stats panel / .mu-page .mu-hero-stats-panel { position: relative; padding: 28px 32px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(26, 75, 140, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; animation: fadeUp 1.1s var(--u-ease-out) 0.6s both; } .mu-page .mu-hero-stats-panel::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--u-blue-mid), transparent); border-radius: 2px; } .mu-page .mu-stats-panel-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed rgba(75, 163, 217, 0.3); } .mu-page .stats-en { font-family: var(--u-font-en); font-style: italic; font-size: 0.8rem; letter-spacing: 0.3em; color: var(--u-blue-main); font-weight: 500; } .mu-page .stats-jp { font-family: var(--u-font-serif); font-size: 0.95rem; color: var(--u-text-dark); font-weight: 700; } .mu-page .mu-stats-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-bottom: 18px; } .mu-page .mu-stat-cell { display: flex; flex-direction: column; gap: 6px; } .mu-page .mu-stat-value { display: flex; align-items: baseline; gap: 4px; line-height: 1; } .mu-page .mu-counter { font-family: var(--u-font-serif); font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 700; color: var(--u-blue-main); letter-spacing: 0.02em; background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-mid) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mu-page .mu-stat-unit { font-family: var(--u-font-serif); font-size: 1rem; color: var(--u-blue-main); margin-left: 2px; font-weight: 600; } .mu-page .mu-stat-label { font-size: 0.875rem; color: var(--u-text-dark-2); letter-spacing: 0.03em; line-height: 1.5; } .mu-page .mu-stats-panel-footer { padding-top: 14px; border-top: 1px dashed rgba(75, 163, 217, 0.3); display: flex; flex-direction: column; gap: 4px; } .mu-page .stats-foot-label { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; color: var(--u-blue-main); letter-spacing: 0.2em; font-weight: 500; } .mu-page .stats-foot-value { font-size: 0.8rem; color: var(--u-text-dark-2); line-height: 1.7; } / Hero scroll indicator — ボトムカーブ上に配置 / .mu-page .mu-hero-scroll-indicator { position: absolute; bottom: 130px; left: 32px; display: flex; align-items: center; gap: 16px; font-family: var(--u-font-en); font-style: italic; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--u-blue-main); opacity: 0.7; z-index: 3; animation: fadeUp 1.2s var(--u-ease-out) 1.4s both; } / ヒーロー下部の楕円カーブ（柔軟さ演出） / .mu-page .mu-hero-curve { position: absolute; bottom: -1px; left: 0; width: 100%; height: 110px; z-index: 3; pointer-events: none; display: block; } @media (max-width: 900px) { .mu-page .mu-hero-curve { height: 70px; } .mu-page .mu-hero-scroll-indicator { bottom: 86px; } } @media (max-width: 600px) { .mu-page .mu-hero-scroll-indicator { display: none; } } .mu-page .scroll-bar { display: inline-block; width: 60px; height: 1px; background: linear-gradient(90deg, var(--u-blue-mid), transparent); position: relative; overflow: hidden; border-radius: 2px; } .mu-page .scroll-bar::before { content: ""; position: absolute; inset: 0; background: var(--u-blue-main); animation: scrollBarMove 3s var(--u-ease) infinite; transform-origin: left; } @keyframes scrollBarMove { 0%, 100% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform: scaleX(1); transform-origin: right; } 99% { transform: scaleX(0); transform-origin: right; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 820px) { .mu-page .mu-hero { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; padding: 60px 0 40px; align-items: center; padding-top: 40px; } .mu-page .mu-hero-container { padding: 0 20px; } .mu-page .mu-hero-top { margin-bottom: 24px; } .mu-page .mu-hero-main { gap: 32px; } .mu-page .mu-hero-stats-panel { padding: 22px 20px; } .mu-page .mu-hero-cta-group { margin-top: 44px; gap: 12px; } .mu-page .mu-btn { justify-content: space-between; padding: 16px 20px; } .mu-page .mu-btn-main { font-size: 1rem; } .mu-page .mu-hero-scroll-indicator { display: none; } } / タブレット範囲（820超〜1024以下）はレイアウトは横並びのまま、余白だけ広げる / @media (min-width: 821px) and (max-width: 1024px) { .mu-page .mu-hero-cta-group { margin-top: 40px; } } / 680px以下：CTAボタンを縦積み（2段） / @media (max-width: 680px) { .mu-page .mu-hero-cta-group { flex-direction: column; align-items: stretch; } .mu-page .mu-btn { width: 100%; } } / 820px〜681px：タブレット／iPad mini縦向きではCTAボタンの上余白をさらに広げる / @media (min-width: 681px) and (max-width: 820px) { .mu-page .mu-hero-cta-group { margin-top: 72px; } } / ========================================================================== TICKER ========================================================================== / .mu-page .mu-ticker-section { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 50%, var(--u-blue-mid) 100%); padding: 22px 0; overflow: hidden; position: relative; } .mu-page .mu-ticker-section::before, .mu-page .mu-ticker-section::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .mu-page .mu-ticker-section::before { left: 0; background: linear-gradient(90deg, var(--u-blue-deep), transparent); } .mu-page .mu-ticker-section::after { right: 0; background: linear-gradient(270deg, var(--u-blue-mid), transparent); } .mu-page .mu-ticker { width: 100%; overflow: hidden; } .mu-page .mu-ticker-track { display: flex; gap: 40px; align-items: center; white-space: nowrap; width: max-content; animation: tickerScroll 55s linear infinite; } .mu-page .ticker-item { font-family: var(--u-font-serif); font-size: clamp(0.95rem, 1.3vw, 1.15rem); font-weight: 600; color: var(--u-white); letter-spacing: 0.06em; } .mu-page .ticker-sep { color: var(--u-blue-light); font-size: 0.7rem; opacity: 0.7; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } / ========================================================================== SIMULATOR ========================================================================== / .mu-page .mu-simulator-section { background: linear-gradient(180deg, var(--u-cream) 0%, var(--u-cream-blue) 100%); padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-simulator-section::before { content: ""; position: absolute; top: 10%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(123, 196, 232, 0.25) 0%, transparent 65%); filter: blur(80px); pointer-events: none; } .mu-page .mu-simulator-section::after { content: ""; position: absolute; bottom: 10%; right: -8%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(75, 163, 217, 0.18) 0%, transparent 65%); filter: blur(80px); pointer-events: none; } .mu-page .mu-simulator { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; margin: 60px auto 0; background: var(--u-white); padding: 50px; border-radius: 32px; box-shadow: var(--u-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; position: relative; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.9); } .mu-page .mu-sim-controls { display: flex; flex-direction: column; gap: 28px; padding-right: 40px; border-right: 1px dashed rgba(75, 163, 217, 0.25); } .mu-page .mu-sim-field { display: flex; flex-direction: column; gap: 10px; } .mu-page .mu-sim-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; font-weight: 600; color: var(--u-text-dark); } .mu-page .mu-sim-label-text { font-family: var(--u-font-serif); font-size: 1rem; font-weight: 700; } .mu-page .mu-sim-label-hint { font-size: 0.875rem; font-weight: 400; color: var(--u-text-dark-3); letter-spacing: 0.03em; } .mu-page .mu-sim-label-value em { font-family: var(--u-font-serif); font-style: normal; font-size: 1.5rem; font-weight: 700; color: var(--u-blue-main); background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-mid) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mu-page .mu-sim-select { appearance: none; -webkit-appearance: none; background: var(--u-cream-blue) url("data:image/svg+xml;utf8,") no-repeat right 18px center; border: 1.5px solid transparent; border-radius: 14px; padding: 16px 46px 16px 18px; font-size: 0.95rem; font-family: var(--u-font-sans); color: var(--u-text-dark); font-weight: 500; cursor: pointer; transition: all 0.4s var(--u-ease); } .mu-page .mu-sim-select:focus { outline: none; border-color: var(--u-blue-mid); background-color: var(--u-white); box-shadow: 0 0 0 4px rgba(75, 163, 217, 0.15); } .mu-page .mu-sim-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: var(--u-cream-deep); border-radius: 100px; outline: none; cursor: pointer; } .mu-page .mu-sim-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); border: 4px solid var(--u-white); box-shadow: 0 4px 14px rgba(26, 75, 140, 0.3); cursor: pointer; transition: transform 0.3s var(--u-ease); } .mu-page .mu-sim-slider::-webkit-slider-thumb:hover { transform: scale(1.15); } .mu-page .mu-sim-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); border: 4px solid var(--u-white); box-shadow: 0 4px 14px rgba(26, 75, 140, 0.3); cursor: pointer; } .mu-page .mu-sim-slider-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--u-text-dark-3); padding: 0 2px; } .mu-page .mu-sim-results { display: flex; flex-direction: column; gap: 20px; } .mu-page .mu-sim-result { padding: 26px 28px; background: var(--u-cream-blue); border-radius: 18px; position: relative; overflow: hidden; } .mu-page .mu-sim-result-primary { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); color: var(--u-white); } .mu-page .mu-sim-result-primary::before { content: ""; position: absolute; top: -50%; right: -20%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(123, 196, 232, 0.3) 0%, transparent 65%); pointer-events: none; } .mu-page .mu-sim-result-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--u-text-dark-2); margin-bottom: 8px; } .mu-page .mu-sim-result-primary .mu-sim-result-label { color: var(--u-blue-light); } .mu-page .mu-sim-result-value { display: flex; align-items: baseline; gap: 4px; line-height: 1; margin-bottom: 8px; font-family: var(--u-font-serif); font-weight: 700; position: relative; z-index: 2; } .mu-page .mu-sim-yen { font-size: 1.3rem; color: var(--u-blue-main); } .mu-page .mu-sim-result-primary .mu-sim-yen { color: var(--u-blue-light); } .mu-page .mu-sim-result-value > span:last-child { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--u-text-dark); letter-spacing: 0.02em; } .mu-page .mu-sim-result-primary .mu-sim-result-value > span:last-child { color: var(--u-white); } .mu-page .mu-sim-result-accent .mu-sim-yen { color: var(--u-blue-deep); } .mu-page .mu-sim-result-sub { font-size: 0.875rem; color: var(--u-text-dark-3); position: relative; z-index: 2; } .mu-page .mu-sim-result-primary .mu-sim-result-sub { color: var(--u-blue-pale); } .mu-page .mu-sim-result-sub span { font-family: var(--u-font-serif); font-weight: 700; color: var(--u-text-dark); font-size: 0.95rem; } .mu-page .mu-sim-result-primary .mu-sim-result-sub span { color: var(--u-white); } .mu-page .mu-sim-bar-wrap { margin-top: 4px; } .mu-page .mu-sim-bar-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.875rem; margin-bottom: 10px; color: var(--u-text-dark-2); font-weight: 600; } .mu-page .mu-sim-bar-note { font-weight: 400; font-size: 0.875rem; color: var(--u-text-dark-3); } .mu-page .mu-sim-bar { display: flex; height: 40px; border-radius: 12px; overflow: hidden; background: var(--u-cream-deep); box-shadow: inset 0 2px 4px rgba(26, 75, 140, 0.06); } .mu-page .mu-sim-bar-fill { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.05em; transition: width 0.8s var(--u-ease); white-space: nowrap; overflow: hidden; padding: 0 8px; } .mu-page .mu-sim-bar-fill-fee { background: linear-gradient(135deg, var(--u-text-dark-2) 0%, var(--u-text-dark-3) 100%); } .mu-page .mu-sim-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 26px; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; border-radius: 14px; margin-top: 8px; transition: all 0.4s var(--u-ease); box-shadow: 0 10px 24px rgba(26, 75, 140, 0.25); } .mu-page .mu-sim-cta:hover { transform: translateY(-3px); color: var(--u-white); box-shadow: 0 16px 32px rgba(26, 75, 140, 0.35); background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); } .mu-page .mu-sim-disclaimer { max-width: 900px; margin: 32px auto 0; font-size: 0.875rem; line-height: 1.9; color: var(--u-text-dark-3); text-align: center; position: relative; z-index: 2; } @media (max-width: 900px) { .mu-page .mu-simulator-section { padding: 80px 0; } .mu-page .mu-simulator { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; border-radius: 24px; } .mu-page .mu-sim-controls { padding-right: 0; border-right: none; padding-bottom: 32px; border-bottom: 1px dashed rgba(75, 163, 217, 0.25); } } / ========================================================================== NUMBERS（数字で見る私たち） ========================================================================== / .mu-page .mu-numbers-section { background: var(--u-white); padding: 140px 0 100px; / 上部カーブのぶんだけ padding-top を増やす / position: relative; overflow: hidden; } / 上部の丸いアーチ（前セクションの色を左右角に配置） / .mu-page .mu-numbers-top-curve { position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 3; pointer-events: none; display: block; } @media (max-width: 900px) { .mu-page .mu-numbers-top-curve { height: 60px; } } .mu-page .mu-numbers-section::before { content: ""; position: absolute; top: -100px; right: -100px; width: 380px; height: 380px; border: 1px dashed rgba(75, 163, 217, 0.25); pointer-events: none; animation: ringRotate 80s linear infinite; border-radius: 50%; } .mu-page .mu-numbers-section::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 240px; height: 240px; border: 1px solid rgba(26, 75, 140, 0.15); pointer-events: none; animation: ringRotate 60s linear infinite reverse; border-radius: 50%; } .mu-page .mu-numbers-head { text-align: center; margin-bottom: 60px; position: relative; z-index: 1; } .mu-page .mu-numbers-title { font-family: var(--u-font-serif); font-size: clamp(1.7rem, 3.8vw, 2.6rem); font-weight: 700; color: var(--u-text-dark); margin: 20px 0 16px; letter-spacing: 0.03em; } .mu-page .mu-numbers-title em { font-style: normal; color: var(--u-blue-main); position: relative; padding: 0 4px; background: linear-gradient(180deg, transparent 65%, rgba(123, 196, 232, 0.35) 65%); } .mu-page .mu-numbers-lead { font-size: 1rem; line-height: 1.85; color: var(--u-text-dark-2); max-width: 640px; margin: 0 auto; } / POINT カード型グリッド（2×2 × 右側カードを少し下げた Z 字カスケード） / .mu-page .mu-numbers-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 28px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; align-items: start; } / nth-child(1) は SVG コネクタなので、カードは 2〜5 番目 / .mu-page .mu-numbers-grid > .mu-number-card:nth-child(2) { margin-top: 0; } / POINT 01 / .mu-page .mu-numbers-grid > .mu-number-card:nth-child(3) { margin-top: 110px; } / POINT 02 / .mu-page .mu-numbers-grid > .mu-number-card:nth-child(4) { margin-top: 0; } / POINT 03 / .mu-page .mu-numbers-grid > .mu-number-card:nth-child(5) { margin-top: 110px; } / POINT 04 / / 繋ぎの破線 SVG / .mu-page .mu-numbers-connector { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: var(--u-blue-mid); opacity: 0.7; } .mu-page .mu-number-card { position: relative; z-index: 1; background: var(--u-white); padding: 38px 36px 32px; border: 1px solid rgba(26, 75, 140, 0.08); box-shadow: 0 8px 28px rgba(26, 75, 140, 0.06); transition: transform 0.4s var(--u-ease), box-shadow 0.4s var(--u-ease); display: flex; flex-direction: column; } .mu-page .mu-number-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(26, 75, 140, 0.14); } .mu-page .mu-number-badge { display: inline-block; align-self: flex-start; padding: 6px 14px; font-family: var(--u-font-en); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; color: var(--u-white); background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); margin-bottom: 18px; } .mu-page .mu-number-heading { font-family: var(--u-font-serif); font-size: 1.25rem; font-weight: 800; color: var(--u-text-dark); margin: 0 0 22px; letter-spacing: 0.03em; line-height: 1.5; } / メインの数字表示（大・グラデ） / .mu-page .mu-number-display { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; line-height: 1; min-height: 160px; flex-wrap: wrap; } .mu-page .mu-number-big { font-family: var(--u-font-serif); font-size: clamp(4rem, 10vw, 7.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 0.9; background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-mid) 55%, var(--u-blue-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mu-page .mu-number-big .mu-counter { font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; background: inherit; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mu-page .mu-number-suffix { font-family: var(--u-font-serif); font-size: 1.3rem; font-weight: 700; color: var(--u-blue-main); letter-spacing: 0.05em; white-space: nowrap; } .mu-page .mu-number-suffix em { font-style: normal; font-size: 2rem; color: var(--u-blue-deep); margin: 0 2px; } .mu-page .mu-number-big-wrap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } / 時計・ストップウォッチアイコン / .mu-page .mu-number-display-icon { align-items: center; } .mu-page .mu-number-icon { width: 120px; height: 120px; color: var(--u-blue-mid); flex-shrink: 0; filter: drop-shadow(0 6px 14px rgba(26, 75, 140, 0.18)); } .mu-page .mu-icon-clock { animation: clockTick 8s linear infinite; transform-origin: center; } @keyframes clockTick { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } / ストップウォッチの針：初期は 12時（0分）、可視化で 10分位置（60°）へ回転 / .mu-page .mu-stopwatch-hand { transform: rotate(0deg); transform-origin: 50% 58%; transform-box: view-box; transition: transform 2s cubic-bezier(0.34, 1.56, 0.64, 1); } .mu-page .mu-icon-stopwatch.is-animated .mu-stopwatch-hand { transform: rotate(60deg); } / POINT 02 の国旗表示 / .mu-page .mu-number-display-flags { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 110px; } .mu-page .mu-number-flags { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .mu-page .mu-flag { display: block; width: 58px; height: 38px; object-fit: cover; object-position: center; filter: drop-shadow(0 3px 6px rgba(26, 75, 140, 0.18)); transition: transform 0.3s var(--u-ease); flex-shrink: 0; } .mu-page .mu-number-card:hover .mu-flag:nth-child(1) { transform: translateY(-4px) rotate(-4deg); } .mu-page .mu-number-card:hover .mu-flag:nth-child(2) { transform: translateY(-4px) rotate(-2deg); transition-delay: 0.05s; } .mu-page .mu-number-card:hover .mu-flag:nth-child(3) { transform: translateY(-4px) rotate(2deg); transition-delay: 0.1s; } .mu-page .mu-number-card:hover .mu-flag:nth-child(4) { transform: translateY(-4px) rotate(4deg); transition-delay: 0.15s; } .mu-page .mu-number-desc { font-size: 0.95rem; line-height: 1.85; color: var(--u-text-dark-2); margin: 0; margin-top: auto; } / 下部の対応エリア / .mu-page .mu-numbers-footer { max-width: 1100px; margin: 48px auto 0; padding: 24px 32px; background: var(--u-cream-blue); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; text-align: center; position: relative; z-index: 1; } .mu-page .mu-numbers-foot-label { font-family: var(--u-font-serif); font-weight: 700; color: var(--u-blue-main); font-size: 0.95rem; letter-spacing: 0.1em; padding-right: 18px; border-right: 1px solid rgba(26, 75, 140, 0.2); } .mu-page .mu-numbers-foot-value { font-size: 0.95rem; color: var(--u-text-dark-2); line-height: 1.75; } @media (max-width: 900px) { / モバイル：1列縦並び、階段解除、コネクタ非表示 / .mu-page .mu-numbers-section { padding: 70px 0; } .mu-page .mu-numbers-grid { grid-template-columns: 1fr; gap: 18px; } .mu-page .mu-numbers-grid > .mu-number-card:nth-child(n) { margin-top: 0 !important; } .mu-page .mu-numbers-connector { display: none; } .mu-page .mu-number-card { padding: 30px 24px 26px; } .mu-page .mu-number-heading { font-size: 1.15rem; margin-bottom: 16px; } .mu-page .mu-number-display { margin-bottom: 16px; min-height: auto; gap: 12px; } .mu-page .mu-number-flags { gap: 6px; } .mu-page .mu-flag { width: 46px; height: 32px; } .mu-page .mu-number-icon { width: 80px; height: 80px; } .mu-page .mu-numbers-footer { flex-direction: column; gap: 10px; padding: 20px; } .mu-page .mu-numbers-foot-label { border-right: none; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(26, 75, 140, 0.2); } } / ========================================================================== CHALLENGES - やわらかカードデザイン ========================================================================== / .mu-page .mu-problem-section { background-color: var(--u-cream); background-image: radial-gradient(circle at 1.5px 1.5px, rgba(26, 75, 140, 0.09) 1.5px, transparent 1.5px); background-size: 28px 28px; padding: 120px 0; position: relative; overflow: hidden; } / 8つの悩みを散りばめた編集的レイアウト / .mu-page .mu-problem-stage { position: relative; max-width: 1100px; margin: 60px auto 0; height: 720px; } .mu-page .mu-problem-item { position: absolute; width: 220px; padding: 30px 20px; display: flex; justify-content: center; align-items: center; z-index: 1; will-change: transform; } / ふわふわ浮遊アニメーション / @keyframes problemFloat { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(3px, -6px); } 50% { transform: translate(-2px, -11px); } 75% { transform: translate(2px, -5px); } } / 中央配置用（translateX(-50%) を維持しながら浮遊） / @keyframes problemFloatCenter { 0%, 100% { transform: translateX(-50%) translateY(0); } 25% { transform: translateX(-50%) translateY(-6px); } 50% { transform: translateX(-50%) translateY(-11px); } 75% { transform: translateX(-50%) translateY(-4px); } } .mu-page .mu-problem-text { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--u-font-serif); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.18em; line-height: 2; color: #2a3140; margin: 0; padding: 20px 8px; position: relative; z-index: 2; } .mu-page .mu-problem-scribble { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140%; height: 140%; color: #b8c2d1; opacity: 0.5; z-index: 1; pointer-events: none; transition: color 0.3s ease; } / スクリブルが不規則に光るアニメーション（各アイテムでタイミング・周期を変えてランダム風に） / @keyframes scribbleGlow { 0%, 85%, 100% { opacity: 0.5; color: #b8c2d1; filter: drop-shadow(0 0 0 transparent); stroke-width: 1; } 50% { opacity: 1; color: #4ba3d9; filter: drop-shadow(0 0 8px rgba(75, 163, 217, 0.6)) drop-shadow(0 0 16px rgba(45, 107, 184, 0.35)); stroke-width: 1.3; } } .mu-page .mu-problem-item-1 .mu-problem-scribble { animation: scribbleGlow 7s ease-in-out 0.4s infinite; } .mu-page .mu-problem-item-2 .mu-problem-scribble { animation: scribbleGlow 9s ease-in-out 5.2s infinite; } .mu-page .mu-problem-item-3 .mu-problem-scribble { animation: scribbleGlow 8s ease-in-out 2.7s infinite; } .mu-page .mu-problem-item-4 .mu-problem-scribble { animation: scribbleGlow 10s ease-in-out 7.8s infinite; } .mu-page .mu-problem-item-5 .mu-problem-scribble { animation: scribbleGlow 6.5s ease-in-out 1.6s infinite; } .mu-page .mu-problem-item-6 .mu-problem-scribble { animation: scribbleGlow 8.5s ease-in-out 4.3s infinite; } .mu-page .mu-problem-item-7 .mu-problem-scribble { animation: scribbleGlow 7.5s ease-in-out 6.5s infinite; } .mu-page .mu-problem-item-8 .mu-problem-scribble { animation: scribbleGlow 9.5s ease-in-out 3.1s infinite; } / 8つの悩みを画面全体に散りばめる（上段4・中段2・下段2） / .mu-page .mu-problem-item-1 { / 左上 / top: 0; left: 5%; animation: problemFloat 5.5s ease-in-out 0s infinite; } .mu-page .mu-problem-item-2 { / 上中央 / top: 0; left: 50%; transform: translateX(-50%); animation: problemFloatCenter 6.5s ease-in-out 1.2s infinite; } .mu-page .mu-problem-item-3 { / 右上 / top: 0; right: 5%; animation: problemFloat 7s ease-in-out 0.5s infinite; } .mu-page .mu-problem-item-4 { / 中段中央寄り左 / top: 38%; left: 25%; animation: problemFloat 6s ease-in-out 2.1s infinite; } .mu-page .mu-problem-item-5 { / 中段中央寄り右 / top: 38%; right: 25%; animation: problemFloat 7.5s ease-in-out 0.8s infinite; } .mu-page .mu-problem-item-6 { / 左下 / bottom: 0; left: 5%; animation: problemFloat 8s ease-in-out 1.6s infinite; } .mu-page .mu-problem-item-7 { / 下中央 / bottom: 0; left: 50%; transform: translateX(-50%); animation: problemFloatCenter 5.5s ease-in-out 2.4s infinite; } .mu-page .mu-problem-item-8 { / 右下 / bottom: 0; right: 5%; animation: problemFloat 6.5s ease-in-out 0.3s infinite; } / お悩みセクションの締め＋下矢印 / .mu-page .mu-problem-closing { text-align: center; margin-top: 80px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .mu-page .mu-problem-closing-lead { display: inline-block; padding: 6px 18px; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.2em; color: var(--u-blue-main); background: rgba(75, 163, 217, 0.1); border: 1px solid rgba(75, 163, 217, 0.3); } .mu-page .mu-problem-closing-main { font-family: var(--u-font-serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 700; color: var(--u-text-dark); letter-spacing: 0.04em; line-height: 1.6; margin: 0; } .mu-page .mu-problem-closing-main em { font-style: normal; color: var(--u-blue-deep); font-weight: 900; position: relative; background: linear-gradient(180deg, transparent 62%, rgba(123, 196, 232, 0.55) 62%); padding: 0 8px; } / 下矢印アニメーション / .mu-page .mu-problem-closing-arrow { width: 48px; height: 60px; color: var(--u-blue-main); margin-top: 20px; filter: drop-shadow(0 4px 10px rgba(75, 163, 217, 0.25)); } .mu-page .mu-problem-closing-arrow svg { width: 100%; height: 100%; } .mu-page .arrow-chevron { opacity: 0; animation: arrowBounce 1.8s ease-in-out infinite; transform-origin: center; } .mu-page .arrow-chevron-1 { animation-delay: 0s; } .mu-page .arrow-chevron-2 { animation-delay: 0.3s; } @keyframes arrowBounce { 0% { opacity: 0; transform: translateY(-6px); } 40% { opacity: 1; transform: translateY(0); } 70% { opacity: 0.8; transform: translateY(2px); } 100% { opacity: 0; transform: translateY(8px); } } / タブレット：グリッドにフォールバック / @media (max-width: 900px) { .mu-page .mu-problem-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; } .mu-page .mu-problem-item { position: static; transform: none !important; animation: none !important; width: 100%; padding: 24px 12px; } .mu-page .mu-problem-text { writing-mode: horizontal-tb; text-align: center; font-size: 1rem; } / 2-1-2-1-2 の変則配置：3番目と6番目を単独行で中央寄せ / .mu-page .mu-problem-item-3, .mu-page .mu-problem-item-6 { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); } } @media (max-width: 600px) { .mu-page .mu-problem-section { padding: 80px 0; } .mu-page .mu-problem-stage { grid-template-columns: 1fr 1fr; gap: 16px; } .mu-page .mu-problem-item { padding: 20px 8px; } .mu-page .mu-problem-text { font-size: 0.9rem; letter-spacing: 0.06em; } / 改行する中央寄せテキストは左寄せに / .mu-page .mu-problem-closing, .mu-page .mu-problem-closing-main, .mu-page .mu-problem-closing-lead { text-align: left; } .mu-page .mu-problem-closing { align-items: flex-start; } / 矢印は中央寄せを維持 / .mu-page .mu-problem-closing-arrow { align-self: center; } } / ========================================================================== 4 PHASES ========================================================================== / .mu-page .mu-phases-section { background: linear-gradient(180deg, var(--u-blue-deep) 0%, #235494 50%, var(--u-blue-deep) 100%); color: var(--u-text-light); padding: 130px 0 140px; position: relative; overflow: clip; / sticky 子要素を壊さない（hidden 互換の切り抜き） / } .mu-page .mu-phases-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 15% 15%, rgba(123, 196, 232, 0.18) 0%, transparent 40%), radial-gradient(ellipse at 85% 85%, rgba(75, 163, 217, 0.12) 0%, transparent 40%); pointer-events: none; } .mu-page .mu-phases-section::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0); background-size: 40px 40px; pointer-events: none; opacity: 0.5; } .mu-page .mu-phases { display: grid; grid-template-columns: 220px 1fr; gap: 60px; position: relative; z-index: 2; } .mu-page .mu-phases-nav { position: sticky; top: 100px; align-self: start; padding-top: 20px; } .mu-page .mu-phases-nav-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 22px; } .mu-page .mu-phases-nav-item { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; font-family: var(--u-font-serif); font-size: 0.95rem; color: var(--u-text-light-3); transition: color 0.5s var(--u-ease); position: relative; } .mu-page .mu-phases-nav-item::before { content: ""; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: all 0.5s var(--u-ease); } .mu-page .mu-phases-nav-item.is-active { color: var(--u-blue-light); } .mu-page .mu-phases-nav-item.is-active::before { background: var(--u-blue-light); width: 10px; height: 10px; box-shadow: 0 0 14px var(--u-blue-light); } .mu-page .nav-num { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.15em; opacity: 0.75; } .mu-page .nav-label { font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; } .mu-page .mu-phases-nav-progress { position: absolute; left: -16px; top: 50px; width: 2px; height: calc(100% - 100px); background: rgba(255, 255, 255, 0.1); border-radius: 2px; } .mu-page .nav-progress-bar { position: absolute; top: 0; left: 0; width: 2px; height: 0; background: linear-gradient(180deg, var(--u-blue-light), var(--u-blue-mid)); transition: height 0.8s var(--u-ease); box-shadow: 0 0 10px var(--u-blue-light); border-radius: 2px; } .mu-page .mu-phases-content { display: flex; flex-direction: column; gap: 100px; } .mu-page .mu-phase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; opacity: 0; transition: opacity 1s var(--u-ease); } .mu-page .mu-phase.is-in { opacity: 1; } .mu-page .mu-phase-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .mu-page .phase-num { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.25em; color: var(--u-blue-light); font-weight: 500; } .mu-page .phase-badge { display: inline-block; padding: 6px 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--u-blue-deep); background: linear-gradient(135deg, var(--u-blue-light) 0%, var(--u-blue-mid) 100%); border-radius: 100px; position: relative; overflow: hidden; isolation: isolate; } / キラリ光るシャイン用の白い帯（待機位置：badge の外・左側） / .mu-page .phase-badge::before { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 70%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-20deg); pointer-events: none; z-index: 1; opacity: 0; } / スクロールで入ると .is-shine クラスが付与され、アニメ発火 / .mu-page .phase-badge.is-shine::before { animation: badgeShine 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes badgeShine { 0% { left: -75%; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { left: 130%; opacity: 0; } } / バッジ自体もぽわっと発光＋スケール / .mu-page .phase-badge.is-shine { animation: badgeGlow 1.4s ease-out forwards; } @keyframes badgeGlow { 0% { box-shadow: 0 0 0 0 rgba(123, 196, 232, 0); transform: scale(1); } 30% { box-shadow: 0 0 28px 6px rgba(123, 196, 232, 0.95); transform: scale(1.1); } 100% { box-shadow: 0 0 0 0 rgba(123, 196, 232, 0); transform: scale(1); } } .mu-page .mu-phase-title { font-family: var(--u-font-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.55; color: var(--u-text-light); margin: 0 0 22px; letter-spacing: 0.02em; } .mu-page .mu-phase-desc { font-size: 0.98rem; line-height: 2.1; color: var(--u-text-light-2); margin: 0 0 30px; } .mu-page .mu-phase-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mu-page .mu-phase-features li { display: flex; align-items: baseline; gap: 10px; font-size: 0.88rem; color: var(--u-text-light); padding: 14px 16px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; line-height: 1.6; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); } .mu-page .phase-feat-num { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; color: var(--u-blue-light); font-weight: 600; flex-shrink: 0; letter-spacing: 0.08em; } .mu-page .phase-feat-text { font-size: 0.875rem; } .mu-page .mu-phase-visual { position: relative; } .mu-page .phase-visual-box { aspect-ratio: 1 / 1.05; position: relative; background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; backdrop-filter: blur(20px); padding: 40px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .mu-page .phase-visual-box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(123, 196, 232, 0.15) 0%, transparent 55%); pointer-events: none; } .mu-page .phase-visual-label { position: absolute; top: 24px; right: 28px; font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.25em; color: var(--u-blue-light); z-index: 2; font-weight: 500; } .mu-page .phase-visual-icon { color: var(--u-blue-light); opacity: 0.9; position: relative; z-index: 2; animation: iconFloat 4s ease-in-out infinite alternate; } .mu-page .phase-visual-icon svg { width: 100px; height: 100px; filter: drop-shadow(0 0 20px rgba(123, 196, 232, 0.4)); } @keyframes iconFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } } .mu-page .phase-visual-title { font-family: var(--u-font-serif); font-size: 1.8rem; font-weight: 700; color: var(--u-white); letter-spacing: 0.12em; position: relative; z-index: 2; margin-top: 8px; } .mu-page .phase-visual-sub { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.25em; color: var(--u-blue-light); opacity: 0.75; position: relative; z-index: 2; } @media (max-width: 900px) { .mu-page .mu-phases-section { padding: 80px 0; } .mu-page .mu-phases { grid-template-columns: 1fr; gap: 32px; } .mu-page .mu-phases-nav { position: static; padding-top: 0; overflow-x: auto; } .mu-page .mu-phases-nav-list { flex-direction: row; gap: 8px; padding-bottom: 8px; } .mu-page .mu-phases-nav-item { flex-shrink: 0; padding: 10px 18px; background: rgba(255, 255, 255, 0.08); border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; } .mu-page .mu-phases-nav-item::before { display: none; } .mu-page .mu-phases-nav-item.is-active { background: linear-gradient(135deg, var(--u-blue-light) 0%, var(--u-blue-mid) 100%); color: var(--u-blue-deep); border-color: transparent; } .mu-page .mu-phases-nav-progress { display: none; } .mu-page .mu-phases-content { gap: 60px; } .mu-page .mu-phase { grid-template-columns: 1fr; gap: 32px; } .mu-page .mu-phase-visual { display: none; } .mu-page .mu-phase-features { grid-template-columns: 1fr; gap: 8px; } / 1列レイアウト時はフェーズナビも不要 / .mu-page .mu-phases-nav { display: none; } } / ========================================================================== ALL SERVICES ========================================================================== / .mu-page .mu-services-section { background: var(--u-cream-blue); padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-services-section::before { content: ""; position: absolute; top: -10%; right: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(123, 196, 232, 0.3) 0%, transparent 60%); filter: blur(80px); pointer-events: none; } .mu-page .mu-svc-filter { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 50px; position: relative; z-index: 2; } .mu-page .mu-svc-filter-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; background: var(--u-white); border: 1.5px solid transparent; border-radius: 100px; font-family: var(--u-font-sans); font-size: 0.9rem; font-weight: 700; color: var(--u-text-dark-2); cursor: pointer; transition: all 0.4s var(--u-ease); box-shadow: var(--u-shadow-sm); } .mu-page .mu-svc-filter-btn:hover { border-color: var(--u-blue-mid); color: var(--u-blue-main); transform: translateY(-2px); } .mu-page .mu-svc-filter-btn.is-active { background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); border-color: transparent; box-shadow: 0 8px 20px rgba(26, 75, 140, 0.25); } .mu-page .mu-svc-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--u-cream-blue); color: var(--u-blue-main); font-size: 0.875rem; font-weight: 700; border-radius: 100px; } .mu-page .mu-svc-filter-btn.is-active .mu-svc-filter-count { background: rgba(255, 255, 255, 0.25); color: var(--u-white); } .mu-page .mu-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; z-index: 2; } .mu-page .mu-svc-card { padding: 30px 26px; background: var(--u-white); border-radius: 22px; border: 1px solid rgba(75, 163, 217, 0.08); transition: all 0.6s var(--u-ease); opacity: 0; transform: translateY(20px); position: relative; box-shadow: var(--u-shadow-sm); } .mu-page .mu-svc-card.is-in { opacity: 1; transform: translateY(0); } .mu-page .mu-svc-card.is-hidden { display: none !important; } .mu-page .mu-svc-card:hover { transform: translateY(-6px); border-color: rgba(75, 163, 217, 0.3); box-shadow: var(--u-shadow-lg); } / サービスアイコン（塗りつぶした円＋白SVG） / .mu-page .mu-svc-icon { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin: 8px auto 22px; background: var(--u-blue-main); color: #ffffff; box-shadow: 0 10px 22px rgba(26, 75, 140, 0.18); transition: transform 0.5s var(--u-ease), box-shadow 0.5s var(--u-ease); } .mu-page .mu-svc-icon svg { width: 42px; height: 42px; } .mu-page .mu-svc-card:hover .mu-svc-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 14px 28px rgba(26, 75, 140, 0.28); } / 物件選び（メインブルー） / .mu-page .mu-svc-card[data-category="strategy"] .mu-svc-icon { background: linear-gradient(135deg, #4ba3d9 0%, #2d6bb8 100%); box-shadow: 0 10px 22px rgba(45, 107, 184, 0.28); } / 申請（紫） / .mu-page .mu-svc-card[data-category="legal"] .mu-svc-icon { background: linear-gradient(135deg, #a69adc 0%, #7b6dc4 100%); box-shadow: 0 10px 22px rgba(123, 109, 196, 0.28); } / 準備（オレンジ） / .mu-page .mu-svc-card[data-category="preparation"] .mu-svc-icon { background: linear-gradient(135deg, #f0a656 0%, #d98834 100%); box-shadow: 0 10px 22px rgba(217, 136, 52, 0.28); } / 運営（水色） / .mu-page .mu-svc-card[data-category="operation"] .mu-svc-icon { background: linear-gradient(135deg, #54b5d5 0%, #1a87b3 100%); box-shadow: 0 10px 22px rgba(26, 135, 179, 0.28); } / その他（グリーン） / .mu-page .mu-svc-card[data-category="support"] .mu-svc-icon { background: linear-gradient(135deg, #5fbe87 0%, #3b9669 100%); box-shadow: 0 10px 22px rgba(59, 150, 105, 0.28); } .mu-page .mu-svc-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed rgba(75, 163, 217, 0.2); } .mu-page .mu-svc-num { font-family: var(--u-font-en); font-style: italic; font-size: 1.1rem; color: var(--u-blue-main); letter-spacing: 0.08em; font-weight: 600; } .mu-page .mu-svc-cat-tag { font-size: 0.7rem; font-weight: 700; padding: 4px 12px; background: var(--u-cream-blue); color: var(--u-blue-deep); border-radius: 100px; letter-spacing: 0.05em; } .mu-page .mu-svc-title { font-family: var(--u-font-serif); font-size: 1.1rem; font-weight: 700; color: var(--u-text-dark); margin: 0 0 10px; letter-spacing: 0.02em; line-height: 1.55; } .mu-page .mu-svc-title a { color: inherit; border-bottom: 2px solid var(--u-blue-mid); padding-bottom: 1px; } .mu-page .mu-svc-title a:hover { color: var(--u-blue-main); } .mu-page .mu-svc-text { font-size: 0.88rem; line-height: 1.85; color: var(--u-text-dark-2); margin: 0; } .mu-page .mu-svc-text a { color: var(--u-blue-main); border-bottom: 1.5px solid var(--u-blue-mid); } @media (max-width: 900px) { .mu-page .mu-services-section { padding: 80px 0; } .mu-page .mu-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } @media (max-width: 600px) { .mu-page .mu-svc-grid { grid-template-columns: 1fr; } .mu-page .mu-svc-filter-btn { padding: 10px 18px; font-size: 0.875rem; } } / ========================================================================== SERVICE AREAS ========================================================================== / .mu-page .mu-area-section { background: var(--u-cream); padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-area-section::before { content: ""; position: absolute; bottom: -10%; left: -5%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(75, 163, 217, 0.2) 0%, transparent 65%); filter: blur(100px); pointer-events: none; } .mu-page .mu-area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; position: relative; z-index: 2; } .mu-page .mu-area-card { background: var(--u-white); padding: 30px 24px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--u-text-dark); text-decoration: none; position: relative; overflow: hidden; border: 1px solid rgba(75, 163, 217, 0.08); box-shadow: var(--u-shadow-sm); opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 1s var(--u-ease), transform 1s var(--u-ease), box-shadow 0.5s var(--u-ease), border-color 0.5s var(--u-ease); } .mu-page .mu-area-card.is-in { opacity: 1; transform: translateY(0) scale(1); } .mu-page .mu-area-card:not(.mu-area-card-contact)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(123, 196, 232, 0.1) 100%); opacity: 0; transition: opacity 0.5s var(--u-ease); pointer-events: none; } .mu-page .mu-area-card:not(.mu-area-card-contact):hover::before { opacity: 1; } .mu-page .mu-area-card:not(.mu-area-card-contact):hover { border-color: rgba(75, 163, 217, 0.35); transform: translateY(-6px); box-shadow: var(--u-shadow-lg); } .mu-page .mu-area-card-head { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; } .mu-page .mu-area-num { font-family: var(--u-font-en); font-style: italic; font-size: 1.2rem; color: var(--u-blue-main); letter-spacing: 0.08em; font-weight: 600; } .mu-page .mu-area-tag { font-size: 0.875rem; padding: 4px 12px; background: var(--u-cream-blue); color: var(--u-blue-deep); border-radius: 100px; letter-spacing: 0.05em; font-weight: 700; } .mu-page .mu-area-title { font-family: var(--u-font-serif); font-size: 1.15rem; font-weight: 700; color: var(--u-text-dark); margin: 0; letter-spacing: 0.02em; line-height: 1.55; position: relative; z-index: 2; } .mu-page .mu-area-text { font-size: 0.875rem; line-height: 1.85; color: var(--u-text-dark-2); margin: 0; flex: 1; position: relative; z-index: 2; } .mu-page .mu-area-metrics { display: flex; gap: 16px; padding-top: 14px; border-top: 1px dashed rgba(75, 163, 217, 0.25); position: relative; z-index: 2; } .mu-page .mu-area-metrics > div { display: flex; flex-direction: column; gap: 2px; } .mu-page .mu-area-metrics span { font-size: 0.875rem; color: var(--u-text-dark-3); letter-spacing: 0.05em; } .mu-page .mu-area-metrics em { font-family: var(--u-font-serif); font-style: normal; font-size: 1rem; font-weight: 700; color: var(--u-blue-main); background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-mid) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mu-page .mu-area-arrow { font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.08em; color: var(--u-blue-main); margin-top: 8px; transition: transform 0.4s var(--u-ease); position: relative; z-index: 2; font-weight: 600; } .mu-page .mu-area-card:hover .mu-area-arrow { transform: translateX(6px); } .mu-page .mu-area-card-contact { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); border-color: transparent; color: var(--u-white); box-shadow: 0 12px 30px rgba(26, 75, 140, 0.25); } .mu-page .mu-area-card-contact .mu-area-num { color: var(--u-blue-light); font-size: 1.8rem; font-weight: 600; } .mu-page .mu-area-card-contact .mu-area-title { color: var(--u-white); } .mu-page .mu-area-card-contact .mu-area-text { color: var(--u-blue-pale); } .mu-page .mu-area-arrow-cta { color: var(--u-white); font-weight: 700; margin-top: 8px; font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.08em; } .mu-page .mu-area-card-contact:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(26, 75, 140, 0.35); } @media (max-width: 1000px) { .mu-page .mu-area-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mu-page .mu-area-section { padding: 80px 0; } .mu-page .mu-area-grid { grid-template-columns: 1fr; gap: 12px; } } / ========================================================================== COMPARISON TABLE ========================================================================== / .mu-page .mu-compare-section { background-color: var(--u-cream-blue); background-image: radial-gradient(circle at 1px 1px, rgba(26, 75, 140, 0.08) 1px, transparent 1px), radial-gradient(circle at 12px 12px, rgba(75, 163, 217, 0.06) 1px, transparent 1px); background-size: 24px 24px, 24px 24px; padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-compare-wrap { max-width: 1000px; margin: 50px auto 0; overflow-x: auto; background: var(--u-white); border-radius: 28px; box-shadow: var(--u-shadow-lg); border: 1px solid rgba(75, 163, 217, 0.08); } .mu-page .mu-compare { width: 100%; min-width: 680px; border-collapse: collapse; } .mu-page .mu-compare thead { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%); color: var(--u-white); } .mu-page .mu-compare th, .mu-page .mu-compare td { padding: 22px 26px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(75, 163, 217, 0.1); } .mu-page .mu-compare thead th { font-family: var(--u-font-serif); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; padding: 28px 26px; } .mu-page .mu-compare thead th:first-child { border-top-left-radius: 28px; } .mu-page .mu-compare thead th:last-child { border-top-right-radius: 28px; } .mu-page .mu-compare-head-label { width: 180px; color: var(--u-blue-light); font-family: var(--u-font-en) !important; font-style: italic; font-size: 0.875rem !important; letter-spacing: 0.2em !important; } .mu-page .mu-compare-head-us { background: linear-gradient(135deg, var(--u-blue-light) 0%, var(--u-blue-mid) 100%); color: var(--u-blue-deep) !important; text-align: center !important; position: relative; } .mu-page .mu-compare-head-us-main { display: block; font-family: var(--u-font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 4px; } .mu-page .mu-compare-head-us-sub { display: block; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; opacity: 0.85; } .mu-page .mu-compare-head-other { color: var(--u-blue-pale) !important; text-align: center !important; font-size: 0.95rem !important; } .mu-page .mu-compare tbody tr { opacity: 0; transform: translateX(-20px); transition: opacity 0.8s var(--u-ease), transform 0.8s var(--u-ease); } .mu-page .mu-compare tbody tr.is-in { opacity: 1; transform: translateX(0); } .mu-page .mu-compare tbody tr:hover { background: var(--u-cream-blue); } .mu-page .mu-compare-th { font-family: var(--u-font-serif); font-weight: 700; font-size: 0.95rem; color: var(--u-text-dark); letter-spacing: 0.04em; background: rgba(75, 163, 217, 0.03); } / 項目列：アイコン+テキストを縦並びで中央寄せ / .mu-page .mu-compare-th { text-align: center; vertical-align: middle; } .mu-page .mu-compare-row-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 6px; background: linear-gradient(135deg, var(--u-cream-blue) 0%, var(--u-blue-mist) 100%); color: var(--u-blue-main); border-radius: 50% !important; } .mu-page .mu-compare-row-icon svg { width: 24px; height: 24px; } .mu-page .mu-compare-row-text { display: block; font-size: 0.92rem; } .mu-page .mu-compare-us { font-size: 0.92rem; line-height: 1.7; color: var(--u-blue-deep); background: rgba(123, 196, 232, 0.1); font-weight: 600; } .mu-page .mu-compare-other { font-size: 0.92rem; line-height: 1.7; color: var(--u-text-dark-3); } .mu-page .mu-compare-us, .mu-page .mu-compare-other { vertical-align: middle; } .mu-page .mu-compare-text { display: inline-block; vertical-align: middle; } / 当社側：緑のチェックマーク（ポジティブ） / .mu-page .mu-check { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50% !important; background: linear-gradient(135deg, #5ed49e 0%, #3cb581 100%); color: var(--u-white); margin-right: 12px; flex-shrink: 0; vertical-align: middle; box-shadow: 0 4px 12px rgba(60, 181, 129, 0.28); } .mu-page .mu-check svg { width: 20px; height: 20px; } / 他社側：控えめなグレーの - または × / .mu-page .mu-cross { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50% !important; background: rgba(180, 190, 205, 0.18); color: #9ba5b3; margin-right: 12px; flex-shrink: 0; vertical-align: middle; border: 1px solid rgba(180, 190, 205, 0.3); } .mu-page .mu-cross svg { width: 18px; height: 18px; } @media (max-width: 820px) { .mu-page .mu-compare-section { padding: 80px 0; } .mu-page .mu-compare-wrap { border-radius: 20px; } .mu-page .mu-compare th, .mu-page .mu-compare td { padding: 14px 12px; font-size: 0.82rem; } .mu-page .mu-compare-row-icon { width: 34px; height: 34px; } .mu-page .mu-compare-row-icon svg { width: 18px; height: 18px; } .mu-page .mu-compare-row-text { font-size: 0.82rem; } .mu-page .mu-check, .mu-page .mu-cross { width: 26px; height: 26px; margin-right: 8px; } .mu-page .mu-check svg { width: 15px; height: 15px; } .mu-page .mu-cross svg { width: 13px; height: 13px; } } / SP：表をカード形式に組み替え / @media (max-width: 768px) { .mu-page .mu-compare-wrap { overflow-x: visible; background: transparent; border: none; box-shadow: none; border-radius: 0; } .mu-page .mu-compare { min-width: 0; display: block; width: 100%; } .mu-page .mu-compare thead { display: none; } .mu-page .mu-compare tbody { display: block; } .mu-page .mu-compare tbody tr { display: block; padding: 16px 14px; margin-bottom: 14px; background: var(--u-white); border: 1px solid rgba(75, 163, 217, 0.15); border-radius: 16px; box-shadow: 0 4px 14px rgba(26, 75, 140, 0.06); transform: none; opacity: 1; } .mu-page .mu-compare tbody tr:last-child { margin-bottom: 0; } .mu-page .mu-compare tbody tr:hover { background: var(--u-white); } .mu-page .mu-compare th, .mu-page .mu-compare td { display: block; padding: 0; border-bottom: none; } .mu-page .mu-compare-th { text-align: left !important; font-size: 0.95rem !important; padding: 8px 14px !important; margin-bottom: 10px !important; background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 100%) !important; color: var(--u-white) !important; border-radius: 10px !important; } .mu-page .mu-compare-us, .mu-page .mu-compare-other { display: flex !important; align-items: center !important; padding: 10px 12px !important; margin-bottom: 8px !important; font-size: 0.85rem !important; line-height: 1.55 !important; border-radius: 10px !important; } .mu-page .mu-compare-us { background: rgba(75, 163, 217, 0.1) !important; } .mu-page .mu-compare-other { background: rgba(180, 190, 205, 0.1) !important; margin-bottom: 0 !important; } .mu-page .mu-compare-us::before, .mu-page .mu-compare-other::before { display: inline-flex; align-items: center; font-family: var(--u-font-en); font-size: 0.62rem; letter-spacing: 0.15em; font-weight: 700; padding: 3px 8px; margin-right: 8px; border-radius: 4px; flex-shrink: 0; align-self: center; } .mu-page .mu-compare-us::before { content: "当社"; background: var(--u-blue-deep); color: var(--u-white); } .mu-page .mu-compare-other::before { content: "他社"; background: rgba(180, 190, 205, 0.6); color: var(--u-text-dark); } .mu-page .mu-check, .mu-page .mu-cross { width: 24px; height: 24px; margin-right: 8px; } .mu-page .mu-check svg { width: 14px; height: 14px; } .mu-page .mu-cross svg { width: 12px; height: 12px; } .mu-page .mu-compare-text { flex: 1; min-width: 0; } } / ========================================================================== PRICING ========================================================================== / .mu-page .mu-pricing-section { background: linear-gradient(180deg, var(--u-blue-deep) 0%, #235494 100%); color: var(--u-text-light); padding: 130px 0; position: relative; overflow: hidden; } .mu-page .mu-pricing-section::before { content: ""; position: absolute; top: 20%; left: -5%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(123, 196, 232, 0.2) 0%, transparent 60%); filter: blur(80px); pointer-events: none; } .mu-page .mu-pricing-section::after { content: ""; position: absolute; bottom: 20%; right: -5%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(75, 163, 217, 0.15) 0%, transparent 60%); filter: blur(80px); pointer-events: none; } .mu-page .mu-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; align-items: stretch; position: relative; z-index: 2; } .mu-page .mu-pricing-card { background: rgba(255, 255, 255, 0.06); padding: 42px 34px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; position: relative; backdrop-filter: blur(20px); opacity: 0; transform: translateY(30px); transition: opacity 1s var(--u-ease), transform 1s var(--u-ease), box-shadow 0.5s var(--u-ease), border-color 0.5s var(--u-ease); } .mu-page .mu-pricing-card.is-in { opacity: 1; transform: translateY(0); } .mu-page .mu-pricing-card:hover { border-color: rgba(123, 196, 232, 0.4); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); transform: translateY(-8px); } .mu-page .mu-pricing-featured { background: linear-gradient(180deg, var(--u-blue-light) 0%, var(--u-blue-mid) 100%); border-color: transparent; color: var(--u-blue-deep); transform: translateY(-12px); box-shadow: 0 20px 40px rgba(75, 163, 217, 0.3); } .mu-page .mu-pricing-featured.is-in { transform: translateY(-12px); } .mu-page .mu-pricing-featured:hover { transform: translateY(-18px); box-shadow: 0 30px 60px rgba(75, 163, 217, 0.4); } .mu-page .mu-pricing-ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--u-blue-deep); color: var(--u-white); padding: 8px 24px; font-family: var(--u-font-serif); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 100px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } .mu-page .mu-pricing-head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); } .mu-page .mu-pricing-featured .mu-pricing-head { border-bottom-color: rgba(26, 75, 140, 0.2); } .mu-page .mu-pricing-idx { display: block; font-family: var(--u-font-en); font-style: italic; font-size: 0.875rem; letter-spacing: 0.25em; color: var(--u-blue-light); margin-bottom: 8px; font-weight: 500; } .mu-page .mu-pricing-featured .mu-pricing-idx { color: var(--u-blue-deep); opacity: 0.7; } .mu-page .mu-pricing-name { font-family: var(--u-font-serif); font-size: 1.8rem; font-weight: 700; color: var(--u-white); margin: 0 0 6px; letter-spacing: 0.04em; } .mu-page .mu-pricing-featured .mu-pricing-name { color: var(--u-blue-deep); } .mu-page .mu-pricing-tag { font-size: 0.875rem; color: var(--u-blue-pale); margin: 0; } .mu-page .mu-pricing-featured .mu-pricing-tag { color: rgba(26, 75, 140, 0.75); } .mu-page .mu-pricing-price { margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-height: 56px; } .mu-page .mu-pricing-price .price-fixed-label { display: block; flex-basis: 100%; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--u-blue-pale); margin-bottom: 4px; } .mu-page .mu-pricing-featured .price-fixed-label { color: rgba(26, 75, 140, 0.65); } .mu-page .mu-pricing-price .price-plus { display: block; flex-basis: 100%; margin-top: 8px; font-size: 0.95rem; font-weight: 600; color: var(--u-blue-pale); } .mu-page .mu-pricing-price .price-plus em { font-style: normal; font-family: var(--u-font-serif); font-size: 1.4rem; color: var(--u-white); margin: 0 2px; } .mu-page .mu-pricing-featured .price-plus { color: rgba(26, 75, 140, 0.85); } .mu-page .mu-pricing-featured .price-plus em { color: var(--u-blue-deep); } .mu-page .mu-pricing-price .price-yen { font-family: var(--u-font-serif); font-size: 1.5rem; color: var(--u-blue-light); } .mu-page .mu-pricing-featured .price-yen { color: var(--u-blue-deep); } .mu-page .mu-pricing-price .price-num { font-family: var(--u-font-serif); font-size: 2.8rem; font-weight: 700; color: var(--u-white); line-height: 1; letter-spacing: 0.02em; } .mu-page .mu-pricing-featured .price-num { color: var(--u-blue-deep); } .mu-page .mu-pricing-price .price-from { font-size: 0.88rem; color: var(--u-blue-pale); margin-left: 4px; } .mu-page .mu-pricing-featured .price-from { color: rgba(26, 75, 140, 0.7); } .mu-page .price-custom { font-family: var(--u-font-serif); font-size: 1.7rem; font-weight: 700; color: var(--u-white); letter-spacing: 0.05em; } .mu-page .mu-pricing-featured .price-custom { color: var(--u-blue-deep); } .mu-page .mu-pricing-list { list-style: none; padding: 0; margin: 0 0 32px; flex: 1; } .mu-page .mu-pricing-list li { position: relative; padding: 12px 0 12px 28px; font-size: 0.9rem; line-height: 1.6; color: var(--u-blue-pale); border-bottom: 1px dashed rgba(255, 255, 255, 0.1); } .mu-page .mu-pricing-featured .mu-pricing-list li { color: rgba(26, 75, 140, 0.85); border-bottom-color: rgba(26, 75, 140, 0.15); } .mu-page .mu-pricing-list li:last-child { border-bottom: none; } .mu-page .mu-pricing-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--u-blue-light); opacity: 0.2; } .mu-page .mu-pricing-list li::after { content: ""; position: absolute; left: 4px; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: var(--u-blue-light); } .mu-page .mu-pricing-featured .mu-pricing-list li::before { background: var(--u-blue-deep); opacity: 0.2; } .mu-page .mu-pricing-featured .mu-pricing-list li::after { background: var(--u-blue-deep); } .mu-page .mu-pricing-btn { display: block; text-align: center; padding: 16px; background: transparent; color: var(--u-white); text-decoration: none; border: 1.5px solid var(--u-blue-light); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; border-radius: 14px; transition: all 0.4s var(--u-ease); } .mu-page .mu-pricing-btn:hover { background: var(--u-blue-light); color: var(--u-blue-deep); transform: translateY(-2px); } .mu-page .mu-pricing-btn-featured { background: var(--u-blue-deep); color: var(--u-white); border-color: var(--u-blue-deep); } .mu-page .mu-pricing-btn-featured:hover { background: transparent; color: var(--u-blue-deep); border-color: var(--u-blue-deep); } .mu-page .mu-pricing-notes { max-width: 800px; margin: 50px auto 0; padding: 26px 32px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; backdrop-filter: blur(10px); position: relative; z-index: 2; } .mu-page .mu-pricing-notes p { font-size: 0.875rem; color: var(--u-blue-pale); margin: 0 0 8px; line-height: 1.8; } .mu-page .mu-pricing-notes p:last-child { margin-bottom: 0; } .mu-page .mu-pricing-notes a { color: var(--u-blue-light); border-bottom: 1px solid var(--u-blue-mid); } @media (max-width: 900px) { .mu-page .mu-pricing-section { padding: 80px 0; } .mu-page .mu-pricing-grid { grid-template-columns: 1fr; gap: 18px; } .mu-page .mu-pricing-featured, .mu-page .mu-pricing-featured.is-in { transform: translateY(0); } .mu-page .mu-pricing-featured:hover { transform: translateY(-6px); } } @media (max-width: 600px) { / 1段積みになるスマホではプラン間の余白を広めに / .mu-page .mu-pricing-grid { gap: 40px; } } / ========================================================================== CLIENT VOICE ========================================================================== / .mu-page .mu-voice-section { background-color: var(--u-cream); background-image: radial-gradient(circle at 3px 3px, rgba(26, 75, 140, 0.08) 2px, transparent 2px), radial-gradient(circle at 19px 19px, rgba(75, 163, 217, 0.05) 1.5px, transparent 1.5px); background-size: 32px 32px, 32px 32px; padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-voice-section::before { content: ""; position: absolute; top: 30%; left: -8%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(123, 196, 232, 0.2) 0%, transparent 60%); filter: blur(80px); pointer-events: none; } .mu-page .mu-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; position: relative; z-index: 2; } .mu-page .mu-voice-card { background: var(--u-white); padding: 38px 32px; border-radius: 24px; position: relative; box-shadow: var(--u-shadow-sm); border: 1px solid rgba(75, 163, 217, 0.08); opacity: 0; transform: translateY(30px); transition: opacity 1s var(--u-ease), transform 1s var(--u-ease), box-shadow 0.5s var(--u-ease); } .mu-page .mu-voice-card.is-in { opacity: 1; transform: translateY(0); } .mu-page .mu-voice-card:hover { box-shadow: var(--u-shadow-lg); transform: translateY(-6px); } .mu-page .mu-voice-card::before { content: "\201C"; position: absolute; top: 20px; right: 30px; font-family: var(--u-font-en); font-size: 5rem; line-height: 1; color: var(--u-blue-mist); font-weight: 700; pointer-events: none; } .mu-page .mu-voice-rating { display: flex; gap: 2px; font-size: 1.05rem; color: var(--u-gold); margin-bottom: 20px; letter-spacing: 0.05em; position: relative; z-index: 2; } .mu-page .mu-voice-text { font-family: var(--u-font-serif); font-size: 0.95rem; line-height: 2; color: var(--u-text-dark); margin: 0 0 28px; position: relative; z-index: 2; } .mu-page .mu-voice-foot { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px dashed rgba(75, 163, 217, 0.2); } .mu-page .mu-voice-avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-mid) 100%); color: var(--u-white); display: flex; align-items: center; justify-content: center; font-family: var(--u-font-serif); font-weight: 700; font-size: 1.15rem; flex-shrink: 0; box-shadow: 0 6px 14px rgba(26, 75, 140, 0.2); } .mu-page .mu-voice-name { font-family: var(--u-font-serif); font-size: 1rem; font-weight: 700; color: var(--u-text-dark); margin-bottom: 2px; } .mu-page .mu-voice-attr { font-size: 0.875rem; color: var(--u-text-dark-3); line-height: 1.5; } @media (max-width: 900px) { .mu-page .mu-voice-section { padding: 80px 0; } .mu-page .mu-voice-grid { grid-template-columns: 1fr; gap: 16px; } } / ========================================================================== AREA FOCUS（箱根・熱海・伊東） ========================================================================== / .mu-page .mu-area-focus-section { background: var(--u-white); padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-area-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; } .mu-page .mu-area-focus-card { background: var(--u-white); border: 1px solid rgba(75, 163, 217, 0.18); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; transition: transform 0.4s var(--u-ease), box-shadow 0.4s var(--u-ease), border-color 0.4s var(--u-ease); box-shadow: 0 4px 20px rgba(26, 75, 140, 0.06); } .mu-page .mu-area-focus-card:hover { transform: translateY(-6px); border-color: var(--u-blue-mid); box-shadow: 0 20px 40px rgba(26, 75, 140, 0.12); } .mu-page .mu-area-focus-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(75, 163, 217, 0.15); } .mu-page .mu-area-focus-badge { display: inline-block; width: fit-content; padding: 4px 12px; font-family: var(--u-font-en); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; color: var(--u-blue-main); background: rgba(75, 163, 217, 0.1); border: 1px solid rgba(75, 163, 217, 0.3); } .mu-page .mu-area-focus-title { font-family: var(--u-font-serif); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; color: var(--u-text-dark); margin: 0; line-height: 1.5; } .mu-page .mu-area-focus-desc { font-size: 0.95rem; line-height: 1.9; color: var(--u-text-dark-2); margin: 0; flex: 1; } .mu-page .mu-area-focus-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; background: var(--u-blue-mist); padding: 16px 18px; } .mu-page .mu-area-focus-features li { font-size: 0.88rem; line-height: 1.6; color: var(--u-text-dark); padding-left: 22px; position: relative; font-weight: 600; } .mu-page .mu-area-focus-features li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--u-blue-main); border-bottom: 2px solid var(--u-blue-main); transform: rotate(-45deg); } .mu-page .mu-area-focus-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; color: var(--u-blue-deep); text-decoration: none; letter-spacing: 0.04em; transition: color 0.3s var(--u-ease), gap 0.3s var(--u-ease); } .mu-page .mu-area-focus-link:hover { color: var(--u-blue-mid); gap: 12px; } .mu-page .mu-area-focus-note { text-align: center; font-size: 0.88rem; color: var(--u-text-dark-3); margin-top: 48px; line-height: 1.8; } @media (max-width: 1024px) { .mu-page .mu-area-focus-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .mu-page .mu-area-focus-section { padding: 80px 0; } .mu-page .mu-area-focus-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } .mu-page .mu-area-focus-card { padding: 24px 20px; gap: 16px; } .mu-page .mu-area-focus-title { font-size: 1.25rem; } .mu-page .mu-area-focus-desc { font-size: 0.92rem; line-height: 1.8; } } @media (max-width: 600px) { .mu-page .mu-area-focus-note { text-align: left; margin-top: 32px; } } / ========================================================================== FAQ ========================================================================== / .mu-page .mu-faq-section { background: var(--u-cream-blue); padding: 120px 0; position: relative; overflow: hidden; } .mu-page .mu-faq-section::before { content: ""; position: absolute; top: 30%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(75, 163, 217, 0.2) 0%, transparent 60%); filter: blur(80px); pointer-events: none; } .mu-page .mu-faq-list { margin-top: 50px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; } .mu-page .mu-faq-item { background: var(--u-white); border: 1px solid rgba(75, 163, 217, 0.1); border-radius: 18px; overflow: hidden; transition: all 0.4s var(--u-ease); box-shadow: var(--u-shadow-sm); } .mu-page .mu-faq-item:hover { border-color: rgba(75, 163, 217, 0.25); box-shadow: var(--u-shadow-md); } .mu-page .mu-faq-item[open] { border-color: var(--u-blue-mid); box-shadow: var(--u-shadow-md); } .mu-page .mu-faq-item summary { list-style: none; } .mu-page .mu-faq-item summary::-webkit-details-marker { display: none; } .mu-page .mu-faq-q { display: flex; align-items: flex-start; gap: 18px; padding: 26px 30px; cursor: pointer; font-family: var(--u-font-serif); font-size: 1rem; font-weight: 600; line-height: 1.7; color: var(--u-text-dark); transition: color 0.4s var(--u-ease); } .mu-page .mu-faq-q:hover { color: var(--u-blue-main); } .mu-page .mu-faq-mark { font-family: var(--u-font-en); font-style: italic; font-size: 1.4rem; color: var(--u-blue-main); line-height: 1.3; flex-shrink: 0; font-weight: 600; } .mu-page .mu-faq-mark-a { color: var(--u-blue-mid); } .mu-page .mu-faq-q-text { flex: 1; } .mu-page .mu-faq-toggle { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-top: 4px; border-radius: 50%; background: var(--u-cream-blue); transition: background 0.4s var(--u-ease); } .mu-page .mu-faq-item[open] .mu-faq-toggle { background: var(--u-blue-main); } .mu-page .mu-faq-toggle::before, .mu-page .mu-faq-toggle::after { content: ""; position: absolute; background: var(--u-blue-main); transition: all 0.4s var(--u-ease); border-radius: 2px; } .mu-page .mu-faq-toggle::before { top: 50%; left: 25%; width: 50%; height: 2px; transform: translateY(-50%); } .mu-page .mu-faq-toggle::after { top: 25%; left: 50%; width: 2px; height: 50%; transform: translateX(-50%); } .mu-page .mu-faq-item[open] .mu-faq-toggle::before, .mu-page .mu-faq-item[open] .mu-faq-toggle::after { background: var(--u-white); } .mu-page .mu-faq-item[open] .mu-faq-toggle::after { transform: translateX(-50%) scaleY(0); } .mu-page .mu-faq-a { display: flex; gap: 18px; padding: 0 30px 30px 30px; animation: faqSlide 0.5s var(--u-ease-out); } @keyframes faqSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .mu-page .mu-faq-a-text { flex: 1; font-size: 0.92rem; line-height: 2.05; color: var(--u-text-dark-2); padding-top: 4px; } .mu-page .mu-faq-a-text a { color: var(--u-blue-main); border-bottom: 1.5px solid var(--u-blue-mid); } @media (max-width: 820px) { .mu-page .mu-faq-section { padding: 80px 0; } .mu-page .mu-faq-q { padding: 22px 24px; gap: 14px; font-size: 0.94rem; } .mu-page .mu-faq-a { padding: 0 24px 24px; gap: 14px; } } / ========================================================================== FINAL CTA ========================================================================== / .mu-page .mu-final-cta { background: linear-gradient(135deg, var(--u-blue-deep) 0%, var(--u-blue-main) 50%, var(--u-blue-mid) 100%); color: var(--u-text-light); padding: 140px 32px 160px; text-align: center; position: relative; overflow: hidden; } .mu-page .mu-final-bg { position: absolute; inset: 0; pointer-events: none; } .mu-page .mu-final-glow { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; } .mu-page .mu-final-glow-1 { width: 550px; height: 550px; top: -20%; left: 5%; background: radial-gradient(circle, var(--u-blue-light) 0%, transparent 65%); animation: finalGlow 10s ease-in-out infinite alternate; } .mu-page .mu-final-glow-2 { width: 450px; height: 450px; bottom: -15%; right: 5%; background: radial-gradient(circle, var(--u-white) 0%, transparent 65%); animation: finalGlow 10s ease-in-out infinite alternate-reverse; opacity: 0.3; } @keyframes finalGlow { 0% { transform: scale(1) translate(0, 0); opacity: 0.3; } 100% { transform: scale(1.15) translate(30px, -20px); opacity: 0.5; } } .mu-page .mu-final-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; } .mu-page .mu-final-eyebrow { justify-content: center; } .mu-page .mu-final-eyebrow .mu-eyebrow-line { background: var(--u-blue-light); } .mu-page .mu-final-eyebrow .mu-eyebrow-en { color: var(--u-blue-light); } .mu-page .mu-final-title { font-family: var(--u-font-serif); font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 700; line-height: 1.55; letter-spacing: 0.04em; margin: 0 0 28px; color: var(--u-white); } .mu-page .mu-final-title em { font-style: normal; color: var(--u-blue-light); background: none; padding: 0; } .mu-page .mu-final-lead { font-size: 1rem; line-height: 2.1; color: var(--u-blue-pale); margin: 0 auto 50px; max-width: 680px; } .mu-page .mu-final-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto 44px; } .mu-page .mu-final-btn { display: flex; align-items: center; gap: 20px; padding: 28px 32px; text-decoration: none; border-radius: 20px; transition: all 0.5s var(--u-ease); text-align: left; backdrop-filter: blur(10px); } .mu-page .mu-final-btn-phone { background: var(--u-white); color: var(--u-blue-deep); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .mu-page .mu-final-btn-phone:hover { background: var(--u-white); transform: translateY(-6px); color: var(--u-blue-deep); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); } .mu-page .mu-final-btn-mail { background: rgba(255, 255, 255, 0.1); color: var(--u-white); border: 1.5px solid rgba(255, 255, 255, 0.3); } .mu-page .mu-final-btn-mail:hover { background: rgba(255, 255, 255, 0.18); border-color: var(--u-blue-light); color: var(--u-white); transform: translateY(-6px); } .mu-page .mu-final-btn-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--u-cream-blue); display: flex; align-items: center; justify-content: center; color: var(--u-blue-main); } .mu-page .mu-final-btn-mail .mu-final-btn-icon { background: rgba(255, 255, 255, 0.15); color: var(--u-white); } .mu-page .mu-final-btn-body { flex: 1; display: flex; flex-direction: column; gap: 2px; } .mu-page .mu-final-btn-label { font-size: 0.875rem; letter-spacing: 0.08em; opacity: 0.75; } .mu-page .mu-final-btn-value { font-family: var(--u-font-serif); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.02em; } / 電話番号だけ大きく強調 / .mu-page .mu-final-btn-phone .mu-final-btn-value { font-size: 2.1rem; letter-spacing: 0.04em; font-weight: 800; } .mu-page .mu-final-btn-hours { font-size: 0.875rem; opacity: 0.7; margin-top: 4px; } .mu-page .mu-final-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; font-size: 0.875rem; color: var(--u-blue-pale); letter-spacing: 0.04em; } @media (max-width: 820px) { .mu-page .mu-final-cta { padding: 80px 20px 100px; } .mu-page .mu-final-actions { grid-template-columns: 1fr; } .mu-page .mu-final-btn { padding: 22px 24px; border-radius: 18px; } .mu-page .mu-final-btn-value { font-size: 1.2rem; } } / ========================================================================== ACCESSIBILITY ========================================================================== / @media (prefers-reduced-motion: reduce) { .mu-page , .mu-page ::before, .mu-page ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .mu-page .mu-ticker-track { animation: none !important; } .mu-page .mu-problem-card, .mu-page .mu-svc-card, .mu-page .mu-area-card, .mu-page .mu-voice-card, .mu-page .mu-pricing-card, .mu-page .hero-title-chunk { opacity: 1 !important; transform: none !important; } } /* ========================================================================== FLOW セクション（ご利用の流れ 5ステップ・カラフル楽しい版） ========================================================================== / .mu-page .mu-flow-section { padding: 120px 0; background: var(--u-cream-blue); position: relative; overflow: hidden; } / 背景に淡い浮遊円（ブランドブルーのみ） / .mu-page .mu-flow-section::before { content: ""; position: absolute; top: 10%; left: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(123, 196, 232, 0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .mu-page .mu-flow-section::after { content: ""; position: absolute; bottom: 10%; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(75, 163, 217, 0.12) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .mu-page .mu-flow-list { list-style: none; padding: 0; margin: 0 auto; max-width: 880px; display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 1; } / 各ステップを繋ぐ点線（縦） / .mu-page .mu-flow-list::before { content: ""; position: absolute; top: 50px; bottom: 50px; left: 48px; width: 2px; background-image: linear-gradient(to bottom, rgba(75, 163, 217, 0.4) 50%, transparent 50%); background-size: 2px 10px; background-repeat: repeat-y; z-index: 0; } .mu-page .mu-flow-item { display: flex; gap: 30px; align-items: flex-start; position: relative; padding: 20px 28px 20px 20px; background: var(--u-white); border-radius: 24px !important; box-shadow: 0 8px 24px rgba(26, 75, 140, 0.06); transition: transform 0.4s var(--u-ease), box-shadow 0.4s var(--u-ease); } .mu-page .mu-flow-item:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(26, 75, 140, 0.12); } / アイコン + STEP ラベル（左側） / .mu-page .mu-flow-icon-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1; } .mu-page .mu-flow-icon { width: 76px; height: 76px; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 8px 18px rgba(26, 75, 140, 0.2); } .mu-page .mu-flow-icon svg { width: 40px; height: 40px; } / ステップのアイコンはブランドブルーで統一（最終ステップのみやや濃く） / .mu-page .mu-flow-item .mu-flow-icon { background: linear-gradient(135deg, var(--u-blue-mid) 0%, var(--u-blue-main) 100%); } .mu-page .mu-flow-item[data-flow-step="5"] .mu-flow-icon { background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-deep) 100%); } .mu-page .mu-flow-step-label { font-family: var(--u-font-en); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--u-text-dark-3); text-transform: uppercase; } .mu-page .mu-flow-step-label strong { font-weight: 800; color: var(--u-blue-deep); margin-left: 2px; } / 本文側（右） / .mu-page .mu-flow-body { flex: 1; padding-top: 4px; } .mu-page .mu-flow-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .mu-page .mu-flow-tag { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 100px !important; line-height: 1.4; } .mu-page .mu-flow-tag-free { color: #ffffff; background: linear-gradient(135deg, var(--u-blue-mid) 0%, var(--u-blue-main) 100%); } .mu-page .mu-flow-tag-time { color: var(--u-blue-deep); background: rgba(75, 163, 217, 0.12); border: 1px solid rgba(75, 163, 217, 0.25); } .mu-page .mu-flow-tag-omakase { color: #ffffff; background: var(--u-blue-deep); } .mu-page .mu-flow-tag-start { color: #ffffff; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-deep) 100%); animation: tagPulse 2s ease-in-out infinite; } @keyframes tagPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 107, 184, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(45, 107, 184, 0); } } .mu-page .mu-flow-title { font-family: var(--u-font-serif); font-size: 1.35rem; font-weight: 800; color: var(--u-text-dark); margin: 0 0 10px; letter-spacing: 0.02em; line-height: 1.5; } .mu-page .mu-flow-text { font-size: 0.98rem; line-height: 1.85; color: var(--u-text-dark-2); margin: 0; } .mu-page .mu-flow-text strong { color: var(--u-blue-deep); font-weight: 700; background: linear-gradient(180deg, transparent 70%, rgba(123, 196, 232, 0.35) 70%); padding: 0 3px; } / 最終ステップは静かなアクセント / .mu-page .mu-flow-item-final { background: linear-gradient(135deg, var(--u-white) 0%, var(--u-cream-blue) 100%); border: 1px solid rgba(45, 107, 184, 0.2); position: relative; } / CTA 部分 / .mu-page .mu-flow-cta { margin-top: 70px; text-align: center; position: relative; z-index: 1; } .mu-page .mu-flow-cta-text { font-family: var(--u-font-serif); font-size: 1.15rem; font-weight: 700; color: var(--u-text-dark); margin: 0 0 22px; letter-spacing: 0.03em; } .mu-page .mu-flow-cta-text em { font-style: normal; color: var(--u-blue-deep); background: linear-gradient(180deg, transparent 65%, rgba(123, 196, 232, 0.45) 65%); padding: 0 6px; } .mu-page .mu-flow-cta-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 56px; background: linear-gradient(135deg, var(--u-blue-main) 0%, var(--u-blue-deep) 100%); color: var(--u-white); border-radius: 100px !important; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.05em; box-shadow: 0 12px 36px rgba(26, 75, 140, 0.35); transition: transform 0.3s var(--u-ease), box-shadow 0.3s var(--u-ease); position: relative; } .mu-page .mu-flow-cta-btn .cta-btn-sub { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; opacity: 0.9; } .mu-page .mu-flow-cta-btn .cta-btn-main { font-size: 1.25rem; font-weight: 800; letter-spacing: 0.05em; } .mu-page .mu-flow-cta-btn svg { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); transition: transform 0.3s var(--u-ease); } .mu-page .mu-flow-cta-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 44px rgba(26, 75, 140, 0.45); } .mu-page .mu-flow-cta-btn:hover svg { transform: translateY(-50%) translateX(4px); } @media (max-width: 820px) { .mu-page .mu-flow-section { padding: 80px 0; } .mu-page .mu-flow-list { gap: 20px; } .mu-page .mu-flow-list::before { display: none; } .mu-page .mu-flow-item { flex-direction: column; gap: 16px; padding: 24px 20px; } .mu-page .mu-flow-icon-wrap { flex-direction: row; align-self: flex-start; align-items: center; gap: 14px; } .mu-page .mu-flow-icon { width: 58px; height: 58px; } .mu-page .mu-flow-icon svg { width: 30px; height: 30px; } .mu-page .mu-flow-step-label { font-size: 1rem; letter-spacing: 0.25em; } .mu-page .mu-flow-step-label strong { font-size: 1.25rem; } .mu-page .mu-flow-title { font-size: 1.15rem; } .mu-page .mu-flow-cta-btn { padding: 18px 28px; width: 100%; } .mu-page .mu-flow-cta-btn .cta-btn-main { font-size: 1.1rem; } .mu-page .mu-flow-cta-btn svg { right: 18px; } } / ========================================================================== 装飾円（まるっとサポートのモチーフ）— 各セクションでゆっくり回転 ========================================================================== / .mu-page .mu-deco-ring { position: absolute; pointer-events: none; z-index: 0; opacity: 0.55; will-change: transform; } @keyframes decoRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes decoRingRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } / お悩みセクション：左上に大きめ、右下に小さめ / .mu-page .mu-problem-section .mu-deco-ring-a { width: 320px; height: 320px; top: 6%; left: -60px; color: var(--u-blue-mid); animation: decoRingRotate 60s linear infinite; } .mu-page .mu-problem-section .mu-deco-ring-b { width: 220px; height: 220px; bottom: 8%; right: -40px; color: var(--u-blue-light); animation: decoRingRotateReverse 80s linear infinite; } / 比較セクション：右上 / .mu-page .mu-compare-section .mu-deco-ring-c { width: 260px; height: 260px; top: 10%; right: -70px; color: var(--u-blue-mid); opacity: 0.35; animation: decoRingRotate 90s linear infinite; } / お客様の声：左下 / .mu-page .mu-voice-section .mu-deco-ring-d { width: 280px; height: 280px; bottom: 5%; left: -80px; color: var(--u-blue-mid); opacity: 0.4; animation: decoRingRotateReverse 100s linear infinite; } / FAQ：右中央 / .mu-page .mu-faq-section .mu-deco-ring-e { width: 240px; height: 240px; top: 40%; right: -90px; color: var(--u-blue-light); opacity: 0.4; animation: decoRingRotate 70s linear infinite; } / 最終 CTA（ダーク背景）：左上と右下に白系 / .mu-page .mu-final-cta .mu-deco-ring-f { width: 340px; height: 340px; top: -50px; left: -80px; color: rgba(255, 255, 255, 0.85); opacity: 0.3; animation: decoRingRotate 70s linear infinite; } .mu-page .mu-final-cta .mu-deco-ring-g { width: 260px; height: 260px; bottom: -40px; right: -60px; color: rgba(255, 255, 255, 0.85); opacity: 0.25; animation: decoRingRotateReverse 90s linear infinite; } / モバイルではサイズを縮小 / @media (max-width: 820px) { .mu-page .mu-deco-ring { opacity: 0.3; } .mu-page .mu-problem-section .mu-deco-ring-a, .mu-page .mu-problem-section .mu-deco-ring-b { width: 180px; height: 180px; } .mu-page .mu-compare-section .mu-deco-ring-c, .mu-page .mu-voice-section .mu-deco-ring-d, .mu-page .mu-faq-section .mu-deco-ring-e { width: 160px; height: 160px; } .mu-page .mu-final-cta .mu-deco-ring-f, .mu-page .mu-final-cta .mu-deco-ring-g { width: 200px; height: 200px; } } / ========================================================================== FLAT DESIGN: border-radius 一括リセットユーザー要望により、装飾的な角丸を全て除去しフラットデザインに統一。例外として、本来「円形」であるべき要素（ドット・アバター・ブロブ）のみ保持。 ========================================================================== / #body_wrap.mu-page , #body_wrap.mu-page ::before, #body_wrap.mu-page ::after { border-radius: 0 !important; } /* 円形要素の例外（ドット・アバター・背景ブロブ・サービスアイコン・比較アイコン・フローアイコン） / #body_wrap.mu-page .badge-dot, #body_wrap.mu-page .mu-hero-blob, #body_wrap.mu-page .mu-hero-blob-1, #body_wrap.mu-page .mu-hero-blob-2, #body_wrap.mu-page .mu-hero-blob-3, #body_wrap.mu-page .mu-voice-avatar, #body_wrap.mu-page .mu-svc-icon, #body_wrap.mu-page .mu-check, #body_wrap.mu-page .mu-cross, #body_wrap.mu-page .mu-compare-row-icon, #body_wrap.mu-page .mu-flow-icon, #body_wrap.mu-page .mu-flow-section::before, #body_wrap.mu-page .mu-flow-section::after { border-radius: 50% !important; } / フローカードとタグ・CTAボタンの角丸 / #body_wrap.mu-page .mu-flow-item { border-radius: 24px !important; } #body_wrap.mu-page .mu-flow-tag, #body_wrap.mu-page .mu-flow-cta-btn { border-radius: 100px !important; } / サービスカードは親しみやすい角丸に / #body_wrap.mu-page .mu-svc-card { border-radius: 20px !important; } / 比較表の外枠も角丸に */ #body_wrap.mu-page .mu-compare-wrap { border-radius: 16px !important; }