/* ================================================================ mobile-polish.css — スマホ縦画面専用・読みやすさ最大化 index.html の 末尾に追加してください: ================================================================ */ @media (max-width: 767px) { /* ============================================================ ベース: フォント・行間のチューニング 日本語は詰まって読みにくくなりやすいので余裕を持たせる ============================================================ */ body { font-size: 15px; -webkit-text-size-adjust: 100%; letter-spacing: 0.01em; } /* ============================================================ ナビ: コンパクトに ============================================================ */ nav .max-w-7xl { padding-left: 1rem !important; padding-right: 1rem !important; height: 56px !important; } nav .text-xl { font-size: 1.1rem !important; } nav .h-10 { height: 2.2rem !important; width: 2.2rem !important; } /* ============================================================ ヒーローセクション ============================================================ */ #hero { padding-top: 72px !important; padding-bottom: 3rem !important; min-height: 100svh !important; } #hero .relative.z-10 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; gap: 0 !important; } /* キッカー（「大学生向け OS」バッジ） */ #hero .mb-6 { transform: translateY(-10px); } #hero .mb-6 span { font-size: 0.72rem !important; padding: 4px 12px !important; letter-spacing: 0.08em !important; } /* メインタイトル「ラクレター」 */ #hero h1 { font-size: clamp(2.6rem, 11.5vw, 3.5rem) !important; line-height: 1.15 !important; margin-bottom: 1.1rem !important; letter-spacing: -0.01em !important; } /* タグライン（大きいほうの説明文） */ #hero .relative.z-10 > p:nth-of-type(1) { font-size: clamp(1.15rem, 5.2vw, 1.4rem) !important; line-height: 1.65 !important; margin-bottom: 0.9rem !important; letter-spacing: 0.01em !important; opacity: 0.95 !important; } /* サブ説明文 */ #hero .relative.z-10 > p:nth-of-type(2) { font-size: clamp(0.82rem, 3.8vw, 0.95rem) !important; line-height: 1.85 !important; max-width: 100% !important; margin-bottom: 1.75rem !important; opacity: 0.78 !important; letter-spacing: 0.015em !important; } /* CTAボタン群 */ #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { flex-direction: column !important; align-items: center !important; gap: 0.75rem !important; width: 100% !important; } #hero a[href*="microsoft"], #hero button:has(span) { width: min(100%, 320px) !important; padding: 0.85rem 1.5rem !important; font-size: 1rem !important; justify-content: center !important; } /* ============================================================ セクション共通: 上下 padding を引き締める ============================================================ */ section.py-24, section.md\:py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } /* セクション内の横 padding */ .max-w-7xl.px-6, .max-w-6xl.px-6, .max-w-5xl.px-6, .max-w-4xl.px-6 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; } /* ============================================================ rl-concept-section（中央のコンセプト短文ブロック） ============================================================ */ .rl-concept-section { padding: 2.5rem 1.1rem !important; } .rl-concept-section h2, .rl-concept-section [class*="text-4xl"], .rl-concept-section [class*="text-5xl"] { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.45 !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* ============================================================ 授業コスト (lecture-cost) セクション ============================================================ */ #lecture-cost { padding: 2.5rem 1.1rem !important; } #lecture-cost h2, #lecture-cost [class*="text-4xl"], #lecture-cost [class*="text-5xl"], #lecture-cost [class*="text-6xl"] { font-size: clamp(1.45rem, 6.5vw, 2rem) !important; line-height: 1.5 !important; } #lecture-cost p, #lecture-cost [class*="text-lg"], #lecture-cost [class*="text-xl"] { font-size: 0.9rem !important; line-height: 1.8 !important; } /* 料金数字 */ #lecture-cost [class*="text-7xl"], #lecture-cost [class*="text-8xl"], #lecture-cost [class*="text-9xl"] { font-size: clamp(2.8rem, 13vw, 4rem) !important; } /* ============================================================ features セクション (compare カード) ============================================================ */ #features { padding-top: 3rem !important; padding-bottom: 3rem !important; } .compare-grid { gap: 1.1rem !important; } .compare-card { padding: 1.4rem !important; min-height: unset !important; border-radius: 20px !important; } .compare-card h3 { font-size: 1.1rem !important; line-height: 1.5 !important; margin-bottom: 0.75rem !important; } .compare-card p.text-base { font-size: 0.84rem !important; line-height: 1.75 !important; margin-bottom: 0.85rem !important; } .compare-card p.text-sm { font-size: 0.77rem !important; line-height: 1.6 !important; } .compare-icon { width: 52px !important; height: 52px !important; } .compare-card .mb-6 { margin-bottom: 0.9rem !important; } /* ============================================================ showcase セクション ============================================================ */ #showcase h2 { font-size: clamp(1.35rem, 6.5vw, 1.9rem) !important; line-height: 1.5 !important; margin-bottom: 1rem !important; } #showcase p.text-xl, #showcase p.md\:text-2xl { font-size: 0.88rem !important; line-height: 1.8 !important; } #showcase .mt-8 { margin-top: 1.25rem !important; } #showcase #btn-save-flow { padding: 0.75rem 1.4rem !important; font-size: 0.9rem !important; gap: 0.5rem !important; } #showcase .mb-16 { margin-bottom: 1.5rem !important; } /* ============================================================ messaging セクション ← 写真に写っていた部分 ============================================================ */ #messaging { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; } /* 各ブロックの縦間隔を詰める */ #messaging .space-y-20 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem !important; } /* 見出し：大きすぎたのを適切なサイズへ */ #messaging h3 { font-size: clamp(1.35rem, 6.2vw, 1.75rem) !important; line-height: 1.5 !important; margin-bottom: 0.85rem !important; letter-spacing: -0.005em !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* 本文：行間と文字サイズを最適化 */ #messaging p { font-size: clamp(0.875rem, 4vw, 1rem) !important; line-height: 1.9 !important; color: rgba(245, 245, 240, 0.82) !important; letter-spacing: 0.015em !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* テキスト配置：右寄せ・中央寄せは全部左に */ #messaging .text-right, #messaging .text-center { text-align: left !important; } /* chalk-underline のラインが長すぎないように */ #messaging .chalk-underline { display: block !important; } /* ============================================================ FAQ セクション ============================================================ */ #faq { padding-top: 3rem !important; padding-bottom: 3rem !important; } #faq h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.45 !important; margin-bottom: 1.25rem !important; } #faq-chips { gap: 7px !important; flex-wrap: wrap !important; } .raku-faq-chip { font-size: 12px !important; height: 30px !important; padding: 0 12px !important; line-height: 30px !important; } .raku-faq-item { border-radius: 10px !important; } .raku-faq-q { padding: 14px 14px !important; gap: 10px !important; } .raku-faq-item.is-open .raku-faq-q { padding-left: 22px !important; } .raku-faq-qicon { width: 26px !important; height: 26px !important; font-size: 13px !important; flex: 0 0 26px !important; border-radius: 13px !important; } .raku-faq-qtext { font-size: 13.5px !important; line-height: 1.5 !important; } .raku-faq-arrow { font-size: 10px !important; } .raku-faq-answer { padding: 0 14px 0 14px !important; } .raku-faq-item.is-open .raku-faq-answer { padding-bottom: 14px !important; } .raku-faq-ans-row { gap: 10px !important; margin-top: 10px !important; } .raku-faq-aicon { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; border-radius: 13px !important; font-size: 13px !important; } .raku-faq-atext { font-size: 13px !important; line-height: 1.75 !important; } /* FAQ のホバー効果はスマホでは無効 */ .raku-faq-item:hover:not(.is-open) { transform: none !important; box-shadow: none !important; } /* ============================================================ pricing セクション ============================================================ */ #pricing { padding-top: 3rem !important; padding-bottom: 3rem !important; } #pricing h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.45 !important; margin-bottom: 0.75rem !important; } #pricing .shadow-card { padding: 1.75rem 1.25rem !important; border-radius: 20px !important; } #pricing h3 { font-size: 1.35rem !important; } #pricing ul li, #pricing .space-y-2 p { font-size: 0.875rem !important; line-height: 1.7 !important; } /* ============================================================ final CTA セクション ============================================================ */ #final-cta { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } #final-cta h2 { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; line-height: 1.4 !important; margin-bottom: 0.75rem !important; } #final-cta p { font-size: 0.9rem !important; line-height: 1.75 !important; } /* ============================================================ フッター ============================================================ */ footer .max-w-7xl { padding-left: 1.1rem !important; padding-right: 1.1rem !important; } footer .text-sm { font-size: 0.78rem !important; } footer .mt-8 { margin-top: 1.5rem !important; } /* ============================================================ 汎用ユーティリティ上書き: モバイルで too-large なサイズを抑制 ============================================================ */ /* スクロールインジケーター（下の矢印アイコン）のサイズ */ .scroll-indicator { height: 2px !important; } /* 余白が広すぎる mb-16/mb-12/mb-10 はモバイルで縮小 */ .mb-16 { margin-bottom: 1.75rem !important; } .mb-12 { margin-bottom: 1.5rem !important; } .mb-10 { margin-bottom: 1.25rem !important; } /* ============================================================ テキスト折り返し最適化（日本語の禁則処理） ============================================================ */ h1, h2, h3, h4, p, li, span { word-break: keep-all; overflow-wrap: break-word; hanging-punctuation: allow-end; } /* ============================================================ パフォーマンス: スマホで重い 3D 変換をオフ ============================================================ */ .fx-card, .compare-card { transform: none !important; transform-style: flat !important; } /* グリッド / アニメーション負荷軽減 */ body::before { display: none !important; } /* grain overlay も隠す（モバイルで重い） */ #fx-grain { display: none !important; } /* ============================================================ スクロールプログレスバー: モバイルは 2px に ============================================================ */ #fx-progress { height: 2px !important; } #fx-progress > div { height: 2px !important; } } /* end @media (max-width: 767px) */ /* ================================================================ iPhone SE / 極小スマホ（375px 以下）追加チューニング ================================================================ */ @media (max-width: 375px) { #hero h1 { font-size: 2.4rem !important; } #messaging h3 { font-size: 1.2rem !important; } .compare-card h3 { font-size: 1rem !important; } #faq h2, #pricing h2, #showcase h2 { font-size: 1.4rem !important; } .raku-faq-qtext { font-size: 12.5px !important; } .raku-faq-atext { font-size: 12px !important; } } @media (max-width: 767px) { /* ============================================================ HERO 崩れ修正（スマホのみ） PC用の横並び/右寄せ/はみ出しを強制解除 ============================================================ */ html, body { overflow-x: hidden !important; } #hero { overflow: hidden !important; } /* hero 内部を必ず1カラム化 */ #hero .relative.z-10, #hero .max-w-7xl, #hero .max-w-6xl, #hero .max-w-5xl { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* PC側のカラム幅・押し出しを解除 */ #hero [class*="w-1/2"], #hero [class*="w-2/3"], #hero [class*="w-3/5"], #hero [class*="w-3/4"], #hero [class*="basis-1/2"], #hero [class*="basis-2/3"], #hero [class*="basis-3/5"], #hero [class*="basis-3/4"], #hero [class*="max-w-2xl"], #hero [class*="max-w-3xl"], #hero [class*="max-w-4xl"] { width: 100% !important; max-width: 100% !important; flex: none !important; } /* 右にズレる原因になりやすい transform / translate / margin を解除 */ #hero * { max-width: 100%; } #hero [style*="translate"], #hero [style*="transform"] { transform: none !important; } #hero .ml-auto, #hero .mr-auto, #hero .mx-auto { margin-left: auto !important; margin-right: auto !important; } /* タイトル・説明・ボタンを中央固定 */ #hero h1, #hero p, #hero .flex, #hero .sm\:flex-row { text-align: center !important; justify-content: center !important; align-items: center !important; } /* ボタン群の横幅と位置を安定化 */ #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { width: 100% !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; } /* 背景の大きい装飾が押し出し要因なら抑制 */ #hero::before, #hero::after { max-width: 100% !important; } } /* ========== Patch v7: mobile hero text + center dots cleanup ========== */ @media (max-width: 768px) { /* 下側の説明文だけ、スマホ時に少し小さくして詰まり感を減らす */ #hero .relative.z-10 > p:nth-of-type(2) { font-size: 0.95rem !important; line-height: 1.75 !important; max-width: 27rem !important; margin-bottom: 2rem !important; } /* ヒーロー中央に並んで見える点々をスマホ時のみ非表示 */ #hero .chalk-particle { display: none !important; } } /* ========== Patch v8: mobile hero headline slightly smaller ========== */ @media (max-width: 768px) { #hero .relative.z-10 > p:nth-of-type(1) { font-size: 1.7rem !important; line-height: 1.45 !important; margin-bottom: 1rem !important; } } /* ========== Patch v9: mobile hero text size fine-tune ========== */ @media (max-width: 768px) { /* 「ラクレター」を少し大きく */ #hero h1 { font-size: clamp(3.05rem, 13.2vw, 4rem) !important; line-height: 1.12 !important; } /* 真ん中の説明文を少し小さく */ #hero .relative.z-10 > p:nth-of-type(1) { font-size: 1.52rem !important; line-height: 1.42 !important; margin-bottom: 0.92rem !important; } /* 下の説明文をもう少し小さく */ #hero .relative.z-10 > p:nth-of-type(2) { font-size: 0.88rem !important; line-height: 1.72 !important; margin-bottom: 1.85rem !important; } } /* ========== Patch v10: mobile hero block slightly higher ========== */ @media (max-width: 768px) { /* モバイル時のみ、ヒーロー全体の塊を少しだけ上に寄せる */ #hero .relative.z-10 { margin-top: -24px !important; } } @media (max-width: 768px) { #hero .relative.z-10 > p:nth-of-type(2) { display: none !important; } } @media (max-width: 768px) { /* キャッチコピーとCTAを少し近づける */ #hero .relative.z-10 > p:nth-of-type(1) { margin-bottom: 0.48rem !important; } #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { margin-top: 12px !important; max-width: 240px !important; } /* 「10秒で体験」ボタンをやや小さく */ #btn-3min { min-width: 0 !important; width: auto !important; padding: 0.72rem 1.45rem !important; font-size: 0.94rem !important; line-height: 1.1 !important; } } @media (max-width: 768px) { #hero .mb-6 span { font-size: 0.9rem !important; padding: 6px 14px !important; letter-spacing: 0.06em !important; } } @media (max-width: 768px) { .flow::after { content: "→ 右にスライド\A拡大もできます"; white-space: pre-line; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 13px; line-height: 1.45; letter-spacing: 0.04em; text-align: center; color: rgba(255, 255, 255, 0.82); background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; padding: 10px 16px 11px; backdrop-filter: blur(4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: rlSwipeHint 1.4s ease-in-out infinite; pointer-events: none; z-index: 30; } } /* ========== Patch v12: mobile-only download guide + hero download hide ========== */ @media (max-width: 768px) { /* ダウンロード手順ボタンを中央の空きに収める */ nav .max-w-7xl { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; column-gap: 8px !important; } nav .max-w-7xl > button:first-child { min-width: 0 !important; gap: 0.45rem !important; } nav .text-xl { font-size: 1rem !important; } .ideology-btn { height: 34px !important; padding: 0 12px !important; gap: 4px !important; font-size: 0.72rem !important; letter-spacing: 0.02em !important; white-space: nowrap !important; flex-shrink: 0 !important; } .ideology-btn__icon { display: none !important; } .mobile-download-guide-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; justify-self: center !important; min-width: 0 !important; max-width: 112px !important; width: 100% !important; height: 34px !important; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.04) !important; color: rgba(245,245,240,0.92) !important; font-size: 0.64rem !important; font-weight: 700 !important; letter-spacing: 0.01em !important; line-height: 1 !important; white-space: nowrap !important; backdrop-filter: blur(6px) !important; -webkit-tap-highlight-color: transparent !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ヒーローのダウンロードボタンはスマホでは非表示 */ #hero-download-btn { display: none !important; } .mobile-download-guide-panel { position: fixed !important; inset: 0 !important; z-index: 9999 !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; background: rgba(3, 8, 10, 0.42) !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 260ms ease !important; } .mobile-download-guide-panel.is-open { opacity: 1 !important; pointer-events: auto !important; } .mobile-download-guide-sheet { position: relative !important; width: 100% !important; height: 100% !important; background: radial-gradient(circle at 18% 12%, rgba(255,255,255,0.07), transparent 20%), linear-gradient(180deg, #18211f 0%, #111716 100%) !important; color: rgba(245,245,240,0.96) !important; padding: max(78px, env(safe-area-inset-top) + 22px) 22px 28px !important; transform-origin: left center !important; transform: perspective(1400px) rotateY(-78deg) !important; opacity: 0 !important; transition: transform 560ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease !important; box-shadow: 0 10px 50px rgba(0,0,0,0.34) !important; overflow-y: auto !important; } .mobile-download-guide-panel.is-open .mobile-download-guide-sheet { transform: perspective(1400px) rotateY(0deg) !important; opacity: 1 !important; } .mobile-download-guide-close { position: absolute !important; top: 68vh !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; } .mobile-download-guide-kicker { margin: 0 0 10px !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; color: rgba(245,245,240,0.64) !important; } .mobile-download-guide-list { margin: 0 !important; padding-left: 1.2em !important; display: grid !important; gap: 18px !important; } .mobile-download-guide-list li { font-size: 1rem !important; line-height: 1.9 !important; color: rgba(245,245,240,0.92) !important; } .mobile-download-guide-end { margin: 28px 0 0 !important; font-size: 0.98rem !important; color: rgba(245,245,240,0.72) !important; } } @media (min-width: 769px) { .mobile-download-guide-btn, .mobile-download-guide-panel { display: none !important; } } @media (max-width: 768px) { .mobile-hero-feature-list { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.45rem 0.45rem !important; margin: 1rem auto 0 !important; padding: 0 !important; max-width: 310px !important; list-style: none !important; transform: translateY(82px) !important; position: relative !important; } .mobile-hero-feature-list li { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.34rem 0.62rem !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.04) !important; font-size: 0.84rem !important; line-height: 1 !important; color: rgba(245,245,240,0.9) !important; white-space: nowrap !important; letter-spacing: 0.01em !important; opacity: 0 !important; will-change: transform, opacity !important; transition: transform 720ms cubic-bezier(.22,.9,.2,1), opacity 720ms cubic-bezier(.22,.9,.2,1) !important; } .mobile-hero-feature-list li:nth-child(odd) { transform: translateX(-120vw) !important; } .mobile-hero-feature-list li:nth-child(even) { transform: translateX(120vw) !important; } .mobile-hero-feature-list.is-entered li { opacity: 1 !important; transform: translateX(0) !important; } .mobile-hero-feature-list li:nth-child(1) { transition-delay: 0.05s !important; } .mobile-hero-feature-list li:nth-child(2) { transition-delay: 0.13s !important; } .mobile-hero-feature-list li:nth-child(3) { transition-delay: 0.21s !important; } .mobile-hero-feature-list li:nth-child(4) { transition-delay: 0.29s !important; } .mobile-hero-feature-list li:nth-child(5) { transition-delay: 0.37s !important; } .mobile-hero-feature-list li:nth-child(6) { transition-delay: 0.45s !important; } .mobile-hero-feature-list li:nth-child(7) { transition-delay: 0.53s !important; } .mobile-hero-feature-list li:nth-child(8) { transition-delay: 0.61s !important; } .mobile-hero-feature-list li:nth-child(9) { transition-delay: 0.69s !important; } .mobile-hero-feature-list li::before { content: none !important; } .mobile-hero-feature-list::after { content: "↓"; display: block !important; width: 100% !important; margin-top: 0.9rem !important; text-align: center !important; font-size: 1.35rem !important; line-height: 1 !important; color: rgba(245,245,240,0.58) !important; text-shadow: 0 0 10px rgba(255,255,255,0.12) !important; animation: rlMobileHeroDownHint 1.8s ease-in-out infinite !important; pointer-events: none !important; } } @keyframes rlMobileHeroDownHint { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 0.95; } } @media (min-width: 769px) { .mobile-hero-feature-list { display: none !important; } } @media (max-width: 768px) { /* 講義単価の横並び計算機を縦並びにする */ #lecture-cost div[style*="grid-template-columns"]:has(#calc-tuition):has(#calc-classes):has(#calc-result) { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; justify-content: flex-start !important; } #lecture-cost div[style*="grid-template-columns"]:has(#calc-tuition):has(#calc-classes):has(#calc-result) > div { width: 100% !important; } #lecture-cost div[style*="grid-template-columns"]:has(#calc-tuition):has(#calc-classes):has(#calc-result) > span { display: block !important; margin: 0 !important; text-align: center !important; font-size: 24px !important; line-height: 1 !important; color: rgba(245,247,244,.42) !important; } #lecture-cost #calc-tuition, #lecture-cost #calc-classes, #lecture-cost #calc-result { min-height: 58px !important; } } /* ========== Patch v13: hide mobile floating 3-tool buttons ========== */ @media (max-width: 768px) { /* 右下に出る 3連の丸ボタン（ペン / 消しゴム / ゴミ箱）を非表示 */ body > div[class*="fixed"][class*="bottom-"][class*="right-"][class*="flex"]:has(> button:nth-child(3)), body > div[class*="fixed"][class*="bottom-"][class*="right-"][class*="flex"]:has(> a:nth-child(3)), body > div[class*="fixed"][class*="bottom-"][class*="right-"][class*="grid"]:has(> button:nth-child(3)), body > div[class*="fixed"][class*="bottom-"][class*="right-"][class*="grid"]:has(> a:nth-child(3)), .floating-action-buttons, .drawing-tools, .annotation-toolbar, .edit-toolbar, [data-drawing-tools], [data-edit-toolbar], [data-mobile-tools] { display: none !important; } } /* ========== Patch v14: hero first-view statement redesign ========== */ #hero .hero-kicker-wrap { margin-bottom: 1.25rem !important; } #hero .hero-kicker-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.46rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.13); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); box-shadow: 0 14px 34px rgba(0,0,0,0.24); backdrop-filter: blur(8px); } #hero .hero-flow-copy { width: min(100%, 780px); margin: 0 auto 1.5rem; display: grid; gap: 0.9rem; } #hero .hero-flow-card { position: relative; overflow: hidden; padding: 1.15rem 1.2rem 1.2rem; border-radius: 24px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(18,25,29,0.86), rgba(12,18,22,0.82)); backdrop-filter: blur(10px); box-shadow: 0 18px 46px rgba(0,0,0,0.28); text-align: left; } #hero .hero-flow-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 30%); } #hero .hero-flow-card--current { border-color: rgba(255, 198, 114, 0.18); background: linear-gradient(180deg, rgba(38,28,20,0.88), rgba(22,16,12,0.84)); } #hero .hero-flow-card--after { border-color: rgba(92, 198, 191, 0.24); background: linear-gradient(180deg, rgba(15,35,36,0.9), rgba(10,22,24,0.86)); box-shadow: 0 18px 52px rgba(0,0,0,0.3), 0 0 0 1px rgba(92,198,191,0.07) inset; } #hero .hero-flow-label { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.72rem; padding: 0.34rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,198,114,0.18); background: rgba(255,198,114,0.08); color: rgba(255,221,170,0.96); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.05em; } #hero .hero-flow-label--accent { border-color: rgba(92,198,191,0.24); background: rgba(92,198,191,0.1); color: rgba(182,255,245,0.98); } #hero .hero-flow-text { display: grid; gap: 0.38rem; color: rgba(250,247,239,0.96); font-size: clamp(1.08rem, 2.35vw, 1.5rem); font-weight: 600; line-height: 1.8; letter-spacing: 0.01em; text-wrap: balance; } #hero .hero-flow-text--accent { color: rgba(240,255,252,0.98); } #hero .hero-flow-row { position: relative; z-index: 1; } #hero .hero-flow-arrow { display: inline-block; margin: 0 0.28em; color: rgba(176, 237, 229, 0.94); font-weight: 700; } #hero .hero-flow-card--current .hero-flow-arrow { color: rgba(255, 208, 138, 0.92); } #hero .hero-flow-highlight { color: #9ff8ea; font-weight: 800; text-shadow: 0 0 18px rgba(118,241,224,0.18); } @media (max-width: 768px) { #hero .relative.z-10 { margin-top: -42px !important; } #hero .hero-kicker-wrap { margin-bottom: 0.9rem !important; } #hero .hero-kicker-pill { padding: 0.4rem 0.88rem !important; font-size: 0.82rem !important; letter-spacing: 0.05em !important; } #hero .hero-flow-copy { gap: 0.72rem !important; margin-bottom: 1rem !important; } #hero .hero-flow-card { padding: 0.98rem 0.96rem 1.02rem !important; border-radius: 22px !important; } #hero .hero-flow-label { margin-bottom: 0.6rem !important; padding: 0.28rem 0.62rem !important; font-size: 0.74rem !important; } #hero .hero-flow-text { font-size: clamp(1.02rem, 4.9vw, 1.34rem) !important; line-height: 1.72 !important; letter-spacing: 0 !important; gap: 0.18rem !important; } #hero .hero-flow-arrow { margin: 0 0.18em !important; } #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { margin-top: 0.95rem !important; max-width: 220px !important; } .mobile-hero-feature-list { margin-top: 0.72rem !important; max-width: 300px !important; transform: translateY(32px) !important; } .mobile-hero-feature-list li { font-size: 0.78rem !important; padding: 0.33rem 0.56rem !important; } .mobile-hero-feature-list::after { margin-top: 0.72rem !important; font-size: 1.18rem !important; } } /* ========== Patch v15: hero copy without plates ========== */ #hero .hero-flow-copy { width: min(100%, 820px); margin: 0 auto 1.65rem; display: grid; gap: 0.9rem; } #hero .hero-flow-section { text-align: center; } #hero .hero-flow-divider { width: min(112px, 32vw); height: 1px; margin: 0.05rem auto 0.15rem; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0)); opacity: 0.92; } #hero .hero-flow-label { display: inline-block; margin-bottom: 0.7rem; font-family: 'Noto Serif JP', serif; font-size: 1.02rem; font-weight: 900; letter-spacing: 0.14em; color: rgba(255, 220, 168, 0.92); text-shadow: 0 0 18px rgba(255, 190, 120, 0.08); } #hero .hero-flow-label--accent { color: rgba(173, 247, 236, 0.98); text-shadow: 0 0 22px rgba(108, 229, 214, 0.12); } #hero .hero-flow-text { display: grid; gap: 0.28rem; font-size: clamp(1.16rem, 2.8vw, 1.85rem); line-height: 1.78; letter-spacing: 0.01em; color: rgba(250,247,241,0.94); font-weight: 700; text-wrap: balance; } #hero .hero-flow-text--accent { color: rgba(245,255,252,0.99); } #hero .hero-flow-row { display: block; } #hero .hero-flow-section--current .hero-flow-row:first-child { font-size: 0.98em; opacity: 0.96; } #hero .hero-flow-section--current .hero-flow-row:last-child { font-size: 1.02em; opacity: 0.86; } #hero .hero-flow-section--after .hero-flow-row:first-child, #hero .hero-flow-section--after .hero-flow-row:last-child { font-size: 1.03em; } #hero .hero-flow-arrow { display: inline-block; margin: 0 0.26em; font-weight: 900; opacity: 0.88; } #hero .hero-flow-section--current .hero-flow-arrow { color: rgba(255, 201, 122, 0.9); } #hero .hero-flow-section--after .hero-flow-arrow { color: rgba(152, 240, 228, 0.92); } #hero .hero-flow-highlight { font-weight: 900; color: #9ff8ea; text-shadow: 0 0 18px rgba(118,241,224,0.18); } @media (max-width: 768px) { #hero .relative.z-10 { margin-top: -44px !important; } #hero .hero-kicker-wrap { margin-bottom: 0.72rem !important; } #hero .hero-kicker-pill { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; font-size: 0.82rem !important; letter-spacing: 0.08em !important; color: rgba(245,245,240,0.72) !important; } #hero .hero-flow-copy { gap: 0.78rem !important; margin-bottom: 1.06rem !important; } #hero .hero-flow-label { margin-bottom: 0.44rem !important; font-size: 0.86rem !important; letter-spacing: 0.12em !important; } #hero .hero-flow-text { gap: 0.14rem !important; font-size: clamp(1.08rem, 5.45vw, 1.42rem) !important; line-height: 1.72 !important; letter-spacing: -0.01em !important; } #hero .hero-flow-row { max-width: 100% !important; } #hero .hero-flow-divider { width: min(88px, 28vw) !important; margin: 0 auto !important; } #hero .hero-flow-arrow { margin: 0 0.14em !important; } #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { margin-top: 0.8rem !important; max-width: 220px !important; } .mobile-hero-feature-list { margin-top: 0.68rem !important; max-width: 300px !important; transform: translateY(26px) !important; } .mobile-hero-feature-list li { font-size: 0.78rem !important; padding: 0.33rem 0.56rem !important; } .mobile-hero-feature-list::after { margin-top: 0.64rem !important; font-size: 1.12rem !important; } } /* ========== Patch v16: remove label plates, cleaner typography ========== */ #hero .hero-flow-label, #hero .hero-flow-label--accent { display: block !important; width: fit-content !important; margin: 0 auto 0.56rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #hero .hero-flow-label { font-family: 'Noto Serif JP', serif !important; font-size: 0.98rem !important; font-weight: 900 !important; letter-spacing: 0.16em !important; color: rgba(230, 199, 141, 0.9) !important; text-shadow: 0 0 14px rgba(255, 200, 120, 0.06) !important; } #hero .hero-flow-label--accent { color: rgba(149, 235, 224, 0.98) !important; text-shadow: 0 0 16px rgba(118, 241, 224, 0.08) !important; } #hero .hero-flow-copy { gap: 0.84rem !important; } #hero .hero-flow-divider { width: min(74px, 22vw) !important; opacity: 0.54 !important; margin: 0.05rem auto 0.08rem !important; } #hero .hero-flow-text { font-weight: 800 !important; } #hero .hero-flow-section--current .hero-flow-text { color: rgba(250, 247, 241, 0.88) !important; } #hero .hero-flow-section--after .hero-flow-text { color: rgba(245, 255, 252, 0.98) !important; } #hero .hero-flow-section--current .hero-flow-arrow { color: rgba(223, 179, 113, 0.88) !important; } #hero .hero-flow-section--after .hero-flow-arrow { color: rgba(135, 233, 220, 0.92) !important; } @media (max-width: 768px) { #hero .hero-flow-label, #hero .hero-flow-label--accent { margin-bottom: 0.34rem !important; } #hero .hero-flow-label { font-size: 0.78rem !important; letter-spacing: 0.14em !important; } #hero .hero-flow-copy { gap: 0.74rem !important; margin-bottom: 0.96rem !important; } #hero .hero-flow-text { font-size: clamp(1.08rem, 5.35vw, 1.42rem) !important; line-height: 1.7 !important; } #hero .hero-flow-divider { width: min(62px, 18vw) !important; margin: 0 auto !important; } } /* ========== Patch v17: mobile first-view readability priority ========== */ @media (max-width: 768px) { #hero .relative.z-10 { width: calc(100vw - 20px) !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: -38px !important; } #hero .hero-kicker-wrap { margin-bottom: 0.86rem !important; } #hero .hero-kicker-pill { display: block !important; width: 100% !important; text-align: center !important; font-size: 0.88rem !important; line-height: 1.35 !important; letter-spacing: 0.07em !important; color: rgba(245,245,240,0.76) !important; } #hero .hero-flow-copy { width: 100% !important; max-width: none !important; gap: 0.86rem !important; margin: 0 auto 1.04rem !important; } #hero .hero-flow-section { width: 100% !important; padding: 0 2px !important; } #hero .hero-flow-label, #hero .hero-flow-label--accent { margin-bottom: 0.32rem !important; font-size: 0.8rem !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; } #hero .hero-flow-text { width: 100% !important; gap: 0.18rem !important; font-size: clamp(1.2rem, 6.15vw, 1.62rem) !important; line-height: 1.54 !important; letter-spacing: -0.015em !important; font-weight: 800 !important; text-wrap: balance !important; } #hero .hero-flow-row { width: 100% !important; } #hero .hero-flow-section--current .hero-flow-row:first-child, #hero .hero-flow-section--current .hero-flow-row:last-child, #hero .hero-flow-section--after .hero-flow-row:first-child, #hero .hero-flow-section--after .hero-flow-row:last-child { font-size: 1em !important; opacity: 1 !important; } #hero .hero-flow-divider { width: min(56px, 16vw) !important; margin: 0.02rem auto !important; opacity: 0.42 !important; } #hero .hero-flow-arrow { margin: 0 0.08em !important; } #btn-3min { padding: 0.78rem 1.62rem !important; font-size: 0.98rem !important; line-height: 1 !important; } #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { margin-top: 0.92rem !important; max-width: 228px !important; } .mobile-hero-feature-list { width: 100% !important; max-width: 100% !important; margin: 0.86rem auto 0 !important; padding: 0 6px !important; transform: translateY(44px) !important; gap: 0.46rem 0.4rem !important; } .mobile-hero-feature-list li { padding: 0.34rem 0.58rem !important; font-size: 0.78rem !important; line-height: 1 !important; transition-duration: 620ms !important; } .mobile-hero-feature-list::after { margin-top: 0.7rem !important; font-size: 1.12rem !important; } } /* ========== Patch v18: mobile hero scanability first ========== */ @media (max-width: 768px) { #hero .relative.z-10 { width: calc(100vw - 6px) !important; padding-left: 0 !important; padding-right: 0 !important; margin-top: -34px !important; } #hero .hero-kicker-wrap { margin-bottom: 0.92rem !important; transform: translateY(-24px) !important; } #hero .hero-kicker-pill { font-size: 0.86rem !important; line-height: 1.25 !important; letter-spacing: 0.06em !important; } #hero .hero-flow-copy { gap: 0.78rem !important; margin: 0 auto 0.98rem !important; padding: 0 1px !important; } #hero .hero-flow-label, #hero .hero-flow-label--accent { margin-bottom: 0.28rem !important; font-size: 0.78rem !important; letter-spacing: 0.11em !important; } #hero .hero-flow-text { gap: 0.24rem !important; font-size: 1.08rem !important; line-height: 1.44 !important; letter-spacing: -0.045em !important; font-weight: 700 !important; } #hero .hero-flow-row { display: block !important; width: 100% !important; white-space: nowrap !important; text-wrap: nowrap !important; font-size: 1em !important; } #hero .hero-flow-arrow { margin: 0 0.02em !important; opacity: 0.84 !important; } #hero .hero-flow-highlight { letter-spacing: -0.02em !important; } #hero .hero-flow-divider { width: min(54px, 15vw) !important; margin: 0 auto !important; opacity: 0.36 !important; } #hero .flex.gap-4, #hero .flex.gap-3, #hero .sm\:flex-row { margin-top: 0.86rem !important; } #btn-3min { padding: 0.76rem 1.6rem !important; font-size: 0.96rem !important; } } /* ========== Patch v19: mobile feature chips lower only ========== */ @media (max-width: 768px) { .mobile-hero-feature-list { transform: translateY(110px) !important; } .mobile-hero-feature-list::after { margin-top: 1.4rem !important; } } /* ========== Patch v20: mobile hero first-view adaptive typography ========== */ @media (max-width: 768px) { #hero .hero-flow-copy { width: min(100%, 430px) !important; margin: 0 auto 1.02rem !important; padding-inline: clamp(10px, 3.2vw, 16px) !important; gap: clamp(0.74rem, 2.2vw, 0.96rem) !important; } #hero .hero-flow-section { padding: 0 !important; } #hero .hero-flow-label, #hero .hero-flow-label--accent { margin-bottom: clamp(0.28rem, 1.4vw, 0.42rem) !important; font-size: clamp(0.78rem, 2.5vw, 0.92rem) !important; line-height: 1.18 !important; letter-spacing: 0.11em !important; } #hero .hero-flow-text { gap: clamp(0.16rem, 1.2vw, 0.3rem) !important; line-height: 1.38 !important; letter-spacing: 0 !important; text-wrap: initial !important; } #hero .hero-flow-row { display: block !important; width: 100% !important; white-space: nowrap !important; text-wrap: nowrap !important; line-height: 1.34 !important; transform-origin: center center !important; } #hero .hero-flow-arrow { margin: 0 clamp(0.04em, 0.28vw, 0.12em) !important; } #hero .hero-flow-highlight { letter-spacing: inherit !important; } #hero .hero-flow-divider { width: min(58px, 17vw) !important; margin: 0.04rem auto !important; opacity: 0.4 !important; } } @media (max-width: 768px) { #hero .hero-kicker-wrap { margin-bottom: 0.7rem !important; transform: translateY(-70px) !important; } } /* ========== Patch v21: hero labels + first highlight white, keep only last highlight colored ========== */ @media (max-width: 768px) { #hero .hero-flow-label, #hero .hero-flow-label--accent, #hero .hero-flow-arrow { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:first-child .hero-flow-highlight { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:last-child .hero-flow-highlight { color: #9ff8ea !important; text-shadow: 0 0 18px rgba(118, 241, 224, 0.18) !important; opacity: 1 !important; } } @media (max-width: 768px) { #hero .hero-flow-label, #hero .hero-flow-label--accent, #hero .hero-flow-arrow { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:first-child .hero-flow-highlight { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:last-child .hero-flow-highlight { color: #9ff8ea !important; text-shadow: 0 0 18px rgba(118, 241, 224, 0.18) !important; opacity: 1 !important; } } @media (max-width: 768px) { #hero .hero-flow-arrow, #hero .hero-flow-card--current .hero-flow-arrow, #hero .hero-flow-section--current .hero-flow-arrow, #hero .hero-flow-section--after .hero-flow-arrow, #hero .hero-flow-row .hero-flow-arrow { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } } /* ========== Patch v22: match screenshot — font & line spacing ========== */ @media (max-width: 768px) { /* フォント: 画像に合わせてセリフ体に変更 */ #hero .hero-flow-text { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif !important; font-weight: 700 !important; gap: 0.52rem !important; line-height: 1.42 !important; letter-spacing: -0.01em !important; } #hero .hero-flow-row { line-height: 1.42 !important; } /* セクション間（現実 ↔ ラクレター）の余白 */ #hero .hero-flow-copy { gap: 1.0rem !important; } /* ラベル（現実 / ラクレターを使ったら）の下余白を少し広げる */ #hero .hero-flow-label, #hero .hero-flow-label--accent { margin-bottom: 0.46rem !important; font-size: clamp(0.8rem, 2.6vw, 0.9rem) !important; letter-spacing: 0.13em !important; } /* ディバイダーの上下マージン */ #hero .hero-flow-divider { margin: 0.3rem auto !important; } } /* ========== Patch v23: hero labels slightly dimmed ========== */ @media (max-width: 768px) { #hero .hero-flow-label, #hero .hero-flow-label--accent { color: rgba(245, 245, 240, 0.55) !important; opacity: 1 !important; } } /* ========== Patch v24: hero label colors — 現実=薄グレー / ラクレターを使ったら=薄エメラルド ========== */ @media (max-width: 768px) { #hero .hero-flow-label { color: rgba(210, 210, 210, 0.52) !important; } #hero .hero-flow-label--accent { color: rgba(160, 235, 215, 0.52) !important; } } /* ========== Patch v24: hero labels — 現実 faint gray / ラクレターを使ったら faint white ========== */ @media (max-width: 768px) { #hero .hero-flow-label { color: rgba(180, 180, 175, 0.5) !important; } #hero .hero-flow-label--accent { color: rgba(245, 245, 240, 0.52) !important; } } /* ========== Patch v25: labels brighter, text rows full brightness ========== */ @media (max-width: 768px) { #hero .hero-flow-label { color: rgba(180, 180, 175, 0.72) !important; } #hero .hero-flow-label--accent { color: rgba(245, 245, 240, 0.75) !important; } #hero .hero-flow-text, #hero .hero-flow-row { color: rgba(255, 255, 255, 1) !important; opacity: 1 !important; } } /* ========== Patch v26: hero flow text larger ========== */ @media (max-width: 768px) { #hero .hero-flow-text { font-size: clamp(1.35rem, 7.2vw, 1.85rem) !important; } } /* ========== Patch v27: JS fit-line に任せる — font-size 上書きを解除 ========== */ @media (max-width: 768px) { #hero .hero-flow-text { font-size: unset !important; } #hero .hero-flow-row { font-size: unset !important; } } /* ========== Patch v28: hero-flow-copy padding を最小化 → fit-line が最大幅を使える ========== */ @media (max-width: 768px) { #hero .hero-flow-copy { width: 100% !important; max-width: 100% !important; padding-inline: 6px !important; } } /* ========== Patch v29: 横幅を画面ほぼ100%に解放 ========== */ @media (max-width: 768px) { /* z-10コンテナを画面端まで広げる */ #hero .relative.z-10 { width: 100vw !important; max-width: 100vw !important; } /* hero-flow-copy のpaddingを最小限に（左右4pxだけ残して端ギリギリまで） */ #hero .hero-flow-copy { width: 100% !important; max-width: 100% !important; padding-inline: 4px !important; } } /* ========== 文字サイズ直接指定 — ここだけ変えればOK ========== */ /* スマホ */ @media (max-width: 768px) { #hero .hero-flow-text { font-size: 4.5vw !important; } } /* タブレット・PC */ @media (min-width: 769px) { #hero .hero-flow-text { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; } } @media (max-width: 768px) { .mobile-hero-feature-list { width: 100% !important; max-width: 100% !important; margin: 0.86rem auto 0 !important; padding: 0 6px !important; transform: translateY(44px) !important; display: grid !important; gap: 0.46rem !important; } .mobile-hero-feature-row { display: flex !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.4rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .mobile-hero-feature-row li { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0.34rem 0.58rem !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.04) !important; font-size: 0.78rem !important; line-height: 1 !important; color: rgba(245,245,240,0.9) !important; white-space: nowrap !important; } } /* ========== Patch vPC-hero-white-only-last-highlight: desktop hero colors ========== */ @media (min-width: 769px) { #hero .hero-flow-label, #hero .hero-flow-label--accent { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.18) !important; background: rgba(255, 255, 255, 0.04) !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-arrow, #hero .hero-flow-card--current .hero-flow-arrow, #hero .hero-flow-section--current .hero-flow-arrow, #hero .hero-flow-section--after .hero-flow-arrow, #hero .hero-flow-row .hero-flow-arrow { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:first-child .hero-flow-highlight { color: #ffffff !important; text-shadow: none !important; opacity: 1 !important; } #hero .hero-flow-section--after .hero-flow-row:last-child .hero-flow-highlight { color: #9ff8ea !important; text-shadow: 0 0 18px rgba(118, 241, 224, 0.18) !important; opacity: 1 !important; } } /* 「もう揃ってる」だけ少し大きく */ #hero .hero-flow-section--after .hero-flow-row:last-child .hero-flow-highlight { font-size: 1.14em !important; line-height: 1 !important; } /* ファーストビュー全体を少し下げる */ @media (max-width: 768px) { #hero .relative.z-10 { transform: translateY(18px) !important; } } /* ========== hero comparison body: Gothic only ========== */ /* 現実 / ラクレターを使ったら のラベルは変えず、比較本文だけゴシック体にする */ #hero .hero-flow-text, #hero .hero-flow-row, #hero .hero-flow-highlight { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif !important; } /* ========== Patch: labels same color + slightly wider comparison gap ========== */ @media (max-width: 768px) { /* 「現実」を「ラクレターを使ったら」と同じ色にする */ #hero .hero-flow-label, #hero .hero-flow-label--accent { color: rgba(245, 245, 240, 0.75) !important; opacity: 1 !important; text-shadow: none !important; } /* 現実ブロックとラクレターブロックを少しだけ離す */ #hero .hero-flow-copy { gap: 1.58rem !important; } /* 区切り線まわりも少し余白を増やす */ #hero .hero-flow-divider { margin: 0.42rem auto !important; } } /* ========== Patch: 「10秒で体験」ボタンのボタン感を強化 ========== */ #btn-3min { position: relative !important; overflow: hidden !important; color: #ffffff !important; background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.075)) !important; border: 1.6px solid rgba(255,255,255,0.72) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 18px rgba(159,248,234,0.08) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; font-weight: 800 !important; transform: translateZ(0) !important; } /* 上にうっすら光を入れて、押せる物体感を出す */ #btn-3min::before { content: "" !important; position: absolute !important; inset: 1px 1px auto 1px !important; height: 45% !important; border-radius: inherit !important; background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)) !important; pointer-events: none !important; } /* PCでホバーしたときだけ少し反応 */ @media (hover: hover) { #btn-3min:hover { background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.10)) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.34), 0 0 24px rgba(159,248,234,0.14) !important; transform: translateY(-1px) !important; } } /* ========== Patch: 大見出し + 比較セクション縮小（モバイルのみ） ========== */ /* 大見出し: デスクトップでは非表示 */ .mobile-hero-headline { display: none; } @media (max-width: 768px) { /* 大見出し「テスト前の資料集めがなくなる」 */ .mobile-hero-headline { display: block !important; font-size: clamp(1.55rem, 7.2vw, 2.1rem) !important; font-weight: 900 !important; line-height: 1.3 !important; color: rgba(255, 255, 255, 0.96) !important; letter-spacing: -0.025em !important; margin: 0.3rem 0 1.4rem !important; font-family: "Noto Serif JP", serif !important; } /* 比較セクション全体: 詰める */ #hero .hero-flow-copy { gap: 0.7rem !important; } #hero .hero-flow-divider { margin: 0.22rem auto !important; } /* 比較テキスト: 小さく・暗く */ #hero .hero-flow-text, #hero .hero-flow-row { font-size: 3.6vw !important; color: rgba(255, 255, 255, 0.48) !important; opacity: 1 !important; } /* → 矢印は強調せず通常テキストと同じ色に（詳細度を合わせて確実に上書き） */ #hero .hero-flow-arrow, #hero .hero-flow-card--current .hero-flow-arrow, #hero .hero-flow-section--current .hero-flow-arrow, #hero .hero-flow-section--after .hero-flow-arrow, #hero .hero-flow-row .hero-flow-arrow { color: rgba(255, 255, 255, 0.48) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.48) !important; text-shadow: none !important; opacity: 1 !important; } /* ハイライト（もう揃ってる / 2操作）も少し抑える */ #hero .hero-flow-highlight { color: rgba(159, 248, 234, 0.58) !important; } /* 「2操作」白すぎるので暗く（高詳細度ルールを上書き） */ #hero .hero-flow-section--after .hero-flow-row:first-child .hero-flow-highlight { color: rgba(255, 255, 255, 0.42) !important; text-shadow: none !important; } /* ラベル（現実 / ラクレターを使ったら）も暗く */ #hero .hero-flow-label, #hero .hero-flow-label--accent { color: rgba(245, 245, 240, 0.36) !important; font-size: clamp(0.62rem, 2.1vw, 0.78rem) !important; margin-bottom: 0.28rem !important; } } /* ========== Patch: モバイルのR・紙飛行機 ポジション調整 ========== */ @media (max-width: 640px) { /* align-items はcenterのままにして translateY で垂直位置を微調整 */ #hero .raku-hero-icon-mark { opacity: 0.32 !important; } #hero .raku-hero-icon-svg { width: min(780px, 118vw) !important; transform: translate(4%, 8%) rotate(-6deg) !important; } } /* ========== Patch: 10秒で体験ボタン アニメーション ========== */ /* グロウパルス：チョークの発光感でゆっくり呼吸する */ @keyframes rl-cta-glow { 0%, 100% { box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.28), 0 0 14px rgba(159,248,234,0.08); border-color: rgba(255,255,255,0.68); } 50% { box-shadow: 0 12px 32px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.38), 0 0 32px rgba(159,248,234,0.30), 0 0 64px rgba(159,248,234,0.10); border-color: rgba(159,248,234,0.82); } } /* シマー：光がスーッと横切るチョーク光沢 */ @keyframes rl-cta-shimmer { 0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(340%) skewX(-18deg); opacity: 0; } } #btn-3min { animation: rl-cta-glow 3.6s ease-in-out infinite !important; /* transform と競合しないよう will-change を指定 */ will-change: box-shadow, border-color !important; } /* シマーのオーバーレイ（::before は既存の上面光沢に使用中なので ::after を使う） */ #btn-3min::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient( 108deg, transparent 25%, rgba(255,255,255,0.13) 48%, rgba(159,248,234,0.08) 52%, transparent 72% ) !important; animation: rl-cta-shimmer 5s ease-in-out infinite !important; animation-delay: 1.2s !important; pointer-events: none !important; border-radius: inherit !important; } /* ホバー時はアニメーションを瞬時に強くする */ @media (hover: hover) { #btn-3min:hover { animation: none !important; box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.34), 0 0 36px rgba(159,248,234,0.32) !important; border-color: rgba(159,248,234,0.88) !important; } } /* ========== Patch: PC hero redesign ========== */ @media (min-width: 769px) { /* --- hero: ナビ分の余白 + 1画面に収める --- */ #hero { padding-top: 5rem !important; padding-bottom: 3rem !important; min-height: 100vh !important; box-sizing: border-box !important; } #hero .relative.z-10 { padding-top: 0 !important; margin-top: 0 !important; } /* --- kicker pill --- */ #hero .hero-kicker-pill { padding: 0.24em 1em !important; border: 1px solid rgba(255,255,255,0.16) !important; border-radius: 999px !important; background: rgba(255,255,255,0.05) !important; box-shadow: none !important; backdrop-filter: none !important; font-size: 0.78rem !important; letter-spacing: 0.14em !important; color: rgba(245,245,240,0.58) !important; } #hero .hero-kicker-wrap { margin-bottom: 1rem !important; } /* --- 大見出し --- */ .mobile-hero-headline { display: block !important; font-family: "Noto Serif JP", serif !important; font-size: clamp(2.4rem, 4.8vw, 3.8rem) !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: -0.04em !important; color: rgba(255, 255, 255, 0.97) !important; text-align: center !important; margin: 0 0 1.6rem !important; } /* --- 比較ブロック全体 --- */ #hero .hero-flow-copy { width: min(100%, 1100px) !important; gap: 0 !important; margin-bottom: 1.8rem !important; display: block !important; } /* --- 現実セクション --- */ #hero .hero-flow-section--current { padding: 0.3rem 0 0.8rem !important; } #hero .hero-flow-section--current .hero-flow-label { font-size: 0.72rem !important; letter-spacing: 0.22em !important; color: rgba(220, 190, 130, 0.6) !important; margin-bottom: 0.45rem !important; } #hero .hero-flow-section--current .hero-flow-text { font-size: clamp(1.0rem, 1.9vw, 1.45rem) !important; font-weight: 600 !important; line-height: 1.75 !important; color: rgba(245, 242, 235, 0.58) !important; gap: 0.1rem !important; } #hero .hero-flow-section--current .hero-flow-row { font-size: inherit !important; letter-spacing: -0.015em !important; } /* --- 区切り線 --- */ #hero .hero-flow-divider { width: 48px !important; height: 1px !important; margin: 0 auto !important; opacity: 0.3 !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent) !important; } /* --- ラクレターセクション --- */ #hero .hero-flow-section--after { padding: 0.8rem 0 0 !important; } #hero .hero-flow-section--after .hero-flow-label { font-size: 0.75rem !important; letter-spacing: 0.18em !important; color: rgba(149, 235, 224, 0.82) !important; margin-bottom: 0.5rem !important; } #hero .hero-flow-section--after .hero-flow-text { font-size: clamp(1.0rem, 1.9vw, 1.45rem) !important; font-weight: 800 !important; line-height: 1.75 !important; color: rgba(245, 255, 252, 0.58) !important; gap: 0.1rem !important; } #hero .hero-flow-section--after .hero-flow-row { font-size: inherit !important; letter-spacing: -0.015em !important; } #hero .hero-flow-highlight { color: #7bf5e6 !important; font-weight: 900 !important; text-shadow: 0 0 24px rgba(100, 240, 220, 0.25) !important; } #hero .hero-flow-section--after .hero-flow-arrow { color: rgba(130, 230, 218, 0.88) !important; margin: 0 0.3em !important; } /* --- ボタン: 横並び --- */ #hero .flex.gap-4 { flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 1rem !important; flex-wrap: nowrap !important; margin-top: 0.4rem !important; } #hero .flex.gap-4 button { min-width: 190px !important; max-width: none !important; font-size: 1rem !important; padding: 0.85rem 2.2rem !important; } }