/* Base responsive styles */ * { box-sizing: border-box; } /* Prevent horizontal scrolling */ html, body { width: 100%; max-width: 100vw; overflow-x: hidden; } img { max-width: 100%; height: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } /* Chrome-compatible viewport handling */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: #ffffff !important; } body { background: #ffffff !important; } /* Improve font rendering */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Mobile-first approach for better performance */ .container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Chrome-specific fixes */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Breadcrumb common styles */ .breadcrumb { padding-top: 70px; padding-bottom: 10px; } .breadcrumb .container { padding-top: 0; } /* Prevent element distortion in Chrome */ .container, .header-container, .main-nav, .hero, .reasons-grid, .price-comparison, .case-studies-grid { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } /* Ensure buttons are easily tappable */ button, .btn-primary, .btn-blue, .btn-outline, .btn-yellow, .btn-outline-wide, .upload-btn { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } /* Improve form elements accessibility */ input, textarea, select { font-size: 16px; /* Prevents zoom on iOS */ } /* Ensure proper word wrapping */ body { word-wrap: break-word; overflow-wrap: break-word; } /* Global Styles */ body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; margin: 0; padding: 90px 0 0 0; color: #333333; line-height: 1.6; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #FAFAF8; } /* Restore original font on detail pages */ .pvc-page, .pvc-page * { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important; } .pvc-page h1, .pvc-page h2, .pvc-page h3, .pvc-page h4, .pvc-page h5, .pvc-page h6 { font-family: inherit !important; } /* 统一所有文本颜色和字体大小 管理后台（.admin-layout 内）排除在外：后台每个页面都有自己完整的配色方案 （按钮/徽章/提示条等大量用到彩色背景+白字），这条全局规则会把文字强行 压成 #333333，导致彩色背景上的文字看不清。 同样排除 toast/notification/alert 提示条（见 js/auth-menu.js 的统一样式）、 upload-btn/btn-primary/btn-blue 等自带配色的按钮， 以及导航"カードを選ぶ"下拉里的 quick-nav 组件（自带字号，被强制16px会导致宽度错位、箭头位置错乱）。 同样排除 step-number/guide-step-number（蓝色圆形步骤号）、sample-download-btn/ vertical-faq-link/guide-btn-primary/guide-btn-secondary（蓝底白字按钮/侧边FAQ竖条）、 login-subtitle（登录/重置密码页蓝色头部的副标题）、campaign-intro-layout内的所有元素 （first-campaign.html深色背景区块）、coupon-recommendation-card/couponTopBanner内的所有元素 （js/auth-menu.js 动态插入的优惠券横幅/卡片，橙色背景+白字）、login-brand内的所有元素 （管理后台登录页 mgr-0cb0bf3b/login.html 左侧深色品牌介绍区块，不属于.admin-layout， 不会被admin-layout的排除规则保护到）——这几个组件自己也写了color:white !important， 但specificity不够高，还是会被这条全局规则的:not()链压过去，所以必须显式排除。 同样排除 footer 内の所有元素：footer自己有一套完整的字号设计（.footer-col a是0.86rem、 .footer-main-link是0.9rem等），但这条全局规则的:not()链累积的specificity已经超过了 ".footer-col a"这类class+标签选择器，导致footer链接被强制压成16px，比首页 （standalone-home/style.css，同名规则:not()链更短，没有这个问题）的尾部文字明显更大。 同样排除 .card 内的所有元素：register.html（会員登録完了時のデジタル会員証プレビュー）と wallet-card.html（オンライン会員証、.card.variant-apple/.card.variant-google）が .card { color:#fff; background:濃い色のグラデーション } という自前の配色を持っているが、 子要素の.label/.member-name/.member-number/.card-org-nameはdiv/spanなので、この全局 ルールの:not()鎖の高いspecificityに負けてcolor:#333333で強制的に潰され、暗い背景の上に 暗い文字が乗って読めなくなる（.cardは他にmgr-0cb0bf3b/quote-tools.htmlでも使われているが、 そちらは.admin-layout内なので既に別の排除条件で保護されている）。 同様に .pk-mock 内の所有元素も排除：user-wallet.html（会員カード設定のApple Wallet プレビュー）が.card同様「ブランドカラー/文字カラーを店舗が自由に設定できる」自前の 配色を持っており、子要素の.pk-mock-org/.pk-mock-name/.pk-mock-field-label等が div/spanなので同じ理由で文字色が強制的に潰される（店舗が黒背景+白文字を設定しても プレビューだけ読めなくなる——実際に発生したバグ）。 同様に .dcl-hero 内の所有元素も排除：digital-card-landing.htmlのヒーロー部分 （オレンジ/黒基調の自前配色・スマホ/カードのモックアップ）が同じ理由で潰される のを防ぐ。 */ body, p:not(.admin-layout *):not(.toast):not(.toast *):not(.notification):not(.notification *):not(.alert):not(.alert *):not(.login-subtitle):not(.campaign-intro-layout *):not(.coupon-recommendation-card *):not(#couponTopBanner *):not(.login-brand *):not(footer *):not(.card *):not(.pk-mock *):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.faq-hero *):not(.faq-content-section *):not(.product-type-card *):not(.hero-sub):not(.form-card-subtitle):not(.notice):not(.error-text):not(.welcome-body *):not(.help-section *):not(.success-sub):not(.brand-info *):not(.guide-redesign *), div:not(.admin-layout *):not(.toast):not(.toast *):not(.notification):not(.notification *):not(.alert):not(.alert *):not(.step-number):not(.coupon-recommendation-card *):not(#couponTopBanner *):not(.login-brand *):not(footer *):not(.card *):not(.pk-mock *):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.product-type-card *):not(.captcha-help):not(.feature-desc):not(.feature-title):not(.site-logo-fallback):not(.add-card-hint-title):not(.add-card-hint-desc):not(.howto-step-title):not(.howto-step-desc):not(.howto-arrow):not(.os-hint):not(.brand-info *):not(.guide-redesign *), span:not(#cart-count):not(#sugi-notif-badge):not(.admin-layout *):not(.toast):not(.toast *):not(.notification):not(.notification *):not(.alert):not(.alert *):not(.upload-btn *):not(.btn-primary *):not(.btn-blue *):not(.btn-outline *):not(.btn-outline-wide *):not(.btn-yellow *):not(.quick-nav-heading *):not(.quick-nav-link *):not(.guide-step-number):not(.coupon-recommendation-card *):not(#couponTopBanner *):not(.login-brand *):not(footer *):not(.card *):not(.pk-mock *):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.faq-content-section *):not(.free-badge):not(.hero-title .accent):not(.consent-row *):not(.site-name):not(.wallet-add-btn *):not(.howto-support-row *):not(.brand-contact *):not(.brand-info *):not(.guide-redesign *), li:not(.admin-layout *):not(.toast *):not(.notification *):not(.alert *):not(.campaign-intro-layout *):not(.coupon-recommendation-card *):not(#couponTopBanner *):not(.login-brand *):not(footer *):not(.card *):not(.dcl-page *):not(.pvc-page *):not(.brand-contact *):not(.brand-info *):not(.guide-redesign *), a:not(.admin-layout *):not(.toast *):not(.notification *):not(.alert *):not(.upload-btn):not(.btn):not(.btn-primary):not(.btn-blue):not(.btn-outline):not(.btn-outline-wide):not(.btn-yellow):not(.mobile-order-btn):not(.consult-btn):not(.mobile-consult-btn):not(.quick-nav-heading):not(.quick-nav-heading-single):not(.quick-nav-link):not(.btn-view):not(.btn-apply):not(.btn-order):not(.sample-download-btn):not(.vertical-faq-link):not(.guide-btn-primary):not(.guide-btn-secondary):not(.coupon-recommendation-card *):not(.coupon-login-cta):not(.coupon-banner-cta):not(#couponTopBanner *):not(.login-brand *):not(footer *):not(.card *):not(.dcl-page *):not(.pvc-page *):not(.lookup-toggle):not(.help-section *):not(.consent-row *):not(.brand-contact *):not(.brand-info *):not(.wallet-add-apple):not(.wallet-add-google):not(.howto-find-btn):not(.howto-support-row *):not(.guide-redesign *), td:not(.admin-layout *):not(.toast *):not(.notification *):not(.alert *):not(footer *):not(.card *):not(.dcl-page *):not(.pvc-page *):not(.guide-redesign *), th:not(.admin-layout *):not(.toast *):not(.notification *):not(.alert *):not(footer *):not(.card *):not(.dcl-page *):not(.pvc-page *):not(.guide-redesign *) { color: #333333 !important; font-size: 16px !important; } #sugi-notif-badge { color: #ffffff !important; } /* Spec Table Styles */ .spec-table { width: 100%; max-width: 600px; margin: 0 0 0 -1ch; padding-left: 1ch; } .spec-row { display: flex; margin-bottom: 10px; } .spec-label { width: 120px; font-weight: bold; } .spec-value { flex: 1; } /* 标题保持不同大小但统一颜色 */ h1:not(.hero-title):not(.welcome-body *):not(.success-title):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.login-header *):not(.company-main *):not(.commercial-transactions-main *):not(.terms-main *):not(.order-title):not(.checkout-container *):not(.confirmation-container *):not(.submission-hero *):not(.content-title):not(.guide-redesign *) { font-size: 2.2rem !important; } h2:not(.form-card-header *):not(.add-card-title):not(.howto-title):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-hero *):not(.success-title):not(.contact-form-section *):not(.login-main *):not(.company-main *):not(.terms-main *):not(.section-title):not(.checkout-container *):not(.order-info *):not(.submission-method *):not(.section-heading):not(.form-title):not(.guide-redesign *) { font-size: 2rem !important; font-weight: 700 !important; } h3:not(.help-section *):not(.brand-info *):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-hero *):not(.faq-content-section *):not(.contact-form-section *):not(.modal-title):not(.login-main *):not(.company-main *):not(.commercial-transactions-main *):not(.quantity-btn *):not(.modal-header *):not(.confirmation-container *):not(.form-section *):not(#orderContentSection *):not(#revisionModal *):not(.usage-notes *):not(.wallet-card *):not(.wallet-modal-box *):not(.guide-redesign *) { font-size: 1.8rem !important; } h4:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.login-main *):not(.service-title):not(.modal-title):not(.guide-redesign *) { font-size: 1.6rem !important; } h5:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-content-section *):not(.form-section-title):not(.guide-redesign *) { font-size: 1.4rem !important; } h6:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.option-card *):not(.product-type-card *):not(.guide-redesign *) { font-size: 1.2rem !important; } h1:not(.hero-title):not(.welcome-body *):not(.success-title):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.login-header *):not(.company-main *):not(.commercial-transactions-main *):not(.terms-main *):not(.confirmation-container *):not(.guide-redesign *), h2:not(.form-card-header *):not(.add-card-title):not(.howto-title):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-hero *):not(.success-title):not(.contact-form-section *):not(.login-main *):not(.company-main *):not(.terms-main *):not(.campaign-intro-layout *):not(.guide-redesign *), h3:not(.help-section *):not(.brand-info *):not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-hero *):not(.faq-content-section *):not(.contact-form-section *):not(.login-main *):not(.company-main *):not(.commercial-transactions-main *):not(.confirmation-container *):not(.guide-redesign *), h4:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.login-main *):not(.modal-title):not(.guide-redesign *), h5:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.faq-content-section *):not(.guide-redesign *), h6:not(.dcl-page *):not(.faq-section *):not(.pvc-page *):not(.pricing-section *):not(.options-section *):not(.contact-section *):not(.submission-main *):not(.order-guide-hero *):not(.order-process-section *):not(.pricing-info-section *):not(.payment-methods-section *):not(.delivery-info-section *):not(.requirements-section *):not(.design-support-section *):not(.guide-redesign *) { color: #333333 !important; } /* Logo保持特殊颜色 */ .logo-red, .logo-sub { color: #e60012 !important; } /* 按钮文字颜色和大小保持原有样式 */ .btn-primary, .btn-secondary, .upload-btn { font-size: 0.9rem !important; } .btn-primary, .upload-btn { color: #ffffff !important; } /* 按钮和特殊元素保持原有颜色 */ .btn-blue, .btn-yellow, .btn-outline, .btn-outline-wide { color: #fff !important; } .price, .blue-text, .badge, .tag, .comparison-box .box-header, .step-header { color: inherit !important; } /* 统一段落文本样式 */ p:not(.guide-redesign *), .p, .text, .content { color: #333333 !important; font-size: 16px !important; line-height: 1.6 !important; } /* 链接保持蓝色 */ a:not(.guide-redesign *), .link { color: #4a90e2 !important; } a:hover:not(.guide-redesign *), .link:hover { color: #4073DE !important; } /* 导航菜单颜色统一为#333333 */ .main-nav a, .mobile-menu a { color: #333333 !important; } /* 特殊标签保持原有颜色 */ .news-date, .news-category, .footer-text { color: #666 !important; font-size: 14px !important; } a { text-decoration: none; color: inherit; } ul { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4, p { margin: 0; } /* Header */ header { border-bottom: none; padding: 15px 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; transition: border-bottom 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; background-color: #FAFAF8; box-shadow: none; } header.scrolled { border-bottom: 1px solid #FAFAF8; background-color: #fff; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); } .header-container { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; width: 100%; margin: 0; padding: 0 20px 0 20px; position: relative; } /* Mobile nav overlay backdrop */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; cursor: pointer; } .mobile-nav-overlay.active { display: block; } @media (max-width: 768px) { .header-container { padding: 0 15px; overflow: visible; /* Remove transform so position:fixed children (main-nav.active) anchor to viewport */ transform: none !important; } } .header-left { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; gap: 15px; margin-top: 5px; flex-wrap: nowrap; } @media (max-width: 768px) { .header-left { gap: 10px; overflow: visible; } } .logo { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; margin-left: 0; } .logo-red { color: #e60012; font-weight: bold; font-size: 1.2rem; } .logo-sub { color: #e60012; font-size: 0.8rem; letter-spacing: 2px; } .main-nav ul { display: -webkit-box; display: -webkit-flex; display: flex; gap: 12px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .main-nav a { font-size: 0.8rem; font-weight: bold; color: #333333; } /* Dropdown Menu */ .main-nav li { position: relative; } .main-nav .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background-color: white; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 1000; border-radius: 4px; overflow: hidden; margin-top: 0; padding-top: 8px; } .main-nav .dropdown > a { padding-bottom: 18px; } .main-nav .dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; font-size: 0.75rem; font-weight: normal; border-bottom: 1px solid #f0f0f0; text-align: left; } .main-nav .dropdown-content a:last-child { border-bottom: none; } .main-nav .dropdown-content a:hover { background-color: #f5f5f5; color: #4a90e2; } .main-nav li:hover .dropdown-content { display: block; } /* Only add dropdown arrow to the "製品を選ぶ" link */ .main-nav .dropdown > a::after { content: '▼'; font-size: 8px; margin-left: 5px; vertical-align: middle; } .header-right { display: flex; align-items: center; gap: 28px; margin-left: auto; padding-right: 50px; } .header-link { font-size: 0.95rem !important; font-weight: bold; color: #333333; white-space: nowrap !important; flex-shrink: 0; } /* .btn-primary の完全な定義は下部（統一版）を参照。 の場合、グローバルな a:not(.admin-layout *) { color:#333 !important } の方が.btn-primary単体より詳細度が高く文字色を上書きしてしまうため、a要素限定で再宣言する */ a.btn-primary { color: #ffffff !important; } a.btn-secondary { color: #333333 !important; } .upload-btn, a.upload-btn { background-color: #FF7F09; color: #ffffff !important; padding: 8px 28px 8px 15px; border-radius: 4px; font-size: 0.8rem !important; font-weight: bold; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .upload-btn:hover, a.upload-btn:hover { color: #ffffff !important; background-color: #e06e00; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .upload-btn::before { content: "☁"; /* Simple icon placeholder */ font-size: 1.2em; } .consult-btn, a.consult-btn { background-color: #ffffff; color: #4a90e2 !important; border: 2px solid #4a90e2; padding: 6px 26px 6px 13px; border-radius: 4px; font-size: 0.8rem !important; font-weight: bold; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .consult-btn:hover, a.consult-btn:hover { background-color: #ffffff; color: #4a90e2 !important; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } /* Vertical FAQ Button */ .vertical-faq-btn { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .vertical-faq-link { display: block; width: 30px; height: 200px; background-color: #4a90e2; color: #ffffff !important; text-decoration: none; padding: 10px 0; font-size: 14px; font-weight: bold; text-align: center; line-height: 1.2; border-radius: 3px 0 0 3px; transition: background-color 0.3s ease; writing-mode: vertical-rl; text-orientation: mixed; display: flex; align-items: center; justify-content: center; } .vertical-faq-link:hover { background-color: #357abd; color: #ffffff !important; } .vertical-faq-link.active { background-color: #357abd; color: #ffffff !important; } /* Hero Section */ .hero { padding: 30px 0 45px 0; position: relative; overflow: hidden; background-color: #FAFAF8; } .hero-content-wrapper { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0 20px; } .hero .container { position: relative; z-index: 2; padding-bottom: 40px; flex: 1; max-width: 600px; display: flex; flex-direction: column; align-items: center; --hero-offer-offset-top: 40px; --hero-offer-subtitle-size: 1.9rem; --hero-offer-title-size: 2.7rem; --hero-offer-price-size: 3.4rem; --hero-offer-tax-size: 0.55em; --hero-offer-subtitle-white-space: nowrap; } .hero-subtitle { display: flex; justify-content: center; align-items: baseline; flex-wrap: nowrap; gap: 0; white-space: nowrap; position: relative; left: -18px; margin-bottom: 10px; } .hero-subtitle-text { color: #333333 !important; font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; font-size: 1.7rem !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap; } .hero-subtitle-accent { color: #0C51A0 !important; } .hero-title-blue { color: #4273DB !important; text-align: center !important; margin: 5px 0 !important; line-height: 1.2 !important; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; } .hero h1 { font-size: 3rem; color: #4a90e2; margin-bottom: 30px; } .hero-offer-subtitle { max-width: 100%; } .hero-offer-subtitle-text { line-height: 1.25 !important; } .hero-offer-title, .hero-offer-price { max-width: 100%; } .hero-brand-message { width: 100%; margin-top: var(--hero-offer-offset-top, 40px); display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-brand-kicker { margin: 0; color: #A17743 !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Serif", serif; font-size: clamp(2.1rem, 3.5vw, 2.9rem) !important; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; } .hero-brand-title { margin: 18px 0 0 !important; color: #141f3d !important; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Serif", serif !important; font-size: clamp(1.86rem, 3.2vw, 2.95rem) !important; font-weight: 700 !important; line-height: 1.14 !important; letter-spacing: -0.04em; text-align: center !important; } .reasons-heading { margin: 0 auto 36px; color: #141f3d; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Serif", serif; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1.14; letter-spacing: -0.04em; text-align: center; } .hero-brand-divider { width: min(100%, 460px); margin: 24px auto 0; display: flex; align-items: center; justify-content: center; gap: 14px; color: #d4a348; } .hero-brand-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212, 163, 72, 0), rgba(212, 163, 72, 0.9), rgba(212, 163, 72, 0)); } .hero-brand-divider i { font-style: normal; font-size: 1.1rem; line-height: 1; } .hero-brand-copy { margin-top: 24px; color: #1f2c4a; font-size: 1.12rem; line-height: 1.8; letter-spacing: 0.01em; } .hero-brand-copy p { margin: 0; } .hero-brand-copy p + p { margin-top: 6px; } .hero-brand-copy-top { margin-bottom: 12px !important; font-size: 1.28rem; font-weight: 700; letter-spacing: 0.03em; } .hero-brand-copy-accent { color: #A17743 !important; font-weight: 800; } .hero-price-display { width: 100%; margin: 28px 0 0 !important; color: #FB7615 !important; font-size: var(--hero-offer-price-size, 3.4rem) !important; font-weight: 900 !important; line-height: 1.08 !important; text-align: center !important; letter-spacing: -0.04em; } .hero-price-display .hero-offer-tax { margin-left: 6px; font-size: var(--hero-offer-tax-size, 0.55em) !important; color: inherit !important; font-weight: 700 !important; } .badges { display: flex; gap: 15px; margin-bottom: 30px; justify-content: center; } .badge img { height: 60px; /* Adjust based on image */ width: auto; } .tags { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; align-items: center; } .tags-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; } .tags span { background-color: transparent; border: 1px solid #ddd; padding: 8px 15px; border-radius: 8px !important; font-size: 0.9rem; color: #666; } .tags span.tag-highlight-blue { color: #0C51A0 !important; font-weight: 700 !important; } .hero-buttons { display: flex; gap: 20px; margin-bottom: 30px; align-items: center; justify-content: flex-start; flex-wrap: nowrap; flex-direction: row; } /* 确保英雄区域和设计区域的按钮样式一致 */ .hero-buttons .btn-blue, .design-buttons .btn-blue { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: 250px !important; max-width: 250px !important; width: 250px !important; box-sizing: border-box !important; padding: 15px 16px !important; border-radius: 4px !important; font-weight: bold !important; font-size: 0.9rem !important; margin: 0 !important; background-color: #4273DB !important; border: 2px solid #4273DB !important; } .hero-buttons .btn-outline, .design-buttons .btn-outline { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-width: 250px !important; max-width: 250px !important; width: 250px !important; box-sizing: border-box !important; padding: 15px 16px !important; border-radius: 4px !important; font-weight: bold !important; font-size: 0.9rem !important; margin: 0 !important; } .btn-blue { background-color: #4273DB; color: #fff !important; padding: 15px 16px; border-radius: 4px; font-weight: bold; font-size: 0.9rem !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; border: 2px solid #4273DB; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; min-width: 250px; max-width: 250px; width: 250px; box-sizing: border-box; } /* の場合、グローバルな a:not(.admin-layout *) { color:#333 !important } の方が.btn-blue単体より詳細度が高く文字色を上書きしてしまうため、a要素限定で再宣言する */ a.btn-blue { color: #fff !important; } .btn-outline { background-color: #fff; color: #4273DB !important; border: 2px solid #4273DB; padding: 15px 16px; border-radius: 4px; font-weight: bold; font-size: 0.9rem !important; transition: all 0.3s ease; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; min-width: 250px; max-width: 250px; width: 250px; box-sizing: border-box; } a.btn-outline { color: #4273DB !important; } .btn-blue:hover, .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } .hero-buttons .btn-blue:hover, .design-buttons .btn-blue:hover, .btn-blue:hover { color: #fff !important; background-color: #3561C7; border-color: #3561C7; background-color: #3561C7 !important; border: 2px solid #3561C7 !important; } /* 确保联系部分按钮悬停时文本保持白色 */ .contact-section .btn-blue:hover { color: #fff !important; background-color: #3561C7; border-color: #3561C7; } .btn-outline:hover { color: #4273DB !important; background-color: #f0f4ff; } /* Lineup button specific styling */ .hero-order-button-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .hero-order-badge { position: absolute; top: -18px; right: -8px; width: 66px; height: 66px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: radial-gradient(circle at 30% 28%, #fff8bf 0%, #ffe670 38%, #ffc72c 70%, #f6a915 100%); box-shadow: 0 10px 18px rgba(225, 144, 0, 0.32); color: #3a3328 !important; border: 1px solid rgba(255, 255, 255, 0.65); z-index: 3; pointer-events: none; transform: rotate(10deg); } .hero-order-badge-top, .hero-order-badge-main { color: #3a3328 !important; line-height: 0.94 !important; } .hero-order-badge-top { font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.01em; } .hero-order-badge-main { font-size: 2.28rem !important; font-weight: 900 !important; letter-spacing: -0.06em; font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; } .lineup-btn { display: inline-block; } /* Long button variant */ .btn-long { min-width: 250px; max-width: 250px; width: 250px; } .hero-image-section { width: 45%; max-width: 500px; margin: -44px 0 0 56px; text-align: center; position: relative; flex-shrink: 0; } .hero-image-section img { width: 100%; height: auto; max-width: 100%; } .hero-main-image-wrap { position: relative; } .hero-coupon-button { position: absolute; top: 12px; left: -18px; z-index: 2; display: block; width: clamp(160px, 48%, 260px); line-height: 0; transform-origin: center center; animation: coupon-pop 2.4s ease-in-out infinite; transition: transform 0.2s ease; } .hero-coupon-button:hover { animation-play-state: paused; transform: translateY(-2px) scale(1.04); } @keyframes coupon-pop { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.1); } 34% { transform: scale(0.98); } 48% { transform: scale(1.04); } } .hero-image-section .hero-coupon-button img { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; } .floating-coupon-button { position: fixed; left: 18px; bottom: 22px; z-index: 1200; display: block; width: clamp(150px, 15vw, 240px); line-height: 0; transform-origin: center center; animation: coupon-float 3.2s ease-in-out infinite; } @media (max-width: 480px) { .floating-coupon-button { width: 75px; left: 10px; bottom: 14px; } } .floating-coupon-button:hover { animation-play-state: paused; transform: translateY(-4px) scale(1.04); } .floating-coupon-button img { display: block; width: 100%; height: auto; } .business-calendar__label { white-space: nowrap; font-size: 0.82rem; } @keyframes coupon-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } /* Specs Bar */ .specs-bar { padding: 20px 0 20px 0 !important; background-color: #fff !important; overflow: hidden !important; margin-top: -35px !important; position: relative !important; white-space: nowrap !important; width: 100% !important; box-sizing: border-box !important; } .specs-bar-wrapper { display: flex; animation: floatRightToLeft 60s linear infinite; width: max-content; overflow: visible; max-width: none; will-change: transform; } .specs-bar { overflow: hidden; position: relative; } .specs-set { display: flex; align-items: center; gap: 100px; padding: 0; padding-right: 100px; flex-shrink: 0; } .spec-item { display: flex; flex-direction: column; align-items: center; text-align: center; width: 95px; height: 95px; flex-shrink: 0; } .spec-item img { width: 95px; height: 95px; object-fit: contain; } @keyframes floatRightToLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .specs-bar:hover .specs-bar-wrapper { animation-play-state: paused; } /* Reasons Section */ .reasons { padding: 60px 0 80px 0; text-align: center; background-color: #fff; margin-top: -25px !important; } .reasons h1 { font-size: 2.2rem; margin-bottom: 60px; font-weight: bold; } .reasons h2 { font-size: 2rem; margin-bottom: 60px; } .reasons-grid { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 60px; } .reason-card { flex: 1; display: flex; flex-direction: column; align-items: center; } .reason-icon { width: 220px; height: 220px; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .reason-icon img { width: 100%; height: 100%; object-fit: contain; } .reason-card h2, .reason-card h3 { font-size: 1.6rem !important; margin-bottom: 15px !important; line-height: 1.4 !important; letter-spacing: -0.04em; text-align: center; } .reason-card p { font-size: 0.9rem; text-align: left; color: #666; margin-top: 0; line-height: 1.6; } .blue-text { color: #4273DB !important; font-weight: bold; font-size: 1.4rem !important; line-height: 1.4; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; } .reasons-footer .blue-text { color: #4273DB !important; font-weight: bold; font-size: 2rem; line-height: 1.4; } /* Color Card Section */ .color-card { padding: 80px 0 60px 0; background-color: #FAFAF8; position: relative; overflow: hidden; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .color-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.4; z-index: 1; } .color-card h2 { text-align: center; margin-bottom: 110px; font-size: 2rem; } .color-card .container { position: relative; z-index: 2; } .color-card-content { display: flex; gap: 50px; align-items: flex-start; } .text-content { flex: 1; } .orange-label { color: #4273DB !important; font-weight: bold; margin-bottom: 10px; font-size: 1.8rem !important; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; } .text-content h3 { font-size: 2rem; color: #000; margin-bottom: 20px; } .price-box { margin-bottom: 20px; display: flex; align-items: baseline; gap: 10px; } .price { font-size: 2.5rem; font-weight: bold; color: #d35400; } .tax { font-size: 1rem; color: #d35400; } .quantity { font-size: 1.5rem; font-weight: bold; color: #d35400; } .desc { margin-bottom: 20px; color: #666; } .note { font-size: 0.8rem; color: #999; } .specs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 40px; max-width: 600px; } .spec-box { border: 1px solid #b88d5e; color: #5e4b35; padding: 15px 10px; text-align: center; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; min-height: 60px; background-color: #fffdf8; } .spec-box.gray { border: 1px solid #ddd; background-color: #f5f5f5; color: #999; } .man-graphic { width: 600px; flex-shrink: 0; } .man-graphic img { width: 100%; } /* Clear Pricing */ .clear-pricing { padding: 120px 0; background-color: #FAFAF8; position: relative; overflow: hidden; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-top: -30px; z-index: 2; } .clear-pricing::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.4; z-index: 1; } .pricing-flex { display: flex; align-items: center; gap: 50px; position: relative; z-index: 2; } .pricing-graphic { flex: 1; } .pricing-graphic img { width: 100%; } .pricing-text { flex: 1; } .bold-label { color: #4273DB !important; font-weight: bold; margin-bottom: 10px; font-size: 1.8rem !important; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; text-align: left !important; } .pricing-text h3 { font-size: 1.8rem; margin-bottom: 20px; line-height: 1.4; } /* Support Section */ .support { padding: 80px 0; background-color: #FAFAF8; position: relative; overflow: hidden; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } .support::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.4; z-index: 1; } .support-content { display: flex; align-items: center; gap: 50px; position: relative; z-index: 2; text-align: left; } .support-text { flex: 1; text-align: left !important; } .support-text h2 { font-size: 1.8rem; margin-bottom: 20px; line-height: 1.4; text-align: left !important; } .support-text h3 { font-size: 1.8rem; margin-bottom: 20px; line-height: 1.4; color: #000; text-align: left !important; } .support-text p { margin-bottom: 15px; line-height: 1.6; text-align: left !important; } /* Additional specific styling for the support section content */ .support .support-content .support-text { text-align: left !important; } .support .support-content .support-text h3 { text-align: left !important; } .support .support-content .support-text p { text-align: left !important; } .support .support-content .support-text .bold-label { text-align: left !important; } .support-buttons { display: flex; gap: 20px; margin-top: 30px; } .support-image { flex: 1; text-align: right; width: 500px; } .support-image img { max-width: 100%; height: auto; width: 100%; } /* Steps Section */ .steps { padding: 30px 0 80px; text-align: center; background-color: #ffffff; } .steps h2 { font-size: 2rem; margin-top: 32px; margin-bottom: 50px; } .steps-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; } .step-card { border: 2px solid #666; width: 150px; height: 210px; padding: 20px 10px; position: relative; display: flex; flex-direction: column; align-items: center; border-radius: 5px; } .step-header { font-weight: bold; color: #4a90e2; margin-bottom: 15px; border-bottom: 3px solid #4a90e2; padding-bottom: 5px; width: 80%; } .step-icon { height: 50px; margin-bottom: 15px; display: flex; align-items: center; justify-content: center; } .step-icon img { max-height: 100%; max-width: 100%; } .step-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 30px; } .step-notes { color: #4a90e2; font-size: 0.9rem; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: none; margin: 0; } .step-image { width: 300px; flex-shrink: 0; } .step-image img { width: 100%; height: auto; } /* Lineup Section */ .lineup { padding: 80px 0; background-color: #fafafa; } .lineup-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 50px; max-width: 1150px; margin-left: auto; margin-right: auto; } .lineup-title { flex: 1; margin-left: 50px; } .lineup-title h1, .lineup-title h2 { font-size: 2.2rem; margin-bottom: 10px; font-family: "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", "YuGothic", "Meiryo", sans-serif; } .lineup-title-main { position: relative; display: inline-block; padding: 5px 20px; margin-bottom: 15px; } .lineup-title p { margin-bottom: 20px; } .lineup-title-main::before { content: ''; position: absolute; left: 0; top: 60%; transform: translateY(-50%); width: 100%; height: 20px; background-color: #FFC90D; z-index: -1; } .lineup-image { width: 550px; flex-shrink: 0; margin-top: -30px; margin-left: -10px; } .lineup-image img { width: 100%; height: auto; } .lineup-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 50px 0 0 auto; max-width: 1150px; } .lineup-item { background: #fff; padding: 0; border: 1px solid #e0e0e0; display: flex; align-items: center; height: 150px; width: 100%; max-width: 550px !important; text-align: left; box-sizing: border-box; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,0.05); position: relative; overflow: hidden; } .lineup-item img { width: auto; height: 150px; max-width: 180px; object-fit: cover; margin: 0; flex-shrink: 0; align-self: center; border-radius: 8px 0 0 8px; } .lineup-item .item-content { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 5px 5px; } .lineup-item h5 { margin: 0 0 2px 0 !important; font-size: 1.0rem !important; line-height: 1.1 !important; } .lineup-item h6 { margin: 0 0 2px 0 !important; font-size: 0.9rem !important; line-height: 1.1 !important; } .lineup-item h3 { margin: 0 0 2px 0; font-size: 0.85rem; color: #333; font-weight: 600; line-height: 1.2; } .lineup-item p { margin: 0; font-size: 0.65rem; color: #666; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .learn-more-indicator { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 2.2rem; color: #0066cc; font-weight: bold; pointer-events: none; } .color-note { font-size: 0.8rem; color: #666; margin-top: 40px; padding: 15px; background-color: #f9f9f9; border-left: 3px solid #4273DB; text-align: left; } /* Price Comparison Section */ .price-comparison { padding: 40px 0 20px 0; background-color: #fff; margin-bottom: 0 !important; } .section-header { text-align: center; margin-bottom: 50px; } .section-header h2 { font-size: 2rem; margin-bottom: 10px; } .section-header p { font-size: 1.2rem; font-weight: bold; } .comparison-container { display: flex; justify-content: center; gap: 30px; margin-bottom: 30px; align-items: stretch; } .comparison-box { width: 320px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 4px 10px rgba(0,0,0,0.05); } /* Other Company (Orange) */ .comparison-box.other-company .box-header { background-color: #d99f48; color: #fff; padding: 15px; text-align: center; font-weight: bold; font-size: 1.3rem; } .comparison-box.other-company .box-body { background-color: #eebf6c; color: #fff; padding: 25px; flex: 1; display: flex; flex-direction: column; } .comparison-box.other-company .box-footer { background-color: #fcebc9; color: #333; text-align: center; padding: 15px; margin-top: auto; border-radius: 8px; font-weight: bold; line-height: 1.4; } /* Our Company (Blue) */ .comparison-box.our-company .box-header { background-color: #87c2d5; color: #fff; padding: 15px; text-align: center; font-weight: bold; font-size: 1.3rem; } .comparison-box.our-company .box-body { background-color: #bde4f0; padding: 25px; flex: 1; display: flex; flex-direction: column; position: relative; } .price-list { list-style: none; padding: 0; margin: 0 0 20px 0; font-weight: bold; } .price-list li { margin-bottom: 12px; font-size: 1rem; line-height: 1.4; } .small-text { font-size: 0.8rem; font-weight: normal; display: block; margin-left: 1em; opacity: 0.9; } .comparison-box.our-company .price-list li { color: #fff; } .price-highlight { text-align: center; color: #333; font-weight: bold; font-size: 1.4rem; margin: 30px 0; line-height: 1.4; } .box-footer-highlight { text-align: center; color: #333; font-weight: bold; font-size: 1.2rem; margin-top: auto; } .small-label { font-size: 1rem; font-weight: normal; } .price-note { text-align: center; font-size: 0.8rem; color: #999; line-height: 1.5; margin-top: 20px; margin-bottom: 0 !important; } /* News Section */ .news-section { padding: 30px 0; background-color: #ffffff; margin-top: -30px !important; } .news-box { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #eee; padding: 20px 30px; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); display: flex; align-items: center; } .news-label-area { margin-right: 30px; flex-shrink: 0; } .news-big-badge { background-color: #d99f48; color: #fff !important; font-size: 1rem; padding: 8px 30px; border-radius: 50px; /* Capsule shape */ font-weight: bold; letter-spacing: 1px; display: inline-block; } .news-items-container { flex: 1; display: flex; flex-direction: column; justify-content: center; } .news-scroll-container { max-height: 120px; overflow-y: hidden; padding-right: 10px; position: relative; } .news-scroll-content { display: flex; flex-direction: column; animation: scrollNews 18s linear infinite; will-change: transform; } .news-scroll-container:hover .news-scroll-content, .news-scroll-container:focus-within .news-scroll-content, .news-items-container:hover .news-scroll-content, .news-box:hover .news-scroll-content { animation-play-state: paused; } @keyframes scrollNews { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .news-scroll-container::-webkit-scrollbar { width: 6px; } .news-scroll-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .news-scroll-container::-webkit-scrollbar-thumb { background: #d99f48; border-radius: 3px; } .news-scroll-container::-webkit-scrollbar-thumb:hover { background: #b8862b; } .news-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px dashed #eee; } .news-row:last-child { border-bottom: none; } .news-date { color: #666; font-size: 0.9rem; margin-right: 25px; white-space: nowrap; font-family: monospace, sans-serif; /* Monospace for alignment */ } .news-title { font-size: 0.95rem; color: #333; line-height: 1.4; text-decoration: none; } .news-title:hover { text-decoration: underline; color: #d99f48; } /* Case Studies Section */ .case-studies { background: #ffffff !important; background-color: #ffffff !important; padding: 120px 0 !important; margin: 0; border-top: 5px solid #ffffff !important; border-bottom: 5px solid #ffffff !important; box-shadow: 0 15px 40px rgba(255,255,255,0.8) !important; color: #333 !important; position: relative; z-index: 10; overflow: hidden; } .case-studies::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100vw; height: 100%; background: #ffffff; z-index: -1; } .case-studies::after { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #ffffff; z-index: -2; pointer-events: none; } .case-studies .white-background { background: #ffffff !important; background-color: #ffffff !important; width: 100%; max-width: 100vw; margin-left: 0; margin-right: 0; padding: 0; position: relative; z-index: 1; } .case-studies .container { background: #ffffff !important; background-color: #ffffff !important; border-radius: 8px; box-shadow: 0 5px 20px rgba(255,255,255,0.95) !important; } .case-studies h2 { font-size: 2rem; margin-top: 18px; margin-bottom: 40px; text-align: center; } .case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; } .case-card { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #f8f8f8; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 8px rgba(255,255,255,0.9) !important; } .case-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .case-img-placeholder { background-color: #f0f0f0; height: 150px; width: 100%; overflow: hidden; } .case-img-placeholder img { width: 100%; height: 100%; object-fit: cover; } .case-card h3 { font-size: 0.9rem; font-weight: bold; margin: 15px; line-height: 1.4; min-height: 2.8em; } .case-card p { font-size: 0.8rem; color: #666; margin: 0 15px 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .case-meta { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-top: 1px solid #eee; font-size: 0.7rem; } .case-tag { background-color: #f0f0f0; color: #666; padding: 2px 6px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .case-date { color: #999; } .case-button-container { text-align: center; } .btn-outline-wide { border: 2px solid #4a90e2; color: #4a90e2 !important; padding: 15px 40px; border-radius: 4px; font-weight: bold; font-size: 1.1rem; display: inline-block; text-align: center; min-width: 200px; max-width: 200px; width: 200px; box-sizing: border-box; transition: all 0.3s ease; } a.btn-outline-wide { color: #4a90e2 !important; } .btn-outline-wide:hover { background-color: #4a90e2; color: #fff; } /* Contact Section */ .contact-section { padding: 80px 0; background-color: #FAFAF8; text-align: center; position: relative; overflow: hidden; } .contact-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,'); opacity: 0.4; z-index: 1; pointer-events: none; } .contact-section .container { position: relative; z-index: 2; } .contact-section .btn-blue { margin-top: 20px; min-width: 200px !important; max-width: 200px !important; width: 200px !important; background-color: #4273DB !important; color: #fff !important; border: 2px solid #4273DB !important; } .contact-section .btn-blue:hover { background-color: #3561C7 !important; color: #fff !important; border: 2px solid #3561C7 !important; } .contact-section h2 { font-size: 2rem; margin-bottom: 40px; } .contact-grid { display: flex; justify-content: center; gap: 100px; } .contact-box { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 40px; width: 320px; max-width: 100%; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } .contact-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .contact-icon { font-size: 2rem; color: #4a90e2; margin-bottom: 20px; } .contact-icon svg { width: 52px; height: 52px; display: block; margin: 0 auto; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .contact-icon-phone svg { width: 42px; height: 42px; stroke-width: 1.7; } .contact-box h3 { color: #4a90e2; font-size: 1.2rem; margin-bottom: 20px; } .contact-box p { color: #666; margin-bottom: 30px; font-size: 0.9rem; line-height: 1.6; } .phone-number { font-size: 2.5rem !important; font-weight: bold; color: #333 !important; margin-bottom: 10px !important; } .btn-yellow { background-color: #f4d03f; color: #333; padding: 15px 50px; border-radius: 30px; font-weight: bold; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; } .btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.15); } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1100; } .mobile-menu-toggle span { display: block; width: 25px; height: 3px; background-color: #333; margin: 5px 0; transition: 0.3s; } /* Default desktop navigation */ .main-nav { display: block; } /* デスクトップではモバイルメニュー内アクションエリアを非表示 */ .mobile-menu-actions { display: none; } /* Responsive Design */ @media (max-width: 768px) { /* Mobile Menu */ .mobile-menu-toggle { display: block; } /* Hide desktop navigation on mobile */ .main-nav { display: none !important; } /* Mobile menu overlay when active */ .main-nav.active { display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; width: 80% !important; height: 100vh !important; background-color: #fff !important; box-shadow: -2px 0 5px rgba(0,0,0,0.1) !important; z-index: 1000 !important; padding-top: 80px !important; /* Remove GPU transform so fixed positioning anchors to viewport, not header-container */ transform: none !important; overflow-y: auto !important; } .main-nav ul { flex-direction: column !important; padding: 0 20px !important; } .main-nav li { margin-bottom: 20px !important; } .main-nav a { font-size: 1.0rem !important; padding: 10px 0 !important; display: block !important; } /* モバイルのドロップダウン：hoverではなくJSのclickで制御 */ .main-nav li:hover .dropdown-content { display: none; } .main-nav .dropdown-content { display: none; position: static; box-shadow: none; background-color: #f8f8f8; padding: 0 0 0 15px; min-width: auto; border-left: 3px solid #4a90e2; margin-top: 5px; margin-bottom: 10px; } .main-nav .dropdown-content.open { display: block; } .main-nav .dropdown-content a { font-size: 0.9rem !important; padding: 8px 10px !important; border-bottom: 1px solid #eee; } .main-nav .dropdown-content a:last-child { border-bottom: none; } /* ドロップダウン矢印 */ .main-nav .dropdown > a::after { content: '▶'; font-size: 8px; margin-left: 8px; display: inline-block; } .main-nav .dropdown.mob-open > a::after { content: '▼'; } .header-right { display: flex !important; gap: 10px; padding-right: 10px; align-items: center; } /* モバイルでは会社情報リンクを非表示 */ .header-right > a.header-link { display: none !important; } /* モバイルではヘッダー内のログインリンクを非表示（メニュー内に移動） */ #loginLink { display: none !important; } /* モバイルではヘッダー内の注文ボタンを非表示（メニュー内に移動） */ .header-right > .upload-btn { display: none !important; } /* モバイルではヘッダー内のお問い合わせボタンを非表示（メニュー内に移動） */ .header-right > .consult-btn { display: none !important; } /* 手机菜单内的注文按钮确保白色字体 */ a.upload-btn, .mobile-order-btn { color: #ffffff !important; } /* Ensure mobile menu appears above all content */ .main-nav.active { z-index: 9999 !important; } .mobile-menu-toggle { z-index: 10000 !important; } /* モバイルメニュー内のアクションエリア */ .mobile-menu-actions { display: flex; flex-direction: column; padding: 20px 20px 40px; gap: 12px; border-top: 1px solid #eee; margin-top: 10px; } .mobile-order-btn, .main-nav .mobile-order-btn { display: block; background-color: #00aaff; color: #ffffff !important; padding: 14px 20px; border-radius: 4px; font-size: 1rem; font-weight: bold; text-align: center; text-decoration: none; } .mobile-order-btn:hover, .main-nav .mobile-order-btn:hover { color: #ffffff !important; } .mobile-consult-btn, .main-nav .mobile-consult-btn { display: block; background-color: #ffffff; color: #4a90e2 !important; border: 2px solid #4a90e2; padding: 12px 20px; border-radius: 4px; font-size: 1rem; font-weight: bold; text-align: center; text-decoration: none; } .mobile-consult-btn:hover, .main-nav .mobile-consult-btn:hover { color: #4a90e2 !important; } .mobile-login-link { display: block; color: #333 !important; padding: 12px 20px; font-size: 1rem; font-weight: bold; text-align: center; text-decoration: none; border: 1px solid #ddd; border-radius: 4px; } /* Vertical FAQ Button - Mobile */ .vertical-faq-btn { display: none; } .vertical-faq-link { display: none; } /* Hero Section */ .hero-content-wrapper { flex-direction: column; align-items: center; text-align: center; padding: 0 15px; } .hero .container { max-width: 100%; margin-bottom: 30px; padding-bottom: 0; --hero-offer-offset-top: 18px; --hero-offer-subtitle-size: 1.3rem; --hero-offer-title-size: 2rem; --hero-offer-price-size: 2.45rem; --hero-offer-tax-size: 0.48em; --hero-offer-subtitle-white-space: normal; } .hero h1 { font-size: 2rem; } .hero-offer-subtitle { width: 100%; padding: 0 12px; margin-bottom: 8px !important; line-height: 1.35 !important; } .hero-offer-subtitle-text { display: inline !important; white-space: normal; } .hero-offer-title, .hero-offer-price { width: 100%; padding: 0 12px; line-height: 1.15 !important; } .hero-brand-message { margin-top: var(--hero-offer-offset-top, 18px); } .hero-brand-kicker { font-size: 1.72rem !important; } .hero-brand-title { font-size: clamp(2.15rem, 7.8vw, 3.05rem) !important; } .hero-brand-divider { width: min(100%, 320px); margin-top: 18px; gap: 10px; } .hero-brand-copy { margin-top: 18px; font-size: 1rem; line-height: 1.72; } .hero-brand-copy-top { font-size: 1.08rem; margin-bottom: 10px !important; } .hero-price-display { margin-top: 22px !important; } .hero-image-section { width: 90%; max-width: 400px; margin: 0 auto; } .badges { flex-wrap: wrap; justify-content: center; } .tags { flex-direction: column; gap: 8px; } .tags-row { flex-wrap: wrap; gap: 8px; justify-content: center; } .hero-buttons { flex-direction: row; gap: 15px; margin: 0 auto 30px; align-items: center; justify-content: center; flex-wrap: wrap; } /* 响应式下的按钮样式保持一致 */ .hero-buttons .btn-blue, .hero-buttons .btn-outline { min-width: 200px !important; max-width: 200px !important; width: 200px !important; padding: 19px 20px !important; font-size: 1rem !important; margin: 0 !important; } .hero-order-badge { top: -14px; right: -4px; width: 56px; height: 56px; } .hero-order-badge-top { font-size: 0.56rem !important; } .hero-order-badge-main { font-size: 1.86rem !important; } .btn-blue, .btn-outline, .btn-outline-wide { width: 100%; max-width: 250px; } .btn-long { min-width: 250px; max-width: 250px; width: 250px; } /* Specs Bar */ .specs-bar-wrapper { animation: floatRightToLeft 40s linear infinite; } .specs-set { gap: 60px; padding: 0; padding-right: 60px; } .spec-item { width: 70px; height: 70px; } /* 保持向上移动15像素 */ .specs-bar { margin-top: -15px !important; } .spec-item img { width: 70px; height: 70px; } /* Reasons Section */ .reasons-grid { flex-direction: column; gap: 30px; } /* Color Card Section */ .color-card { padding: 60px 0 40px 0; background-color: #FAFAF8; } .color-card-content { flex-direction: column; } .specs-grid { grid-template-columns: repeat(2, 1fr); } .man-graphic { position: static; width: 100%; margin-top: 30px; } /* Clear Pricing */ .clear-pricing { padding: 100px 0; background-color: #FAFAF8; } .pricing-flex { flex-direction: column; } /* Support Section */ .support { padding: 60px 0; background-color: #FAFAF8; } .support-content { flex-direction: column; gap: 30px; } /* Steps Section */ .steps-container { flex-direction: column; align-items: center; gap: 20px; } .step-card { width: 200px; height: 210px; border-radius: 5px; } /* Lineup Section */ .lineup-grid { grid-template-columns: 1fr; gap: 15px; padding: 0 15px; } .lineup-item { width: 100%; max-width: 100%; height: auto; min-height: 120px; padding: 15px; border-radius: 8px !important; flex-direction: column; text-align: center; } .lineup-item img { width: auto; height: 80px; max-width: 120px; margin: 0 auto 15px; padding: 0; border-radius: 4px; } .lineup-item .item-content { padding: 0; text-align: center; } .lineup-item h5 { font-size: 1.1rem !important; margin-bottom: 10px !important; } .lineup-item p { font-size: 0.85rem !important; line-height: 1.4 !important; margin-bottom: 10px !important; } .learn-more-indicator { position: static; margin-top: 10px; transform: none; font-size: 1.8rem; } /* Price Comparison */ .comparison-container { flex-direction: column; gap: 20px; } .comparison-box { width: 100%; max-width: 400px; } /* News Section */ .news-box { flex-direction: column; text-align: center; } .news-label-area { margin-right: 0; margin-bottom: 20px; } .news-row { flex-direction: column; align-items: flex-start; gap: 5px; } /* Case Studies */ .case-grid { grid-template-columns: 1fr; gap: 30px; } /* Contact Section */ .contact-grid { flex-direction: column; gap: 20px; } .contact-box { width: 100%; max-width: 400px; } /* Footer */ .footer a { color: #404040 !important; font-size: 0.8rem !important; text-decoration: none !important; } .footer-top { flex-direction: column; } .footer-brand { width: 100%; padding-right: 0; margin-bottom: 30px; } .footer-links { flex-direction: column; gap: 30px; } .footer-bottom { flex-direction: column; gap: 20px; text-align: center; } } @media (max-width: 480px) { .container { padding: 0 15px; } .header-container { padding: 0 15px 0 0; } .hero h1 { font-size: 1.8rem; } .hero .container { --hero-offer-offset-top: 12px; --hero-offer-subtitle-size: 1.08rem; --hero-offer-title-size: 1.65rem; --hero-offer-price-size: 2.05rem; --hero-offer-tax-size: 0.46em; } .hero-offer-subtitle, .hero-offer-title, .hero-offer-price { padding-left: 6px; padding-right: 6px; } .hero-brand-kicker { font-size: 1.52rem !important; } .hero-brand-title { font-size: clamp(1.82rem, 9.6vw, 2.45rem) !important; line-height: 1.22 !important; } .hero-brand-divider { width: min(100%, 250px); gap: 8px; } .hero-brand-copy { font-size: 0.92rem; line-height: 1.68; } .hero-brand-copy-top { font-size: 0.98rem; } .hero-price-display { margin-top: 18px !important; } .price { font-size: 2rem; } .quantity { font-size: 1.2rem; } .specs-grid { grid-template-columns: 1fr; } .comparison-box { width: 100%; } .contact-box { padding: 30px 20px; } .phone-number { font-size: 2rem !important; } } /* Tablet Styles */ @media (min-width: 769px) and (max-width: 1024px) { .hero-content-wrapper { flex-direction: column; align-items: center; text-align: center; } .hero .container { max-width: 100%; margin-bottom: 40px; } .hero-image-section { width: 80%; max-width: 400px; margin: 0 auto; } .reasons-grid { gap: 20px; } .color-card-content { gap: 30px; } .specs-grid { grid-template-columns: repeat(3, 1fr); } .man-graphic { width: 300px; } .pricing-flex { gap: 30px; } .steps-container { gap: 15px; } .step-card { width: 130px; height: 210px; border-radius: 5px; } .lineup-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .lineup-item { height: auto; min-height: 150px; } .comparison-container { gap: 20px; } .comparison-box { width: 280px; } .case-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .contact-grid { gap: 20px; } .contact-box { width: 350px; padding: 30px 20px; } /* 在小屏幕下保持向上移动15像素 */ .specs-bar { margin-top: -15px !important; } } /* Additional Responsive Optimizations */ @media (max-width: 768px) { /* Improve touch targets */ .main-nav a, .btn-blue, .btn-outline, .btn-yellow, .btn-outline-wide { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Better spacing for mobile */ .hero { padding: 40px 0 15px 0; } .reasons, .color-card, .clear-pricing, .support, .steps, .lineup, .price-comparison, .case-studies, .contact-section { padding: 60px 0; } /* 在中等屏幕下保持向上移动25像素 */ .reasons { margin-top: -25px !important; } /* Improve text readability */ .hero h1 { font-size: 1.8rem; line-height: 1.3; } .reason-card h3 { font-size: 1.1rem; } /* Better image sizing */ .badge img { height: 50px; } .hero-image img { max-width: 100%; height: auto; } /* Improve form elements */ .contact-box { padding: 30px 20px; } /* Better grid spacing */ .specs-grid { gap: 10px; } .case-grid { gap: 20px; } /* Improve button spacing */ .hero-buttons { gap: 15px; } /* Better navigation spacing */ .main-nav li { margin-bottom: 15px; } /* Improve price comparison layout */ .comparison-box { margin: 0 auto; } /* Better news layout */ .news-row { padding: 10px 0; } .news-date { margin-right: 15px; } } /* High DPI displays */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo-red, .logo-sub { font-weight: 600; } .btn-blue, .btn-outline, .btn-yellow, .btn-outline-wide { font-weight: 600; } } /* Landscape mode optimizations */ @media (max-height: 500px) and (orientation: landscape) { .hero { padding: 30px 0 0 0; } .hero h1 { font-size: 1.6rem; } .main-nav { padding-top: 60px; } .main-nav a { padding: 8px 0; font-size: 0.9rem; } } /* Print styles */ @media print { .mobile-menu-toggle, .hero-image, .man-graphic, .support-image { display: none; } .hero, .reasons, .color-card, .clear-pricing, .support, .steps, .lineup, .price-comparison, .case-studies, .contact-section { padding: 20px 0 0 0; } /* 在小屏幕下保持向上移动25像素 */ .reasons { margin-top: -25px !important; } body { font-size: 12pt; line-height: 1.4; } .container { max-width: 100%; padding: 0 10px; } /* Hero buttons for small screens */ .hero-buttons { margin-left: 10px; margin-right: 10px; gap: 10px; } /* 小屏幕下的按钮样式 */ .hero-buttons .btn-blue, .hero-buttons .btn-outline { min-width: 150px !important; max-width: 150px !important; width: 150px !important; padding: 17px 15px !important; font-size: 0.9rem !important; margin: 0 !important; } .hero-order-badge { top: -12px; right: -4px; width: 48px; height: 48px; gap: 1px; } .hero-order-badge-top { font-size: 0.46rem !important; } .hero-order-badge-main { font-size: 1.44rem !important; } /* Tags for small screens */ .tags-row { gap: 6px; justify-content: center; } .tags span { padding: 6px 12px; font-size: 0.8rem; } } /* Reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .mobile-menu-toggle span, .btn-blue, .btn-outline, .btn-yellow, .btn-outline-wide, .case-card, .contact-box { transition: none; } .main-nav { transition: none; } } footer { background: #ffffff !important; background-color: #ffffff !important; padding-top: 60px; } .footer-top { display: flex; margin-bottom: 40px; } .footer-brand { width: 20%; padding-right: 40px; min-width: 150px; } @media (max-width: 768px) { .footer-top { flex-direction: column; align-items: center; text-align: center; } .footer-brand { width: 100%; padding-right: 0; margin-bottom: 30px; min-width: auto; display: flex; flex-direction: column; align-items: center; } .footer-logo { margin-bottom: 10px !important; } .footer-logo img { max-width: 100%; height: auto; margin: 0 auto !important; max-height: 60px; } .footer-links { width: 100%; justify-content: center; gap: 30px; flex-wrap: wrap; } .footer-col { align-items: center; min-width: 120px; } .footer-legal { flex-wrap: wrap; gap: 12px 20px; justify-content: center; } footer { padding-top: 40px; } } @media (max-width: 480px) { .footer-links { flex-direction: column; align-items: center; gap: 24px; } .footer-col { width: 100%; max-width: 100%; } .footer-legal { gap: 10px 16px; } .footer-legal a { font-size: 0.8rem !important; } footer { padding-top: 30px; } } .footer-logo { font-size: 1.5rem; color: #4a90e2; font-weight: bold; margin-bottom: 0 !important; line-height: 1 !important; } .footer-logo img { display: block !important; margin: 0 !important; padding: 0 !important; } .footer-desc { font-size: 0.8rem !important; color: #000 !important; margin-top: 2px !important; margin-bottom: 15px !important; line-height: 1.1 !important; padding: 0 !important; } .footer-brand p { margin: 0 !important; padding: 0 !important; } .footer-social { display: flex; gap: 10px; margin-top: 10px; margin-bottom: 20px; } .footer-social a { background: #ccc; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: all 0.3s ease; } .footer-social a:hover { background: #4a90e2; transform: translateY(-2px); } .footer-cert { font-size: 0.7rem; color: #999; display: flex; flex-direction: column; gap: 5px; } .footer-links { flex: 1; display: flex; justify-content: flex-end; gap: 16px; } .footer-col { display: flex; flex-direction: column; gap: 10px; flex: 1 1 160px; max-width: 205px; } /* 「用途から選ぶ」と「製品ラインナップ」の表示順を入れ替え（HTMLは変更せず表示のみ） */ .footer-links .footer-col:nth-child(1) { order: 1; } .footer-links .footer-col:nth-child(2) { order: 3; } .footer-links .footer-col:nth-child(3) { order: 2; } .footer-links .footer-col:nth-child(4) { order: 4; } .footer-col a { font-size: 0.86rem !important; color: #000 !important; line-height: 1.45; transition: color 0.3s ease; } .footer-col a:hover { color: #4a90e2; } .footer-col a:hover { color: #4a90e2; } .footer-bottom { border-top: 1px solid #eee; padding: 20px 0; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; } .footer-legal { display: flex; gap: 30px; justify-content: center; align-items: center; } .footer-legal a { color: #404040 !important; font-size: 0.9rem !important; text-transform: uppercase; text-decoration: none !important; transition: color 0.3s ease; } .footer-bottom .footer-legal a { color: #404040 !important; font-size: 0.9rem !important; text-transform: uppercase !important; text-decoration: none !important; } .footer-legal a:hover { color: #404040 !important; } .footer-legal a span { color: #404040 !important; font-size: 0.9rem !important; } .external-icon { font-size: 0.9em; } .copyright { color: #606060; font-size: 0.8rem; } .footer-copyright { text-align: center; padding: 10px 0 0 0; } /* Ultra-specific footer bottom link styles to ensure they take effect */ footer .footer-bottom .footer-legal a, footer .footer-bottom .footer-legal a:link, footer .footer-bottom .footer-legal a:visited { color: #404040 !important; font-size: 0.9rem !important; text-transform: uppercase !important; text-decoration: none !important; font-weight: normal !important; font-style: normal !important; line-height: normal !important; letter-spacing: normal !important; text-align: center !important; display: inline-block !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; text-shadow: none !important; opacity: 1 !important; visibility: visible !important; } footer .footer-bottom .footer-legal a:hover, footer .footer-bottom .footer-legal a:active { color: #404040 !important; text-decoration: none !important; opacity: 1 !important; } .footer-main-link { font-size: 0.9rem !important; font-weight: bold !important; color: #000 !important; text-decoration: none !important; } .footer-main-link:hover { color: #4a90e2 !important; } /* Business calendar in footer */ .business-calendar { width: 100%; max-width: 245px; margin: 18px 0 14px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #ffffff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); color: #1f2937; } .business-calendar__header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .business-calendar__label { font-size: 0.82rem; font-weight: 700; color: #111827; line-height: 1.3; } .business-calendar__month { font-size: 0.72rem; color: #64748b; white-space: nowrap; } .business-calendar__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; } .business-calendar__tab { min-height: 26px; padding: 0 8px; border: 1px solid #dbe3ef; border-radius: 5px; background: #f8fafc; color: #475569; font-size: 0.68rem; font-weight: 700; line-height: 1; cursor: pointer; } .business-calendar__tab.is-active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; } .business-calendar__weekdays, .business-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .business-calendar__weekdays { margin-bottom: 5px; } .business-calendar__weekday, .business-calendar__day { min-width: 0; text-align: center; font-size: 0.68rem; line-height: 1; } .business-calendar__weekday { color: #64748b; font-weight: 700; } .business-calendar__day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid #e5e7eb; border-radius: 5px; background: #ffffff; color: #334155; } .business-calendar__day.is-empty { border-color: transparent; background: transparent; } .business-calendar__day.is-closed { border-color: #fda4af; background: #ffe4e6; color: #9f1239; } .business-calendar__day.is-today { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; font-weight: 700; } .business-calendar__legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font-size: 0.68rem; color: #475569; } .business-calendar__legend-item { display: inline-flex; align-items: center; gap: 5px; } .business-calendar__mark { width: 9px; height: 9px; border: 1px solid #cbd5e1; border-radius: 2px; background: #ffffff; } .business-calendar__mark--closed { border-color: #fda4af; background: #ffe4e6; } @media (max-width: 768px) { .business-calendar { max-width: 280px; margin-left: auto; margin-right: auto; } } /* Product List Page Styles */ /* Page Title Section */ .page-title-section { padding: 60px 0 40px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); text-align: center; } .page-title { font-size: 2.5rem; font-weight: 700; color: #333; margin-bottom: 15px; text-align: center; } body.customer-cases-page .page-title { font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important; } .page-subtitle { font-size: 1.2rem; color: #666; text-align: center; max-width: 600px; margin: 0 auto; } /* Filter Section */ .filter-section { padding: 30px 0; background: #fff; border-bottom: 1px solid #e0e0e0; } .filter-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; align-items: center; } .filter-group { display: flex; align-items: center; gap: 10px; } /* Order Page Styles */ .order-section { padding: 30px 0; background: white; } .order-container { max-width:1800px; margin: 0 auto; padding: 0 20px; } .order-header { text-align: left; margin-bottom: 50px; margin-left: 0; padding-left: 0; } .order-title { color: #333; font-size: 1.65rem; margin-bottom: 15px; text-align: left; } .order-subtitle { color: #666; font-size: 1.1rem; text-align: left; } .order-form { background: none; padding: 0; border-radius: 0; box-shadow: none; border: none; } .form-section { margin-bottom: 40px; } .form-section-title { color: #333; font-size: 1.5rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #3498db; width: 100%; text-align: left; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-label { display: block; color: #333; font-weight: 600; margin-bottom: 8px; } .form-input { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 1rem; transition: border-color 0.3s ease; } .form-input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1); } .form-select { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 1rem; background: white; cursor: pointer; } .form-textarea { width: 100%; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 1rem; min-height: 120px; resize: vertical; } .product-category-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px; width: auto; flex-wrap: nowrap; } .product-category-tab { padding: 10px 20px; background: white; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; font-weight: 500; color: #666; transition: all 0.3s ease; } .product-category-tab:hover { border-color: #3498db; box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1); } .product-category-tab:active { transform: scale(0.98); transition: transform 0.1s ease; } .product-category-tab.active { background: #e3f2fd; color: #333 !important; border-color: #3498db; font-weight: 600; background-color: #e3f2fd; border-color: #3498db; } .product-category-content { width: 100%; max-width: 100%; margin-top: -30px; } .product-category-content h6 { margin-bottom: 15px; font-size: 1.1rem; font-weight: 600; color: #333; text-align: left; } .product-type-grid { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .product-type-grid.usage-grid { flex-direction: row; flex-wrap: wrap; gap: 15px 20px; } .product-type-grid.usage-grid .product-type-card { width: calc(50% - 10px); height: auto; min-height: 60px; } .product-type-grid.usage-grid .product-type-card.selected { border-color: #3498db; background: #e3f2fd; } .product-type-grid.usage-grid .product-type-card[data-category="card-type"] { width: 100%; height: 80px; } .product-type-grid h6 { margin: 25px 0 15px 0; font-size: 1.1rem; font-weight: 600; color: #333; text-align: left; } .product-type-card { background: #f8f9fa; padding: 12px 20px; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; height: 100px; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .product-type-card .card-content { display: flex; flex-direction: column; justify-content: center !important; height: 100%; flex: 1; align-items: flex-start !important; text-align: left !important; } .product-type-card .card-content h6 { text-align: left !important; margin-bottom: 5px; margin-top: 0; align-self: flex-start !important; font-weight: 600; } .product-type-card .card-content p { text-align: left !important; margin-bottom: 0; margin-top: 0; align-self: flex-start !important; line-height: 1.4; } .product-type-card:hover { border-color: #3498db; box-shadow: 0 2px 10px rgba(52, 152, 219, 0.1); } .product-type-card:active { transform: scale(0.98); transition: transform 0.1s ease; } .product-type-card.selected { border-color: #3498db; background: #e3f2fd; } .product-type-card h6 { color: #333; margin-bottom: 3px; font-size: 1rem; font-weight: 600; line-height: 1.2; } .product-type-card p { color: #666; margin-bottom: 5px; font-size: 0.8rem; line-height: 1.4; margin-top: 0; } .product-type-card .product-price { color: #3498db; font-weight: 600; font-size: 1rem; text-align: right; align-self: center; margin-left: auto; margin-top: auto; margin-bottom: auto; line-height: 1.2; display: block; width: auto; } .option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; } .option-card { background: #f8f9fa; padding: 15px; border: 1px solid #e0e0e0; border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; transition: all 0.3s ease; } .option-card:hover, .option-card.active, .option-card.selected { border: 0.8px solid #3498db; background: #e3f2fd; } .option-card:active { transform: scale(0.98); transition: transform 0.1s ease; } .option-card h3 { color: #333; margin-bottom: 0; font-size: 1.2rem; } .option-card p { color: #666; margin-bottom: 15px; line-height: 1.6; } .option-price { color: #3498db; font-weight: 600; margin-bottom: 0; text-align: right; } .checkbox-group { display: flex; align-items: center; margin-bottom: 10px; } .checkbox-group input[type="checkbox"] { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; } .checkbox-group label { color: #333; cursor: pointer; font-weight: 500; } .radio-group { display: flex; align-items: center; margin-bottom: 10px; } .radio-group input[type="radio"] { margin-right: 10px; width: 18px; height: 18px; cursor: pointer; } .radio-group label { color: #333; cursor: pointer; font-weight: 500; } .quantity-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; width: 100%; } .quantity-selector input[type="number"] { width: 80px; text-align: center; } .quantity-btn { background: white; border: 1px solid #e0e0e0; padding: 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .quantity-btn:hover, .quantity-btn.active { border-color: #3498db; background: #e3f2fd; color: #333; } .quantity-btn:active { transform: scale(0.98); transition: transform 0.1s ease; } .quantity-btn h3 { margin: 0 0 5px 0; font-size: 1.1rem; font-weight: 600; } .quantity-btn .option-price { font-size: 0.9rem; font-weight: 600; color: #e74c3c; align-self: flex-end; text-align: right; width: 100%; } .quantity-btn.active .option-price { color: white; } .price-summary { background: #f0f8ff; padding: 25px; border-radius: 8px; border-left: 4px solid #007acc; margin-bottom: 30px; } .price-summary h3 { color: #333; margin-bottom: 15px; font-size: 1.3rem; } .price-row { display: flex; justify-content: space-between; margin-bottom: 10px; color: #666; } .price-row.total { font-weight: 600; color: #333; font-size: 1.1rem; margin-top: 15px; padding-top: 15px; border-top: 2px solid #e0e0e0; } .submit-section { text-align: center; margin-top: 40px; } .btn-primary { background: #4a90e2; color: #ffffff !important; padding: 8px 16px; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-decoration: none; display: inline-block; } .btn-primary:hover { background: #357abd; color: #ffffff !important; box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3); } .btn-primary:active { background: #2f6da8; color: #ffffff !important; transform: scale(0.98); transition: transform 0.1s ease; } .btn-secondary { background: #f5f5f5; color: #333333 !important; padding: 8px 16px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; text-decoration: none; display: inline-block; } a.btn-secondary { color: #333333 !important; } .btn-secondary:hover { background: #e8e8e8; color: #333333 !important; } .btn-secondary:active { background: #dcdcdc; color: #333333 !important; transform: scale(0.98); transition: transform 0.1s ease; } .hidden { display: none; } .option-card { cursor: pointer; transition: all 0.3s ease; border: 1px solid transparent; } .option-card:hover { border-color: #3498db; } .option-card.active { border-color: #3498db; background: #e3f2fd; } /* Standard Services Section */ .standard-services-section { background: #f8f9fa; padding: 80px 0; } .standard-services-section .container { max-width: 1440px; } .standard-services-section .section-title { text-align: center; color: #333; margin-bottom: 30px; font-size: 2.5rem; } .standard-services-section .section-description { color: #666; line-height: 1.8; margin-bottom: 60px; text-align: center; font-size: 1.1rem; max-width: 1000px; margin-left: auto; margin-right: auto; } .standard-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; max-width: 1440px; margin: 0 auto; padding: 0 20px; } .service-card { background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); border: 1px solid #eaeaea; overflow: hidden; transition: all 0.3s ease; padding: 30px; display: flex; flex-direction: column; align-items: center; text-align: center; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); } .service-icon { margin-bottom: 20px; } .service-icon img { width: 120px; height: 120px; object-fit: contain; transition: transform 0.3s ease; } .service-card:hover .service-icon img { transform: scale(1.1); } .service-title { font-size: 1.2rem; font-weight: bold; color: #333; margin-bottom: 15px; } /* FAQ Section */ .faq-section { padding: 80px 0; background: #fff; } .faq-section h2 { font-size: 2.5rem; text-align: center; margin-bottom: 60px; color: #333; } .faq-container { max-width: 1000px; margin: 0 auto; padding: 0 20px; } .faq-item { margin-bottom: 20px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: #f8f9fa; cursor: pointer; transition: background-color 0.3s ease; } .faq-question:hover { background: #e9ecef; } .faq-question h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: #333; } .faq-toggle { font-size: 1.5rem; font-weight: bold; color: #666; transition: transform 0.3s ease; } .faq-item.active .faq-toggle { transform: rotate(45deg); } .faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: all 0.3s ease; background: #fff; } .faq-item.active .faq-answer { padding: 20px; max-height: 500px; } .faq-answer p { margin: 0; line-height: 1.6; color: #666; } /* Contact Section */ .contact-section { background-color: #f0f0f2; padding: 80px 0; } .contact-section h2 { font-size: 2.5rem; text-align: center; margin-bottom: 40px; color: #333; } .contact-grid { display: flex; justify-content: center; gap: 20px; max-width: 1000px; margin: 0 auto; padding: 0 20px; } .contact-box { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 40px; width: 400px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-box:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .contact-icon { font-size: 2rem; color: #4a90e2; margin-bottom: 20px; } .contact-box h5 { margin-bottom: 20px; font-size: 1.2rem; font-weight: 600; color: #333; } .contact-box p { margin-bottom: 30px; line-height: 1.6; color: #666; text-align: center; } .phone-number { font-size: 2.5rem !important; font-weight: bold; color: #333 !important; margin-bottom: 10px !important; text-align: center; } .btn-blue { background-color: #4a90e2; color: #fff !important; padding: 12px 30px; border-radius: 4px; font-weight: bold; text-decoration: none; transition: all 0.3s ease; display: inline-block; border: 2px solid #4a90e2; } .btn-blue:hover { background-color: #357abd; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: 2px solid #357abd; } /* Breadcrumb Navigation */ .product-detail-breadcrumb { text-align: left; padding: 0 0 10px 20px; margin-top: -30px; font-size: 0.9rem; color: #666; } .product-detail-breadcrumb a { color: #4a90e2; text-decoration: none; } .product-detail-breadcrumb a:hover { text-decoration: underline; } .product-detail-breadcrumb span { color: #333; font-weight: 500; } .filter-group label { font-weight: 600; color: #333; font-size: 1rem; } .filter-select { padding: 10px 15px; border: 2px solid #ddd; border-radius: 5px; background: #fff; font-size: 1rem; color: #333; cursor: pointer; transition: border-color 0.3s ease; } .filter-select:hover, .filter-select:focus { border-color: #4a90e2; outline: none; } /* Products Grid */ .products-grid-section { padding: 60px 0; background: #ffffff; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 30px; } /* Product Card */ .product-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .product-image { position: relative; width: 100%; height: 220px; overflow: hidden; background: white; display: flex; align-items: center; justify-content: center; } .product-image img { width: 100%; height: 100%; object-fit: cover; filter: none; border-radius: 4px; } .product-badge { position: absolute; top: 15px; right: 15px; background: #ff4757; color: #fff !important; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .product-info { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; } .product-info h3 { font-size: 1.4rem; font-weight: 700; color: #333; margin-bottom: 12px; line-height: 1.3; } .product-desc { color: #666; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; } .product-specs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; } .spec { background: #f1f3f4; color: #555; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; font-weight: 500; } .product-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 8px; } .price { font-size: 1.8rem; font-weight: 700; color: #2c3e50; } .tax { font-size: 0.9rem; color: #666; } .quantity { font-size: 0.9rem; color: #888; margin-left: auto; } .product-features { margin-bottom: 25px; } .feature { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; color: #444; } .product-btn { width: 100%; padding: 12px 20px; font-size: 1rem; font-weight: 600; margin-top: auto; } /* Contact Section */ .contact-section { padding: 80px 0; background-color: #f5f5f5; text-align: center; position: relative; overflow: hidden; } .contact-section h2 { font-size: 2.2rem; font-weight: 700; margin-bottom: 40px; text-align: center; color: #333; } /* Ensure proper spacing between contact boxes */ .contact-section .contact-grid { gap: 100px !important; display: flex !important; justify-content: center !important; flex-wrap: wrap !important; } /* Override for tablet screens */ @media (min-width: 769px) and (max-width: 1024px) { .contact-section .contact-grid { gap: 60px !important; } } /* Override for mobile screens */ @media (max-width: 500px) { .contact-section .contact-grid { gap: 40px !important; flex-direction: column !important; align-items: center !important; } } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; } .contact-box { background: #fff; border-radius: 12px; padding: 40px 30px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .contact-icon { font-size: 2.5rem; margin-bottom: 20px; display: block; } .contact-box h5 { font-size: 1.3rem; font-weight: 600; margin-bottom: 15px; color: #333; } .contact-box p { font-size: 1rem; line-height: 1.6; margin-bottom: 20px; opacity: 0.9; } .phone-number { font-size: 1.5rem; font-weight: 700; color: #4273DB; margin-bottom: 10px; } .contact-box .btn-blue { background: #4273DB; color: #fff !important; padding: 12px 30px; border-radius: 25px; text-decoration: none; font-weight: 600; display: inline-block; transition: all 0.3s ease; border: 2px solid #4273DB; } .contact-box .btn-blue:hover { background: transparent; color: #4273DB !important; border-color: #4273DB; } /* Responsive Design */ @media (max-width: 768px) { .page-title { font-size: 2rem; } .page-subtitle { font-size: 1rem; } .filter-container { flex-direction: column; gap: 20px; } .products-grid { grid-template-columns: 1fr; gap: 20px; } .product-card { margin: 0 10px; } .product-info { padding: 20px; } .product-price { flex-direction: column; align-items: flex-start; gap: 5px; } .quantity { margin-left: 0; } .contact-section h2 { font-size: 1.8rem; } .contact-grid { grid-template-columns: 1fr; gap: 20px; } .contact-box { padding: 30px 20px; } } @media (max-width: 480px) { .page-title-section { padding: 40px 0 30px; } .products-grid-section { padding: 40px 0; } .product-image { height: 180px; } .product-info h3 { font-size: 1.2rem; } .price { font-size: 1.5rem; } .contact-section { padding: 60px 0; } .contact-section h2 { font-size: 1.6rem; } .contact-box { padding: 25px 15px; } .contact-icon { font-size: 2rem; } .contact-box h5 { font-size: 1.1rem; } .phone-number { font-size: 1.3rem; } } /* Product Detail Page Styles */ .product-detail-section { padding: 20px 0 60px 0; background: #ffffff; } .product-detail-header { margin-bottom: 40px; padding-bottom: 20px; text-align: left; max-width: 800px; margin-left: 0; margin-top: 0; } .product-detail-title { font-size: 2.5rem; font-weight: 700; color: #333; margin-top: 10px; margin-bottom: 15px; text-align: left; } .product-detail-header { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #e0e0e0; width: 100%; } .product-detail-breadcrumb { font-size: 0.9rem; color: #666; text-align: left; margin-left: 0; margin-bottom: 15px; padding: 0; margin-top: 0; } .product-detail-breadcrumb a { color: #4a90e2; text-decoration: none; } .product-detail-breadcrumb a:hover { text-decoration: underline; } .product-detail-subtitle { font-size: 1.2rem; color: #666; margin-top: 10px; margin-bottom: 20px; font-weight: 500; } .product-included-section { margin: 40px 0; text-align: center; } .product-included-title { font-size: 2rem; color: #333; font-weight: 700; margin-bottom: 40px; } .product-included-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 1000px; margin: 0 auto; padding: 30px; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .product-included-images img { width: 100%; height: auto; object-fit: contain; border-radius: 8px; } .product-design-info { margin: 0; background: #f5f5f5; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .product-design-content { max-width: 1440px; margin: 0 auto; padding: 40px 20px; line-height: 1.8; } .design-main-layout { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 400px; } .design-text-left { flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: center; height: 100%; } .design-text-left h2 { margin-bottom: 20px; } .design-text-left p { margin-bottom: 15px; line-height: 1.6; } .design-text-left .additional-text { margin-top: 20px; font-style: italic; color: #666; } .design-image-right { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; justify-content: center; } .design-image-right img { display: block; width: 300px; height: auto; max-width: 100%; } .design-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } /* FAQ Section */ .faq-section { background: #fff; padding: 80px 0; } .faq-section h2 { text-align: center; font-size: 2.2rem; font-weight: 700; margin-bottom: 40px; color: #333; } .faq-container { max-width: 800px; margin: 0 auto; } /* FAQ Category */ .faq-category { margin: 40px 0 20px; padding: 15px 25px; background: #f0f4ff; border-left: 4px solid #4273DB; border-radius: 8px; } .faq-category h3 { margin: 0; font-size: 1.3rem; font-weight: bold; color: #333; } .faq-item { background: #fff; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; cursor: pointer; transition: background-color 0.3s ease; } .faq-question:hover { background-color: #f8f9fa; } .faq-question h3 { font-size: 0.9rem !important; font-weight: 600; color: #333; margin: 0; flex: 1; } .faq-toggle { font-size: 1.5rem; font-weight: 700; color: #4273DB; transition: transform 0.3s ease; min-width: 25px; text-align: center; } .faq-item.active .faq-toggle { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer p { padding: 0 25px 20px; color: #666; line-height: 1.6; margin: 0; } .faq-item.active .faq-answer { max-height: 800px; } .design-image-section img { display: block; margin: 0 auto; width: 300px; height: auto; max-width: 100%; } @media (max-width: 768px) { .product-included-images { grid-template-columns: repeat(2, 1fr); gap: 15px; } .product-design-content { padding: 30px 20px; } .design-main-layout { flex-direction: column; gap: 30px; } .design-text-left { text-align: center; align-self: center; padding-top: 0; } .design-image-right { margin-left: 0; text-align: center; margin-top: 50px; } .design-image-right img { margin: 0 auto; } .design-buttons { flex-direction: column; align-items: center; gap: 15px; } /* FAQ Section Mobile */ .faq-section { padding: 60px 0; } .faq-section h2 { font-size: 1.8rem; } .faq-question { padding: 15px 20px; } .faq-question h3 { font-size: 0.8rem !important; } .faq-answer p { padding: 0 20px 15px; } } /* Terms of Service Page Styles */ .terms-main { padding: 40px 0; background: #f8f9fa; } .terms-content { max-width: 1480px; margin: 0 auto; background: white; padding: 60px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .terms-section { margin-bottom: 50px; } .terms-section h2 { font-size: 1.5rem; color: #333; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #4a90e2; font-weight: 600; } .terms-text p { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 20px; } .terms-list { margin: 20px 0; padding-left: 30px; } .terms-list li { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 10px; } .terms-effective { text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid #e0e0e0; } .effective-date { font-size: 0.9rem; color: #666; } .effective-date p { margin: 5px 0; } /* Responsive Design for Terms Page */ @media (max-width: 768px) { .terms-main { padding: 25px 0; } .terms-content { padding: 30px 20px; margin: 0 15px; border-radius: 8px; } .terms-section { margin-bottom: 30px; } .terms-section h2 { font-size: 1.2rem; margin-bottom: 15px; } .terms-text p, .terms-list li { font-size: 0.9rem; line-height: 1.7; } .terms-list { padding-left: 20px; } .terms-effective { margin-top: 35px; padding-top: 25px; } } @media (max-width: 480px) { .terms-main { padding: 15px 0; } .terms-content { padding: 20px 15px; margin: 0 10px; } .terms-section { margin-bottom: 22px; } .terms-section h2 { font-size: 1.05rem; margin-bottom: 12px; padding-bottom: 8px; } .terms-text p, .terms-list li { font-size: 0.85rem; line-height: 1.65; margin-bottom: 12px; } .terms-list { padding-left: 18px; margin: 12px 0; } .terms-effective { margin-top: 25px; padding-top: 18px; } } /* Privacy Policy Page Styles */ .privacy-main { padding: 40px 0; background: #f8f9fa; } .privacy-content { max-width: 1480px; margin: 0 auto; background: white; padding: 60px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .privacy-section { margin-bottom: 50px; } .privacy-section h2 { font-size: 1.5rem; color: #333; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 2px solid #4a90e2; font-weight: 600; } .privacy-text p { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 20px; } .privacy-list { margin: 20px 0; padding-left: 30px; } .privacy-list li { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 10px; } .contact-info { background: #f8f9fa; padding: 25px; border-radius: 8px; margin-top: 20px; border-left: 4px solid #4a90e2; } .contact-info p { margin: 8px 0; line-height: 1.6; } .contact-info strong { color: #333; display: block; margin-bottom: 10px; } .privacy-effective { text-align: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid #e0e0e0; } /* Responsive Design for Privacy Policy Page */ @media (max-width: 768px) { .privacy-main { padding: 25px 0; } .privacy-content { padding: 30px 20px; margin: 0 15px; border-radius: 8px; } .privacy-section { margin-bottom: 30px; } .privacy-section h2 { font-size: 1.2rem; margin-bottom: 15px; } .privacy-text p, .privacy-list li { font-size: 0.9rem; line-height: 1.7; } .privacy-list { padding-left: 20px; } .contact-info { padding: 18px; } .privacy-effective { margin-top: 35px; padding-top: 25px; } } @media (max-width: 480px) { .privacy-main { padding: 15px 0; } .privacy-content { padding: 20px 15px; margin: 0 10px; } .privacy-section { margin-bottom: 22px; } .privacy-section h2 { font-size: 1.05rem; margin-bottom: 12px; padding-bottom: 8px; } .privacy-text p, .privacy-list li { font-size: 0.85rem; line-height: 1.65; margin-bottom: 12px; } .privacy-list { padding-left: 18px; margin: 12px 0; } .contact-info { padding: 14px; font-size: 0.85rem; } .privacy-effective { margin-top: 25px; padding-top: 18px; } } @media (max-width: 480px) { .product-included-images { grid-template-columns: 1fr; gap: 10px; } } /* Specific Commercial Transactions Page Styles */ .commercial-transactions-main { padding: 40px 0; background: #f8f9fa; } .commercial-transactions-content { max-width: 1480px; margin: 0 auto; background: white; padding: 60px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 50px; } .info-item { background: #f8f9fa; padding: 25px; border-radius: 8px; border-left: 4px solid #4a90e2; } .info-item.full-width { grid-column: 1 / -1; } .info-item h3 { font-size: 1.2rem; color: #333; margin-bottom: 15px; font-weight: 600; } .info-item p { font-size: 1rem; line-height: 1.7; color: #555; margin-bottom: 10px; } .info-item .note { font-size: 0.9rem; color: #777; font-style: italic; } .info-item ul { margin: 15px 0; padding-left: 20px; } .info-item ul li { font-size: 1rem; line-height: 1.7; color: #555; margin-bottom: 8px; } .contact-info { background: #e8f4fd; padding: 20px; border-radius: 8px; margin-top: 15px; } .contact-info p { margin: 8px 0; line-height: 1.6; } .legal-notice { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 25px; margin: 40px 0; } .legal-notice h3 { color: #856404; margin-bottom: 15px; font-size: 1.1rem; } .notice-content p { color: #856404; font-size: 0.95rem; line-height: 1.6; margin-bottom: 10px; } .last-updated { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e0e0e0; } .last-updated p { color: #777; font-size: 0.9rem; } /* Responsive Design for Commercial Transactions Page */ @media (max-width: 768px) { .commercial-transactions-main { padding: 25px 0; } .commercial-transactions-content { padding: 30px 20px; margin: 0 15px; border-radius: 8px; } .info-grid { grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; } .info-item { padding: 18px; } .info-item h3 { font-size: 1.05rem; margin-bottom: 10px; } .info-item p, .info-item ul li { font-size: 0.9rem; line-height: 1.65; } .legal-notice { padding: 18px; margin: 25px 0; } .last-updated { margin-top: 25px; padding-top: 15px; } } @media (max-width: 480px) { .commercial-transactions-main { padding: 15px 0; } .commercial-transactions-content { padding: 18px 12px; margin: 0 10px; } .info-grid { gap: 12px; margin-bottom: 20px; } .info-item { padding: 14px; } .info-item h3 { font-size: 0.95rem; } .info-item p, .info-item ul li { font-size: 0.85rem; line-height: 1.6; margin-bottom: 8px; } .info-item ul { padding-left: 16px; } .legal-notice { padding: 14px; margin: 18px 0; } .notice-content p { font-size: 0.85rem; } .last-updated { margin-top: 18px; } } /* Data Submission Guidelines Page Styles */ .submission-main { padding: 40px 0; } .page-header { text-align: center; margin-bottom: 60px; padding: 40px 0; background: linear-gradient(135deg, #f5f7fa, #e4eaf5); border-radius: 12px; } .page-header h1 { font-size: 2.5rem; color: #333; margin-bottom: 15px; } .page-subtitle { color: #666; max-width: 800px; margin: 0 auto; line-height: 1.6; font-size: 1.1rem; } /* Quick Start Section */ .quick-start { margin-bottom: 80px; } .quick-start h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .quick-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 80px; } .quick-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .quick-card:hover { transform: translateY(-5px); } .quick-card h3 { font-size: 1.3rem; color: #333; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .quick-card ul { list-style: none; padding: 0; } .quick-card li { padding: 8px 0; border-bottom: 1px solid #eee; color: #555; } .quick-card li:last-child { border-bottom: none; } /* Guides Section */ .guides-section { margin-bottom: 80px; } .guides-section h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .guide-card { background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); margin-bottom: 40px; overflow: hidden; } .guide-header { background: linear-gradient(135deg, #4a90e2, #357abd); color: white; padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; } .guide-header h3 { font-size: 1.5rem; margin: 0; } .guide-difficulty { background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; } .guide-steps { padding: 30px; } .step { display: flex; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; } .step:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .step-number { background: #4a90e2; color: white !important; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; margin-right: 20px; flex-shrink: 0; } .step-content h4 { font-size: 1.2rem; color: #333; margin-bottom: 10px; } .step-content p { color: #666; line-height: 1.6; margin: 0; } /* Technical Specifications */ .specs-section { margin-bottom: 80px; } .specs-section h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .spec-card { background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .spec-card h3 { font-size: 1.3rem; color: #333; margin-bottom: 20px; text-align: center; } .spec-table { width: 100%; border-collapse: collapse; } .spec-table th, .spec-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; } .spec-table th { background: #f8f9fa; font-weight: 600; color: #333; width: 40%; } .spec-table td { color: #555; } /* Notes Section */ .notes-section { margin-bottom: 80px; } .notes-section h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; } .note-card { padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .note-card.warning { background: linear-gradient(135deg, #fff5f5, #ffecec); border-left: 5px solid #e74c3c; } .note-card.success { background: linear-gradient(135deg, #f0fff4, #e6ffed); border-left: 5px solid #27ae60; } .note-card h3 { font-size: 1.3rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .note-card ul { list-style: none; padding: 0; } .note-card li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.1); color: #555; } .note-card li:last-child { border-bottom: none; } /* Templates Section */ .templates-section { margin-bottom: 80px; } .templates-section h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .templates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .template-card { background: white; padding: 40px 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; } .template-card:hover { transform: translateY(-5px); } .template-icon { font-size: 3rem; margin-bottom: 20px; display: block; } .template-card h3 { font-size: 1.3rem; color: #333; margin-bottom: 15px; } .template-card p { color: #666; margin-bottom: 25px; line-height: 1.5; } .btn-download { background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border: none; padding: 12px 30px; border-radius: 25px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-download:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3); } /* FAQ Section */ .faq-section { margin-bottom: 80px; } .faq-section h2 { font-size: 2rem; color: #333; margin-bottom: 40px; text-align: center; } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { background: white; border-radius: 8px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.15); } .faq-question { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; cursor: pointer; transition: background-color 0.3s ease; } .faq-question:hover { background-color: #f8f9fa; } .faq-question h3 { font-size: 1.1rem !important; font-weight: 600; color: #333; margin: 0; flex: 1; } .faq-toggle { font-size: 1.5rem; font-weight: 700; color: #4a90e2; transition: transform 0.3s ease; min-width: 25px; text-align: center; } .faq-item.active .faq-toggle { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer p { padding: 0 25px 20px; color: #666; line-height: 1.6; margin: 0; } .faq-item.active .faq-answer { max-height: 800px; } /* Support Section */ .support-section { margin-bottom: 80px; } .support-section h2 { font-size: 2rem; color: #333; margin-bottom: 30px; text-align: center; } .support-content { text-align: center; max-width: 800px; margin: 0 auto; } .support-content > p { font-size: 1.1rem; color: #666; margin-bottom: 40px; line-height: 1.6; } .support-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px; } .support-option { background: white; padding: 30px 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .support-option:hover { transform: translateY(-5px); } .support-option h3 { font-size: 1.2rem; color: #333; margin-bottom: 15px; } .support-option p { color: #666; line-height: 1.5; margin: 0; } .cta-support { text-align: center; } .cta-support .btn-primary { background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border: none; padding: 15px 40px; border-radius: 25px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .cta-support .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3); } /* Responsive Design for Submission Guide */ @media (max-width: 768px) { .page-header h1 { font-size: 2rem; } .page-subtitle { font-size: 1rem; } .quick-start-grid, .specs-grid, .notes-grid, .templates-grid, .support-options { grid-template-columns: 1fr; } .guide-header { flex-direction: column; gap: 15px; text-align: center; } .step { flex-direction: column; text-align: center; } .step-number { margin: 0 auto 20px; } .faq-question { padding: 15px 20px; } .faq-question h3 { font-size: 1rem !important; } .faq-answer p { padding: 0 20px 15px; } .faq-content-section { padding-top: 20px; } .form-section-title { font-size: 1.2rem; } .quick-card, .spec-card, .note-card, .template-card, .support-option { padding: 25px 20px; } } @media (max-width: 480px) { .page-header { padding: 30px 20px; } .page-header h1 { font-size: 1.8rem; } .quick-start h2, .guides-section h2, .specs-section h2, .notes-section h2, .templates-section h2, .faq-section h2, .support-section h2 { font-size: 1.6rem; } .guide-header h3 { font-size: 1.2rem; } .step-content h4 { font-size: 1.1rem; } .spec-table th, .spec-table td { padding: 10px 12px; font-size: 0.9rem; } .faq-question { padding: 12px 15px; } .faq-question h3 { font-size: 0.9rem !important; } .faq-answer p { padding: 0 15px 12px; font-size: 0.9rem; } .form-section-title { font-size: 1.1rem; } } /* Company Information Page Styles */ .company-main { padding: 60px 0; background-color: #ffffff; } .page-header { text-align: center; margin-bottom: 60px; } .page-header h1 { font-size: 2rem; font-weight: 600; color: #333; margin-bottom: 15px; } .page-subtitle { font-size: 1rem; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.6; } .company-section { margin-bottom: 80px; } .company-section h2 { font-size: 1.56rem; font-weight: 600; color: #333; margin-bottom: 40px; text-align: center; position: relative; } .company-section h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: #4a90e2; } /* Company Info Grid */ .company-info-grid { max-width: 800px; margin: 0 auto; background: #f8f9fa; border-radius: 10px; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .info-row { display: flex; padding: 20px 0; border-bottom: 1px solid #e9ecef; } .info-row:last-child { border-bottom: none; } .info-label { flex: 0 0 200px; font-weight: 600; color: #4a90e2; font-size: 1rem; } .info-value { flex: 1; color: #333; font-size: 1rem; line-height: 1.6; } /* Philosophy Section */ .philosophy-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1480px; margin: 0 auto; } .philosophy-item { text-align: center; padding: 40px 30px; background: #ffffff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); transition: transform 0.3s ease; } .philosophy-item:hover { transform: translateY(-5px); } .philosophy-item h3 { font-size: 1.3rem; font-weight: 600; color: #4a90e2; margin-bottom: 20px; } .philosophy-item p { color: #666; line-height: 1.7; } /* History Timeline */ .history-timeline { max-width: 800px; margin: 0 auto; position: relative; } .history-timeline::before { content: ''; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background-color: #4a90e2; } .history-item { display: flex; margin-bottom: 40px; position: relative; } .history-year { flex: 0 0 120px; font-weight: 700; color: #4a90e2; font-size: 1.1rem; background: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-right: 30px; position: relative; } .history-year::before { content: ''; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 10px solid white; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } .history-content { flex: 1; background: #f8f9fa; padding: 20px 25px; border-radius: 10px; border-left: 4px solid #4a90e2; color: #333; line-height: 1.6; } /* Access Map */ .access-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; } .access-info h3 { color: #4a90e2; font-size: 1.2rem; margin-bottom: 15px; font-weight: 600; } .access-info p { color: #333; line-height: 1.7; margin-bottom: 25px; } .map-placeholder { background: #f8f9fa; border-radius: 10px; padding: 40px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 300px; border: 2px dashed #ddd; } .map-content p { font-size: 1.1rem; color: #666; margin-bottom: 10px; } .map-content small { color: #999; } /* Quality Policy */ .quality-content { max-width: 800px; margin: 0 auto; } .quality-item { background: #ffffff; padding: 30px; margin-bottom: 25px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid #4a90e2; } .quality-item h3 { color: #4a90e2; font-size: 1.2rem; margin-bottom: 15px; font-weight: 600; } .quality-item p { color: #666; line-height: 1.7; } /* Contact Lead */ .contact-lead { text-align: center; font-size: 1.1rem; color: #666; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; } /* Responsive Design */ @media (max-width: 768px) { .company-main { padding: 30px 0; } .page-header { margin-bottom: 35px; } .page-header h1 { font-size: 1.55rem; } .page-subtitle { font-size: 0.9rem; } .company-section { margin-bottom: 50px; } .company-section h2 { font-size: 1.28rem; margin-bottom: 25px; } .company-info-grid { padding: 20px; } .info-row { flex-direction: column; padding: 15px 0; } .info-label { flex: none; margin-bottom: 8px; font-size: 0.9rem; } .info-value { font-size: 0.9rem; } .philosophy-content { grid-template-columns: 1fr; gap: 20px; } .philosophy-item { padding: 25px 20px; } .history-timeline::before { left: 15px; } .history-item { flex-direction: column; margin-bottom: 25px; } .history-year { flex: none; margin-right: 0; margin-bottom: 12px; align-self: flex-start; } .history-year::before { display: none; } .access-content { grid-template-columns: 1fr; gap: 20px; } .map-placeholder { min-height: 200px; } .contact-lead { font-size: 1rem; } .quality-item { padding: 20px; } } @media (max-width: 480px) { .company-main { padding: 20px 0; } .page-header { margin-bottom: 25px; } .page-header h1 { font-size: 1.34rem; } .page-subtitle { font-size: 0.86rem; } .company-section { margin-bottom: 35px; } .company-section h2 { font-size: 1.12rem; } .company-info-grid { padding: 15px; } .philosophy-item { padding: 20px 15px; } .philosophy-item h3 { font-size: 1.1rem; } .history-year { font-size: 0.95rem; padding: 7px 12px; } .history-content { padding: 12px 15px; font-size: 0.9rem; } .quality-item { padding: 15px; } .access-info h3 { font-size: 1rem; } .access-info p { font-size: 0.9rem; margin-bottom: 15px; } } .product-detail-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; justify-content: center; } .product-detail-image { background: #fff; border-radius: 12px; padding: 60px 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 800px; margin: 0 auto; } .product-detail-image img { width: 100%; height: auto; object-fit: contain; margin-bottom: 20px; max-width: 700px; } .product-image-thumbnails { display: flex; gap: 10px; justify-content: center; } .thumbnail { width: 80px; height: 80px; object-fit: contain; border: 2px solid #ddd; border-radius: 8px; cursor: pointer; transition: border-color 0.3s ease; } .thumbnail:hover, .thumbnail.active { border-color: #4a90e2; } .product-detail-info { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: fit-content; } .product-detail-info .product-price { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #e0e0e0; } .product-detail-info .product-features { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #e0e0e0; } .product-detail-info .product-features .feature { margin-bottom: 15px; font-size: 1.2rem; color: #333; font-weight: 600; } .product-actions { display: flex; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #e0e0e0; } .product-actions .product-btn { flex: 1; } .product-specs { margin-bottom: 30px; } .product-specs h3 { font-size: 1.5rem; font-weight: 700; color: #333; margin-bottom: 20px; } .product-specs table { width: 100%; border-collapse: collapse; } .product-specs th { width: 30%; text-align: left; padding: 12px; background: #f8f9fa; font-weight: 600; color: #333; border-bottom: 1px solid #e0e0e0; } .product-specs td { padding: 12px; border-bottom: 1px solid #e0e0e0; color: #666; } .product-description { margin-bottom: 60px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; } .product-description h2 { font-size: 2rem; font-weight: 700; color: #333; margin-bottom: 20px; text-align: center; } .product-description p { font-size: 1.1rem; color: #666; line-height: 1.8; margin-bottom: 20px; } .product-overview-card { background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); color: #333; padding: 30px; border-radius: 16px; margin-bottom: 30px; box-shadow: 0 8px 24px rgba(187, 222, 251, 0.4); } .product-overview-card h3 { color: #1976d2; font-size: 1.5rem; margin-bottom: 15px; font-weight: 600; } .product-overview-card p { color: #424242; margin-bottom: 12px; line-height: 1.8; } .product-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; margin-top: 30px; } .feature-item { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #e8e8e8; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-item:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .feature-icon { font-size: 3rem; margin-bottom: 20px; text-align: center; } .feature-item h4 { font-size: 1.3rem; font-weight: 600; color: #333; margin-bottom: 20px; text-align: center; } .feature-item ul { list-style: none; padding: 0; margin: 0; } .feature-item li { padding: 10px 0; padding-left: 25px; position: relative; color: #555; font-size: 1rem; line-height: 1.6; } .feature-item li:before { content: "✓"; position: absolute; left: 0; color: #667eea; font-weight: bold; font-size: 1.2rem; } .spec-table { display: flex; flex-direction: column; gap: 15px; } .spec-row { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea; transition: background-color 0.3s ease; } .spec-row:hover { background: #e9ecef; } .spec-label { font-weight: 600; color: #333; font-size: 1rem; } .spec-value { color: #555; font-size: 1rem; text-align: right; } .product-options { margin-bottom: 60px; } .product-options h2 { font-size: 2rem; font-weight: 700; color: #333; margin-bottom: 30px; text-align: center; } .options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .option-card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 2px solid #e0e0e0; transition: border-color 0.3s ease; } .option-card:hover { border-color: #4a90e2; } .option-card h3 { font-size: 1.3rem; font-weight: 700; color: #333; margin-bottom: 15px; } .option-card p { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 15px; } .option-price { display: block; font-size: 1.1rem; font-weight: 600; color: #4a90e2; margin-bottom: 20px; } .checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1rem; color: #333; } .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; } .related-products { margin-bottom: 60px; } .related-products h2 { font-size: 2rem; font-weight: 700; color: #333; margin-bottom: 30px; text-align: center; } /* Responsive Design for Product Detail Page */ @media (max-width: 768px) { .product-detail-grid { grid-template-columns: 1fr; gap: 20px; } .product-detail-title { font-size: 2rem; } .product-actions { flex-direction: column; } .options-grid { grid-template-columns: 1fr; } .product-specs table { display: block; overflow-x: auto; } .product-specs th { width: 150px; } .product-detail-image { padding: 20px; } .product-detail-info { padding: 20px; } .product-detail-image img { max-width: 300px; } .thumbnail { width: 60px; height: 60px; } } /* Order Guide Page Styles */ .order-guide-hero { background-color: #FAFAF8; color: #333; padding: 80px 0; text-align: center; } .order-guide-hero h1 { font-size: 3rem; margin-bottom: 20px; font-weight: 700; color: #333; } .order-guide-hero p { font-size: 1.2rem; opacity: 0.9; max-width: 600px; margin: 0 auto; color: #666; } .order-process-section { padding: 80px 0; background: #f8f9fa; } .order-process-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } .process-steps-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; max-width: 1440px; margin: 40px auto 0; padding: 0 20px; } .process-step-modern { background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); border: 1px solid #eaeaea; overflow: hidden; transition: all 0.3s ease; } .process-step-modern:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); border-color: #4273DB; } /* Step Header */ .process-step-header { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); color: #333; padding: 30px; display: flex; align-items: center; gap: 20px; } .step-number-modern { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(66, 115, 219, 0.1); border-radius: 12px; padding: 15px; min-width: 80px; text-align: center; } .step-icon { font-size: 2rem; margin-bottom: 8px; color: #4273DB; } .step-number-text { font-size: 1.5rem; font-weight: bold; color: #4273DB; } .process-step-header h3 { margin: 0; font-size: 1.4rem; font-weight: bold; color: #333; text-align: left; } /* Step Content */ .process-step-content { padding: 30px; } .process-step-content p { color: #666; line-height: 1.7; margin-bottom: 25px; font-size: 0.95rem; } /* Process Features */ .process-features { display: flex; flex-direction: column; gap: 15px; } .feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 10px; transition: all 0.3s ease; } .feature-item:hover { background: #e8f2ff; transform: translateX(5px); } .feature-icon { font-size: 1.2rem; color: #4273DB; flex-shrink: 0; margin-top: 2px; } .feature-text { color: #555; font-size: 0.95rem; line-height: 1.6; } /* Process Note */ .process-note { display: flex; align-items: flex-start; gap: 12px; padding: 15px 20px; background: #fff8f8; border-left: 4px solid #e74c3c; border-radius: 8px; margin-top: 20px; } .note-icon { font-size: 1.2rem; color: #e74c3c; flex-shrink: 0; margin-top: 2px; } .note-text { color: #e74c3c; font-size: 0.9rem; line-height: 1.6; font-weight: 500; } /* Responsive Design */ @media (max-width: 768px) { .process-steps-modern { grid-template-columns: 1fr; gap: 25px; } .process-step-header { flex-direction: column; text-align: center; gap: 15px; } .process-step-header h3 { text-align: center; } .step-number-modern { min-width: 70px; padding: 12px; } .step-icon { font-size: 1.8rem; } .step-number-text { font-size: 1.3rem; } } .pricing-info-section { padding: 80px 0; background: white; } .pricing-info-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } .pricing-note { background: #e8f2ff; padding: 40px; border-radius: 10px; margin-bottom: 60px; text-align: center; } .pricing-note h3 { color: #4273DB; font-size: 1.8rem; margin-bottom: 15px; } .pricing-factors h3 { font-size: 2rem; margin-bottom: 40px; text-align: center; color: #333; } .factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; } .factor-item { background: #f8f9fa; padding: 30px; border-radius: 10px; text-align: center; } .factor-item h4 { color: #4273DB; font-size: 1.3rem; margin-bottom: 15px; } .payment-methods-section { padding: 80px 0; background: #f8f9fa; } .payment-methods-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } .payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1440px; margin: 0 auto 40px; } .payment-method { background: white; padding: 35px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); text-align: center; transition: all 0.3s ease; border: 1px solid #eaeaea; } .payment-method:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-color: #4273DB; } .payment-icon { font-size: 2.5rem; margin-bottom: 20px; color: #4273DB; } .payment-method h3 { color: #333; font-size: 1.4rem; margin-bottom: 20px; font-weight: bold; } .payment-description { color: #666; line-height: 1.7; margin-bottom: 25px; font-size: 0.95rem; } .payment-features { list-style-type: none; padding: 0; margin: 0; text-align: left; } .payment-features li { padding: 8px 0; color: #555; position: relative; padding-left: 20px; line-height: 1.5; } .payment-features li:before { content: "✓"; color: #4273DB; font-weight: bold; position: absolute; left: 0; } .bank-info { background-color: #f8f9fa; border-radius: 8px; padding: 20px; margin: 20px 0; text-align: left; border: 1px solid #e0e0e0; } .bank-info p { margin: 8px 0; color: #444; line-height: 1.6; } .bank-info strong { color: #333; font-weight: bold; } .payment-notes { background-color: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid #eaeaea; max-width: 1440px; margin: 0 auto; } .payment-notes h3 { margin-bottom: 20px; color: #333; font-size: 1.3rem; font-weight: bold; } .payment-notes ul { list-style-type: none; padding: 0; margin: 0 0 20px 0; } .payment-notes li { padding: 10px 0; color: #555; position: relative; padding-left: 25px; line-height: 1.6; } .payment-notes li:before { content: "•"; color: #4273DB; font-weight: bold; position: absolute; left: 0; font-size: 1.2rem; } .payment-notes p { color: #666; line-height: 1.7; font-size: 0.95rem; margin: 0; } .design-support-section { padding: 80px 0; background: white; } .design-support-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 30px; color: #333; } .design-intro { text-align: center; font-size: 1.1rem; color: #666; line-height: 1.8; max-width: 900px; margin: 0 auto 60px; } .design-intro p { margin: 10px 0; } .design-support-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1440px; margin: 0 auto; } .design-card { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid #eaeaea; padding: 30px; transition: all 0.3s ease; display: flex; flex-direction: column; } .design-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-color: #4273DB; } .design-card-header { display: flex; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .design-icon { font-size: 2rem; margin-right: 15px; color: #4273DB; } .design-card-header h3 { margin: 0; color: #333; font-size: 1.4rem; font-weight: bold; } /* Design Support Features */ .design-support-features { list-style: none; padding: 0; margin: 0; } .design-support-features li { position: relative; padding: 12px 0 12px 25px; color: #555; line-height: 1.6; } .design-support-features li:before { content: "✓"; position: absolute; left: 0; top: 12px; color: #4273DB; font-weight: bold; } .design-free { color: #e74c3c; font-weight: bold; font-size: 1.1em; } /* Design Process */ .design-process { display: flex; flex-direction: column; gap: 10px; } .process-step { display: flex; align-items: flex-start; gap: 15px; } .step-number { background: #4273DB; color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; flex-shrink: 0; } .step-content { flex: 1; } .step-content h5 { margin: 0 0 5px; color: #333; font-size: 1.1rem; font-weight: bold; } .step-content p { margin: 0; color: #666; font-size: 0.95rem; line-height: 1.6; } /* Design Info Note */ .design-info-note { color: #555; font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #4273DB; } /* Design Notes */ .design-notes-card { background: #fff8f8; border-color: #ffe8e8; } .design-notes-card .design-card-header { border-bottom-color: #ffe8e8; } .design-notes-card .design-icon { color: #e74c3c; } .design-notes { list-style: none; padding: 0; margin: 0; } .design-notes li { position: relative; padding: 12px 0 12px 30px; color: #666; line-height: 1.6; font-size: 0.95rem; } .design-notes li:before { content: "⚠️"; position: absolute; left: 0; top: 12px; font-size: 0.9rem; } .process-arrow { text-align: center; color: #4273DB; font-size: 1.2rem; margin: 5px 0; } .design-requirements { display: flex; flex-direction: column; gap: 25px; } .requirement-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0; transition: all 0.3s ease; } .requirement-item:hover { background: #eef4fd; border-color: #4273DB; } .requirement-icon { font-size: 1.5rem; color: #4273DB; flex-shrink: 0; margin-top: 2px; } .requirement-content h4, .requirement-content h5 { margin: 0 0 5px; color: #333; font-size: 1.1rem; font-weight: bold; } .requirement-content p { margin: 0; color: #666; font-size: 0.9rem; line-height: 1.5; } .delivery-info-section { padding: 80px 0; background: white; } .delivery-info-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } .delivery-content { max-width: 1000px; margin: 0 auto; } .delivery-time h3, .delivery-area h3, .delivery-method h3 { font-size: 1.8rem; margin-bottom: 30px; color: #333; } .timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 60px; } .timeline-item { background: #f8f9fa; padding: 30px; border-radius: 10px; text-align: center; border-left: 9px solid #4273DB; } .timeline-item h4 { color: #4273DB; font-size: 1.3rem; margin-bottom: 15px; } .delivery-area, .delivery-method { margin-bottom: 40px; } .requirements-section { padding: 80px 0; background: #f8f9fa; } .requirements-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } /* Modern Requirements Grid */ .requirements-grid-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1440px; margin: 0 auto; padding: 0 20px; } .requirement-card-modern { background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); border: 1px solid #eaeaea; overflow: hidden; transition: all 0.3s ease; } .requirement-card-modern:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); border-color: #4273DB; } /* Card Header */ .requirement-card-header { background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%); color: #333; padding: 30px; display: flex; align-items: center; gap: 20px; } .requirement-icon { font-size: 2rem; color: #4273DB; flex-shrink: 0; } .requirement-card-header h3 { margin: 0; font-size: 1.4rem; font-weight: bold; color: #333; } /* Card Content */ .requirement-card-content { padding: 30px; } /* Requirement Note */ .requirement-note { color: #666; line-height: 1.7; margin-bottom: 25px; font-size: 0.95rem; padding: 15px 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #4273DB; } /* Requirements Features */ .requirement-features { display: flex; flex-direction: column; gap: 15px; } .feature-item-modern { display: flex; align-items: flex-start; gap: 12px; padding: 15px; background: #f8f9fa; border-radius: 10px; transition: all 0.3s ease; } .feature-item-modern:hover { background: #e8f2ff; transform: translateX(5px); } .feature-icon-modern { font-size: 1.2rem; color: #4273DB; flex-shrink: 0; margin-top: 2px; } .feature-text { color: #555; font-size: 0.95rem; line-height: 1.6; } /* Responsive Design */ @media (max-width: 768px) { .requirements-grid-modern { grid-template-columns: 1fr; gap: 25px; } .requirement-card-header { flex-direction: column; text-align: center; gap: 15px; } .requirement-card-header h3 { text-align: center; } } .contact-section { padding: 80px 0; background: white; } .contact-section h2 { text-align: center; font-size: 2.5rem; margin-bottom: 60px; color: #333; } .contact-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 60px; max-width: 1440px; margin: 0 auto; } /* Usage detail pages: align older "用途から選ぶ" detail pages with the PVC detail style. */ body.usage-detail-page > .product-detail-section:first-of-type { background: radial-gradient(circle at 82% 120px, rgba(86, 142, 255, 0.18), transparent 34%), radial-gradient(circle at 8% 260px, rgba(196, 222, 255, 0.42), transparent 30%), linear-gradient(180deg, #f7fbff 0, #edf5ff 360px, #f9fbff 720px, #ffffff 1000px) !important; padding: 58px 0 84px !important; overflow: hidden; } body.usage-detail-page > .product-detail-section:first-of-type > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr); align-items: center; gap: 48px; max-width: 1480px; padding-left: 24px; padding-right: 24px; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-header { max-width: 720px !important; margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } body.usage-detail-page .product-detail-breadcrumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px !important; color: #667085; font-size: 0.92rem; font-weight: 600; } body.usage-detail-page .product-detail-breadcrumb a { color: #315fd9 !important; text-decoration: none !important; } body.usage-detail-page .product-detail-title { color: #101828 !important; font-size: clamp(2.35rem, 4.6vw, 4.8rem) !important; line-height: 1.04 !important; letter-spacing: 0 !important; margin: 0 0 22px !important; text-align: left !important; } body.usage-detail-page .product-detail-subtitle { color: #344054 !important; font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important; line-height: 1.8 !important; font-weight: 600 !important; max-width: 700px; margin: 0 !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid { margin: 0 !important; display: block !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid .product-detail-image { width: min(100%, 560px); min-height: 360px; margin: 0 auto !important; padding: 44px !important; border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.9)), radial-gradient(circle at 50% 0, rgba(76, 120, 242, 0.12), transparent 58%) !important; box-shadow: 0 24px 60px rgba(52, 76, 129, 0.12) !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid .product-detail-image img { width: min(100%, 460px) !important; max-width: 100% !important; margin: 0 !important; filter: drop-shadow(0 18px 22px rgba(16, 24, 40, 0.18)); } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-section, body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-included-section { grid-column: 1 / -1; padding: 74px 0 0 !important; background: transparent !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-section > .container { max-width: 1480px; padding: 0; } body.usage-detail-page .product-description h2 { color: #101828 !important; font-size: clamp(1.9rem, 3vw, 2.7rem) !important; letter-spacing: 0 !important; margin-bottom: 24px !important; text-align: center !important; } body.usage-detail-page .product-overview-card { max-width: 1060px; margin: 0 auto 32px !important; padding: 30px 34px !important; border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.88) !important; box-shadow: 0 18px 44px rgba(52, 76, 129, 0.1) !important; color: #344054 !important; } body.usage-detail-page .product-overview-card p { color: #344054 !important; font-size: 1.02rem !important; line-height: 1.9 !important; } body.usage-detail-page .product-features-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 18px !important; max-width: 1180px; margin: 32px auto 0 !important; } body.usage-detail-page .product-features-grid .feature-item { border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: 0 16px 36px rgba(52, 76, 129, 0.08) !important; padding: 24px !important; } body.usage-detail-page .product-features-grid .feature-item h4 { color: #101828 !important; font-size: 1.08rem !important; letter-spacing: 0 !important; } body.usage-detail-page .product-features-grid .feature-item li, body.usage-detail-page .product-features-grid .feature-item p { color: #475467 !important; line-height: 1.75 !important; } body.usage-detail-page .product-specs { max-width: 980px; margin-left: auto; margin-right: auto; } body.usage-detail-page .spec-row { border-color: rgba(76, 120, 242, 0.12) !important; } body.usage-detail-page .spec-label { color: #667085 !important; } body.usage-detail-page .spec-value { color: #101828 !important; font-weight: 600 !important; } body.usage-detail-page .product-design-info { background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important; padding: 78px 0 !important; } body.usage-detail-page .product-design-content { max-width: 1480px !important; padding-left: 24px !important; padding-right: 24px !important; } body.usage-detail-page .design-main-layout { align-items: center !important; gap: 44px !important; padding: 34px !important; border: 1px solid rgba(76, 120, 242, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 24px 60px rgba(52, 76, 129, 0.1); } body.usage-detail-page .design-text-left h2 { color: #101828 !important; font-size: clamp(1.8rem, 3vw, 2.6rem) !important; letter-spacing: 0 !important; } body.usage-detail-page .design-text-left p { color: #344054 !important; line-height: 1.85 !important; } body.usage-detail-page .design-image-right img { border-radius: 8px !important; box-shadow: 0 18px 40px rgba(16, 24, 40, 0.14); } body.usage-detail-page .design-buttons { justify-content: flex-start !important; } body.usage-detail-page .standard-services-section { background: #ffffff !important; padding: 84px 0 !important; } body.usage-detail-page .standard-services-section .container { max-width: 1480px !important; padding-left: 24px !important; padding-right: 24px !important; } body.usage-detail-page .standard-services-section .section-title, body.usage-detail-page .steps h2, body.usage-detail-page .card-selection-guide h2, body.usage-detail-page .faq-section h2, body.usage-detail-page .contact-section h2 { color: #101828 !important; font-size: clamp(1.85rem, 3vw, 2.6rem) !important; letter-spacing: 0 !important; } body.usage-detail-page .standard-services-section .section-description { color: #475467 !important; line-height: 1.85 !important; } body.usage-detail-page .standard-services-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; gap: 18px !important; max-width: 1240px !important; padding: 0 !important; } body.usage-detail-page .service-card { border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; box-shadow: 0 16px 36px rgba(52, 76, 129, 0.08) !important; padding: 24px 18px !important; } body.usage-detail-page .service-title { color: #101828 !important; } body.usage-detail-page .steps { background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%) !important; padding: 82px 0 !important; } body.usage-detail-page .steps .container { max-width: 1180px; } body.usage-detail-page .steps-container { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; } body.usage-detail-page .step-card { width: auto !important; height: auto !important; min-height: 170px; padding: 20px 14px !important; border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: 0 16px 36px rgba(52, 76, 129, 0.08) !important; } body.usage-detail-page .step-header { color: #315fd9 !important; font-weight: 700 !important; } body.usage-detail-page .step-icon img { width: 58px !important; height: 58px !important; object-fit: contain; } body.usage-detail-page .step-card p { color: #101828 !important; font-weight: 700 !important; } body.usage-detail-page .step-notes { color: #667085 !important; } body.usage-detail-page .card-selection-guide { background: #ffffff !important; padding: 0 0 80px !important; } body.usage-detail-page .card-selection-guide .container > div[style] { max-width: 980px; margin: 0 auto !important; padding: 34px !important; border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; background: #f7fbff !important; box-shadow: 0 18px 44px rgba(52, 76, 129, 0.08); } body.usage-detail-page .card-selection-guide p { color: #475467 !important; } body.usage-detail-page .faq-section { background: #ffffff !important; padding: 82px 0 !important; margin-bottom: 0 !important; } body.usage-detail-page .faq-container { max-width: 980px !important; } body.usage-detail-page .faq-item { border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; box-shadow: 0 12px 30px rgba(52, 76, 129, 0.06); overflow: hidden; } body.usage-detail-page .faq-question h3 { color: #101828 !important; letter-spacing: 0 !important; } body.usage-detail-page .faq-answer p { color: #475467 !important; } body.usage-detail-page .contact-section { background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%) !important; padding: 82px 0 !important; } body.usage-detail-page .contact-section .container { max-width: 1480px !important; padding-left: 24px !important; padding-right: 24px !important; } body.usage-detail-page .contact-section .contact-box { border: 1px solid rgba(76, 120, 242, 0.12) !important; border-radius: 8px !important; box-shadow: 0 18px 44px rgba(52, 76, 129, 0.1) !important; } @media (max-width: 960px) { body.usage-detail-page > .product-detail-section:first-of-type > .container { grid-template-columns: 1fr; gap: 32px; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-header { max-width: 100% !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid .product-detail-image { min-height: 0; } body.usage-detail-page .steps-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { body.usage-detail-page > .product-detail-section:first-of-type { padding: 34px 0 56px !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container { padding-left: 18px; padding-right: 18px; } body.usage-detail-page .product-detail-title { font-size: clamp(2rem, 11vw, 3rem) !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid .product-detail-image { padding: 28px !important; } body.usage-detail-page .product-overview-card, body.usage-detail-page .design-main-layout, body.usage-detail-page .card-selection-guide .container > div[style] { padding: 24px !important; } body.usage-detail-page .design-main-layout { display: block !important; } body.usage-detail-page .design-buttons { justify-content: stretch !important; } body.usage-detail-page .design-buttons .btn-blue, body.usage-detail-page .design-buttons .btn-outline { width: 100%; } } /* Stronger PVC-detail alignment for "用途から選ぶ" detail pages. */ body.usage-detail-page { background: radial-gradient(circle at 82% 120px, rgba(86, 142, 255, 0.18), transparent 34%), radial-gradient(circle at 8% 260px, rgba(196, 222, 255, 0.42), transparent 30%), linear-gradient(180deg, #f7fbff 0, #edf5ff 360px, #f9fbff 720px, #ffffff 1000px) !important; } body.usage-detail-page > .product-detail-section:first-of-type { position: relative; overflow: hidden; padding: 30px 0 60px !important; background: transparent !important; } body.usage-detail-page > .product-detail-section:first-of-type::before, body.usage-detail-page > .product-detail-section:first-of-type::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; } body.usage-detail-page > .product-detail-section:first-of-type::before { width: 840px; height: 840px; top: -470px; right: -120px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.18)); } body.usage-detail-page > .product-detail-section:first-of-type::after { width: 760px; height: 760px; right: -300px; bottom: -420px; background: linear-gradient(180deg, rgba(76, 120, 242, 0.08), rgba(76, 120, 242, 0)); } body.usage-detail-page > .product-detail-section:first-of-type > .container { position: relative; z-index: 1; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important; gap: 56px !important; align-items: start !important; max-width: 1480px !important; } body.usage-detail-page .product-detail-breadcrumb { margin: 0 0 28px !important; padding: 0 !important; color: #5e7fd7 !important; font-size: 0.92rem !important; font-weight: 400 !important; } body.usage-detail-page .product-detail-breadcrumb a { color: #5e7fd7 !important; } body.usage-detail-page .product-detail-title { margin: 0 0 16px !important; font-size: clamp(3rem, 5vw, 4.8rem) !important; line-height: 1.05 !important; color: #111827 !important; } body.usage-detail-page .product-detail-subtitle { margin: 10px 0 54px !important; color: #1f2937 !important; font-size: 1.72rem !important; line-height: 1.55 !important; font-weight: 700 !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid { display: flex !important; justify-content: flex-end !important; } body.usage-detail-page > .product-detail-section:first-of-type .product-detail-image { width: min(100%, 700px) !important; min-height: 0 !important; padding: 24px !important; border: 0 !important; border-radius: 32px !important; background: rgba(255, 255, 255, 0.48) !important; box-shadow: 0 34px 72px rgba(40, 62, 109, 0.16) !important; } body.usage-detail-page > .product-detail-section:first-of-type .product-detail-image img { width: 100% !important; max-width: none !important; display: block; filter: none !important; } body.usage-detail-page .product-description h2, body.usage-detail-page .standard-services-section .section-title, body.usage-detail-page .steps h2, body.usage-detail-page .faq-section h2, body.usage-detail-page .contact-section h2 { margin: 0 0 42px !important; color: #111827 !important; font-size: clamp(2rem, 3vw, 2.55rem) !important; line-height: 1.2 !important; text-align: center !important; } body.usage-detail-page .standard-services-section .section-title { font-size: 0 !important; } body.usage-detail-page .standard-services-section .section-title::before { content: "対応可能な加工・オプション"; font-size: clamp(1.08rem, 1.35vw, 1.38rem); line-height: 1.35; } body.usage-detail-page .product-overview-card, body.usage-detail-page .feature-item, body.usage-detail-page .product-specs, body.usage-detail-page .service-card, body.usage-detail-page .faq-item, body.usage-detail-page .contact-box { border: 1px solid rgba(76, 120, 242, 0.08) !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 12px 28px rgba(50, 74, 124, 0.08) !important; } body.usage-detail-page .product-overview-card { padding: 30px !important; } body.usage-detail-page .product-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; max-width: 1180px !important; } body.usage-detail-page .feature-item { padding: 26px !important; } body.usage-detail-page .product-design-info { width: auto !important; left: auto !important; right: auto !important; margin: 0 !important; padding: 70px 0 !important; background: transparent !important; } body.usage-detail-page .design-main-layout { position: relative; overflow: hidden; isolation: isolate; display: grid !important; grid-template-columns: minmax(0, 1fr) 240px !important; gap: 32px !important; align-items: center !important; padding: 34px 36px !important; border-radius: 28px !important; border: 1px solid rgba(76, 120, 242, 0.12) !important; background: radial-gradient(circle at 88% 18%, rgba(255, 212, 94, 0.22), transparent 28%), radial-gradient(circle at 10% 12%, rgba(76, 120, 242, 0.14), transparent 30%), linear-gradient(145deg, #ffffff 0%, #f7faff 58%, #fff8e8 100%) !important; box-shadow: 0 24px 60px rgba(52, 76, 129, 0.12) !important; } body.usage-detail-page .design-main-layout::before { content: ""; position: absolute; inset: 14px; z-index: -1; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.78); pointer-events: none; } body.usage-detail-page .design-text-left::before { content: "無料デザインサポート"; display: inline-flex; margin-bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(76, 120, 242, 0.1); color: #315fd9; font-size: 0.86rem; line-height: 1.25; font-weight: 800; } body.usage-detail-page .design-text-left h2 { margin: 0 0 18px !important; color: #111827 !important; font-size: clamp(1.24rem, 1.55vw, 1.48rem) !important; line-height: 1.38 !important; } body.usage-detail-page .design-text-left h2 { font-size: 0 !important; } body.usage-detail-page .design-text-left h2::before { content: "はじめてのカード制作でも安心"; font-size: clamp(0.98rem, 1.15vw, 1.1rem); font-weight: 600; } body.usage-detail-page .design-text-left p { display: none !important; } body.usage-detail-page .design-text-left::after { content: "① デザイン作成無料\Aご希望の内容をもとに、デザイン案を無料で作成いたします。\A\A② ロゴ・文字のみでもOK\Aロゴや文字情報だけでもカードを制作いただけます。\A\A③ ご納得いただいてから制作開始\Aデザインをご確認いただき、ご承認後に制作を開始します。"; display: block; white-space: pre-line; color: #475467; font-size: 0.96rem; line-height: 1.75; } body.usage-detail-page .design-image-right img { width: 100%; max-width: 240px !important; border-radius: 24px !important; box-shadow: 0 18px 40px rgba(50, 74, 124, 0.14) !important; } body.usage-detail-page .design-buttons { margin-top: 0 !important; padding-top: 22px !important; justify-content: center !important; } body.usage-detail-page .standard-services-section { padding: 78px 0 !important; background: #ffffff !important; } body.usage-detail-page .standard-services-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; max-width: 1280px !important; } body.usage-detail-page .service-card { min-height: 132px !important; padding: 16px 12px !important; border-radius: 18px !important; } body.usage-detail-page .service-icon img { width: 52px !important; height: 52px !important; object-fit: contain; } body.usage-detail-page .service-title { color: #24324b !important; font-size: 0.95rem !important; line-height: 1.5 !important; } body.usage-detail-page .steps { padding: 72px 0 !important; background: transparent !important; } body.usage-detail-page .steps .container { max-width: 1180px !important; padding: 42px 36px 34px !important; border-radius: 28px !important; border: 1px solid rgba(76, 120, 242, 0.08) !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 24px 60px rgba(52, 76, 129, 0.12) !important; } body.usage-detail-page .steps h2 { margin-bottom: 34px !important; } body.usage-detail-page .steps-container { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px !important; } body.usage-detail-page .step-card { min-height: 190px !important; padding: 22px 14px 18px !important; border: 2px solid rgba(76, 120, 242, 0.24) !important; border-radius: 16px !important; background: linear-gradient(180deg, #ffffff, #f7faff) !important; } body.usage-detail-page .step-header { width: auto !important; align-self: center; margin-bottom: 14px !important; padding-bottom: 7px !important; border-bottom: 3px solid #4c78f2 !important; color: #315fd9 !important; font-size: 0.86rem !important; } body.usage-detail-page .step-bottom { margin-top: 24px !important; } body.usage-detail-page .card-selection-guide { display: none !important; } body.usage-detail-page .contact-section { padding: 72px 0 64px !important; background: transparent !important; } body.usage-detail-page .contact-section .container { box-sizing: border-box; width: min(100% - 48px, 1480px); padding: 52px 40px !important; border-radius: 28px; border: 1px solid rgba(76, 120, 242, 0.08); background: rgba(255, 255, 255, 0.86); box-shadow: 0 24px 60px rgba(52, 76, 129, 0.12); text-align: center; } body.usage-detail-page .contact-section h2 { color: #315fd9 !important; margin-bottom: 28px !important; } @media (max-width: 1100px) { body.usage-detail-page > .product-detail-section:first-of-type > .container, body.usage-detail-page .design-main-layout { grid-template-columns: 1fr !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container > .product-detail-grid { justify-content: center !important; } body.usage-detail-page .standard-services-grid, body.usage-detail-page .steps-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { body.usage-detail-page > .product-detail-section:first-of-type { padding-top: 20px !important; padding-bottom: 34px !important; } body.usage-detail-page .product-detail-breadcrumb { margin-bottom: 22px !important; line-height: 1.8 !important; } body.usage-detail-page .product-detail-title { font-size: 2.25rem !important; } body.usage-detail-page .product-detail-subtitle { margin-bottom: 34px !important; font-size: 1.18rem !important; } body.usage-detail-page .product-features-grid, body.usage-detail-page .standard-services-grid, body.usage-detail-page .steps-container { grid-template-columns: 1fr !important; } body.usage-detail-page .steps .container, body.usage-detail-page .contact-section .container { width: min(100% - 32px, 1480px); padding: 30px 20px 26px !important; border-radius: 22px !important; } body.usage-detail-page .step-card { min-height: auto !important; flex-direction: row !important; justify-content: flex-start !important; text-align: left !important; gap: 14px !important; padding: 16px !important; } body.usage-detail-page .step-header { flex: 0 0 72px; width: 72px !important; margin: 0 !important; padding: 0 !important; border-bottom: 0 !important; } } .contact-info h3, .support-info h3 { font-size: 1.8rem; margin-bottom: 30px; color: #333; } .contact-item { background: #f8f9fa; padding: 30px; border-radius: 10px; margin-bottom: 30px; } .contact-item h4 { color: #4273DB; font-size: 1.3rem; margin-bottom: 15px; } .phone-number { font-size: 1.8rem; font-weight: 700; color: #333; margin: 10px 0; } .contact-btn { display: inline-block; background: #4273DB; color: white; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: 600; transition: background 0.3s ease; } .contact-btn:hover { background: #2a5298; } .support-info ul { list-style: none; padding: 0; } .support-info li { margin-bottom: 15px; padding-left: 25px; position: relative; color: #666; line-height: 1.6; } .support-info li:before { content: "✓"; color: #4273DB; position: absolute; left: 0; font-weight: bold; } .cta-section { padding: 80px 0; background: linear-gradient(135deg, #4273DB 0%, #2a5298 100%); color: white; text-align: center; } .cta-content h2 { font-size: 2.5rem; margin-bottom: 20px; } .cta-content p { font-size: 1.2rem; margin-bottom: 40px; opacity: 0.9; } .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .cta-btn { padding: 15px 40px; border-radius: 5px; text-decoration: none; font-weight: 600; font-size: 1.1rem; transition: all 0.3s ease; } .cta-btn.primary { background: white; color: #4273DB; } .cta-btn.primary:hover { background: #f0f0f0; } .cta-btn.secondary { background: transparent; color: white; border: 2px solid white; } .cta-btn.secondary:hover { background: white; color: #4273DB; } /* Responsive Design for Order Guide */ @media (max-width: 768px) { .order-guide-hero { padding: 60px 0; } .order-guide-hero h1 { font-size: 2rem; } .order-guide-hero p { font-size: 1rem; } .order-process-section, .pricing-info-section, .payment-methods-section, .delivery-info-section, .requirements-section, .contact-section { padding: 60px 0; } .order-process-section h2, .pricing-info-section h2, .payment-methods-section h2, .delivery-info-section h2, .requirements-section h2, .contact-section h2 { font-size: 2rem; margin-bottom: 40px; } .process-steps { grid-template-columns: 1fr; gap: 30px; } .process-step { padding: 30px 20px; } .factors-grid, .payment-grid, .timeline, .requirements-grid { grid-template-columns: 1fr; gap: 20px; } .contact-content { grid-template-columns: 1fr; gap: 40px; } .cta-buttons { flex-direction: column; align-items: center; } .cta-btn { width: 250px; text-align: center; } } /* Login Page Styles */ .login-main { padding: 80px 0; background-color: white; min-height: calc(100vh - 400px); } .login-wrapper { max-width: 500px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); overflow: hidden; } .login-header { text-align: center; padding: 40px 40px 20px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; } .login-header h1 { font-size: 2rem; font-weight: 600; margin-bottom: 10px; color: #ffffff !important; } .login-subtitle { font-size: 1rem; opacity: 1; line-height: 1.5; color: #ffffff !important; } .login-content { padding: 40px; } /* Login Form Section */ .login-form-section { margin-bottom: 40px; } .form-header { text-align: center; margin-bottom: 30px; } .form-header h2 { font-size: 1.4rem; color: #333; margin-bottom: 8px; } .form-header p { color: #666; font-size: 0.95rem; } .login-form { margin-bottom: 20px; } .form-group { margin-bottom: 25px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 0.95rem; } .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="text"] { width: 100%; padding: 12px 15px; border: 2px solid #e1e1e1; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; background: #fafafa; } .form-group input[type="email"]:focus, .form-group input[type="password"]:focus, .form-group input[type="text"]:focus { outline: none; border-color: #4a90e2; background: white; } .required { color: #e74c3c; font-weight: bold; } .password-input-wrapper { position: relative; } .verification-input-wrapper { display: flex; gap: 10px; } .verification-input-wrapper input[type="text"] { flex: 1; padding: 12px 15px; border: 2px solid #e1e1e1; border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease; background: #fafafa; } .verification-input-wrapper input[type="text"]:focus { outline: none; border-color: #4a90e2; background: white; } .btn-get-code { padding: 12px 20px; background: #4a90e2; color: white; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; min-width: 140px; } .btn-get-code:hover { background: #357abd; } .btn-get-code:disabled { background: #bdc3c7; cursor: not-allowed; opacity: 0.7; } .password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; font-size: 1.2rem; color: #666; } .password-toggle:hover { color: #4a90e2; } .form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 10px; } .checkbox-label { display: flex; align-items: center; cursor: pointer; font-size: 0.9rem; color: #666; } .checkbox-label input[type="checkbox"] { margin-right: 8px; transform: scale(1.2); } .forgot-password { color: #4a90e2; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .forgot-password:hover { color: #357abd; text-decoration: underline; } .btn-login { width: 100%; padding: 14px; background: linear-gradient(135deg, #4a90e2, #357abd); color: white; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3); } .btn-login:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .form-footer { text-align: center; font-size: 0.85rem; color: #666; } .form-footer a { color: #4a90e2; text-decoration: none; } .form-footer a:hover { text-decoration: underline; } /* Login Divider */ .login-divider { position: relative; text-align: center; margin: 40px 0; } .login-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #e1e1e1; } .login-divider span { background: white; padding: 0 15px; position: relative; color: #666; font-size: 0.9rem; } /* Registration Section */ .register-section { text-align: center; } .register-benefits { background: #f8f9fa; padding: 25px; border-radius: 8px; margin-bottom: 25px; } .register-benefits h3 { color: #333; font-size: 1.1rem; margin-bottom: 15px; } .benefits-list { list-style: none; padding: 0; text-align: left; } .benefits-list li { padding: 8px 0; padding-left: 25px; position: relative; color: #555; font-size: 0.9rem; } .benefits-list li::before { content: '✓'; position: absolute; left: 0; color: #27ae60; font-weight: bold; } .btn-register { display: block; width: 100%; padding: 14px 30px; background: #27ae60; color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; margin-bottom: 15px; text-align: center; box-sizing: border-box; } .btn-register:hover { background: #219a52; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3); } .guest-checkout { font-size: 0.85rem; color: #666; } .guest-checkout a { color: #4a90e2; text-decoration: none; } .guest-checkout a:hover { text-decoration: underline; } /* Alternative Login */ .alternative-login { background: #f8f9fa; padding: 25px; border-radius: 8px; margin-top: 30px; } .alternative-login h3 { text-align: center; color: #333; font-size: 1.1rem; margin-bottom: 20px; } .social-login { display: flex; flex-direction: column; gap: 12px; } .email-order-notice { display: flex; align-items: flex-start; gap: 14px; background: #e8f4fd; border: 1px solid #b8daef; border-radius: 8px; padding: 16px 20px; margin-top: 20px; } .email-order-notice .notice-icon { font-size: 1.4rem; color: #4a90e2; flex-shrink: 0; margin-top: 2px; } .email-order-notice .notice-content { flex: 1; } .email-order-notice .notice-content h4 { font-size: 0.95rem; color: #2c5a7a; margin-bottom: 6px; font-weight: 600; } .email-order-notice .notice-content p { font-size: 0.85rem; color: #555; margin-bottom: 6px; line-height: 1.5; } .email-order-notice .notice-email { font-size: 0.9rem; color: #4a90e2; font-weight: 500; text-decoration: none; } .email-order-notice .notice-email:hover { text-decoration: underline; } .btn-social { display: flex; align-items: center; justify-content: center; padding: 12px; border: 2px solid #e1e1e1; background: white; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; font-size: 0.95rem; color: #333; outline: none; } .btn-social:hover { border-color: #4a90e2; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(74, 144, 226, 0.12); } .btn-social:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.18); } .btn-google { border-color: #db4437; color: #db4437; } .btn-google:hover { border-color: #db4437; background: #db4437; color: white; box-shadow: 0 10px 20px rgba(219, 68, 55, 0.16); } .btn-google:focus-visible { box-shadow: 0 0 0 4px rgba(219, 68, 55, 0.18); } .social-icon { margin-right: 10px; font-weight: bold; font-size: 1.1rem; } /* Login Help */ .login-help { margin-top: 30px; padding: 25px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107; } .login-help h3 { color: #856404; font-size: 1.1rem; margin-bottom: 15px; } .help-links { display: flex; flex-direction: column; gap: 10px; } .help-link { display: flex; align-items: center; color: #856404; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; } .help-link:hover { color: #533f03; } .help-icon { margin-right: 10px; font-size: 1.1rem; } /* Responsive Design */ @media (max-width: 768px) { .login-main { padding: 40px 0; } .login-wrapper { margin: 0 20px; max-width: none; } .login-header { padding: 30px 25px 15px; } .login-header h1 { font-size: 1.8rem; } .login-content { padding: 30px 25px; } .form-options { flex-direction: column; align-items: flex-start; gap: 15px; } .social-login { flex-direction: row; flex-wrap: wrap; justify-content: center; } .btn-social { flex: 1; min-width: 200px; } .help-links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } .help-link { flex: 1; min-width: 200px; justify-content: center; } } @media (max-width: 480px) { .login-main { padding: 20px 0; } .login-wrapper { margin: 0 12px; } .login-header { padding: 25px 20px 12px; } .login-header h1 { font-size: 1.5rem; } .login-subtitle { font-size: 0.9rem; } .login-content { padding: 20px 15px; } .form-header h2 { font-size: 1.2rem; } .form-group { margin-bottom: 18px; } .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="text"] { font-size: 16px; /* Prevent zoom on iOS */ } /* Stack verification code input + button vertically */ .verification-input-wrapper { flex-direction: column; } .btn-get-code { width: 100%; min-width: auto; } .btn-login { font-size: 1rem; } .login-divider { margin: 25px 0; } .register-benefits { padding: 15px; } .benefits-list li { font-size: 0.85rem; padding: 6px 0 6px 22px; } .alternative-login { padding: 18px 15px; margin-top: 20px; } .email-order-notice { padding: 12px 15px; gap: 10px; } .social-login { flex-direction: column; } .btn-social { min-width: auto; } .help-links { flex-direction: column; gap: 15px; } .help-link { min-width: auto; justify-content: flex-start; } } /* User Menu Styles */ .user-menu { position: relative; } .user-avatar-btn { background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .user-avatar-btn:hover { background-color: rgba(74, 144, 226, 0.1); } .user-avatar-btn svg { width: 28px; height: 28px; color: #4a90e2; } .user-dropdown { position: absolute; top: 100%; right: 0; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); min-width: 220px; padding: 10px 0; z-index: 9999; display: none; margin-top: 8px; } .user-dropdown::before { content: ''; position: absolute; top: -8px; right: 15px; border-width: 0 8px 8px 8px; border-style: solid; border-color: transparent transparent white transparent; } .user-info { padding: 12px 20px; border-bottom: 1px solid #e9ecef; margin-bottom: 8px; } .user-info .user-name { display: block; font-weight: 600; color: #333; font-size: 1rem; margin-bottom: 4px; } .user-info .user-email { display: block; font-size: 0.85rem; color: #666; } .dropdown-divider { height: 1px; background: #e9ecef; margin: 8px 0; } .dropdown-item { display: block; padding: 10px 20px; color: #333; text-decoration: none; font-size: 0.95rem; transition: background-color 0.2s ease, color 0.2s ease; } .dropdown-item:hover { background-color: #f8f9fa; color: #4a90e2; } #logoutBtn { color: #dc3545; cursor: pointer; } #logoutBtn:hover { background-color: #fff5f5; color: #c82333; } /* Responsive for user menu */ @media (max-width: 768px) { .user-dropdown { min-width: 180px; right: -10px; } .user-dropdown::before { right: 20px; } } /* Floating contact/sample request button */ .floating-action { position: fixed; right: 24px; bottom: 24px; z-index: 999; } .floating-action a { display: inline-flex; align-items: stretch; justify-content: space-between; min-width: 280px; max-width: 360px; height: 86px; padding: 0; border: 2px solid #005fa8; border-radius: 15px; background: #ffffff; color: #005fa8; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12); text-decoration: none; font-size: 0.95rem; font-weight: 700; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .floating-action .floating-text { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 18px; line-height: 1.2; } .floating-action .floating-text span { display: block; } .floating-action .floating-line-small { font-size: 0.9rem; font-weight: 500; } .floating-action .floating-line-large { font-size: 1.05rem; font-weight: 700; width: 100%; text-align: center; } .floating-action .floating-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 86px; background: #005fa8; color: #ffffff !important; flex-shrink: 0; border-top-right-radius: 13px; border-bottom-right-radius: 13px; } .floating-action a:hover { transform: translateY(-2px); } .floating-action.floating-message-image a { display: block; min-width: 0; max-width: none; width: clamp(150px, 14vw, 220px); height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 0; overflow: visible; } .floating-action.floating-message-image img { display: block; width: 100%; height: auto; } .floating-action.floating-message-image a:hover { transform: translateY(-4px) scale(1.03); } /* Floating contact card (shared across detail pages) */ .home-floating-contact { position: fixed; right: 24px; bottom: 24px; z-index: 999; } .home-floating-contact a { display: inline-flex; align-items: stretch; min-width: 320px; max-width: 400px; border: 2px solid #005fa8; border-radius: 15px; background: #ffffff; color: #222; box-shadow: 0 16px 32px rgba(0,0,0,0.13); text-decoration: none; overflow: hidden; transition: transform 0.2s ease; } .home-floating-contact a:hover { transform: translateY(-2px); } .hfc-main { display: flex; flex-direction: column; flex: 1; padding: 12px 16px; } .hfc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; } .hfc-mail-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hfc-mail-icon svg { width: 32px; height: 26px; fill: none; stroke: #005fa8; stroke-width: 2; } .hfc-title { display: flex; flex-direction: column; line-height: 1.3; } .hfc-title span { font-size: 0.82rem; color: #333; font-weight: 500; } .hfc-title strong { font-size: 1.1rem; font-weight: 700; color: #222; text-align: center; width: 100%; } .hfc-rule { display: block; height: 2px; background: #c8cdd4; margin: 0 -2px; border-radius: 1px; } .hfc-info { display: flex; align-items: center; gap: 10px; padding-top: 10px; } .hfc-phone { display: flex; align-items: center; gap: 6px; } .hfc-phone svg { width: 16px; height: 16px; fill: #005fa8; flex-shrink: 0; } .hfc-phone strong { font-size: 1rem; font-weight: 700; color: #222; white-space: nowrap; } .hfc-vsep { width: 1px; height: 22px; background: #c8cdd4; flex-shrink: 0; } .hfc-hours { display: flex; align-items: center; gap: 5px; white-space: nowrap; } .hfc-hours b { display: inline-block; background: #005fa8; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 2px 5px; border-radius: 3px; } .hfc-hours span { font-size: 0.82rem; color: #333; } .hfc-arrow { display: flex; align-items: center; justify-content: center; width: 58px; background: #005fa8; flex-shrink: 0; border-top-right-radius: 13px; border-bottom-right-radius: 13px; } .hfc-arrow svg { width: 20px; height: 20px; fill: #fff; } @media (max-width: 480px) { .home-floating-contact { right: 10px; bottom: 14px; } .home-floating-contact a { min-width: 0; max-width: calc(100vw - 110px); } .hfc-hours { display: none; } .hfc-vsep { display: none; } .hfc-phone strong { font-size: 0.9rem; } } /* Product detail card-type navigation */ .pvc-page .card-type-nav-scroll { width: 100% !important; gap: 18px !important; justify-content: flex-start !important; padding-bottom: 2px; } .pvc-page .card-type-nav-link { box-sizing: border-box; width: 120px !important; min-height: 96px !important; font-size: 0.68rem !important; line-height: 1.25 !important; white-space: normal !important; } .pvc-page .card-type-nav-text { display: flex !important; align-items: center; justify-content: center; min-height: 2.5em; padding: 0 2px; white-space: normal !important; overflow-wrap: anywhere; } .pvc-page .pvc-use-media-salon { background: linear-gradient(135deg, #ffe3f0, #f05d9e); } .pvc-page .pvc-use-media-restaurant { background: linear-gradient(135deg, #fff0c7, #f6a623); } .pvc-page .pvc-use-media-retail { background: linear-gradient(135deg, #e1ecff, #4c78f2); } .pvc-page .pvc-design-service-card > .pvc-design-service-actions { width: 100%; display: flex !important; justify-content: center; gap: 14px; margin-top: 0 !important; padding-top: 22px !important; } .pvc-page .pvc-design-service-card > .pvc-design-service-actions .btn-blue, .pvc-page .pvc-design-service-card > .pvc-design-service-actions .btn-outline { min-height: 54px; } .pvc-page .pvc-cta { padding: 72px 0 64px !important; } .pvc-page .pvc-cta-box { box-sizing: border-box; width: 100%; max-width: none; margin: 0 auto; padding: 48px 40px !important; border-radius: 28px; border: 1px solid rgba(76, 120, 242, 0.1); background: linear-gradient(135deg, #ffffff, #f6f9ff); box-shadow: 0 24px 56px rgba(40, 62, 109, 0.12); text-align: center; } .pvc-page .pvc-compact-heading { font-size: clamp(1.08rem, 1.35vw, 1.38rem) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: #111827 !important; } .pvc-page .pvc-pricing-subtitle:not(.pvc-compact-subtitle) { font-size: clamp(1.08rem, 1.35vw, 1.38rem) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: #111827 !important; } .pvc-page .pvc-compact-subtitle { font-size: clamp(1.08rem, 1.35vw, 1.38rem) !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: #111827 !important; } .pvc-page .pvc-specs-grid .pvc-design-service-copy > h2, .pvc-page .pvc-design-service-copy h2 { font-size: clamp(0.98rem, 1.15vw, 1.1rem) !important; font-weight: 600 !important; } .pvc-page .pvc-design-service-points { gap: 8px !important; margin-top: 18px !important; } .pvc-page .pvc-design-service-points li { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 10px !important; padding: 11px 13px !important; border-radius: 14px !important; } .pvc-page .pvc-design-service-point-icon { width: 30px !important; height: 30px !important; font-size: 0.72rem !important; font-weight: 800 !important; line-height: 1 !important; } .pvc-page .pvc-design-service-point-text { display: block; min-width: 0; } .pvc-page .pvc-design-service-point-text strong { display: block; color: #1f2937 !important; font-size: 0.94rem !important; font-weight: 700 !important; line-height: 1.42 !important; letter-spacing: 0 !important; } .pvc-page .pvc-design-service-point-text span { display: block; margin-top: 3px !important; color: #5f6b7a !important; font-size: 0.82rem !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; } .pvc-page .pvc-use-section { padding-top: 28px !important; } .pvc-page .pvc-cta-actions { display: flex !important; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; } .pvc-page .pvc-cta-btn { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-width: 260px !important; min-height: 58px; padding: 0 28px !important; border-radius: 16px; line-height: 1.35; white-space: nowrap; text-decoration: none !important; } .pvc-page .pvc-cta-btn svg { flex: 0 0 20px; } .pvc-page .pvc-home-button-actions { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 20px !important; margin-top: 26px !important; } .pvc-page .pvc-cta-actions.pvc-home-button-actions { justify-content: center !important; margin-top: 30px !important; } .pvc-page .pvc-home-button-actions .pvc-home-estimate-btn, .pvc-page .pvc-home-button-actions .pvc-home-sample-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 290px !important; min-width: 290px !important; max-width: 290px !important; min-height: 55px !important; margin: 0 !important; padding: 15px 16px !important; border-radius: 20px !important; font-size: 1.08rem !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; box-sizing: border-box !important; } .pvc-page .pvc-home-button-actions .pvc-home-estimate-btn { color: #ffffff !important; background-color: #FB7615 !important; border: 2px solid #FB7615 !important; box-shadow: 0 2px 0 #c96000, 0 4px 7px rgba(0, 0, 0, 0.14) !important; } .pvc-page .pvc-home-button-actions .pvc-home-sample-btn { color: #2a55b0 !important; background-color: #ffffff !important; border: 2px solid #2a55b0 !important; box-shadow: 0 2px 0 #2a55b0, 0 4px 7px rgba(0, 0, 0, 0.12) !important; } .pvc-page .pvc-home-button-actions .pvc-home-estimate-btn:hover, .pvc-page .pvc-home-button-actions .pvc-home-sample-btn:hover { transform: translateY(-2px); } .pvc-page .pvc-home-button-actions .pvc-home-estimate-btn:hover { background-color: #e66812 !important; border-color: #e66812 !important; box-shadow: 0 3px 0 #b95700, 0 6px 10px rgba(0, 0, 0, 0.16) !important; } .pvc-page .pvc-home-button-actions .pvc-home-sample-btn:hover { color: #2a55b0 !important; background-color: #f4f7ff !important; border-color: #2a55b0 !important; box-shadow: 0 3px 0 #244a9a, 0 6px 10px rgba(0, 0, 0, 0.14) !important; } .pvc-page .pvc-cta-actions.pvc-home-button-actions .pvc-home-estimate-btn { border-color: transparent !important; box-shadow: none !important; } .pvc-page .pvc-cta-actions.pvc-home-button-actions .pvc-home-estimate-btn:hover { border-color: transparent !important; box-shadow: none !important; } .pvc-page .pvc-cta-actions.pvc-home-button-actions .pvc-home-sample-btn { box-shadow: 0 8px 18px rgba(42, 85, 176, 0.12) !important; } .pvc-page .pvc-cta-actions.pvc-home-button-actions .pvc-home-sample-btn:hover { box-shadow: 0 10px 22px rgba(42, 85, 176, 0.16) !important; } .pvc-page .pvc-hero-copy h1 { font-size: clamp(1.32rem, 1.55vw, 1.76rem) !important; } .pvc-page .pvc-hero-copy .pvc-product-title-compact { font-size: clamp(1.12rem, 1.35vw, 1.42rem) !important; } .pvc-page .pvc-cta-note { width: 100%; max-width: none; margin: 14px auto 0; } @media (min-width: 1101px) { .pvc-page .pvc-hero-layout { align-items: stretch !important; } .pvc-page .pvc-hero-copy { display: flex !important; flex-direction: column; height: 100%; } .pvc-page .pvc-hero-copy > .pvc-bullets, .pvc-page .pvc-hero-lower { margin-top: auto !important; } .pvc-page .pvc-hero-lower { transform: none !important; } } .pvc-page .pvc-hero-copy .pvc-hero-lower { transform: translateY(-42px) !important; } @media (min-width: 1480px) { .pvc-page .card-type-nav-scroll { justify-content: center !important; } } @media (max-width: 768px) { .floating-action { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); } .floating-action a { width: 100%; } .floating-action .floating-text { padding: 14px 16px; } .floating-action .floating-icon { width: 54px; height: 86px; } .floating-action.floating-message-image a { width: clamp(120px, 30vw, 170px); } .pvc-page .card-type-nav-link { width: 112px !important; min-height: 88px !important; font-size: 0.64rem !important; } .pvc-page .card-type-nav-scroll { gap: 16px !important; } .pvc-page .pvc-cta { padding: 48px 0 48px !important; } .pvc-page .pvc-cta-box { padding: 32px 20px !important; border-radius: 22px; } .pvc-page .pvc-compact-heading { font-size: 1.05rem !important; line-height: 1.35 !important; } .pvc-page .pvc-pricing-subtitle:not(.pvc-compact-subtitle) { font-size: 1.05rem !important; line-height: 1.35 !important; } .pvc-page .pvc-compact-subtitle { font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: #111827 !important; } .pvc-page .pvc-design-service-points { gap: 9px !important; margin-top: 16px !important; } .pvc-page .pvc-design-service-points li { grid-template-columns: 28px minmax(0, 1fr) !important; gap: 9px !important; padding: 11px 12px !important; } .pvc-page .pvc-design-service-point-icon { width: 28px !important; height: 28px !important; font-size: 0.68rem !important; } .pvc-page .pvc-design-service-point-text strong { font-size: 0.9rem !important; line-height: 1.45 !important; } .pvc-page .pvc-design-service-point-text span { font-size: 0.8rem !important; line-height: 1.6 !important; } .pvc-page .pvc-use-section { padding-top: 20px !important; } .pvc-page .pvc-cta-actions { flex-direction: column; gap: 12px; } .pvc-page .pvc-home-button-actions { justify-content: center !important; align-items: center !important; gap: 16px !important; } .pvc-page .pvc-home-button-actions .pvc-home-estimate-btn, .pvc-page .pvc-home-button-actions .pvc-home-sample-btn { width: min(100%, 290px) !important; min-width: 0 !important; max-width: 290px !important; } .pvc-page .pvc-hero-copy h1 { font-size: 1.08rem !important; } .pvc-page .pvc-hero-copy .pvc-product-title-compact { font-size: 0.98rem !important; } .pvc-page .pvc-hero-copy .pvc-hero-lower { transform: translateY(-4px) !important; } .pvc-page .pvc-cta-btn { width: 100%; max-width: 360px; min-width: 0 !important; min-height: 56px; white-space: normal; } .pvc-page .pvc-design-service-card > .pvc-design-service-actions { flex-direction: column; } } .card-type-nav-text { white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } .card-type-nav-link:nth-child(1) .card-type-nav-text, .card-type-nav-link:nth-child(2) .card-type-nav-text, .card-type-nav-link:nth-child(4) .card-type-nav-text, .card-type-nav-link:nth-child(6) .card-type-nav-text, .card-type-nav-link:nth-child(7) .card-type-nav-text { position: relative; display: inline-block; min-width: 7.8em; min-height: 2.5em; line-height: 1.25; color: transparent !important; white-space: nowrap !important; text-align: center; } .card-type-nav-link:nth-child(1) .card-type-nav-text::before, .card-type-nav-link:nth-child(2) .card-type-nav-text::before, .card-type-nav-link:nth-child(4) .card-type-nav-text::before, .card-type-nav-link:nth-child(6) .card-type-nav-text::before, .card-type-nav-link:nth-child(7) .card-type-nav-text::before { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.78rem; line-height: 1.25; white-space: pre-line; color: #334155; } .card-type-nav-link.is-current:nth-child(1) .card-type-nav-text::before, .card-type-nav-link.is-current:nth-child(2) .card-type-nav-text::before, .card-type-nav-link.is-current:nth-child(4) .card-type-nav-text::before, .card-type-nav-link.is-current:nth-child(6) .card-type-nav-text::before, .card-type-nav-link.is-current:nth-child(7) .card-type-nav-text::before { color: #ffffff; } .card-type-nav-link:nth-child(1) .card-type-nav-text::before { content: "プラスチック\Aカード"; } .card-type-nav-link:nth-child(2) .card-type-nav-text::before { content: "QR・バーコード\Aカード"; } .card-type-nav-link:nth-child(4) .card-type-nav-text::before { content: "マットブラック\Aカード"; } .card-type-nav-link:nth-child(6) .card-type-nav-text::before { content: "メタリック\Aカード"; } .card-type-nav-link:nth-child(7) .card-type-nav-text::before { content: "ヘアライン\Aカード"; } /* Keep the product-detail type nav from rendering duplicate label layers. */ .card-type-nav .card-type-nav-link .card-type-nav-text { position: static !important; display: block !important; min-width: 0 !important; min-height: 0 !important; padding: 0 2px !important; color: inherit !important; line-height: 1.25 !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; } .card-type-nav .card-type-nav-link .card-type-nav-text::before { content: none !important; display: none !important; } .card-type-nav .card-type-nav-line { display: block !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; } .pvc-page .card-type-nav-inner { justify-content: flex-start !important; } .pvc-page .card-type-nav-scroll { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 18px 4px !important; scroll-padding-inline: 18px; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; } .pvc-page .card-type-nav-link { width: 158px !important; padding-left: 6px !important; padding-right: 6px !important; font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.34 !important; letter-spacing: 0 !important; font-family: inherit !important; } .pvc-page .card-type-nav .card-type-nav-link .card-type-nav-text { display: block !important; width: 100% !important; padding: 0 !important; line-height: 1.34 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: normal !important; } .pvc-page .card-type-nav span.card-type-nav-text:not(#cart-count), .pvc-page .card-type-nav span.card-type-nav-line:not(#cart-count) { font-size: 0.74rem !important; } .pvc-page .card-type-nav .card-type-nav-line { line-height: inherit !important; } @media (max-width: 768px) { .pvc-page .card-type-nav-scroll { margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; scroll-padding-inline: 16px; } .pvc-page .card-type-nav-link { width: 158px !important; min-height: 86px !important; font-size: 0.88rem !important; } } .pvc-page .card-type-nav-inner { min-height: auto !important; padding-top: 12px !important; padding-bottom: 12px !important; } .pvc-page .card-type-nav-scroll { flex-wrap: nowrap !important; justify-content: center !important; gap: 8px !important; overflow-x: visible !important; overflow-y: visible !important; padding-bottom: 0 !important; } .pvc-page .card-type-nav-link { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: 118px !important; font-size: 0.74rem !important; line-height: 1.28 !important; } .pvc-page .card-type-mini-card.has-image { width: 58px !important; height: 37px !important; margin-bottom: 7px !important; } .pvc-page .card-type-nav-scroll::-webkit-scrollbar { display: block !important; height: 6px !important; } .pvc-page .card-type-nav-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(76, 120, 242, 0.28); } @media (max-width: 768px) { .pvc-page .card-type-nav-inner { padding-top: 10px !important; padding-bottom: 10px !important; } .pvc-page .card-type-nav-scroll { flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; padding-left: 12px !important; padding-right: 12px !important; padding-bottom: 6px !important; scrollbar-width: thin; } .pvc-page .card-type-nav-link { flex: 0 0 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; min-height: 78px !important; padding-bottom: 10px !important; font-size: 0.74rem !important; } } .pvc-page nav.card-type-nav a.card-type-nav-link, .pvc-page nav.card-type-nav a.card-type-nav-link span.card-type-nav-text:not(#cart-count), .pvc-page nav.card-type-nav a.card-type-nav-link span.card-type-nav-line:not(#cart-count) { font-size: 0.74rem !important; } .pvc-page .pvc-spec-kpi .pvc-spec-kpi-value { display: block; margin-top: 0; font-size: 1.18rem; line-height: 1.35; font-weight: 400; color: #111827; } /* Header quick navigation for card choices */ .main-nav .dropdown-content.is-card-quick-nav { left: 50%; width: min(1120px, calc(100vw - 96px)); min-width: 0; padding: 0; margin-top: 8px; border: 1px solid rgba(30, 64, 175, 0.12); border-radius: 16px; background: linear-gradient(90deg, #f36f21 0, #f36f21 96px, #1f5fd1 96px, #1f5fd1 100%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); background-size: 100% 4px, 100% 100%; background-repeat: no-repeat; box-shadow: 0 22px 48px rgba(15, 35, 78, 0.18); transform: translateX(-25%); overflow: hidden; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-panel { --quick-nav-divider-space: 20px; display: grid; grid-template-columns: 500px 395px minmax(170px, 1fr); gap: 0; padding: 18px; align-items: stretch; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column { display: grid; align-content: start; gap: 5px 10px; min-width: 0; padding: 0 var(--quick-nav-divider-space); } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column + .quick-nav-column { border-left: 1px solid #e6edf8; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column:first-child { grid-template-columns: max-content max-content; justify-content: start; row-gap: 4px; column-gap: 10px; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column:first-child .quick-nav-link { box-sizing: border-box; width: auto; height: auto; min-width: 0; white-space: nowrap; overflow-wrap: normal; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column:nth-child(2) { grid-template-columns: max-content max-content; justify-content: start; row-gap: 4px; column-gap: 10px; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column:nth-child(2) .quick-nav-link:nth-child(n+8) { margin-top: 0; } .main-nav .dropdown-content.is-card-quick-nav a { border-bottom: 0 !important; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading { display: flex !important; align-items: center; justify-content: space-between; grid-column: 1 / -1; margin: 0 0 8px; padding: 0 0 10px !important; color: #14336d !important; font-size: 0.88rem !important; font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: 0; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading::after { content: ""; width: 8px; height: 8px; border-top: 2px solid #f36f21; border-right: 2px solid #f36f21; transform: rotate(45deg); } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-link { position: relative; display: flex !important; align-items: center; min-height: 34px; padding: 6px 8px 6px 18px !important; border-radius: 7px; color: #334155 !important; font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.34 !important; white-space: nowrap; transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-link::before { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #9db2d6; transform: translateY(-50%); } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-link:hover { background: #eef5ff !important; color: #1f5fd1 !important; transform: translateX(2px); } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-link:hover::before { background: #f36f21; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column-single { display: grid; align-content: stretch; padding-right: 0; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading-single { display: flex !important; align-items: center; justify-content: space-between; width: 100%; min-height: 100%; min-width: 0; margin-bottom: 0; padding: 18px 18px !important; color: #ffffff !important; text-align: left; white-space: nowrap; border-radius: 13px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 46%), linear-gradient(135deg, #14336d 0%, #1f5fd1 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading-single::after { content: ""; flex: 0 0 auto; width: 24px; height: 24px; margin-left: 10px; border-radius: 50%; background: linear-gradient(45deg, transparent 45%, #ffffff 46%, #ffffff 54%, transparent 55%), rgba(255, 255, 255, 0.18); transform: none; } @media (max-width: 768px) { /* Hidden by default; only show when .open is toggled by accordion JS */ .main-nav.active .dropdown-content.is-card-quick-nav { display: none; } .main-nav.active .dropdown-content.is-card-quick-nav.open { display: block !important; } .main-nav .dropdown-content.is-card-quick-nav { width: 100%; left: 0; padding: 0; border-radius: 8px; transform: none; overflow: hidden; background: #f4f7fc !important; margin-top: 4px; margin-bottom: 8px; } /* Simplified panel: single column, no gaps */ .main-nav .dropdown-content.is-card-quick-nav .quick-nav-panel { grid-template-columns: 1fr; gap: 0; padding: 0; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-column { padding: 0; border-left: 0 !important; } /* Hide individual product links on mobile — show only category headings */ .main-nav .dropdown-content.is-card-quick-nav .quick-nav-link { display: none !important; } /* Style category headings as clean tap targets */ .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading { display: flex !important; align-items: center; justify-content: space-between; grid-column: unset; margin: 0 !important; padding: 13px 16px !important; font-size: 0.95rem !important; font-weight: 700 !important; color: #14336d !important; border-bottom: 1px solid #dde6f3; border-radius: 0; } .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading::after { width: 6px; height: 6px; border-color: #4a7fcb; } /* Blue CTA block for the single heading */ .main-nav .dropdown-content.is-card-quick-nav .quick-nav-heading-single { border-radius: 0; min-height: auto; padding: 13px 16px !important; font-size: 0.95rem !important; white-space: normal; } } /* Usage product list page */ body.usage-list-page { background: radial-gradient(circle at top left, rgba(76, 120, 242, 0.12), transparent 32%), linear-gradient(180deg, #f7fbff 0%, #ffffff 42%, #f6f9ff 100%) !important; } body.usage-list-page > div[style*="background"] { background: transparent !important; } body.usage-list-page .page-title-section { position: relative; overflow: hidden; padding: 58px 0 42px !important; background: transparent !important; } body.usage-list-page .page-title-section .container, body.usage-list-page .products-grid-section .container { max-width: 1480px; } body.usage-list-page .page-title { margin-bottom: 18px !important; color: #15264d !important; font-size: clamp(1.45rem, 2.5vw, 2.2rem) !important; font-weight: 800 !important; line-height: 1.16 !important; text-align: center; } body.product-list-page .page-title { font-size: clamp(1.35rem, 2.2vw, 2rem) !important; } body.user-page .page-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem) !important; } body.usage-list-page .page-title::after { content: ""; display: block; width: 56px; height: 5px; margin: 18px auto 0; border-radius: 999px; background: linear-gradient(90deg, #4c78f2, #7aa7ff); } body.usage-list-page .page-subtitle { max-width: 720px; margin: 0 auto !important; color: #475467 !important; font-size: 1.02rem !important; line-height: 1.9 !important; text-align: center; } body.usage-list-page .products-grid-section { padding: 34px 0 82px !important; background: transparent !important; } body.usage-list-page .products-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; align-items: stretch; } body.usage-list-page .product-card { display: flex; min-width: 0; height: 100%; overflow: hidden; flex-direction: column; border: 1px solid rgba(76, 120, 242, 0.1) !important; border-radius: 20px !important; background: #ffffff !important; box-shadow: 0 12px 28px rgba(50, 74, 124, 0.08) !important; transform: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } body.usage-list-page .product-card:hover { border-color: rgba(76, 120, 242, 0.22) !important; box-shadow: 0 20px 40px rgba(50, 74, 124, 0.13) !important; transform: translateY(-4px); } body.usage-list-page .product-image { position: relative; display: flex !important; align-items: center; justify-content: center; height: 190px !important; padding: 26px 24px !important; background: linear-gradient(135deg, #f6f9ff, #e8f0ff) !important; } body.usage-list-page .product-image img { width: auto !important; max-width: 88% !important; max-height: 136px !important; object-fit: contain !important; filter: drop-shadow(0 14px 18px rgba(36, 54, 104, 0.14)); } body.usage-list-page .product-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px !important; border: 1px solid rgba(76, 120, 242, 0.16); border-radius: 999px !important; background: rgba(255, 255, 255, 0.9) !important; color: #315fd9 !important; font-size: 0.74rem !important; font-weight: 800 !important; line-height: 1.2 !important; white-space: nowrap; box-shadow: 0 8px 18px rgba(50, 74, 124, 0.08); } body.usage-list-page .product-info { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 22px 22px 24px !important; text-align: center; } body.usage-list-page .product-info h3 { min-height: 2.8em; margin: 0 0 12px !important; color: #3564df !important; font-size: 1.08rem !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: 0 !important; } body.usage-list-page .product-desc { min-height: 3.6em; margin: 0 0 16px !important; color: #475467 !important; font-size: 0.92rem !important; line-height: 1.8 !important; } body.usage-list-page .product-specs { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 0 0 18px !important; } body.usage-list-page .product-specs .spec { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 5px 10px !important; border: 1px solid rgba(76, 120, 242, 0.12); border-radius: 999px !important; background: #f7faff !important; color: #315fd9 !important; font-size: 0.78rem !important; font-weight: 700 !important; line-height: 1.35 !important; white-space: nowrap; } body.usage-list-page .product-price, body.usage-list-page .product-features { display: none !important; } body.usage-list-page .product-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: auto; padding: 0 18px !important; border-radius: 14px !important; background: linear-gradient(135deg, #4c78f2, #3564df) !important; color: #ffffff !important; font-size: 0.95rem !important; font-weight: 800 !important; line-height: 1.35 !important; text-decoration: none !important; box-shadow: 0 12px 22px rgba(76, 120, 242, 0.22); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.usage-list-page .product-btn:hover { color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 16px 28px rgba(76, 120, 242, 0.28); } body.usage-list-page .contact-section { padding: 72px 0 64px !important; background: transparent !important; } body.usage-list-page .contact-section .contact-box { border: 1px solid rgba(76, 120, 242, 0.1) !important; border-radius: 28px !important; background: linear-gradient(135deg, #ffffff, #f6f9ff) !important; box-shadow: 0 24px 56px rgba(40, 62, 109, 0.12) !important; } @media (max-width: 1100px) { body.usage-list-page .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { body.usage-list-page .page-title-section { padding: 40px 0 28px !important; } body.usage-list-page .products-grid-section { padding: 24px 0 56px !important; } body.usage-list-page .products-grid { grid-template-columns: 1fr !important; gap: 18px !important; } body.usage-list-page .product-image { height: 170px !important; } body.usage-list-page .product-info { padding: 20px 18px 22px !important; } body.usage-list-page .product-info h3, body.usage-list-page .product-desc { min-height: 0; } } /* Final alignment for usage detail pages linked from user.html. */ body.usage-detail-page > .product-detail-section:first-of-type { background: radial-gradient(circle at 80% 8%, rgba(76, 120, 242, 0.16), transparent 34%), radial-gradient(circle at 8% 16%, rgba(125, 168, 255, 0.18), transparent 32%), linear-gradient(180deg, #f7fbff 0%, #eef5ff 42%, #ffffff 100%) !important; } body.usage-detail-page > .product-detail-section:first-of-type > .container { width: min(100% - 48px, 1480px) !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; } body.usage-detail-page .product-detail-breadcrumb { display: flex !important; gap: 8px; align-items: center; margin-bottom: 26px !important; color: #667085 !important; font-size: 0.92rem !important; line-height: 1.6 !important; } body.usage-detail-page .product-detail-title { color: #111827 !important; letter-spacing: 0 !important; } body.usage-detail-page .product-detail-subtitle { max-width: 680px; color: #344054 !important; } body.usage-detail-page > .product-detail-section:first-of-type .product-detail-image { border-radius: 32px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.94)), linear-gradient(135deg, rgba(76, 120, 242, 0.1), rgba(255, 255, 255, 0)) !important; border: 1px solid rgba(76, 120, 242, 0.1) !important; } body.usage-detail-page .product-description { max-width: 1480px; margin: 0 auto; } body.usage-detail-page .product-description h2::after, body.usage-detail-page .standard-services-section .section-title::after, body.usage-detail-page .steps h2::after, body.usage-detail-page .faq-section h2::after, body.usage-detail-page .contact-section h2::after { content: ""; display: block; width: 56px; height: 5px; margin: 18px auto 0; border-radius: 999px; background: linear-gradient(90deg, #4c78f2, #8db1ff); } body.usage-detail-page .product-overview-card { max-width: 1100px !important; padding: 34px 38px !important; border-radius: 28px !important; } body.usage-detail-page .product-overview-card p + p { margin-top: 14px !important; } body.usage-detail-page .product-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 1120px !important; } body.usage-detail-page .product-features-grid .feature-item { border-radius: 22px !important; padding: 28px !important; } body.usage-detail-page .product-features-grid .feature-item h4 { min-width: 112px !important; color: #315fd9 !important; line-height: 1.45 !important; } body.usage-detail-page .product-features-grid .feature-item ul { margin-left: 18px !important; } body.usage-detail-page .product-design-info { padding: 74px 0 0 !important; } body.usage-detail-page .product-design-content { width: min(100% - 48px, 1480px) !important; margin: 0 auto !important; padding: 0 !important; } body.usage-detail-page .design-main-layout { grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.62fr) !important; border-radius: 28px !important; background: linear-gradient(145deg, #ffffff 0%, #f7faff 58%, #fff8e8 100%) !important; } body.usage-detail-page .design-text-left::before { color: #315fd9 !important; background: rgba(76, 120, 242, 0.1) !important; } body.usage-detail-page .design-text-left::after { color: #475467 !important; font-size: 1rem !important; } body.usage-detail-page .design-image-right { display: flex !important; justify-content: center; } body.usage-detail-page .design-buttons .btn-blue, body.usage-detail-page .design-buttons .btn-outline { display: inline-flex !important; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px !important; border-radius: 16px !important; font-weight: 800 !important; } body.usage-detail-page .standard-services-section { padding: 74px 0 0 !important; background: transparent !important; } body.usage-detail-page .standard-services-section .container { width: min(100% - 48px, 1480px) !important; padding: 46px 36px !important; border: 1px solid rgba(76, 120, 242, 0.08) !important; border-radius: 28px !important; background: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 24px 60px rgba(52, 76, 129, 0.12) !important; } body.usage-detail-page .standard-services-section .section-description { max-width: 780px !important; margin-bottom: 34px !important; } body.usage-detail-page .standard-services-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; max-width: none !important; } body.usage-detail-page .service-card { min-height: 148px !important; border-radius: 20px !important; background: linear-gradient(180deg, #ffffff, #f7faff) !important; } body.usage-detail-page .steps { padding: 74px 0 0 !important; } body.usage-detail-page .steps .container { width: min(100% - 48px, 1180px) !important; margin: 0 auto !important; padding: 42px 36px 36px !important; } body.usage-detail-page .steps-container { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } body.usage-detail-page .step-card { border-radius: 18px !important; box-shadow: 0 14px 30px rgba(50, 74, 124, 0.08) !important; } body.usage-detail-page .step-header { border-bottom: 3px solid #4c78f2 !important; color: #315fd9 !important; } body.usage-detail-page .faq-section { padding: 74px 0 0 !important; background: transparent !important; } body.usage-detail-page .faq-container { width: min(100% - 48px, 1180px) !important; max-width: 1180px !important; } body.usage-detail-page .faq-item { border-radius: 18px !important; } body.usage-detail-page .contact-section { padding: 74px 0 64px !important; } body.usage-detail-page .contact-section .container { width: min(100% - 48px, 1480px) !important; border-radius: 28px !important; background: linear-gradient(135deg, #ffffff, #f6f9ff) !important; } body.usage-detail-page .contact-section h2 { color: #111827 !important; } @media (max-width: 1100px) { body.usage-detail-page .standard-services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { body.usage-detail-page > .product-detail-section:first-of-type > .container, body.usage-detail-page .product-design-content, body.usage-detail-page .standard-services-section .container, body.usage-detail-page .steps .container, body.usage-detail-page .faq-container, body.usage-detail-page .contact-section .container { width: min(100% - 32px, 1480px) !important; } body.usage-detail-page .product-features-grid, body.usage-detail-page .standard-services-grid, body.usage-detail-page .steps-container { grid-template-columns: 1fr !important; } body.usage-detail-page .product-overview-card, body.usage-detail-page .product-features-grid .feature-item, body.usage-detail-page .design-main-layout, body.usage-detail-page .standard-services-section .container { padding: 24px 20px !important; border-radius: 22px !important; } } /* Homepage compatibility layer for the legacy index layout. */ body.home-page .hero, body.home-page .specs-bar, body.home-page .reasons, body.home-page .color-card, body.home-page .steps, body.home-page .lineup, body.home-page .price-comparison, body.home-page .news-section, body.home-page .case-studies, body.home-page .contact-section, body.home-page footer { display: block !important; visibility: visible !important; opacity: 1 !important; } body.home-page .hero { padding: 30px 0 45px !important; background-color: #FAFAF8 !important; } body.home-page .hero-content-wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; } body.home-page .hero .container { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: center !important; max-width: 600px !important; padding-bottom: 40px !important; } body.home-page .hero-subtitle { display: block !important; position: static !important; left: auto !important; margin-bottom: 10px !important; color: #333333 !important; font-size: 1.4rem !important; line-height: 1.4 !important; text-align: center !important; white-space: normal !important; } body.home-page .hero-title-blue { display: block !important; color: #4273DB !important; font-size: 3rem !important; line-height: 1.2 !important; text-align: center !important; margin: 5px 0 !important; } body.home-page .badges, body.home-page .tags, body.home-page .hero-buttons { visibility: visible !important; opacity: 1 !important; } body.home-page .hero-buttons { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; } body.home-page #sugi-notif-badge, #sugi-notif-btn #sugi-notif-badge, #sugi-notif-badge { color: #ffffff !important; } /* Unified notification bell style for all pages */ #sugi-notif-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } #sugi-notif-btn { background: none; border: none; cursor: pointer; color: #333; font-size: 20px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; } #sugi-notif-btn:hover { color: #111; } #sugi-notif-wrap.sn-floating { position: fixed; top: 90px; right: 24px; z-index: 9990; } #sugi-notif-wrap.sn-floating #sugi-notif-btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e4e7ec; box-shadow: 0 2px 10px rgba(0,0,0,.12); } #sugi-notif-btn #sugi-notif-badge, #sugi-notif-badge { position: absolute; top: -4px; right: -3px; background: #e60012; color: #fff !important; border-radius: 9px; min-width: 14px; height: 14px; font-size: 9px; font-weight: 500; line-height: 14px; box-sizing: border-box; display: none; align-items: center; justify-content: center; padding: 0 4px; border: 1px solid white; } .header-right #sugi-notif-wrap { margin-right: 14px; } body.home-page .hero-image-section { display: block !important; visibility: visible !important; opacity: 1 !important; flex-shrink: 0 !important; width: 45% !important; max-width: 500px !important; margin: 0 0 0 40px !important; text-align: center !important; } body.home-page .hero-main-image-wrap { position: relative !important; } body.home-page .hero-coupon-button { position: absolute !important; top: 12px !important; left: -18px !important; z-index: 2 !important; display: block !important; width: clamp(160px, 48%, 260px) !important; line-height: 0 !important; transform-origin: center center !important; animation: coupon-pop 2.4s ease-in-out infinite !important; transition: transform 0.2s ease !important; } body.home-page .hero-coupon-button:hover { transform: translateY(-2px) !important; } body.home-page .hero-image-section img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } body.home-page .hero-image-section .hero-coupon-button img { width: 100% !important; max-width: none !important; height: auto !important; } body.home-page .specs-bar-wrapper { display: flex !important; width: fit-content !important; max-width: 100% !important; overflow: hidden !important; animation: floatRightToLeft 30s linear infinite !important; } body.home-page .specs-bar .container { display: flex !important; flex-shrink: 0 !important; gap: 160px !important; max-width: none !important; padding: 0 !important; } body.home-page .spec-item, body.home-page .spec-item img { width: 140px !important; height: 140px !important; } body.home-page .lineup, body.home-page .case-studies, body.home-page .news-section { position: relative !important; } body.home-page .lineup-grid, body.home-page .case-grid, body.home-page .news-box { visibility: visible !important; opacity: 1 !important; } body.home-page .lineup-title-main, body.home-page .section-title, body.home-page .case-studies h2 { visibility: visible !important; opacity: 1 !important; } .faq-section > .container > h2, .pvc-faq-section .pvc-section-heading > h2.pvc-compact-heading { font-size: 1.48rem !important; font-weight: 700 !important; line-height: 1.35 !important; } .contact-section > .container > h2 { font-size: 1.56rem !important; font-weight: 700 !important; line-height: 1.35 !important; } @media (max-width: 768px) { body.home-page .hero-content-wrapper { flex-direction: column !important; align-items: center !important; text-align: center !important; } body.home-page .hero .container { max-width: 100% !important; margin-bottom: 30px !important; padding-bottom: 0 !important; } body.home-page .hero-title-blue { font-size: 2rem !important; } body.home-page .hero-image-section { width: 90% !important; max-width: 400px !important; margin: 0 auto !important; } body.home-page .specs-bar-wrapper { animation-duration: 20s !important; } body.home-page .specs-bar .container { gap: 100px !important; } body.home-page .spec-item, body.home-page .spec-item img { width: 100px !important; height: 100px !important; } .faq-section > .container > h2, .pvc-faq-section .pvc-section-heading > h2.pvc-compact-heading { font-size: 1.32rem !important; } .contact-section > .container > h2 { font-size: 1.32rem !important; } } /* Final FAQ module alignment based on non-laminated-card-detail.html. */ html body .faq-section { margin-bottom: 0 !important; padding: 72px 0 62px !important; background: transparent !important; } html body .pvc-faq-section { padding-bottom: 62px !important; } html body .pvc-faq-section .faq-section { padding: 0 !important; background: transparent !important; } html body .faq-section > .container { max-width: 1440px !important; } html body .faq-section > .container > h2, html body .pvc-faq-section .pvc-section-heading > h2.pvc-compact-heading { margin: 0 0 42px !important; color: #111827 !important; font-size: 1.48rem !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; letter-spacing: 0 !important; } html body .faq-section > .container > h2::after { content: ""; display: block; width: 56px; height: 4px; margin: 18px auto 0; border-radius: 999px; background: linear-gradient(90deg, #4c78f2, #8db1ff); } html body .faq-section .faq-container, html body .faq-section .faq-list { max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; } html body .faq-section .faq-item { margin-bottom: 15px !important; overflow: hidden !important; border: 1px solid rgba(76, 120, 242, 0.08) !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 12px 26px rgba(50, 74, 124, 0.08) !important; } html body .faq-section .faq-question { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; padding: 24px !important; background: #ffffff !important; cursor: pointer !important; transition: background-color 0.2s ease !important; } html body .faq-section .faq-question:hover { background: #f8faff !important; } html body .faq-section .faq-question h3 { flex: 1 1 auto !important; margin: 0 !important; color: #101828 !important; font-size: 1.08rem !important; font-weight: 600 !important; line-height: 1.65 !important; letter-spacing: 0 !important; } html body .faq-section .faq-toggle { flex: 0 0 auto !important; min-width: 25px !important; color: #315fd9 !important; font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; transition: transform 0.3s ease !important; } html body .faq-section .faq-answer { max-height: 0; overflow: hidden !important; padding: 0 !important; background: #ffffff !important; transition: max-height 0.3s ease !important; } html body .faq-section .faq-item.active .faq-answer { max-height: 800px !important; padding: 0 !important; } html body .faq-section .faq-answer p { margin: 0 !important; padding: 0 24px 24px !important; color: #475467 !important; font-size: 1rem !important; line-height: 1.9 !important; } @media (max-width: 768px) { html body .faq-section { padding: 48px 0 48px !important; } html body .pvc-faq-section .faq-section { padding: 0 !important; } html body .faq-section > .container { padding-left: 18px !important; padding-right: 18px !important; } html body .faq-section > .container > h2, html body .pvc-faq-section .pvc-section-heading > h2.pvc-compact-heading { margin-bottom: 32px !important; font-size: 1.32rem !important; } html body .faq-section .faq-question { padding: 18px !important; } html body .faq-section .faq-question h3 { font-size: 1rem !important; line-height: 1.6 !important; } html body .faq-section .faq-answer p { padding: 0 18px 18px !important; } } /* Final contact module alignment for bottom inquiry sections. */ html body .contact-section { padding: 72px 0 64px !important; background: #f6f9ff !important; text-align: center !important; overflow: visible !important; } html body .contact-section::before { display: none !important; } html body .contact-section > .container, html body.usage-detail-page .contact-section > .container, html body.usage-list-page .contact-section > .container { box-sizing: border-box !important; width: min(100% - 48px, 1440px) !important; max-width: 1440px !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } html body .contact-section > .container > h2 { margin: 0 0 42px !important; color: #111827 !important; font-size: 1.56rem !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; letter-spacing: 0 !important; } html body .contact-section > .container > h2::after { content: ""; display: block; width: 56px; height: 4px; margin: 18px auto 0; border-radius: 999px; background: linear-gradient(90deg, #4c78f2, #8db1ff); } html body .contact-section > .container > h2 + div, html body .contact-section .contact-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 400px)) !important; justify-content: center !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; max-width: 900px !important; margin: 0 auto !important; padding: 0 !important; } html body .contact-section .contact-box { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 100% !important; margin: 0 !important; padding: 30px 26px !important; border: 1px solid rgba(76, 120, 242, 0.08) !important; border-radius: 18px !important; background: #ffffff !important; box-shadow: 0 12px 26px rgba(50, 74, 124, 0.08) !important; color: #475467 !important; text-align: center !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } html body .contact-section .contact-box:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px rgba(50, 74, 124, 0.1) !important; } html body .contact-section .contact-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; margin: 0 auto 18px !important; border-radius: 999px !important; background: rgba(76, 120, 242, 0.1) !important; color: #315fd9 !important; font-size: 1.45rem !important; line-height: 1 !important; } html body .contact-section .contact-icon svg { width: 30px !important; height: 30px !important; margin: 0 !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important; } html body .contact-section .contact-icon-phone svg { width: 28px !important; height: 28px !important; } html body .contact-section .contact-box h3, html body .contact-section .contact-box h5 { margin: 0 0 12px !important; color: #101828 !important; font-size: 1.02rem !important; font-weight: 600 !important; line-height: 1.45 !important; } html body .contact-section .contact-box p { margin: 0 0 20px !important; color: #475467 !important; font-size: 0.92rem !important; line-height: 1.8 !important; } html body .contact-section .contact-box p:last-child { margin-bottom: 0 !important; } html body .contact-section .phone-number { display: block !important; margin: 0 0 8px !important; color: #111827 !important; font-size: 1.52rem !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; } html body .contact-section .btn-blue { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 200px !important; max-width: 220px !important; width: auto !important; min-height: 46px !important; margin-top: auto !important; padding: 0 22px !important; border: 0 !important; border-radius: 14px !important; background: linear-gradient(135deg, #4c78f2, #315fd9) !important; color: #ffffff !important; font-size: 0.9rem !important; font-weight: 700 !important; line-height: 1.35 !important; box-shadow: none !important; } html body .contact-section .btn-blue:hover { border: 0 !important; background: linear-gradient(135deg, #3564df, #244fc3) !important; color: #ffffff !important; } @media (max-width: 768px) { html body .contact-section { padding: 48px 0 48px !important; } html body .contact-section > .container, html body.usage-detail-page .contact-section > .container, html body.usage-list-page .contact-section > .container { width: min(100% - 36px, 1440px) !important; } html body .contact-section > .container > h2 { margin-bottom: 32px !important; font-size: 1.32rem !important; } html body .contact-section > .container > h2 + div, html body .contact-section .contact-grid { grid-template-columns: 1fr !important; max-width: 420px !important; } html body .contact-section .contact-box { padding: 26px 20px !important; } html body .contact-section .phone-number { font-size: 1.34rem !important; } } /* Company page title scale. */ html body .company-main .page-header h1 { font-size: 1.72rem !important; font-weight: 600 !important; line-height: 1.35 !important; } html body .company-main .page-subtitle { font-size: 1rem !important; line-height: 1.7 !important; } html body .company-main .company-section h2 { font-size: 1.32rem !important; font-weight: 600 !important; line-height: 1.35 !important; } html body .company-main .quality-item h3 { font-size: 0.98rem !important; font-weight: 600 !important; line-height: 1.45 !important; } html body .company-main .philosophy-item h3, html body .company-main .access-info h3 { font-size: 0.98rem !important; font-weight: 600 !important; line-height: 1.45 !important; } @media (max-width: 768px) { html body .company-main .page-header h1 { font-size: 1.44rem !important; } html body .company-main .page-subtitle { font-size: 0.9rem !important; } html body .company-main .company-section h2 { font-size: 1.18rem !important; } html body .company-main .quality-item h3 { font-size: 0.96rem !important; } html body .company-main .philosophy-item h3, html body .company-main .access-info h3 { font-size: 0.96rem !important; } } @media (max-width: 480px) { html body .company-main .page-header h1 { font-size: 1.28rem !important; } html body .company-main .page-subtitle { font-size: 0.86rem !important; } html body .company-main .company-section h2 { font-size: 1.08rem !important; } html body .company-main .quality-item h3 { font-size: 0.92rem !important; } html body .company-main .philosophy-item h3, html body .company-main .access-info h3 { font-size: 0.92rem !important; } } /* 修正首页右下角可能出现的黑色区域（通常由 vConsole 调试工具或加载失败的第三方组件引起） */ #vConsole, .__vconsole, [id*="vConsole"], [class*="vConsole"], .v-console-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* 全ページ共通の縦型FAQボタン文字色を白に固定する（他のルールに上書きされないように） */ .vertical-faq-btn .vertical-faq-link, a.vertical-faq-link { color: #ffffff !important; } /* 上と同じ理由でhover時も白を明示的に固定する。 :hover擬似クラスが付くと「a:hover」側のセレクタ詳細度がこのブロックの base状態向けの詳細度を上回ってしまい、hover時だけ文字が別ルールの 青色に上書きされて背景色（同じく青）と同化して読めなくなる問題があった。 */ .vertical-faq-btn .vertical-faq-link:hover, a.vertical-faq-link:hover { color: #ffffff !important; } /* Frontend UI stability layer. Keeps shared buttons, toast messages, and logged-in user menus readable even when older generic rules force div/span/a colors and font sizes. */ /* Toast/notification/alert styling is unified globally by js/auth-menu.js (injectUnifiedToastStyles) */ body:not(.admin-page):not(.admin-layout) button, body:not(.admin-page):not(.admin-layout) .btn, body:not(.admin-page):not(.admin-layout) .btn-primary, body:not(.admin-page):not(.admin-layout) .btn-blue, body:not(.admin-page):not(.admin-layout) .btn-yellow, body:not(.admin-page):not(.admin-layout) .btn-outline, body:not(.admin-page):not(.admin-layout) .btn-outline-wide, body:not(.admin-page):not(.admin-layout) .btn-secondary, body:not(.admin-page):not(.admin-layout) .upload-btn, body:not(.admin-page):not(.admin-layout) .btn-login, body:not(.admin-page):not(.admin-layout) .btn-register, body:not(.admin-page):not(.admin-layout) .btn-get-code, body:not(.admin-page):not(.admin-layout) .btn-social { box-sizing: border-box !important; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.25 !important; text-align: center; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere; flex-shrink: 0; } body:not(.admin-page):not(.admin-layout) .mobile-menu-toggle { display: none !important; } @media (max-width: 768px) { body:not(.admin-page):not(.admin-layout) .mobile-menu-toggle { display: block !important; } } body:not(.admin-page):not(.admin-layout) .btn-primary, body:not(.admin-page):not(.admin-layout) .btn-primary *, body:not(.admin-page):not(.admin-layout) .btn-blue, body:not(.admin-page):not(.admin-layout) .btn-blue *, body:not(.admin-page):not(.admin-layout) .upload-btn, body:not(.admin-page):not(.admin-layout) .upload-btn *, body:not(.admin-page):not(.admin-layout) .btn-login, body:not(.admin-page):not(.admin-layout) .btn-login *, body:not(.admin-page):not(.admin-layout) .pvc-home-estimate-btn, body:not(.admin-page):not(.admin-layout) .pvc-home-estimate-btn * { color: #ffffff !important; } body:not(.admin-page):not(.admin-layout) .btn-outline, body:not(.admin-page):not(.admin-layout) .btn-outline *, body:not(.admin-page):not(.admin-layout) .btn-outline-wide, body:not(.admin-page):not(.admin-layout) .btn-outline-wide *, body:not(.admin-page):not(.admin-layout) .pvc-home-sample-btn, body:not(.admin-page):not(.admin-layout) .pvc-home-sample-btn *, body:not(.admin-page):not(.admin-layout) .btn-social, body:not(.admin-page):not(.admin-layout) .btn-social * { color: #1f2937 !important; } /* .btn-outlineはhover時も背景が薄い色（#f0f4ff等）のまま変わらず、文字色は青のまま （.btn-outline:hover, .pvc-home-sample-btn:hover等が個別に定義）——.btn-outline-wideは hover時に背景が濃い青に変わるため白文字が必要だが、.btn-outlineには同じ扱いをしては いけない。ここに.btn-outline:hoverも含めてしまうと、bodyセレクタ分だけ詳細度が上がり 個別定義の青文字を強制的に白へ上書きしてしまい、薄い背景の上に白文字が乗って 読めなくなる（実際に発生したバグ——サンプル請求/注文内容を入力する/料金表ページで 詳しく見る、等の.btn-outlineボタン全般に影響していた）。 */ body:not(.admin-page):not(.admin-layout) .btn-outline-wide:hover, body:not(.admin-page):not(.admin-layout) .btn-outline-wide:hover * { color: #ffffff !important; } /* .btn-google:hoverは背景が赤に変わるため、通常時の.btn-social強制色(#1f2937)より 白文字を優先させる（.btn-outline:hoverと同じ理由・同じパターン） */ body:not(.admin-page):not(.admin-layout) .btn-google:hover, body:not(.admin-page):not(.admin-layout) .btn-google:hover * { color: #ffffff !important; } /* .btn-secondary stays gray-bg/black-text at rest AND on hover (no invert) */ body:not(.admin-page):not(.admin-layout) .btn-secondary, body:not(.admin-page):not(.admin-layout) .btn-secondary *, body:not(.admin-page):not(.admin-layout) .btn-secondary:hover, body:not(.admin-page):not(.admin-layout) .btn-secondary:hover * { color: #333333 !important; } body:not(.admin-page):not(.admin-layout) .user-menu, body:not(.admin-page):not(.admin-layout) .user-menu * { box-sizing: border-box !important; font-size: inherit !important; } body:not(.admin-page):not(.admin-layout) .user-avatar-btn { width: 44px; height: 44px; min-height: 44px; padding: 8px !important; border-radius: 50% !important; background: transparent !important; color: #4a90e2 !important; } body:not(.admin-page):not(.admin-layout) .user-avatar-btn svg { width: 28px; height: 28px; color: #4a90e2 !important; } body:not(.admin-page):not(.admin-layout) .user-dropdown { width: 240px; min-width: 220px; background: #ffffff !important; color: #333333 !important; } body:not(.admin-page):not(.admin-layout) .user-dropdown, body:not(.admin-page):not(.admin-layout) .user-dropdown *, body:not(.admin-page):not(.admin-layout) .user-info, body:not(.admin-page):not(.admin-layout) .user-info * { color: #333333 !important; } body:not(.admin-page):not(.admin-layout) .user-info .user-email { color: #666666 !important; font-size: 13px !important; } body:not(.admin-page):not(.admin-layout) .dropdown-item { min-height: 40px; display: flex !important; align-items: center; padding: 10px 20px !important; color: #333333 !important; white-space: normal !important; } body:not(.admin-page):not(.admin-layout) .dropdown-item:hover { color: #4a90e2 !important; } body:not(.admin-page):not(.admin-layout) #logoutBtn, body:not(.admin-page):not(.admin-layout) #logoutBtn * { color: #dc3545 !important; } body:not(.admin-page):not(.admin-layout) #logoutBtn:hover, body:not(.admin-page):not(.admin-layout) #logoutBtn:hover * { color: #c82333 !important; } /* Toast/notification/alert styling (including mobile breakpoints) is unified globally by js/auth-menu.js (injectUnifiedToastStyles) */ /* Reveal side actions only after the visitor starts reading the page. */ .home-floating-contact, .floating-coupon-button { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .home-floating-contact { transform: translateY(18px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s; } .floating-coupon-button { animation-play-state: paused !important; } .home-floating-contact.is-visible, .floating-coupon-button.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transition-delay: 0s; } .home-floating-contact.is-visible { transform: translateY(0); } .floating-coupon-button.is-visible { animation-play-state: running !important; } /* Corner floating widgets (coupon button, contact CTA) are homepage-only. */ body:not(.home-page) .floating-coupon-button, body:not(.home-page) .home-floating-contact, body:not(.home-page) .floating-action { display: none !important; }