/* Theme Name: PLUREVO JAPAN Child Theme URI: https://plurevo.jp/ Template: swell Author: PLUREVO JAPAN Description: PLUREVO JAPAN corporate site child theme, based on SWELL. Contains the PLUREVO brand design system (colors, typography, header/mega-menu, cards, contact form, floating CTA, footer, responsive rules). Version: 1.82.0 Text Domain: plurevo-swell-child v1.14.0 - Per-page SEO pass: new keyword-targeted sections/FAQs on all pages (OEM vs ODM vs PB, rental vs purchase, onda-lift RF/cooling, etc.), rewritten titles/descriptions, Contact hero. v1.82.0 - Device pages (13): the 購入（仕入れ）・レンタル・研修・サポート link moved from above the closing contact to the end of 導入方法 (after the flow), as a quiet text link; type set like the TOP page — section titles serif regular 28px, item titles serif 17px, body text 13.5px grey regular, small grey English labels, lighter notes; more room between columns and between title and text. v1.81.0 - Device pages (13): one description instead of three — the lead under the breadcrumb moved into 「◯◯とは」 (replacing its shorter text), the 要点 box removed (its facts are in the spec / sections / FAQ); the area under the breadcrumb keeps only the in-page menu. v1.80.0 - Device pages (13) breathe more: wider side margins on PC / tablet (up to 96px), taller sections (136px top / bottom), more room under headings; spec tables centred in an 880px column with a 200px label column and taller rows; handpiece specs as label / value rows (value left, not pushed right); long text, notes and sub-headings in the same 880px column. v1.79.0 - Product cut-outs bundled (assets/placeholders/TOP_PRODUCT_*.jpg, 1200×1200 on white): RESHOT_NEO, GROW_AQUA, LDM_DOTLIFT, INDYWAVE, M22, LDM, PICO_NEO, PICO_PRO, CARESYS, PELVIC_CHAIR, KANNAM_VISION, ONDA (OND Aesthetic pro), OND_NEO. Used on the TOP products, the related cards on every page and the photo of the こんな方におすすめ block on 10 device pages (old photo kept as fallback; a Media Library image with the same title still wins). Cut-outs blend into grey bands (multiply). v1.78.0 - Device pages (13): the top block under the intro is now RECOMMEND / こんな方におすすめ (product photo + check list, editable in 外観 → 機器ページ（おすすめ・BA）, inc/device-extras.php); the spec appears once — overview-only rows merged into the lower #spec, or a new #spec section (and 仕様 in the in-page menu) on the 7 pages that had none. BEFORE / AFTER section after the photo gallery: pairs of photos + caption + note, picked in the admin (drag to reorder, 4+ = slider); hidden for visitors while empty, dashed hint for logged-in users; fixed note 写真は個人の結果です。効果・体感には個人差があります。 v1.77.0 - Device pages (13): 'X とは' split into blocks — intro (title + text), overview (spec + photo), points (each with a photo frame, _POINT_01-04); photo frames on modes / RF / filters / frequencies / menus (tables turned into photo cards, all text kept: _
_NN) and on flow / menu steps; notes kept. Related lists on all pages show product cut-outs (TOP_PRODUCT_*) or service photos. Empty photo frames: hidden for visitors, dashed frame with the Media Library title for logged-in users. v1.76.0 - Common parts on all pages in the TOP style (first views and header unchanged): closing contact band on 43 pages replaced by the TOP contact on the salon photo (page title and text kept; form / LINE buttons, phone, mail, address; photo TOP_CONTACT_BG); RELATED PRODUCTS / PAGES as quiet rows (no boxes, arrows); section headings with small grey English label and no rule; lighter body text; card titles in serif regular; pill buttons inside the content. v1.75.0 - TOP 取扱商品 editable in 外観 → TOP 取扱商品 (inc/top-products.php): per category English title, Japanese line, ALL button label / link, products with image (media picker; falls back to the TOP_PRODUCT_* slot or the current photo), name, tag, link, drag to reorder, add / delete, reset to the 12 defaults. 5 or more products in a category: slider on PC (arrows, dots), swipe on phones; every product stays in the HTML. Beyond Selection block photo: TOP_BRAND_PHOTO (bundled). v1.74.0 - TOP: 取扱商品 lead now 仕入れ・卸・レンタル・リースのご相談にも対応します。; the grey development band replaced by SUPPORT cards (photo with white space + pill button): OEM・ODM 自社ブランドの商品を開発する (/oem-odm/), BUSINESS SUPPORT FC展開・クリニック・エステ開業支援について相談する (/business-support/), REPAIR 他社製の美容機器の修理を相談する (/repair/); photos TOP_CTA_OEM / TOP_CTA_SUPPORT / TOP_CTA_REPAIR (current photos until uploaded); the band's other links moved under the business tiles; lighter description text (strengths, category lines, related links) so it reads apart from the headings. v1.73.0 - TOP: 目的から探す removed (it repeated 事業一覧; its links moved below the products); ABOUT PLUREVO / PLUREVO（プルレボ）とは with the company description and links to /about/ and /company/ right under the first view; image note under the business tiles removed; 取扱商品: more room under the heading, lead smaller and lighter on one line, no rules between categories, more room above each ALL button, new band under the products (自社ブランドとしても開発 / 小ロットから対応 / FC展開・開業支援 with links to OEM, flow, FAQ, FC, salon / clinic opening, partner); the block above the FAQ keeps only Beyond Selection + the 3 strengths (company facts list removed). v1.72.0 - Header follows the scroll on every PLUREVO page (sticky; the black top bar scrolls away; WordPress admin bar offset; anchor offset). TOP: first-view buttons removed (products follow right below and the contact button is fixed); 取扱商品 on white, product photos take TOP_PRODUCT_ cut-outs when uploaded (current photos until then); new よくあるご質問 block with 8 questions (answers from the existing pages, FAQPage data 8) above the contact; contact on a salon photo (TOP_CONTACT_BG, until then TOP_FV_01) with form / LINE buttons, phone, mail and address; 事業一覧 band silver grey. v1.71.0 - TOP 取扱商品 by category instead of tabs: BEAUTY DEVICES (オンダリフト, Reshot Neo, Skin Pro, カンナムビジョン), CLINIC DEVICES (M22+, LDM+, PICO PLATINUM PRO, 骨盤底筋トレーニングチェア), PROFESSIONAL PRODUCTS (WHITE MILK SPA, MELLARIS, DAVINCI, Seamless Skin); each an English title + one Japanese line (H3), 4 products with photo, name and #tag, and an ALL button to /devices/, /devices/#clinic-devices, /professional/. Phones: products swipe sideways (about 2 visible). Tab script removed. v1.70.0 - TOP: 事業を支えるサービス replaced by 事業一覧 (#business) after 目的から探す: five full-width image tiles Machine (/devices/), Cosmetic (/professional/), OEM・ODM (/oem-odm/), Consulting (/business-support/), Repair (/repair/), photos toned silver monochrome, English name + Japanese H3 + one line as HTML text; 2 columns on phones. Links of the old section kept in a line under the tiles (化粧品OEM, 美容機器OEM, 開発の流れ, 導入・仕入れ, 美容機器レンタル, FC化支援). v1.69.0 - TOP page below the first view rebuilt into 5 sections (header, menu and first view unchanged): 目的から探す (6 purposes, text only), 取扱商品 (tabs: 美容機器 / クリニック向け美容機器 / サロン向け業務用商材, 3 products each + VIEW ALL to /devices/, /devices/#clinic-devices, /professional/; link to /products/ and /home-care/; every panel in the HTML, all shown without script), 事業を支えるサービス (OEM・ODM / レンタル・修理 / 開業・事業展開), PLUREVO（プルレボ）とは (company description kept word for word, Beyond Selection line, 3 strengths, company facts), お問い合わせ・ご相談 (form / LINE / TEL + 3 FAQ, FAQPage JSON-LD). Trust strip, OUR BUSINESS, PHILOSOPHY, WHY PLUREVO and the 4 product cards merged into these sections; all links kept. Title, description, URLs unchanged. v1.68.0 - Device pages, Onda Lift build-out (only facts already on the site): Reshot Neo handpieces as photo rows (HR / SR / VR, photos RESHOT_NEO_HANDPIECE_HR/SR/VR); comparison tables with in-page menu link 違い・比較 (#compare): Skin Pro ⇔ grow Aqua, エステ版POTENZA ⇔ indywave 448k, LDM DOTLIFT ⇔ LDM+, photo22 ⇔ M22+, PICO NEO ⇔ PICO PLATINUM PRO; photo gallery slider after the overview on 13 device pages (_GALLERY_01-06, hidden until a photo is uploaded); optional photos on Skin Pro functions (SKIN_PRO_FUNCTION_01-07) and grow Aqua steps (GROW_AQUA_STEP_01-05); Kannam Vision analysis images as a slider; section bands re-alternated; slider skips slides without a photo. No page text removed; SEO titles, JSON-LD, FAQ and forms unchanged. v1.67.0 - TOP first view slimmed to the English line, title and buttons (title no longer breaks mid-word on phones; text starts lower on phones). The company description moved, unchanged, into a new "PLUREVO（プルレボ）とは" section before 目的から探す, with the TOP_IMAGE_1 photo and a link to /about/. v1.66.0 - TOP first view: full-screen photo slideshow (8 photos, fade + slow zoom, 6s each, CSS only, stops for reduced motion) with the photos toned silver monochrome; soft white veil keeps the existing dark copy readable; title 40px / 25px on phones; same H1, text and buttons. Photos are TOP_FV_01-08 (Media Library first, theme fallback). v1.65.0 - Adopted design: first view keeps the photo with a smaller title (30px / 19px on phones) and height (320px / 200px); calmer section spacing (96px / 64px) and headings (26px / 20px) with a short rule; in-page menu as pills; equal-width buttons (stacked full width on phones); phones read left-aligned; table header row; new horizontal slider (.pv-slider: arrows, dots, swipe, keyboard, reduced motion); Onda Lift: new ハンドピースのご紹介 and 施術可能部位 sections, case photos as a slider. No page text removed. v1.64.0 - Header: no word breaks in the menu, tighter menu spacing (header aligned to the 1200px content width), hamburger menu up to 1200px; wide split stacks on phones (fixes ABOUT / OEM・ODM breaking around 900px). Layout consistency on all pages: container widths 1280/1040 -> 1200, 900 -> 880; paragraph widths 480-680 -> 640; paragraph sizes 11-14px -> 13/14/15px; notes #8B9096 -> #6B6B6B; section headings 30/34 -> 32px, sub headings 24/28 -> 26px. v1.63.0 - Privacy policy page: template-privacy.php (PLUREVO プライバシーポリシー) + template-parts/plurevo-privacy.php (12 sections, contents list, contact window), SEO entry, page-setup entry (/privacy-policy/); footer link on all pages; contact form consent links to the policy. v1.62.0 - 301 redirects for old URLs still in Search Console: /salon/relip/ -> /professional/melanin-care/, /flow/ -> /oem-odm/flow/, /faq/ -> /oem-odm/faq/ (also excluded from the sitemap). v1.61.0 - Repair page: new first-view photo (beauty devices lined up); workbench / staff photos moved from full-width into the left heading column (pv-side-photo, 4:3, sticky on desktop) like the OEM / FC pages. v1.60.0 - Repair page: free estimate (shipping only), nationwide, repair period 1 week - 2 months, loaner device (daily fee + shipping) in lead / key points / flow / FAQ (+3) / Service JSON-LD / SEO title & description; staff photo in after-support block. v1.59.0 - Repair page SEO / AIO: title / description / H1 with 美容機械; answer-first lead; 要点 box; new sections 症状から探す (#symptoms), メーカー修理とPLUREVOへの修理相談 (#maker-or-plurevo), お問い合わせ前のチェックリスト (#before-repair); 5 FAQs; Service JSON-LD alternateName / OfferCatalog (published price guide) / terms; repair photos bundled as placeholders. v1.58.0 - Page setup tool: does not create a page when the same slug (incl. slug-2 …, __trashed) or the same template exists elsewhere in any status incl. trash; shows 別の場所に同じページあり with edit links. v1.57.0 - Page setup tool: 外観 → PLUREVO ページ設定 lists expected pages (URL / slug / parent / template / status); creates missing pages (published, parent + template) and optionally fixes template mismatches. New file inc/page-setup.php. v1.56.0 - Group 01 devices are for salons and clinics: heading 01｜美容機器（サロン・クリニック向け） (menus, products index); Reshot Neo / onda lift / Kannam Vision / devices page wording; Service audience; rental lineup facility; Reshot Neo SEO description. v1.55.0 - PRODUCTS mega menu: removed the small product-name labels; title row (商品・サービス一覧 / すべて見る), group headings with rules, 3 even columns, larger line spacing. v1.54.0 - Contact page layout: two columns on desktop (contact methods: LINE / TEL / MAIL / after sending | form), generous spacing, 必須 badges, larger inputs, sticky side column; single column on tablet / phone with 16px gutters. Form fields and handler unchanged. v1.53.0 - New page アートメイク・カバーアップ（Seamless Skin）(/professional/seamless-skin/, template-seamless-skin.php): summary, about, concerns, 3 devices, color matching, menu sizes, spec, introduction flow, legal check, 8 FAQ; Breadcrumb / FAQ / Service JSON-LD. Menu (mega / mobile), products index + ItemList, Organization offer catalog. Header: LINE button (desktop) and compact LINE link (mobile). Mobile accordion max-height 2400px. v1.52.0 - PRODUCTS menu (mega / mobile) and products page index restructured into 5 groups: 01 美容機器・サロン向け / 02 クリニック向け美容機器 / 03 レンタル・購入・リース / 04 PROFESSIONAL PRODUCTS / 05 HOME CARE. Index heading 商品・サービス一覧; ItemList rebuilt. DAVINCI labelled 施術用美容液 (no fat-dissolving claim). v1.51.0 - Structured data (SEO/AIO): page entity on every page (WebPage / AboutPage / ContactPage / CollectionPage / ProfilePage with name, description, dates, image); representative Person (@id); Organization founder @id and hasOfferCatalog (14 services); Service on onda-lift, davinci, melanin care, peeling; ItemList on products. v1.50.0 - WHITE MILK SPA: SEO/AIO for 全身ホワイトニング・スキンブライトニング・美白・クリーム・OEM・FC (title/description, H1 sub, summary box, sections SKIN BRIGHTENING (difference from 美白), OEM, FRANCHISE, 5 FAQ, Service JSON-LD). Cosmetics: no 美白 efficacy claim. Edited the generated template part directly. v1.49.0 - MELLARIS: 施術事例 section (lips 3 cases, elbows 4 cases) with age / number of treatments and disclaimers; .pv-gallery--cases / --4. v1.48.2 - MELLARIS: MELLARIS JAPAN合同会社 has the same representative as PLUREVO JAPAN (白坂 悠太); note and FAQ. v1.48.1 - MELLARIS: products are cosmetics made in Japan (区分 per product, FAQ, summary); official product names; Clear Booster / Shiny White Cream / Pink Repair Cream details from the toB sheet (アスタキサンチン, ビタミンC誘導体, アルブチン, VIO use); brand owner MELLARIS JAPAN合同会社. v1.48.0 - New page MELLARIS (/professional/melanin-care/mellaris/, template-mellaris.php): 第5世代型メラニンケア, melanin care basics, areas, product lineup with photos, MELLA RAY, ingredients, flow, comparison, introduction cost/training, 12 FAQ; Service (brand) JSON-LD. Melanin care hub: lead / brand card link, wording softened (no melanin suppression claim), SEO title. Menu, index links. v1.47.0 - Opening support pages: franchise covers both joining the PLUREVO franchise and supporting multi-store expansion / own FC (menu item, summary, FAQ, notes). Business support cards, FC page summary and SEO descriptions updated. v1.46.0 - New pages クリニック開業支援 (/business-support/clinic-opening/) and エステサロン開業支援 (/business-support/salon-opening/): summary, support menu, flow, related devices/services, notes, FAQ; Service JSON-LD. Cards on the business support page; mega/mobile/footer menu links; Organization knowsAbout. v1.45.0 - LINE inquiry (https://lin.ee/SuArGhv): button next to お問い合わせ in every page CTA, mobile menu and footer links, LINE box on the contact page, LINE ContactPoint in Organization JSON-LD. v1.44.0 - One page per device: エステ版POTENZA, grow Aqua, LDM DOTLIFT, photo22, indywave 448k, カンナムビジョン (content moved from /devices/), M22+, LDM+, PICO NEO, PICO PLATINUM PRO, CARESYS+, 骨盤底筋トレーニングチェア (/devices//). Each page: summary box (AIO), overview, features, details, flow, introduction (rental/lease/purchase) and support, FAQ; Service + Breadcrumb + FAQ JSON-LD. ItemList JSON-LD on /devices/ and /introduction/rental/. All list/menu links point to the device pages. .pv-compare--4. v1.43.0 - New pages Reshot Neo (/devices/reshot-neo/, template-reshot-neo.php) and Skin Pro (/devices/skin-pro/, template-skin-pro.php). Rental page: RENTAL LINEUP index (#lineup) of all devices with rental/lease/purchase, Reshot Neo / Skin Pro cards. Devices page: SALON DEVICES section. PRODUCTS index, mega menu and mobile menu links. SEO entries. v1.42.0 - DAVINCI: 「3つの使い方」（機器と組み合わせ／ハンドマッサージ／ホームケア）と組み合わせ機器の例（キャビテーション・EMS・高周波・エアインジェクション・エステ版ダーマペン・エステ版ポテンツァ）を追加。FAQ・比較表・SEOを更新。オンダリフトページのDAVINCI画像をパッケージ写真に。 v1.41.1 - DAVINCI: 使うタイミングを修正（サロンでは塗布してから機器をあてる／仕上げ・ホームケアにも使用）。DAVINCIページの施術の流れ・FAQ・比較表、オンダリフトページの説明を更新。 v1.41.0 - DAVINCI: 製品資料に合わせて全面更新（製品名・パッケージ写真・全成分・OND×高周波×DAVINCIの施術プロトコル）。「痩身薬剤」「オイルベース」の表記を「アンプルエッセンス」に変更（メニュー・オンダリフト・PRODUCTS・SEO）。 v1.40.0 - New page DAVINCI (/devices/onda-lift/davinci/, template-davinci.php): product overview, combination with onda lift (flow, neo / pro), comparison of slimming solution types (topical vs injection), FAQ; links from the onda lift page, mega menu and PRODUCTS index; SEO entry. v1.39.0 - Rental page: salon rental lineup from the RENTAL COLLECTION 2026 (Esthetic POTENZA, grow Aqua, LDM DOTLIFT, photo22, indywave 448k) with photos and main specs, rental support section (training, operation support, maintenance, menu design) and notes; title/description; PRODUCTS index links. v1.38.0 - Products presented as products rather than own brands: peeling page H1 '業務用ピーリング商材', herb peeling section as '業務用ハーブピーリング（サロン向け）' with a buying (wholesale) point, peeling lineup table (#peeling-lineup), two FAQ items; salon products page wording; PRODUCTS page product index (#product-index) linking every product; '自社ブランド' labels -> 'ホームケア', 'その他自社商材' -> 'ホームケア商品'; mega menu links for herb / chemical peeling and clinic devices; titles and descriptions of peeling, salon products, PRODUCTS and home-care pages. v1.37.0 - Clinic devices: new section on the devices page (#clinic-devices) with M22+, LDM+, PICO NEO, PICO PLATINUM PRO, CARESYS+ and the pelvic floor training chair (photo, main specs, purchase / instalment / lease / rental, 7 after-support items, notes); summary lists on the introduction and rental pages; titles/descriptions of devices and rental pages. No efficacy claims, before/after photos, competitor comparisons or prices. v1.36.0 - Search Console queries: onda lift title/description for purchase (購入・仕入れ・業務用マシン) and FAQ (buying the machine, not a home device); devices page title/description and H2 '業務用AI肌診断機'; Organization founder (代表社員 白坂 悠太, as on the company page). v1.35.0 - OEM/ODM page: PLM section (#plm, planning > development > manufacturing > sales > improvement) with link to the development flow, FAQ 'PLMとは何ですか？', title and description with PLM; Organization knowsAbout adds PLM. v1.34.0 - Search Console fixes: Product data without price removed from onda lift, WHITE MILK SPA and melanin care (Google 'offers / review / aggregateRating required'); only JOUEBI keeps Product (with its listed price). Titles / descriptions of TOP, OEM-ODM, cosmetics OEM, device OEM, business support, FC and melanin care tuned for small-lot OEM/ODM, own-brand development, Saitama and FC package; new FAQ items (small-lot own brand, spot-care cosmetics, FC package) and short lead sentences. v1.33.0 - Repair page SEO: section 'Makers & machines' (#makers) with machine types and a makers/brands table (WAM: Hyper Knife / Hyper Knife 7, JIBUNde: CELL ZERO / Cellulite Zero, NBS, Dr.Visea, Takara Belmont, SEVEN BEAUTY, INDIBA, Force Cutter, Cavi Lipo, Comet Denki) marked as examples of accepted consultations, not a repair guarantee; medical devices (medical / laser hair removal, RF microneedle) no longer listed as repairable on the repair, contact and products pages; four concrete FAQ cases; title, description, H1 subtitle and Service data updated; links to device OEM and from the introduction page. v1.32.0 - Repair page: new section on repairing machines whose manufacturer warranty has ended (#warranty-expired) with example makers (NBS, Dr.Visea) and notes (not an authorised agent, trademarks, warranty, repairability); LDM and slimming machines added to the equipment list; three FAQ items; title, description and Service data updated. v1.31.0 - Photos on the text pages: PRODUCTS category cards (were empty grey areas), salon products category cards, peeling types, introduction methods, business support menu, OEM track records (cosmetics / devices) as photo cases, cosmetics OEM lot, device OEM scope, development flow, rental devices, About partner network figure, FC small-lot OEM. Image slots accept 'A__OR__B' (a dedicated photo A replaces the provisional photo B as soon as it is uploaded). New bundled images: BRAND_CARD (logo mark on silver, for items without a photo), COSMETICS_LINEUP_PHOTO. v1.30.1 - WordPress core sitemap (/wp-sitemap.xml) kept switched on even when the parent theme or another tool disables it (it returned 404 on the live site); not applied when an SEO plugin with its own sitemap is active or search engines are blocked in Settings > Reading. v1.30.0 - Logo images: horizontal logo in the header of every page (replaces the text logo and tagline), logo mark in the footer; files in assets/brand/ (web sizes + originals); Organization structured data gets the logo (square version). THEME_ASSET__ token in templates resolves to the theme's assets URL. v1.29.0 - SEO / AIO: new unique title and meta description for every page (written from each page's content); OGP completed (og:locale, og:site_name, og:image from the page header photo, twitter large image card) and printed only while no SEO plugin is active; canonical via get_canonical_url; noindex for held pages, the old salon template, author/date archives; attachment pages redirect; core XML sitemap (/wp-sitemap.xml) without users/taxonomies, without held/old-URL pages, with lastmod; Organization (@id, contactPoint, foundingDate) and WebSite (@id, publisher) linked by @id from Service/Product data; Service data added to OEM/ODM, cosmetics OEM, device OEM and repair; JOUEBI Product with the listed price; manufacturer not shown on the page removed from the melanin care data. H1 of every page names its topic (catch copy kept as a lead line), heading levels fixed on PRODUCTS and the home-care page, alt text added on TOP and several photos. v1.28.1 - Colour tone returned to the original monochrome silver: cool grey #F7F8FA bands, charcoal for numbers / small English headings / steps / table highlights (no green), silver-grey lines, original light closing CTA band. Layouts of v1.28.0 unchanged. v1.28.0 - Design and readability update (design system 2). Common layer for all PLUREVO pages: warm grey section bands, larger and darker body text, card grids without boxes (rule + large number), FAQ as accordions (FAQPage data unchanged), green closing CTA band, breadcrumb wrapping on phones, empty image frames never shown (slot-missing). Page layouts rebuilt from the existing text (no wording, price, spec or condition changed): repair, about, OEM/ODM, cosmetics OEM, device OEM, development flow (timeline), products, devices (neo/pro media + spec tables, dealer Q&A), onda lift (stats, mechanism steps, RF/HIFU/MW comparison, air vs water cooling table, sales flow), melanin care, WHITE MILK SPA (body-area tiles, photo steps, menu list, simulation table, salon-home cycle band), salon products, peeling, introduction, rental, business support, FC support. TOP: main visual unchanged; business cards use photos (repair photo slot with icon fallback); the news block lists the latest posts and is left out while there are none (no '[公開準備中]'). Image frames accept data-alt for alternative text. v1.27.0 - E-mail address on every page and in the Organization data changed to info@plurevo.co.jp. Contact form rebuilt: 11 enquiry types matching the site, furigana, company/shop, business type, preferred contact method, required consent checkbox, HTML required attributes; notifications go to info@plurevo.co.jp with the subject "【PLUREVO ホームページ】お問い合わせがありました：（様）" and the sender gets an acknowledgement e-mail. v1.26.0 - Home care page: herb peeling section rewritten for the home-use herb peeling JOUEBI (VILIFE deck): product photos, price 12,800 yen incl. tax, 15 g / 3-5 uses / every 10 days, 3 points, ingredients, salon retail (list price, up to 10% off, enquiry for wholesale), 4-step contract flow, FAQ updated + 1 added; peeling page link text updated. Rankings, sell-out stories, price comparisons, celebrity producer, before/after photos, herb efficacy claims and the wholesale table not carried over. v1.25.3 - AI skin analysis lease: own lending by PLUREVO (no leasing company), about 30,000 yen/month incl. tax, deposit separate, details on enquiry. Onda-lift: new product photos for neo (tabletop) and pro (stand) on the onda-lift and devices pages (padded to 4:3 so nothing is cropped). v1.25.2 - AI skin analysis lease wording: about 30,000 yen per month; the deposit (maintenance fee) is separate. v1.25.1 - AI skin analysis: introduction program block (hearing -> program design -> purchase or lease; lease plan (see v1.25.2); diagnosis results lead to PLUREVO device treatments and home care), 2 FAQs. v1.25.0 - Devices page: AI skin analysis section (カンナムビジョン, #kannam-vision) rebuilt from the Kangnam Vision deck and the HADA DOC sheet: device photo, specs (1 min, 17 items, report, QR/URL sharing), surface 9 / deep 8 / aging simulation, 20-image analysis gallery, counselling flow, use scenes, report features, 3 benefits, 3 FAQs; page title/description mention the device. Sales-outcome, price-comparison and "future risk" claims not carried over; "not a medical diagnosis" note added. v1.24.1 - Onda-lift: 8 real BEFORE/AFTER case photos (face line, upper arm, abdomen, waist) replace the 4 empty case frames; shown uncropped in square tiles, EXIF removed; "施術例" added to the in-page navigation. v1.24.0 - Photo page header on all sub-pages (TOP unchanged): directly under the header, background photo with a dark veil and the page's eyebrow + H1 centred in white HTML text; separate PC (16:5, PAGEHERO__PC) and phone (3:2, PAGEHERO__SP) photos via , phone falls back to the PC photo. Breadcrumb moved under the photo; the old hero image frame (16:7) and 21:9 banner under the hero removed so photos do not stack. Temporary photos cut from the client materials for 18 pages; onda-lift, devices, body whitening and repair show the dark band until photos are supplied. v1.23.0 - Onda-lift page updated to the latest OND Aesthetic deck: product names neo / pro, pro is the stand model for mid-to-large and specialist salons (clinics on request), new spec rows (8in display, 500W/600W, 100-220V, 7kg/30kg, body sizes), RF/HIFU/microwave comparison, 3 approaches, combination menus, certified instructors KAORI and YUKIKO, 18 FAQs; devices and device-OEM pages aligned. Mobile: info rows show label and value side by side (labels used to reserve 180px of height, leaving blank space), no doubled border between two-column spec lists, neo/pro comparison table fits the screen instead of scrolling sideways. v1.22.2 - Reading "プルレボ" added for katakana search: Organization/WebSite alternateName, TOP/About/Company titles and descriptions, first mention on TOP and About, reading on the Company name row, About FAQ "PLUREVOの読み方". v1.22.1 - Mobile menu: full-screen panel under a fixed header row, hamburger turns into a close icon, page scroll locked, floating CTA hidden while open, accordion panels no longer cut off at 320px. Copy: removed third-party wording ("according to maker materials") from onda-lift, melanin care and device pages. v1.22.0 - Temporary images: 54 image slots/frames show a picture cut from the client materials (assets/placeholders/) until a Media Library image titled with the slot label exists; before/after case frames and slots without suitable material keep the frame. Disable with the plurevo_use_placeholders filter. v1.21.1 - Menus, TOP card and related cards link to the onda-lift page (/devices/onda-lift/) instead of the /devices/#ond-aesthetic anchor. v1.21.0 - Onda-lift page rebuilt from the OND Aesthetic neo / PRO / DAVINCI materials: in-page navigation, neo vs PRO comparison table, neo full specs, PRO recommended plan, facial/body areas, DAVINCI section, treatment flow, 15 FAQs; outdated figures (42-47C, monthly visits, 17 min) replaced. Dashed IMAGE frames on every page now show the Media Library image titled with the frame label (falls back to the frame). v1.20.2 - Melanin care page rewritten for two brands (MELLARIS for salons, Re:lip for dental/clinics) from the maker decks: brand comparison, treatment areas, all 9 listed ingredients, training/instalment/OEM FAQs; unsupported claims (fastest-in-industry, 3-5 day downtime) dropped; page label updated on linking pages. URL and template file unchanged. v1.20.1 - Audit fixes: redirects never let WordPress URL-guessing misroute (302 to the current page until a move is done), keep query strings, skip non-GET/preview/Customizer; contact forms now submit (admin-post + wp_mail, honeypot); image slots fall back to a grey placeholder or a Media Library image titled with the slot label; no duplicate floating CTA on TOP. v1.20.0 - Final URL structure: /devices/, /devices/onda-lift/, /professional/ (salon page merged), /introduction/ + /introduction/rental/ split again; 14 permanent 301s (run before WP URL guessing) + 6 temporary 302s for the migration window; ABOUT/SUPPORT menus and 4-column footer; hop chips and duplicate related blocks removed; unconfirmed rental terms removed; members/self-whitening/consulting pages held. v1.19.4 - ABOUT added to menu (before OEM); 導入・購入・レンタル and 美容機器レンタル merged into /introduction/ (#rental), /introduction/rental/ 301s there. v1.19.3 - PRODUCTS menu reorganised (sub-labels, 全身ホワイトニング single link); RELATED PRODUCTS + OEM guidance blocks on product/OEM pages. v1.19.2 - TOP page: in-page anchor links (#products/#oem-odm/#repair/#contact) now navigate to the actual pages. v1.19.1 - Redirect /devices/ to /devices/professional/. v1.19.0 - Mobile UX pass: phrase-aware line breaks (BudouX), horizontal sliders for card rows, compact spacing, 2-col footer, nowrap buttons, "more pages" chip row on every page, image banner slots on new pages. v1.18.1 - Existing pages enriched: device rental target machines, training/after-support, chemical peel lineup on salon products, FAQ on custom formulation. v1.18.0 - URL restructure (301 map, only active when the new page exists), repair links open in new tab, rental target devices, training/after-support, development period unified to 1-2 months, manufacturing licence FAQ updated. v1.17.0 - Content depth pass: FC/consulting/introduction/rental pages expanded (general checkpoints, small-lot OEM support, more FAQs); keyword eyebrows on About/OEM; business-support cross-link sections on OEM/Products pages. v1.16.1 - Header/mobile/footer navigation now links the new pages (business support, introduction, professional); TOP rental card re-pointed. v1.16.0 - New pages: /business-support/ (+fc, consulting), /introduction/ (+rental), /professional/ (+peeling, self-whitening) with answer boxes, FAQPage and Service JSON-LD. v1.15.0 - Brand positioning pass: TOP hero + About lead rewritten around the company definition (beauty business development / wholesale / OEM-ODM / introduction & rental / FC support); new /about/members/ page (representative + empty member slots); Organization JSON-LD and page titles updated. */ /* ========================================================================== PLUREVO JAPAN - Design System CSS Ported from the TOP page design mock (Main.dc.html). NOTE: - {{accent}} placeholders have been resolved to the default accent color (#2E2E2E / Charcoal). - Google Fonts (Noto Serif JP / Noto Sans JP / Outfit) are enqueued in functions.php. - This stylesheet assumes the class names below (nav-item, mega-panel, hero-row, biz-grid, form-input, floating-cta, etc.) are present in the markup that renders each page/block. See README.txt for how to apply them inside SWELL (Custom HTML block or "Additional CSS class(es)" field on native SWELL blocks). - v1.1.0 adds: the site-wide floating CTA button, and a "ご相談の種類" (inquiry type) select field in the contact form. - v1.2.0 adds: a "目的から探す" (FIND BY PURPOSE) user-goal navigation section on the TOP page (.purpose-grid / .purpose-card / .purpose-arrow), and relabels the PRODUCTS navigation entry "シミ・メラニンケア" to "エステ・サロン向け商材" (desktop mega-menu, mobile menu, footer) with a new mega-menu link for the サロン向けハーブピーリングブランド OEM/ODM line, to surface エステ/サロン 商材 in the site's navigation per client direction. Brand colors and the existing design system are unchanged. - v1.3.0 adds: a dedicated page template (template-top.php + template-parts/plurevo-top.php) that renders the TOP page design without SWELL's own header/footer, instead of pasting markup into a Custom HTML block. Also fixes the TOP page markup's image sources, which previously pointed at Claude-Artifact-only /_blob/ URLs that would not resolve on the live site; they are now clearly labeled REPLACE_WITH_WP_MEDIA_URL placeholders. The page design's own floating CTA markup was removed from the template content, since functions.php already injects one site-wide via wp_footer (avoids a duplicate button on the TOP page). - v1.4.0 adds: the same dedicated-template mechanism for all 14 remaining site pages (PLUREVOとは／OEM・ODMとその4つのサブページ／PRODUCTSとその 4つのカテゴリページ／美容機器修理／会社概要／お問い合わせ), each as its own template-〇〇.php + template-parts/plurevo-〇〇.php pair. Also adds the .grid-2 / .grid-3 / .grid-4 / .info-row layout helper classes used by these sub-pages, and dashed-border "IMAGE" placeholder boxes (plain markup, no CSS class needed) wherever a photo has not been supplied yet. - v1.5.0 rewrites the OND Aesthetic (tabletop) and OND Aesthetic PRO (flagship) sections on the 美容機器 (products-devices) page with much fuller, SEO-oriented copy sourced from the manufacturer's materials, and corrects a factual error (OND Aesthetic PRO was mislabeled "水冷式" water-cooled; it is actually an air-cooled / 空冷式 model). Also adds a new independent page, template-onda-lift.php + template-parts/plurevo-onda-lift.php, explaining the underlying "オンダ リフト" (2.45GHz microwave) technology shared by both machine models, for use as a child page under 美容機器 (/products/devices/onda-lift/). - v1.6.0 adds explicit manufacturer / BtoB positioning, per client direction ("PLUREVOはメーカーです。BtoB商材です"): a new "PLUREVOは 美容機器の国内メーカーです" (MANUFACTURER) section on both the products-devices page and the onda-lift page, stating PLUREVO is the manufacturer (not a reseller) and covering 仕入れ・卸価格のご相談 / 代理店募集 / OEM・ODM対応; a new B2B-focused FAQ/info block on products-devices (仕入れ値・卸価格、代理店契約、別ブランドOEM供給、 保守・部品供給) and three new FAQ items on onda-lift (仕入れ値・卸価格、 代理店契約、保守・部品供給・サポート); updated CTA copy on both pages to explicitly invite 仕入れ・代理店 inquiries; and added cross-links from both pages to /oem-odm/devices/ to reinforce the manufacturer positioning site-wide. No layout/CSS classes changed. - v1.7.0 is a site-wide SEO/AIO + brand-positioning pass across all 16 pages, per client direction ("各ページSEO,AIOをしっかりとっていく / サロンやクリニック向けの商材ブランドとして全ページ反映させて"): (1) Brand: the shared header top-bar tagline and footer company block (used on every page) now read "BEAUTY & WELLNESS BRAND FOR SALON & CLINIC" and "サロン・クリニック向け美容機器・化粧品の企画開発 メーカー" respectively, so the salon/clinic B2B manufacturer positioning appears on all 16 pages automatically. (2) Content: added a new "よくあるご質問" FAQ section (3 Q&A each) to the 8 pages that did not yet have one (PLUREVOとは／化粧品OEM／美容機器 OEM／開発の流れ／OEM・ODM／PRODUCTS／その他自社商材／エステ・サロン向け 商材), targeting each page's core search intent (ロット数、仕入れ、 代理店、OEM/ODMの違い、等）. (3) Technical SEO: functions.php now sets a keyword-matched and meta description (+ OGP/Twitter tags) per page template, and outputs site-wide Organization + WebSite JSON-LD declaring PLUREVO as a salon/clinic-focused manufacturer. (4) AIO/structured data: convert_to_wp.py now auto-generates and embeds BreadcrumbList JSON-LD (from each page's breadcrumb) and FAQPage JSON-LD (from each page's Q&A content) into every template-parts file, plus Product JSON-LD for the オンダリフト and WHITE MILK SPA pages — all answer-engine/AI-search readable structured data, regenerated with zero manual per-page markup. - v1.8.0 adds a new independent page, template-relip.php + template-parts/plurevo-relip.php, for メラニンケア（Re:lip）— a lip melanin-care system (3-color LED device + serum + cream) for salons and dental clinics, built from the client-supplied Re:lip sales deck. The previously-unnamed "日本初メラニンケアブランド" placeholder on the products-salon page now names the real brand (Re:lip) and links to this new page (/products/salon/relip/); the shared mega-menu link was updated to match on all 17 pages. Product JSON-LD added for this page. - v1.8.1 enriches the Re:lip page with details from the brand's official PR TIMES press release (operating company MELLARIS JAPAN合同会社, co-development with two named dental hygienists / influencers, the 4 key active ingredients, patent-pending natural plant extract claim, and the no-pain / ~3-5 day downtime claim). Product JSON-LD's manufacturer field corrected to MELLARIS JAPAN合同会社 (the actual developer) rather than PLUREVO. Specific MELLARIS-side wholesale/ franchise pricing from the sales deck is intentionally NOT republished verbatim (those are MELLARIS's own commercial terms); only a general "ご相談により個別にご案内" framing is used, consistent with every other product page on the site. - v1.8.2 settles the developer attribution on the Re:lip page as "MELLARIS JAPAN合同会社（PLUREVOグループ）" everywhere it appears (hero eyebrow, intro paragraph, Product JSON-LD manufacturer field, SEO meta description), per client direction. This keeps the page consistent with Re:lip's own public PR TIMES press release (which names MELLARIS JAPAN合同会社 as the developer) while disclosing the group relationship to PLUREVO. - v1.8.3 fixes a header mega-menu bug: the OEM・ODM / PRODUCTS dropdown panels (.mega-panel) were positioned with a fixed gap ("top: 38px") below their nav link, but the hoverable nav-item box only covered the link text itself — so moving the mouse down into that gap exited the hover area and the dropdown closed before the cursor ever reached it. Changed to "top: 100%" (flush with the bottom of the nav item, both the OEM・ODM and PRODUCTS panels, on all 17 pages) so there is no dead zone and the dropdown stays open while moving into it. No layout/CSS file changes needed — the fix is in the per-page inline markup only. - v1.8.4 fixes the header mega-menu / footer / breadcrumb / cross-page links not navigating anywhere when clicked inside the Claude Design artifact's own prototype preview. Internally, all navigation links across the 17 Design-canvas artboards now point to the artboard's own filename (e.g. href="OndaLift.dc.html"), which is what the Design artifact's "Links between artboards" mechanism requires to move between pages (a link to a real-site path like "/products/devices/" does not match any artboard and goes nowhere in that preview). The WordPress build pipeline (convert_to_wp.py) now automatically rewrites those artboard-filename links back into the real site URLs (e.g. "/products/devices/onda-lift/") when generating the template-parts files, so this has no effect on the live site's links — they are unchanged. All 17 artboards were also marked interactive ("is_interactive": true) in the canvas so each one gets a Play button. - v1.9.0 is a mobile-polish pass across all 17 pages: (1) Decorative mid-sentence line breaks inside hero <h1> / section <h2> headings and taglines (tuned for desktop line length) are now marked <br class="opt-break"> and hidden below 860px, so headings wrap naturally on phones instead of breaking in an unrelated spot. (2) h2.serif section headings now step down to 24px and h3 to 15px below 860px (previously only the hero <h1> had a mobile size), so every page's heading scale is consistent on mobile, and mobile section padding/gap were tightened (64px→56px vertical padding, 48px→32px gap) so pages read less "stretched out" when scrolled. (3) 10 pages that were pure text with no photography anywhere (About, Company, Contact, OEM・ODM, 化粧品OEM, 美容機器OEM, 開発の流れ, よくある質問, PRODUCTS, エステ・サロン向け商材) now have a hero image placeholder under the hero headline, matching the visual language already used on オンダリフト/Re:lip/WHITE MILK SPA — ready for real photography to drop in. Per-page SEO title/description, structured data (JSON-LD) and salon/clinic brand positioning were already in place from v1.7.0+ and are unchanged by this pass. - v1.9.1 disambiguates two WordPress "Template Name" admin labels that were easy to mix up when assigning a page template in wp-admin: "PLUREVO 美容機器OEM" (the OEM/ODM-facing page, /oem-odm/devices/) and "PLUREVO 美容機器" (the direct-sales products page, /products/devices/) differed only by the "OEM" suffix in a long alphabetical dropdown. Renamed to "PLUREVO 美容機器OEM【OEM受託ページ】" and "PLUREVO 美容機器【自社商品ページ】" respectively so the two are visibly distinct at a glance. This is a label-only change (the Template Name doc-comment shown in the wp-admin dropdown) — it does not change any template's file name, slug, URL, content, or an already-assigned page's template binding (WordPress stores that by file name, not by this label), so no existing page's template selection is affected by simply updating this theme. - v1.10.0 is a content-depth pass on the 5 pages with the thinnest body copy (美容機器OEM／よくある質問／PRODUCTS／エステ・サロン向け商材／ 化粧品OEM), prioritized by SEO/AIO impact (highest-intent B2B pages and the FAQ/hub pages that feed AI-answer-engine citations first): (1) 美容機器OEM gains a fuller hero/lot-size copy, a new "PLUREVOが 選ばれる理由" (4-point manufacturer-trust) section, and 2 more FAQ items (lead time, after-sales repair/parts) — and fixes a leftover factual error where "OND Aesthetic PRO" was still described as "水冷式" (water-cooled); it is air-cooled (空冷式), as already corrected on the 美容機器 (products-devices) page back in v1.5.0 — this page had not received that correction. (2) よくある質問（OEM） grows from 5 to 9 Q&A pairs, adding items AI-answer-engines are commonly asked (combined cosmetics+devices consultation, switching from an existing OEM supplier, NDA handling, the consultation-to-order flow) — all also feed the page's existing FAQPage JSON-LD. (3) PRODUCTS (hub page) gets fuller 2-sentence category blurbs (was 1 short line each), a new "目的から選ぶ" (find-by-purpose) section linking each of the 4 product categories to a concrete use case, and 2 more FAQ items. (4) エステ・サロン向け商材's two thinnest subsections (次世代シミケア システム／サロン向けハーブピーリング) each gain a 3-point feature grid, and 1 more FAQ item about private-label branding. (5) 化粧品OEM's lot-size intro is expanded, its "ブランド実績例" cards are fleshed out (one of which — "日本初メラニンケアブランド" — still used the pre-v1.8.0 placeholder name; corrected to "メラニンケア （Re:lip）" with a link to that page), and 1 more FAQ item about packaging/container options is added. No layout, CSS classes, navigation, URLs, or other pages' content changed in this pass. - v1.11.0 continues the SEO/AIO content-depth pass onto the remaining 3 thinner pages (開発の流れ／OEM・ODM／PLUREVOとは): (1) 開発の流れ: each of the 11 development-flow steps (IDEA through GROWTH) gains a full one-sentence description (was a 2-4 word label only), and 2 more FAQ items are added (branding/packaging handled end-to-end, post-launch support). Also fixes a stray simplified- Chinese character ("标准的") that had been typed instead of the Japanese "標準的" in one FAQ answer. (2) OEM・ODM (the OEM/ODM pillar page): its 3 track-record cards gain fuller descriptions, a new "OEM・ODMでPLUREVOが選ばれる理由" (4-point manufacturer-trust) section is added, and 1 more FAQ item (switching from an existing OEM supplier). One of the 3 cards — "日本初メラニン ケアブランド" — still used the pre-v1.8.0 placeholder name; corrected to "メラニンケア（Re:lip）" with a link to that page (the same leftover placeholder v1.10.0 already fixed on the 化粧品OEM page's equivalent card). (3) PLUREVOとは: the philosophy section gains a 4-stat row (minimum lot sizes, the two self-developed product categories, domestic- manufacturer positioning), and 1 more FAQ item (how PLUREVO differs from other beauty-device makers) is added. No layout, CSS classes, navigation, URLs, or other pages' content changed in this pass. - v1.12.0: full site-wide link audit, plus a new "関連ページ" (related pages) section added to all 15 content pages (every page except the TOP page, which already has full navigation, and the Contact page, kept link-free so it stays focused on the inquiry form) to make the site easier to browse between related topics. Each section shows 3 hand-picked related pages as cards just above that page's closing CTA — e.g. 美容機器OEM now also links to OEM・ODM, 化粧品OEM and 美容機器 (products-devices); オンダリフト now also links to 美容機器, 美容機器OEM and 美容機器修理. The link audit itself found zero broken internal links or dead anchor fragments anywhere on the site (all 17 pages' header mega-menu, mobile menu, footer, breadcrumb, in-content and FAQ links resolve correctly, both in the Design canvas and in the generated WordPress templates) — nothing needed fixing there. No other layout, CSS, or page content changed in this pass. - v1.12.1: fixed a real root cause behind "the Onda Lift link doesn't work" reports. Every internal link/structured-data reference to the "美容機器" (products-devices) page assumed the live URL would be the nested path /products/devices/ (and /products/devices/onda-lift/ for Onda Lift), per the original README setup instructions. The page was actually published live as a flat, non-nested URL instead: /products-devices/ (and /products-devices/onda-lift/). Because of that mismatch, every link site-wide that was meant to point at the 美容機器/オンダリフト pages was actually pointing at a URL that either didn't exist or resolved to the wrong page content. Rewrote every such link (header mega-menu, mobile menu, breadcrumbs, in-content links, related-pages cards, and the Onda Lift Product JSON-LD "url" field) across all 17 pages to the real, live URLs. No page content, layout, CSS, or existing page/template assignment needed to change — this was purely a link-target correction. README.txt's recommended- URL table and setup instructions were updated to match. - v1.12.2: fixed a mobile layout bug on the TOP page's dark "trust row" stats band (COSMETICS 100個〜 / BEAUTY DEVICES 50台〜 / PROFESSIONAL DEVICES 10台〜). On mobile the row switches from a horizontal flex row to a stacked column via .trust-row's mobile rule, and the vertical divider lines between the 3 stats are meant to be hidden on mobile via the .trust-divider class + its "display: none" mobile rule — but only the first of the 3 divider <div>s actually had that class applied; the other 2 were missing it, so they stayed visible as stray floating horizontal-ish bars between the stacked stat blocks on mobile. Added the missing class to all 3 dividers. No other layout, CSS, or page content changed in this pass. - v1.12.3: fixed the real cause of the number/unit line-break reported in the same TOP page stats band (e.g. "100" and "個〜" rendering on two separate lines instead of side by side, at any screen width, not just mobile). Each stat's number span (class="stat-num", 48px) and its unit span (e.g. "個〜", "台〜") were direct children of a "display: flex; flex-direction: column" wrapper alongside the label span above them — in a column-direction flex container, every direct child (including two adjacent inline spans) becomes its own row, so the number and its unit were always forced onto separate lines. Fixed by wrapping each number+unit pair in its own small "display: flex; align-items: baseline" row div, so they sit on one line together as intended, at all screen sizes. Also reviewed: this particular number+unit markup pattern was unique to this one section of the TOP page — every other stat-style number elsewhere on the site already uses a single self-contained span (no separate unit span), so no other pages were affected by this specific bug. No other layout, CSS, or page content changed in this pass. - v1.12.4: fixed the very top utility bar (the dark strip above the header reading "BEAUTY & WELLNESS BRAND FOR SALON & CLINIC") wrapping onto 2 lines on mobile, on all 17 pages (it's a shared header element). This bar had no mobile-specific handling at all: its wrapper used a fixed 48px side padding (instead of the site's .container-pad class, whose mobile rules shrink padding on narrow screens) and its text kept its full desktop font-size (11px) and wide letter-spacing (0.18em), which together made it too wide to fit on one line on a phone-width screen. Added .container-pad to the wrapper so its padding shrinks on mobile like every other section, and added a mobile-only rule that reduces the text to 8px with tighter letter-spacing and keeps it on one line (white-space: nowrap), so it now reads as a compact single-line strip on mobile instead of wrapping. No other layout, CSS, or page content changed in this pass. - v1.13.0: client direction — enrich the 美容機器修理 (device repair) page to target the search terms "エステ 脱毛器 修理", "医療脱毛 機械 修理" and "HIFU 修理". Updated the page title/meta description to lead with these terms; expanded the hero and lead paragraphs to name エステ脱毛器・医療脱毛機・HIFU explicitly instead of only the generic "脱毛機"; split the "対応可能な機器の例" grid from 4 to 6 cards so エステ脱毛器, 医療脱毛機 and HIFU（ハイフ） each get their own card with symptom-specific copy (出力低下, カートリッジ不良, エラー表示, etc.) instead of being grouped under one generic "脱毛機"/"EMS・ ハイフ・吸引機" card; and added 3 new FAQ items phrased as the target queries themselves ("エステサロンの脱毛器修理にも対応しています か？", "クリニックで使用している医療脱毛機の修理も可能ですか？", "HIFU（ハイフ）の出力が弱くなった場合も修理できますか？"), which also feed the page's existing FAQPage structured data automatically. No pricing, layout, CSS, or other pages' content changed in this pass. - v1.13.1: client direction — broaden 美容機器修理 further: "レーザー とかポテンツァとかも医療でも美容でも美容機械なんでも大丈夫、まずは 問い合わせして状況を確認する形で". Added レーザー脱毛機 and ポテンツァ as their own named cards in "対応可能な機器の例" (now 8 cards, grid widened from 3 to 4 columns), and reworded the hero, lead paragraph and FAQ answers to state plainly that medical-grade and salon-grade devices are both fine ("医療用・美容用を問わず、美容機器であれば 基本的にご相談いただけます") rather than only listing specific device types. Also shifted every FAQ answer and the closing CTA to lead with "まずはお問い合わせください" + "状況を確認のうえご案内いたします" instead of a flat "対応しています", so the page no longer reads as guaranteeing every exact model sight-unseen. Added 1 new FAQ item naming レーザー脱毛機 and ポテンツァ directly. Updated the page title/meta description to match. No pricing, layout, CSS, or other pages' content changed in this pass. - v1.13.2: client direction — audit 美容機器修理 for symptom/failure search terms ("故障", "つかない", "修理" combined with each device) and make sure they're actually present. Found that words people commonly search when a device breaks — 故障, つかない, 動かない, エラー, 水漏れ, 異音 — were essentially absent from the page (only "エラー表示" appeared, twice). Added a new "こんな症状はありませんか？" section (8 symptom cards: 電源が入らない・つかない, 動かない・反応 しない, 出力が弱い・出ない, エラー表示が出る, ランプが点灯しない, 吸引力が弱い, 水漏れする, 異音・異臭がする, each with a one-line likely cause) between "対応可能な機器の例" and "選ばれる理由". Reworded the hero to mention "電源がつかない" / "故障かもしれない" directly. Widened the existing "電源が入らない" FAQ question to also say "（つかない）・ まったく動かない", and added a new FAQ for people who aren't sure it's actually broken ("本当に故障かどうか自分では分かりません。相談 だけでもできますか？"). Updated the page title/meta description to lead with "修理・故障診断" and the symptom phrasing. No pricing, layout, CSS, or other pages' content changed in this pass. ========================================================================== */ * { box-sizing: border-box; } body.plurevo-fullpage { margin: 0; font-family: 'Noto Sans JP', sans-serif; color: #2E2E2E; background: #FFFFFF; -webkit-font-smoothing: antialiased; letter-spacing: 0.03em; line-height: 1.9; } :where(body.plurevo-fullpage) h1, :where(body.plurevo-fullpage) h2, :where(body.plurevo-fullpage) h3 { text-wrap: balance; letter-spacing: 0.05em; } :where(body.plurevo-fullpage) p { line-break: strict; } :where(body.plurevo-fullpage) a { text-decoration: none; color: inherit; } .serif { font-family: 'Noto Serif JP', serif; font-weight: 400; letter-spacing: 0.06em; } .font-en { font-family: 'Outfit', sans-serif; letter-spacing: 0.02em; } .eyebrow { font-family: 'Outfit', sans-serif; font-size: 12px; letter-spacing: 0.2em; font-weight: 500; text-transform: uppercase; } .nav-item { position: relative; } .nav-item .mega-panel { display: none; } .nav-item:hover .mega-panel { display: flex; } .nav-label { transition: opacity 0.15s ease; } .nav-item:hover > .nav-label { opacity: 0.55; } .nav-link { display: block; letter-spacing: 0.06em; transition: opacity 0.15s ease; } .nav-link:hover { opacity: 0.55; } .card-lift { transition: none; } .purpose-card { transition: border-color 0.15s ease, opacity 0.15s ease; } .purpose-card:hover { border-color: #A7ADB5; } .purpose-card:hover .purpose-arrow { opacity: 1; transform: translateX(2px); } .purpose-arrow { opacity: 0.45; transition: opacity 0.15s ease, transform 0.15s ease; } .logo-metal { font-family: 'Noto Serif JP', serif; background: linear-gradient(120deg, #8E9399 0%, #C0C4C9 22%, #2E2E2E 50%, #A7ADB5 78%, #DADDE2 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .logo-metal-dark { font-family: 'Noto Serif JP', serif; background: linear-gradient(120deg, #DADDE2 0%, #FFFFFF 25%, #A7ADB5 50%, #C0C4C9 75%, #FFFFFF 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .stat-num { font-family: 'Outfit', sans-serif; font-weight: 500; letter-spacing: 0.02em; } .btn-primary:hover { background: #2C2C2C; } .btn-outline:hover { background: #2E2E2E; color: #FFFFFF; } /* ===== Responsive ===== */ .mobile-nav-toggle { display: none; } .hamburger-btn { display: none; cursor: pointer; align-items: center; justify-content: center; width: 40px; height: 40px; } .mobile-menu-panel { display: none; border-top: 1px solid #DADDE2; } .mobile-nav-toggle:checked ~ .mobile-menu-panel { display: block; } .acc-toggle { display: none; } .acc-item { border-bottom: 1px solid #DADDE2; } .acc-label { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; font-size: 13px; letter-spacing: 0.1em; cursor: pointer; } .acc-icon { font-size: 18px; font-weight: 300; display: inline-block; transition: transform 0.2s ease; color: #6B6B6B; } .acc-toggle:checked ~ .acc-label .acc-icon { transform: rotate(45deg); } .acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; display: flex; flex-direction: column; } .acc-toggle:checked ~ .acc-panel { max-height: 320px; padding-bottom: 12px; } .mobile-link { display: block; padding: 10px 4px; font-size: 13px; color: #545454; } .mobile-flat-link { display: block; padding: 16px 4px; font-size: 13px; letter-spacing: 0.1em; border-bottom: 1px solid #DADDE2; color: #2E2E2E; } .mobile-cta { border-bottom: none; font-weight: 600; } .opt-break { display: inline; } .header-line-sp { display: none; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid #2E2E2E; color: #2E2E2E; background: #FFFFFF; font-size: 11px; letter-spacing: 0.12em; font-weight: 600; } @media (max-width: 860px) { .desktop-nav { display: none !important; } .desktop-only { display: none !important; } .hamburger-btn { display: flex !important; } .header-line-sp { display: inline-flex !important; } .header-tagline { display: none !important; } .opt-break { display: none !important; } .hero-row { flex-direction: column !important; gap: 40px !important; } .hero-title { font-size: 30px !important; max-width: 100% !important; } h2.serif { font-size: 24px !important; } :where(body.plurevo-fullpage) h3 { font-size: 15px !important; } .trust-row { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .trust-divider { display: none !important; } .biz-grid { grid-template-columns: 1fr !important; } .concept-row { flex-direction: column !important; gap: 36px !important; } .why-grid { grid-template-columns: repeat(2, 1fr) !important; } .prod-grid { grid-template-columns: repeat(2, 1fr) !important; } .purpose-grid { grid-template-columns: repeat(2, 1fr) !important; } .footer-row { flex-direction: column !important; gap: 32px !important; } .news-row { flex-direction: column !important; gap: 20px !important; } .form-grid-2 { grid-template-columns: 1fr !important; } .contact-form { padding: 36px 24px !important; } .container-pad { padding-left: 24px !important; padding-right: 24px !important; } .topbar-tag { font-size: 8px !important; letter-spacing: 0.06em !important; white-space: nowrap !important; } .section-pad-v { padding-top: 56px !important; padding-bottom: 56px !important; } .section-pad-v[style*="gap: 48px"] { gap: 32px !important; } } @media (max-width: 520px) { .why-grid { grid-template-columns: 1fr !important; } .prod-grid { grid-template-columns: 1fr !important; } .purpose-grid { grid-template-columns: 1fr !important; } .container-pad { padding-left: 20px !important; padding-right: 20px !important; } .hero-title { font-size: 26px !important; } } /* ===== Contact form ===== */ .form-field { display: flex; flex-direction: column; gap: 8px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-label { font-size: 12px; letter-spacing: 0.04em; color: #2E2E2E; font-weight: 500; } .req { color: #A7ADB5; } .form-input { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: #2E2E2E; border: 1px solid #DADDE2; border-radius: 2px; padding: 12px 14px; background: #FFFFFF; outline: none; transition: border-color 0.15s ease; width: 100%; } .form-input:focus { border-color: #2E2E2E; } .form-input::placeholder { color: #B0B0B0; } textarea.form-input { resize: vertical; line-height: 1.7; } .form-submit { font-family: 'Outfit', sans-serif; background: #2E2E2E; color: #FFFFFF; font-size: 13px; letter-spacing: 0.14em; padding: 16px; border: none; border-radius: 2px; cursor: pointer; transition: background 0.15s ease; margin-top: 6px; } .form-submit:hover { background: #000000; } select.form-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6B6B' stroke-width='1.5'><path d='M5 8l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 38px; } /* ===== Floating CTA (site-wide) ===== */ .floating-cta { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: flex; align-items: center; gap: 10px; background: #2E2E2E; color: #FFFFFF; padding: 14px 22px; border-radius: 999px; box-shadow: 0 16px 32px rgba(0,0,0,0.25); transition: transform 0.15s ease, background 0.15s ease; } .floating-cta:hover { background: #000000; transform: translateY(-2px); } .floating-cta-label { font-family: 'Noto Sans JP', sans-serif; font-size: 13px; letter-spacing: 0.06em; font-weight: 500; } @media (max-width: 520px) { .floating-cta { right: 16px; bottom: 16px; padding: 13px 18px; } .floating-cta-label { font-size: 12px; } } /* ===== Shared subpage layout helpers (added in v1.4.0 for the 14 sub-pages) ===== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } .info-row { display: flex; border-top: 1px solid #DADDE2; padding: 18px 0; gap: 32px; } .info-row:last-child { border-bottom: 1px solid #DADDE2; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: repeat(2, 1fr) !important; } .grid-4 { grid-template-columns: repeat(2, 1fr) !important; } .info-row { flex-direction: column !important; gap: 6px !important; } } @media (max-width: 520px) { .grid-3 { grid-template-columns: 1fr !important; } .grid-4 { grid-template-columns: 1fr !important; } } /* ===== Mobile UX v2 (phrase-aware wrapping / sliders / compact spacing / hop chips) ===== */ :where(body.plurevo-fullpage) :is(p, span, a, li, h1, h2, h3, h4) { line-break: strict; word-break: keep-all; overflow-wrap: anywhere; } :where(body.plurevo-fullpage) p { text-wrap: pretty; } .btn-primary, .btn-outline, .form-submit { white-space: nowrap; text-align: center; } .hop-wrap { width: 100%; background: #FFFFFF; border-top: 1px solid #F0F0F0; } .hop-inner { max-width: 1200px; margin: 0 auto; padding: 56px 48px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; } .hop-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .hop-chip { display: inline-block; border: 1px solid #DADDE2; padding: 10px 18px; font-size: 12px; letter-spacing: 0.06em; color: #2E2E2E; white-space: nowrap; background: #FFFFFF; } .hop-chip:hover { border-color: #2E2E2E; } @media (max-width: 860px) { .section-pad-v { padding-top: 44px !important; padding-bottom: 44px !important; } .section-pad-v[style*="gap: 48px"], .section-pad-v[style*="gap: 40px"] { gap: 26px !important; } h2.serif { line-height: 1.6 !important; } .grid-2 { gap: 14px !important; } .grid-3, .grid-4, .prod-grid, .biz-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin-left: -24px; margin-right: -24px; padding: 4px 24px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .grid-3::-webkit-scrollbar, .grid-4::-webkit-scrollbar, .prod-grid::-webkit-scrollbar, .biz-grid::-webkit-scrollbar, .hop-chips::-webkit-scrollbar { display: none; } .grid-3 > *, .grid-4 > *, .prod-grid > *, .biz-grid > * { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; } .grid-3, .grid-4, .prod-grid, .biz-grid { align-self: stretch; width: auto; min-width: 0; max-width: none; } .grid-2[style*="margin: 0 -48px"] { margin: 0 -24px !important; width: auto !important; padding: 28px 24px !important; } .section-pad-v, .container-pad { width: 100%; } .grid-3, .grid-4, .prod-grid, .biz-grid { scroll-padding-left: 24px; } .card-lift { padding: 24px 20px !important; } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 16px !important; } .why-grid > div { padding-right: 0 !important; gap: 8px !important; } .why-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .purpose-card { min-height: 128px !important; padding: 18px 14px !important; gap: 10px !important; } .btn-primary, .btn-outline { padding-left: 22px !important; padding-right: 22px !important; } div:has(> .btn-primary + .btn-outline), div:has(> .btn-outline + .btn-primary) { flex-wrap: wrap !important; gap: 10px !important; } .footer-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; padding-top: 48px !important; } .footer-row > :first-child { grid-column: 1 / -1; flex: none !important; } .hop-inner { padding: 40px 24px; align-items: flex-start; text-align: left; } .hop-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-left: -24px; margin-right: -24px; padding: 2px 24px 8px; width: calc(100% + 48px); scrollbar-width: none; } .floating-cta { right: 12px !important; bottom: 12px !important; padding: 11px 16px !important; } .floating-cta-label { font-size: 11px !important; } } @media (max-width: 520px) { .grid-3, .grid-4, .prod-grid, .biz-grid { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .purpose-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .grid-3, .grid-4, .prod-grid, .biz-grid { scroll-padding-left: 20px; } .prod-grid { grid-template-columns: none !important; } .hop-inner { padding-left: 20px; padding-right: 20px; } .hop-chips { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; width: calc(100% + 40px); } } @media (max-width: 860px) { body.plurevo-fullpage { overflow-x: hidden; } } /* v1.20.1: image slot placeholder (until a real photo is set) */ img[data-image-slot] { background: #F0F1F3; } .form-notice { width: 100%; } /* v1.22.1: mobile menu opens as a full-screen panel under a fixed header row (was pushed into the page flow), the hamburger turns into a close (×) icon, the page behind does not scroll, the floating CTA hides, and accordion panels are no longer cut off at 320px (PRODUCTS has 13 links). */ @media (max-width: 860px) { .acc-toggle:checked ~ .acc-panel { max-height: 2400px; } .mobile-nav-toggle:checked ~ .container-pad { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #FFFFFF; border-bottom: 1px solid #DADDE2; } .mobile-nav-toggle:checked ~ .mobile-menu-panel { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 1000; background: #FFFFFF; border-top: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: plurevo-menu-in 0.18s ease-out; } .mobile-nav-toggle:checked ~ .mobile-menu-panel > .container-pad { padding-bottom: 48px !important; } html:has(#mobile-nav-toggle:checked), body:has(#mobile-nav-toggle:checked) { overflow: hidden; } body:has(#mobile-nav-toggle:checked) .floating-cta { display: none !important; } .hamburger-btn svg line { transition: transform 0.2s ease, opacity 0.2s ease; transform-box: fill-box; transform-origin: center; } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(2) { opacity: 0; } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } @keyframes plurevo-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* v1.23.0: mobile tables. Inside a stacked .info-row the label's inline "flex: 0 0 180px" became a 180px HEIGHT, leaving a large blank area under every label (company profile, specs, repair, etc.). The neo/pro comparison table now fits a phone screen instead of scrolling sideways. Instructor photos sit side by side on phones. */ @media (max-width: 860px) { .info-row { flex-direction: row !important; gap: 16px !important; padding: 14px 0 !important; } .info-row > :first-child { flex: 0 0 108px !important; min-width: 0; } .info-row > :last-child { flex: 1 1 auto !important; min-width: 0; } .grid-2 > div:not(:last-child) > .info-row:last-child { border-bottom: none; } .instructor-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; } } @media (max-width: 600px) { .onda-compare th, .onda-compare td { padding: 10px 8px !important; font-size: 12px !important; line-height: 1.7 !important; } .onda-compare thead th { font-size: 12px !important; } .onda-compare tbody th { width: 25% !important; letter-spacing: 0 !important; } } /* v1.24.0: photo page header on sub-pages (TOP keeps its main visual). Directly under the header: background photo, dark veil, centred eyebrow + H1 as HTML text. PC uses a 16:5 photo (PAGEHERO_<KEY>_PC), phones a 3:2 photo (PAGEHERO_<KEY>_SP, falls back to the PC photo). Height is capped so the content is not pushed far down. */ .page-hero { position: relative; width: 100%; aspect-ratio: 16 / 5; min-height: 340px; max-height: 520px; overflow: hidden; background: #34373C; display: flex; align-items: center; justify-content: center; isolation: isolate; } .page-hero__media { position: absolute; inset: 0; z-index: -2; display: block; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: transparent !important; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 20, 24, 0.50) 0%, rgba(18, 20, 24, 0.58) 100%); } .page-hero__inner { width: 100%; max-width: 980px; padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .page-hero__eyebrow { color: rgba(255, 255, 255, 0.86) !important; } .page-hero__title { margin: 0; color: #FFFFFF; font-size: 40px; font-weight: 400; line-height: 1.5; letter-spacing: 0.04em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); } @media (max-width: 1024px) { .page-hero { min-height: 300px; } .page-hero__title { font-size: 32px !important; } } @media (max-width: 767px) { .page-hero { aspect-ratio: 3 / 2; min-height: 240px; max-height: 340px; } .page-hero__inner { padding: 28px 20px; gap: 10px; } .page-hero__eyebrow { font-size: 10px !important; letter-spacing: 0.12em !important; line-height: 1.7; } .page-hero__title { font-size: 24px !important; line-height: 1.55 !important; letter-spacing: 0.02em; } } /* v1.25.0: AI skin analysis (カンナムビジョン) section on /devices/: 20-image gallery and 4-step counselling flow. */ .kv-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; } .kv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } @media (max-width: 860px) { .kv-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; } .kv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .kv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kv-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 600px) { .kv-steps--3 { grid-template-columns: 1fr; } } /* v1.27.0: contact form checkboxes / radio buttons */ .form-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; } .form-check { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.7; color: #2E2E2E; cursor: pointer; } .form-check input { margin: 4px 0 0; accent-color: #2E2E2E; width: 16px; height: 16px; flex: 0 0 auto; } @media (max-width: 520px) { .contact-form { padding: 32px 20px !important; } .form-grid-2 { grid-template-columns: 1fr !important; } } /* the floating "お問い合わせ" button is not needed on the contact page itself */ body.page-template-template-contact .floating-cta, body.page-template-template-contact-php .floating-cta { display: none !important; } /* ===================================================================================================== v1.28.0 DESIGN SYSTEM 2 (common layer, all PLUREVO pages) Colours: white / warm grey #F7F8FA / charcoal #2E2E2E / deep green #2E2E2E (accent, used sparingly). Scope: only body.plurevo-fullpage (the PLUREVO templates); SWELL pages are untouched. Page-specific layouts live further down, each under its own .pv-<page> class. ===================================================================================================== */ body.plurevo-fullpage { --pv-white: #FFFFFF; --pv-warm: #F7F8FA; --pv-charcoal: #2E2E2E; --pv-accent: #2E2E2E; --pv-text: #4A4A4A; --pv-sub: #6B6B6B; --pv-line: #DADDE2; } /* 2) Type hierarchy: section titles larger, body copy darker and one step larger */ body.plurevo-fullpage h2.serif[style*="font-size: 30px"] { font-size: 32px !important; letter-spacing: 0.04em; } body.plurevo-fullpage .eyebrow { color: var(--pv-accent) !important; } body.plurevo-fullpage .page-hero__eyebrow { color: rgba(255, 255, 255, 0.86) !important; } body.plurevo-fullpage p[style*="font-size: 13px"][style*="color: #6B6B6B"] { font-size: 14px !important; color: #555555 !important; } body.plurevo-fullpage p[style*="font-size: 12px"][style*="color: #6B6B6B"] { font-size: 13px !important; color: #5A5A5A !important; } body.plurevo-fullpage p[style*="font-size: 14px"][style*="color: #545454"] { color: var(--pv-text) !important; } /* 3) Feature / merit cards: no boxes. A thin charcoal rule on top and a large number instead. */ body.plurevo-fullpage :is(.grid-3, .grid-4) > div[style*="border: 1px solid #DADDE2"] { border: 0 !important; border-top: 1px solid var(--pv-charcoal) !important; background: transparent !important; padding: 22px 4px 0 0 !important; box-shadow: none !important; } body.plurevo-fullpage :is(.grid-3, .grid-4) > div[style*="border: 1px solid #DADDE2"] > span.font-en:first-child { font-size: 26px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: var(--pv-accent) !important; line-height: 1.1; } body.plurevo-fullpage :is(.grid-3, .grid-4) > div[style*="border: 1px solid #DADDE2"] > :is(h3, h4) { font-size: 16px !important; line-height: 1.6; } body.plurevo-fullpage :is(.grid-3, .grid-4) > div[style*="border: 1px solid #DADDE2"] > p { font-size: 13px !important; color: #555555 !important; } /* clickable link cards keep their frame (they are buttons) */ body.plurevo-fullpage a.card-lift { border-color: var(--pv-line); } /* 4) Empty image areas are never shown */ body.plurevo-fullpage div[style*="background: #F7F8FA"]:empty, body.plurevo-fullpage img[data-slot-missing] { display: none !important; } body.plurevo-fullpage :is(.grid-2, .hero-row) > div:has(> .slot-missing:only-child) { display: none !important; } body.plurevo-fullpage .grid-2:has(> div > .slot-missing:only-child), body.plurevo-fullpage .grid-2:has(> div[style*="background: #F7F8FA"]:empty) { grid-template-columns: minmax(0, 1fr) !important; max-width: 820px; margin-left: auto; margin-right: auto; } body.plurevo-fullpage .grid-4:has(> div > .slot-missing) > div > .slot-missing { display: none; } /* 5) FAQ accordion (converted from the open Q/A list; FAQPage data unchanged) */ body.plurevo-fullpage .faq-item { border-bottom: 1px solid var(--pv-line); } body.plurevo-fullpage .faq-item:first-of-type { border-top: 1px solid var(--pv-line); } body.plurevo-fullpage .faq-q { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: baseline; padding: 22px 40px 22px 0; position: relative; font-size: 15px; font-weight: 500; line-height: 1.8; color: var(--pv-charcoal); } body.plurevo-fullpage .faq-q::-webkit-details-marker { display: none; } body.plurevo-fullpage .faq-q::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--pv-charcoal); border-bottom: 1.5px solid var(--pv-charcoal); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } body.plurevo-fullpage .faq-item[open] > .faq-q::after { transform: translateY(-30%) rotate(-135deg); } body.plurevo-fullpage .faq-q:hover .faq-qt { color: var(--pv-accent); } body.plurevo-fullpage .faq-mark { font-family: 'Noto Serif JP', serif; font-size: 20px; color: var(--pv-accent); flex: 0 0 auto; line-height: 1.4; } body.plurevo-fullpage .faq-mark--a { color: #A7ADB5; } body.plurevo-fullpage .faq-a { display: flex; gap: 16px; align-items: baseline; padding: 0 40px 26px 0; } body.plurevo-fullpage .faq-at { font-size: 14px; line-height: 2; color: #555555; } body.plurevo-fullpage .faq-at a { color: var(--pv-charcoal); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { body.plurevo-fullpage .faq-q { font-size: 14px; padding: 18px 32px 18px 0; gap: 12px; } body.plurevo-fullpage .faq-a { padding: 0 8px 20px 0; gap: 12px; } body.plurevo-fullpage .faq-at { font-size: 13px; } body.plurevo-fullpage :is(.grid-3, .grid-4) > div[style*="border: 1px solid #DADDE2"] { padding-top: 18px !important; } } /* ---------- v1.28.0 shared page components (pv-*) used by the redesigned pages ---------- */ .pv-wrap { max-width: 1200px; margin: 0 auto; padding: 112px 48px; display: flex; flex-direction: column; gap: 56px; } .pv-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; } .pv-head--left { align-items: flex-start; text-align: left; } .pv-head h2.serif { font-size: 32px !important; line-height: 1.5; } .pv-head--light h2.serif { color: #FFFFFF; } .pv-head--light .eyebrow { color: #A7ADB5 !important; } .pv-lead { margin: 0; font-size: 16px; line-height: 2; color: #4A4A4A; max-width: 640px; } .pv-head--light .pv-lead { color: rgba(255, 255, 255, 0.82); } .pv-text { margin: 0; font-size: 15px; line-height: 2.1; color: #4A4A4A; } .pv-text--lead { font-size: 17px; line-height: 2; color: #2E2E2E; } .pv-note { margin: 0; font-size: 12px; line-height: 1.9; color: #8B9096; } .pv-note--light { color: rgba(255, 255, 255, 0.6); } .pv-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .pv-split__body { display: flex; flex-direction: column; gap: 22px; } .pv-photo { width: 100%; max-width: 1200px; aspect-ratio: 16 / 7; object-fit: cover; display: block; } /* numbered list (no boxes) */ .pv-numlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 64px; } .pv-numlist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-numlist__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 26px 0; border-top: 1px solid #DADDE2; } .pv-numlist__no { font-size: 24px; font-weight: 300; color: var(--pv-accent, #2E2E2E); line-height: 1.2; } .pv-numlist__title { margin: 0 0 6px; font-size: 17px; font-weight: 500; color: #2E2E2E; } .pv-numlist__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* checklist on a dark band */ .pv-dark { color: #FFFFFF; } .pv-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; } .pv-check__item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; } .pv-check__mark { width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, 0.55); margin-top: 4px; position: relative; } .pv-check__mark::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border-right: 1.5px solid #FFFFFF; border-bottom: 1.5px solid #FFFFFF; transform: rotate(45deg); } .pv-check__title { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: #FFFFFF; } .pv-check__desc { margin: 0; font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, 0.72); } /* reasons with large numbers */ .pv-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .pv-reason { display: flex; flex-direction: column; gap: 12px; } .pv-reason__no { font-size: 56px; font-weight: 200; line-height: 1; color: var(--pv-accent, #2E2E2E); } .pv-reason__title { margin: 0; font-size: 18px; font-weight: 500; color: #2E2E2E; padding-top: 14px; border-top: 1px solid #2E2E2E; } .pv-reason__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* tables */ .pv-table { width: 100%; border-collapse: collapse; background: #FFFFFF; } .pv-table th, .pv-table td { padding: 18px 20px; border-bottom: 1px solid #E7E7E5; text-align: left; font-size: 15px; line-height: 1.7; } .pv-table thead th { background: #F0F0F0; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: #555555; } .pv-table tbody th { font-weight: 500; color: #2E2E2E; } .pv-table--price td { text-align: right; font-size: 18px; font-weight: 600; color: #2E2E2E; white-space: nowrap; } .pv-table--price thead th:last-child { text-align: right; } /* connected steps */ .pv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: none; position: relative; } .pv-steps__item { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 64px; } .pv-steps__item::before { content: ""; position: absolute; top: 22px; left: 46px; right: -32px; height: 1px; background: #DADDE2; } .pv-steps__item:last-child::before { display: none; } .pv-steps__no { position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; background: #2E2E2E; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; letter-spacing: 0.04em; } .pv-steps__title { margin: 0; font-size: 17px; font-weight: 500; color: #2E2E2E; } .pv-steps__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* key facts */ .pv-facts { display: flex; flex-direction: column; border-top: 1px solid #2E2E2E; } .pv-facts__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid #E7E7E5; } .pv-facts__k { font-size: 13px; color: #6B6B6B; } .pv-facts__v { font-size: 15px; line-height: 1.8; color: #2E2E2E; } /* contact block */ .pv-contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } .pv-contact__body { display: flex; flex-direction: column; gap: 24px; } @media (max-width: 860px) { .pv-wrap { padding: 64px 24px !important; gap: 36px; } .pv-head h2.serif { font-size: 24px !important; } .pv-split, .pv-contact { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pv-text { font-size: 14px; } .pv-text--lead { font-size: 16px; } .pv-photo { aspect-ratio: 3 / 2; } .pv-numlist--2col { grid-template-columns: minmax(0, 1fr); } .pv-numlist__item { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; } .pv-check { grid-template-columns: minmax(0, 1fr); gap: 22px; } .pv-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; } .pv-reason__no { font-size: 40px; } .pv-steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .pv-steps__item { padding: 0 0 28px 66px; min-height: 46px; } .pv-steps__item::before { top: 46px; bottom: 0; left: 22px; right: auto; width: 1px; height: auto; } .pv-table th, .pv-table td { padding: 14px 12px; font-size: 14px; } .pv-table--price td { font-size: 16px; } .pv-facts__row { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } } @media (min-width: 861px) and (max-width: 1100px) { .pv-check { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body.plurevo-fullpage .pv-head--light .eyebrow { color: #A7ADB5 !important; } /* stats row (About) */ .pv-split--wide { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; } .pv-display { font-size: 40px !important; line-height: 1.55 !important; letter-spacing: 0.04em; } .pv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #2E2E2E; } .pv-stat { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 4px 0; } .pv-stat + .pv-stat { padding-left: 24px; border-left: 1px solid #DADDE2; } .pv-stat__num { font-size: 36px; font-weight: 300; line-height: 1.2; color: #2E2E2E; letter-spacing: 0.02em; } .pv-stat__label { font-size: 13px; line-height: 1.7; color: #6B6B6B; } .pv-reasons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; } /* dark statement band */ .pv-band .pv-wrap { padding-top: 128px; padding-bottom: 128px; } .pv-band__title { font-family: 'Outfit', 'Noto Serif JP', sans-serif !important; font-size: 52px !important; font-weight: 200 !important; letter-spacing: 0.12em !important; line-height: 1.3 !important; } .pv-band .pv-lead { font-size: 17px; max-width: 760px; } /* horizontal flow line (About business cycle) */ .pv-flowline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; } .pv-flowline::before { content: ""; position: absolute; left: 7%; right: 7%; top: 21px; height: 1px; background: #DADDE2; } .pv-flowline__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .pv-flowline__no { width: 42px; height: 42px; border-radius: 50%; background: #FFFFFF; border: 1px solid #2E2E2E; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #2E2E2E; position: relative; } .pv-flowline__item:last-child .pv-flowline__no { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; } .pv-flowline__label { font-size: 14px; font-weight: 500; color: #2E2E2E; line-height: 1.6; } .pv-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* minimum lot figures (OEM) */ .pv-lots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #2E2E2E; } .pv-lot { display: flex; flex-direction: column; gap: 10px; padding: 32px 32px 8px 0; } .pv-lot + .pv-lot { padding-left: 32px; border-left: 1px solid #DADDE2; } .pv-lot__label { font-size: 11px; letter-spacing: 0.16em; color: #2E2E2E; } .pv-lot__num { font-size: 72px; font-weight: 200; line-height: 1; color: #2E2E2E; letter-spacing: -0.01em; } .pv-lot__num small { font-size: 22px; font-weight: 400; margin-left: 4px; letter-spacing: 0.04em; } .pv-lot__title { margin: 6px 0 0; font-size: 17px; font-weight: 500; color: #2E2E2E; } .pv-lot__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* cases with photos (OEM track record) */ .pv-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .pv-case { display: flex; flex-direction: column; gap: 12px; } .pv-case__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: 8px; } .pv-case__label { font-size: 11px; letter-spacing: 0.16em; color: #2E2E2E; } .pv-case__title { margin: 0; font-size: 18px; font-weight: 500; color: #2E2E2E; line-height: 1.6; } .pv-case__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } .pv-case__desc a { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } /* three-way comparison without boxes (OEM vs ODM) */ .pv-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-compare__col { display: flex; flex-direction: column; gap: 14px; padding: 8px 36px 8px 0; } .pv-compare__col + .pv-compare__col { padding-left: 36px; border-left: 1px solid #DADDE2; } .pv-compare__no { font-size: 13px; color: #2E2E2E; letter-spacing: 0.12em; } .pv-compare__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.6; color: #2E2E2E; } .pv-compare__desc { margin: 0; font-size: 14px; line-height: 2; color: #555555; } @media (max-width: 860px) { .pv-display { font-size: 26px !important; } .pv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-stat { padding: 20px 12px 16px 0; } .pv-stat + .pv-stat { padding-left: 12px; } .pv-stat:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid #DADDE2; } .pv-stat:nth-child(4) { border-top: 1px solid #DADDE2; } .pv-stat__num { font-size: 26px; } .pv-reasons--3 { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pv-band .pv-wrap { padding-top: 80px !important; padding-bottom: 80px !important; } .pv-band__title { font-size: 28px !important; letter-spacing: 0.08em !important; } .pv-band .pv-lead { font-size: 15px; } .pv-flowline { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pv-flowline::before { left: 21px; right: auto; top: 21px; bottom: 21px; width: 1px; height: auto; } .pv-flowline__item { flex-direction: row; text-align: left; gap: 18px; } .pv-lots, .pv-cases, .pv-compare { grid-template-columns: minmax(0, 1fr); } .pv-lot, .pv-lot + .pv-lot { padding: 24px 0; border-left: 0; } .pv-lot + .pv-lot { border-top: 1px solid #DADDE2; } .pv-lot__num { font-size: 56px; } .pv-cases { gap: 36px; } .pv-compare__col, .pv-compare__col + .pv-compare__col { padding: 24px 0; border-left: 0; } .pv-compare__col + .pv-compare__col { border-top: 1px solid #DADDE2; } } .pv-head h2.pv-display { font-size: 40px !important; line-height: 1.55 !important; } @media (max-width: 860px) { .pv-head h2.pv-display { font-size: 26px !important; } } .pv-case__img, .pv-photo { height: auto; } /* ---------- v1.28.0 more shared components (product pages) ---------- */ /* media + text, image as the main element; --rev puts the image on the right */ .pv-media { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; } .pv-media--rev > .pv-media__img { order: 2; } .pv-media__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; height: auto; } .pv-media__body { display: flex; flex-direction: column; gap: 22px; } .pv-media:has(> img[data-slot-missing]) { grid-template-columns: minmax(0, 1fr); max-width: 820px; } /* glossary (ingredients and similar term + explanation lists) */ .pv-glossary { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; } .pv-glossary__item { padding: 22px 0; border-top: 1px solid #DADDE2; } .pv-glossary dt { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: #2E2E2E; } .pv-glossary dd { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* two-way comparison */ .pv-compare--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-compare--2 .pv-compare__col { padding-right: 48px; } .pv-compare--2 .pv-compare__col + .pv-compare__col { padding-left: 48px; padding-right: 0; } .pv-compare--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-compare--4 .pv-compare__col { padding-right: 24px; } .pv-compare--4 .pv-compare__col + .pv-compare__col { padding-left: 24px; } .pv-compare .pv-facts { margin-top: 6px; } .pv-compare .pv-facts__row { grid-template-columns: 96px minmax(0, 1fr); padding: 14px 0; } .pv-compare .pv-facts__v { font-size: 14px; } /* coloured light list (LED devices) */ .pv-led { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #DADDE2; } .pv-led__item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid #E7E7E5; } .pv-led__name { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.12em; color: #2E2E2E; align-self: start; padding-top: 2px; } .pv-led__name::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c, #2E2E2E); flex: 0 0 auto; } .pv-led__title { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: #2E2E2E; } .pv-led__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* single-column numbered list */ .pv-numlist--1col { grid-template-columns: minmax(0, 1fr); } /* steps in rows of three */ .pv-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; } .pv-steps--3 .pv-steps__item:nth-child(3n)::before { display: none; } /* photo gallery that disappears completely while none of its photos exist */ .pv-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .pv-gallery figure { margin: 0; display: flex; flex-direction: column; gap: 10px; } .pv-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; height: auto; } .pv-gallery figcaption { font-size: 13px; color: #555555; text-align: center; } .pv-gallery figure:has(> img[data-slot-missing]) { display: none; } .pv-gallery--cases img { aspect-ratio: auto; object-fit: contain; } .pv-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } body.plurevo-fullpage .pv-needs-photo:not(:has(img:not([data-slot-missing]))) { display: none !important; } @media (max-width: 860px) { .pv-media { grid-template-columns: minmax(0, 1fr); gap: 28px; } .pv-media--rev > .pv-media__img { order: 0; } .pv-glossary { grid-template-columns: minmax(0, 1fr); } .pv-compare--2 { grid-template-columns: minmax(0, 1fr); } .pv-compare--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } .pv-compare--4 .pv-compare__col:nth-child(odd) { padding-left: 0; border-left: 0; } .pv-compare--2 .pv-compare__col, .pv-compare--2 .pv-compare__col + .pv-compare__col { padding: 24px 0; } .pv-led__item { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; } .pv-steps--3 { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .pv-steps--3 .pv-steps__item:nth-child(3n)::before { display: block; } .pv-steps--3 .pv-steps__item:last-child::before { display: none; } .pv-gallery { grid-template-columns: minmax(0, 1fr); gap: 24px; } .pv-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 861px) and (max-width: 1100px) { .pv-glossary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-media { gap: 40px; } } /* breadcrumb: wrap whole items instead of squeezing them letter by letter on phones */ body.plurevo-fullpage div.container-pad[style*="padding: 16px 48px; font-size: 11px"] { flex-wrap: wrap; row-gap: 4px; align-items: baseline; } body.plurevo-fullpage div.container-pad[style*="padding: 16px 48px; font-size: 11px"] > :is(a, span) { flex: 0 0 auto; white-space: nowrap; } body.plurevo-fullpage div.container-pad[style*="padding: 16px 48px; font-size: 11px"] > span:last-child { flex: 0 1 auto; white-space: normal; } /* photo tiles with a caption under each (body areas etc.) */ .pv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; } .pv-tile { display: flex; flex-direction: column; gap: 10px; } .pv-tile > :is(img, div) { width: 100% !important; } .pv-tile__en { font-size: 10px; letter-spacing: 0.16em; color: #6B6B6B; } .pv-tile__ja { font-size: 15px; font-weight: 500; color: #2E2E2E; } .pv-tile:has(> .slot-missing) { display: none; } /* steps with a photo each */ .pv-photosteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; } .pv-photostep { display: flex; flex-direction: column; gap: 12px; } .pv-photostep__no { font-size: 32px; font-weight: 200; line-height: 1; color: var(--pv-accent, #2E2E2E); margin-top: 6px; } .pv-photostep__title { margin: 0; font-size: 17px; font-weight: 500; color: #2E2E2E; } .pv-photostep__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* small tags (ingredients, features) */ .pv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .pv-tags li { font-size: 12px; line-height: 1.6; padding: 6px 14px; background: #FFFFFF; color: #4A4A4A; border-radius: 999px; border: 1px solid #DADDE2; } .pv-tags--center { justify-content: center; } /* menu list: label | name | description */ .pv-menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2E2E2E; } .pv-menu__item { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid #E7E7E5; } .pv-menu__label { font-size: 11px; letter-spacing: 0.16em; color: #2E2E2E; } .pv-menu__title { margin: 0; font-size: 18px; font-weight: 500; color: #2E2E2E; } .pv-menu__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } /* salon -> home -> salon cycle on a dark band */ .pv-cycle { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .pv-cycle__node { font-size: 34px; font-weight: 200; letter-spacing: 0.16em; color: #FFFFFF; } .pv-cycle__arrow { font-size: 22px; color: #A7ADB5; } /* two-column checklist */ .pv-check--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 56px; } .pv-check--2 .pv-check__title { font-size: 15px; font-weight: 400; line-height: 1.8; margin: 0; } /* simulation table */ .pv-table--sim td.pv-num { font-size: 22px; font-weight: 300; white-space: nowrap; color: #2E2E2E; } .pv-table--sim th[scope="row"] { font-size: 14px; } @media (max-width: 860px) { .pv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; } .pv-photosteps { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pv-menu__item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; } .pv-cycle { gap: 14px; } .pv-cycle__node { font-size: 22px; letter-spacing: 0.1em; } .pv-check--2 { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pv-table--sim, .pv-table--sim tbody, .pv-table--sim tr, .pv-table--sim th, .pv-table--sim td { display: block; width: 100%; } .pv-table--sim thead { display: none; } .pv-table--sim tr { padding: 16px 0; border-bottom: 1px solid #E7E7E5; } .pv-table--sim th, .pv-table--sim td { border: 0; padding: 2px 0; } .pv-table--sim td[data-k]::before { content: attr(data-k) "："; font-size: 12px; color: #6B6B6B; margin-right: 6px; } } @media (min-width: 861px) and (max-width: 1100px) { .pv-photosteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-menu__item { grid-template-columns: 160px minmax(0, 1fr); } .pv-menu__desc { grid-column: 2; } } @media (max-width: 860px) { .pv-led__item { grid-template-columns: 96px minmax(0, 1fr); } .pv-led__name { letter-spacing: 0.06em; font-size: 12px; } .pv-cycle { gap: 10px; flex-wrap: nowrap; } .pv-cycle__node { font-size: 18px; letter-spacing: 0.08em; } .pv-cycle__arrow { font-size: 16px; } .pv-wms-products .pv-case__img, .pv-wms-device .pv-media__img { aspect-ratio: 1 / 1 !important; } } /* stats with an English label on top; two-up comparison figures */ .pv-stat__en { font-size: 10px; letter-spacing: 0.16em; color: #2E2E2E; } .pv-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-stats--2 .pv-stat__num { font-size: 52px; font-weight: 200; } /* four-stage flow line with a description under each stage */ .pv-flowline--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .pv-flowline--4::before { left: 12%; right: 12%; } .pv-flowline__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; max-width: 260px; } /* checklist on a light background */ .pv-check--onlight .pv-check__mark { border-color: #2E2E2E; } .pv-check--onlight .pv-check__mark::after { border-color: #2E2E2E; } .pv-check--onlight .pv-check__title { color: #2E2E2E; } .pv-check--onlight .pv-check__desc { color: #555555; } /* comparison table (e.g. air-cooled vs water-cooled) */ .pv-table--compare th[scope="row"] { width: 22%; font-size: 14px; } .pv-table--compare td { font-size: 14px; color: #4A4A4A; vertical-align: top; } .pv-table--compare tbody td:nth-child(2) { color: #2E2E2E; font-weight: 500; background: #F7F8FA; } .pv-table--compare thead th:nth-child(2) { background: #2E2E2E; color: #FFFFFF; } @media (max-width: 860px) { .pv-stats--2 .pv-stat__num { font-size: 32px; } .pv-stats--2 .pv-stat:nth-child(n) { border-top: 0; } .pv-flowline--4 { grid-template-columns: minmax(0, 1fr); } .pv-flowline--4 .pv-flowline__item { align-items: flex-start; } .pv-flowline--4 .pv-flowline__item > div { display: flex; flex-direction: column; gap: 6px; } .pv-table--compare, .pv-table--compare tbody, .pv-table--compare tr, .pv-table--compare th, .pv-table--compare td { display: block; width: 100% !important; } .pv-table--compare thead { display: none; } .pv-table--compare tr { padding: 14px 0; border-bottom: 1px solid #E7E7E5; } .pv-table--compare th, .pv-table--compare td { border: 0; padding: 4px 0; background: transparent !important; } .pv-table--compare td[data-k]::before { content: attr(data-k); display: inline-block; min-width: 4.5em; font-size: 11px; color: #FFFFFF; background: #8B9096; padding: 1px 8px; margin-right: 8px; } .pv-table--compare td[data-k]:nth-child(2)::before { background: #2E2E2E; } } .pv-flowline__item > div { display: flex; flex-direction: column; gap: 8px; align-items: center; } @media (max-width: 860px) { .pv-flowline__item > div { align-items: flex-start; } } .pv-compare__col--focus { background: #FFFFFF; padding: 28px 32px !important; outline: 1px solid #2E2E2E; } .pv-compare__col--focus .pv-compare__no { font-weight: 600; } .pv-numlist--4col { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } .pv-numlist--4col .pv-numlist__item { grid-template-columns: minmax(0, 1fr); gap: 8px; } .pv-steps__label { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.14em; color: #2E2E2E; margin-bottom: 4px; } .pv-steps__img { margin-bottom: 6px; } @media (max-width: 860px) { .pv-numlist--4col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } } /* spec table (two columns) */ .pv-table--spec { border-top: 1px solid #2E2E2E; background: transparent; } .pv-table--spec th[scope="row"] { width: 26%; font-size: 13px; font-weight: 400; color: #6B6B6B; } .pv-table--spec td { font-size: 15px; color: #2E2E2E; } .pv-media__title { margin: 0; font-size: 24px !important; font-weight: 400; line-height: 1.6; color: #2E2E2E; } /* question and answer rows (dealers) */ .pv-qa { gap: 0; border-top: 1px solid #2E2E2E; } .pv-qa__row { padding: 22px 0; border-bottom: 1px solid #E7E7E5; } .pv-qa__q { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: #2E2E2E; } .pv-qa__a { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } .pv-qa__a a { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { .pv-table--spec th[scope="row"] { width: 36%; } .pv-media__title { font-size: 20px !important; } } .pv-numlist__item, .pv-check__item, .pv-led__item, .pv-menu__item { align-content: start; } .pv-head h2.serif, .pv-head h2 { word-break: keep-all; overflow-wrap: anywhere; } /* TOP: business card photo with the icon as fallback; news rows */ .pv-biz-media img:not([data-slot-missing]) + div { display: none !important; } body.plurevo-fullpage a.card-lift > div[style*="height: 220px; background: #F7F8FA"], body.plurevo-fullpage .pv-biz-media > div { background: #F0F1F3 !important; } .pv-news__row { display: flex; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid #DADDE2; color: #2E2E2E; text-decoration: none; } .pv-news__row:hover .pv-news__title { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } .pv-news__date { flex: 0 0 96px; font-size: 13px; color: #6B6B6B; letter-spacing: 0.06em; } .pv-news__title { font-size: 15px; line-height: 1.8; } @media (max-width: 860px) { .pv-news__row { flex-direction: column; gap: 4px; padding: 16px 0; } } /* vertical timeline (long development flows) */ .pv-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .pv-timeline::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: #DADDE2; } .pv-timeline__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 22px; padding: 0 0 30px; } .pv-timeline__item:last-child { padding-bottom: 0; } .pv-timeline__no { width: 44px; height: 44px; border-radius: 50%; background: #FFFFFF; border: 1px solid #2E2E2E; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #2E2E2E; position: relative; } .pv-timeline__item:last-child .pv-timeline__no { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; } .pv-timeline__title { margin: 9px 0 6px; font-size: 17px; font-weight: 500; color: #2E2E2E; } .pv-timeline__desc { margin: 0; font-size: 14px; line-height: 1.9; color: #555555; } .pv-subhead { margin: 0; font-size: 22px !important; font-weight: 400; color: #2E2E2E; } .pv-compare--1 { grid-template-columns: minmax(0, 1fr); } @media (max-width: 860px) { body.plurevo-fullpage div.grid-2[style*="margin: 0 -48px"] { margin: 0 !important; width: 100% !important; padding: 28px 20px !important; } } /* v1.29.0: page header - the H1 names the page's topic; a subtitle line and a catch copy line are smaller */ .page-hero__sub { display: inline-block; margin-top: 6px; font-size: 0.5em; letter-spacing: 0.08em; line-height: 1.7; color: rgba(255, 255, 255, 0.9); } .page-hero__lead { margin: 0; font-size: 18px; line-height: 1.8; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.92); } @media (max-width: 767px) { .page-hero__sub { font-size: 0.58em; } .page-hero__lead { font-size: 14px; letter-spacing: 0.06em; } } /* v1.30.0: logo images (header: horizontal logo / footer: logo mark) */ .site-logo { display: block; width: 212px; height: auto; } .footer-mark { display: block; width: 240px; height: auto; margin: -20px 0 6px -12px; filter: brightness(1.45) contrast(1.05); } @media (max-width: 860px) { .site-logo { width: 156px; } .footer-mark { width: 200px; margin: -14px 0 4px -10px; } } /* v1.31.0: photos added to the text pages */ .pv-cardimg { display: block; aspect-ratio: 16 / 9; height: auto; object-fit: cover; max-width: none; } .pv-cardimg--top { aspect-ratio: auto; } .card-lift:has(> .pv-cardimg) { overflow: hidden; } .pv-inline-photo { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; } .pv-side-photo { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; margin-top: 18px; } .pv-photo--contain { object-fit: contain; background: #FFFFFF; aspect-ratio: 16 / 6; } .pv-split > .pv-head:has(.pv-side-photo) { position: sticky; top: 24px; } @media (max-width: 860px) { .pv-split > .pv-head:has(.pv-side-photo) { position: static; } .pv-photo--contain { aspect-ratio: 16 / 9; } } .pv-photo--net { aspect-ratio: 16 / 7; object-fit: cover; } .pv-photo--product { aspect-ratio: 16 / 7; object-fit: contain; background: #FFFFFF; } .pv-lot-top .pv-split { align-items: start; } @media (max-width: 860px) { .pv-photo--net, .pv-photo--product { aspect-ratio: 4 / 3; } } /* v1.32.0: repair page - makers list and notes */ .pv-tags--maker li { font-size: 15px; padding: 8px 20px; letter-spacing: 0.04em; color: #2E2E2E; } .pv-notes { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid #DADDE2; } .pv-notes .pv-note { color: #6B6B6B; } /* v1.33.0: repair page makers table */ .pv-table--makers th[scope="row"] { width: 46%; font-size: 15px; font-weight: 500; color: #2E2E2E; } .pv-table--makers thead th { background: #F0F0F0; } .pv-repair-equip .pv-subhead { margin-top: 8px; } @media (max-width: 860px) { .pv-table--makers th[scope="row"] { width: 50%; font-size: 14px; } } .pv-text a, .pv-reason__desc a { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } /* v1.35.0: PLM lifecycle (5 stages) */ .pv-flowline--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } .pv-flowline--5::before { left: 10%; right: 10%; } .pv-note a { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { .pv-flowline--5 { grid-template-columns: minmax(0, 1fr); } .pv-flowline--5 .pv-flowline__item { align-items: flex-start; } } /* v1.37.0: clinic devices */ .pv-devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; } .pv-device { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; } .pv-device__img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; background: #F3F4F6; } .pv-device__body { display: flex; flex-direction: column; gap: 10px; } .pv-device__title { margin: 0; font-size: 20px; font-weight: 500; color: #2E2E2E; line-height: 1.6; } .pv-device__cat { margin: 0; font-size: 13px; color: #6B6B6B; } .pv-device__desc { margin: 0; font-size: 14px; line-height: 1.95; color: #4A4A4A; } .pv-facts--sm .pv-facts__row { grid-template-columns: 110px minmax(0, 1fr); padding: 12px 0; gap: 14px; } .pv-facts--sm .pv-facts__v { font-size: 13px; line-height: 1.8; } .pv-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; } .pv-mini { display: flex; flex-direction: column; gap: 8px; } .pv-mini img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; background: #F3F4F6; } .pv-mini a { font-size: 16px; font-weight: 500; color: #2E2E2E; text-decoration: underline; text-underline-offset: 4px; } .pv-mini span { font-size: 13px; color: #6B6B6B; line-height: 1.7; } @media (max-width: 860px) { .pv-devices { grid-template-columns: minmax(0, 1fr); gap: 44px; } .pv-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .pv-mini a { font-size: 14px; } } /* v1.38.0: product index and peeling lineup */ .pv-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .pv-index__title { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid #2E2E2E; font-size: 16px; font-weight: 500; color: #2E2E2E; } .pv-index ul { list-style: none; margin: 0; padding: 0; } .pv-index li { border-bottom: 1px solid #E7E7E5; } .pv-index li a { display: block; padding: 12px 0; font-size: 14px; line-height: 1.7; color: #2E2E2E; text-decoration: none; } .pv-index li a::after { content: " →"; color: #A7ADB5; } .pv-index li a:hover { text-decoration: underline; text-underline-offset: 3px; } .pv-table--lineup th[scope="row"] { font-size: 14px; } .pv-table--lineup td { font-size: 14px; } .pv-table--lineup a { color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 860px) { .pv-index { grid-template-columns: minmax(0, 1fr); gap: 28px; } .pv-table--lineup, .pv-table--lineup tbody, .pv-table--lineup tr, .pv-table--lineup th, .pv-table--lineup td { display: block; width: 100%; } .pv-table--lineup thead { display: none; } .pv-table--lineup tr { padding: 14px 0; border-bottom: 1px solid #E2DED6; } .pv-table--lineup th, .pv-table--lineup td { border: 0; padding: 2px 0; } } .pv-device__img--contain { object-fit: contain; background: #FFFFFF; } /* ============================================================ v1.54.0 contact page layout ============================================================ */ .pv-contact__wrap { max-width: 1200px; margin: 0 auto; padding: 88px 48px 120px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 72px; align-items: start; } .pv-contact__side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 32px; } .pv-contact__intro { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; } .pv-contact__title { margin: 0; font-size: 28px; font-weight: 400; line-height: 1.5; color: #2E2E2E; } .pv-contact__lead { margin: 0; font-size: 14px; line-height: 2; color: #545454; } .pv-contact__card { border: 1px solid #DADDE2; background: #FFFFFF; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; } .pv-contact__card--split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pv-contact__card--split > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .pv-contact__label { font-size: 11px; letter-spacing: 0.16em; color: #6B6B6B; } .pv-contact__text { margin: 0; font-size: 13px; line-height: 1.9; color: #545454; } .pv-contact__value { font-size: 16px; letter-spacing: 0.04em; color: #2E2E2E; word-break: break-all; } .pv-contact__btn { align-self: flex-start; border: 1px solid #2E2E2E; color: #2E2E2E; background: #FFFFFF; font-size: 13px; letter-spacing: 0.1em; padding: 13px 28px; } .pv-contact__block { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; } .pv-contact__flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid #DADDE2; } .pv-contact__flow li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #DADDE2; font-size: 13px; color: #2E2E2E; } .pv-contact__flow li span { font-size: 12px; color: #8B9096; letter-spacing: 0.1em; min-width: 22px; } .pv-contact__main { min-width: 0; } .contact-form.pv-contact-form { position: relative; width: 100%; background: #FFFFFF; border: 1px solid #E4E2DD; border-radius: 4px; padding: 56px 56px 48px !important; display: flex; flex-direction: column; gap: 28px; box-shadow: 0 28px 64px rgba(46, 46, 46, 0.08); } .pv-contact-form__head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; border-bottom: 1px solid #ECEDEF; } .pv-contact-form__title { margin: 0; font-size: 24px; font-weight: 400; color: #2E2E2E; } .pv-contact-form__hint { margin: 0; font-size: 12px; line-height: 1.8; color: #6B6B6B; } .pv-contact-form .form-grid-2 { gap: 28px 24px; } .pv-contact-form .form-field { gap: 10px; } .pv-contact-form .form-label { font-size: 13px; display: inline-flex; align-items: center; gap: 8px; } .pv-contact-form .req { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; font-size: 10px; letter-spacing: 0.06em; font-weight: 500; color: #FFFFFF; background: #6B6B6B; border-radius: 2px; line-height: 1; vertical-align: middle; } .pv-contact-form .form-input { font-size: 15px; padding: 15px 16px; border-color: #D5D8DD; background-color: #FCFCFD; } .pv-contact-form .form-input:focus { background-color: #FFFFFF; border-color: #2E2E2E; box-shadow: 0 0 0 3px rgba(46, 46, 46, 0.06); } .pv-contact-form select.form-input { padding-right: 40px; } .pv-contact-form textarea.form-input { min-height: 180px; } .pv-contact-form .form-checks { gap: 12px 28px; padding-top: 2px; } .pv-contact-form__agree { padding: 18px 20px; background: #F7F8FA; border: 1px solid #ECEDEF; font-size: 13px; } .pv-contact-form .form-submit { padding: 19px; font-size: 14px; margin-top: 4px; } .pv-contact-form__note { margin: -8px 0 0; font-size: 12px; line-height: 1.9; color: #8B9096; text-align: center; } .pv-contact-form .form-notice { margin: 0; } @media (max-width: 960px) { .pv-contact__wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 64px 32px 96px; } .pv-contact__side { position: static; } } @media (max-width: 520px) { .pv-contact__wrap { padding: 48px 16px 72px; gap: 40px; } .pv-contact__title { font-size: 24px !important; } .pv-contact__card { padding: 22px 20px; } .pv-contact__card--split { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pv-contact__btn { align-self: stretch; } .contact-form.pv-contact-form { padding: 36px 20px 32px !important; gap: 24px; } .pv-contact-form .form-grid-2 { gap: 24px; } .pv-contact-form .form-input { font-size: 16px; } } /* v1.55.0 PRODUCTS mega menu */ .mega-panel.pv-mega { padding: 32px 40px 36px; flex-direction: column; gap: 22px; } .pv-mega__top { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #2E2E2E; } .pv-mega__title { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: #2E2E2E; } .pv-mega__all { font-size: 12px; letter-spacing: 0.08em; color: #6B6B6B; } .pv-mega__all:hover { color: #2E2E2E; } .pv-mega__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 40px; } .pv-mega__col { display: flex; flex-direction: column; gap: 28px; min-width: 0; } .pv-mega__group { display: flex; flex-direction: column; gap: 2px; } .pv-mega__head { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: #6B6B6B; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #E4E6E9; } .pv-mega__link { display: block; font-size: 14px; line-height: 1.6; padding: 7px 0; color: #2E2E2E; } .pv-mega__link:hover { color: #000000; } /* v1.59.0 repair page: key points, checklist */ .pv-keylist { margin: 0; display: flex; flex-direction: column; gap: 10px; } .pv-keylist > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding-top: 10px; border-top: 1px solid #E4E6E9; } .pv-keylist > div:first-child { border-top: 0; padding-top: 0; } .pv-keylist dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #2E2E2E; line-height: 2; } .pv-keylist dd { margin: 0; font-size: 14px; line-height: 2; color: #2E2E2E; } .pv-checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid #DADDE2; } .pv-checklist li { position: relative; padding: 14px 0 14px 30px; border-bottom: 1px solid #DADDE2; font-size: 14px; line-height: 1.9; color: #2E2E2E; } .pv-checklist li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 12px; height: 7px; border-left: 1.5px solid #2E2E2E; border-bottom: 1.5px solid #2E2E2E; transform: rotate(-45deg); } .pv-repair-compare .pv-table th[scope="row"] { width: 38%; } @media (max-width: 520px) { .pv-repair-key { padding: 22px 20px !important; } .pv-keylist > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } } /* v1.63.0 privacy policy */ .pv-policy { max-width: 820px; margin: 0 auto; padding: 88px 48px 104px; display: flex; flex-direction: column; gap: 40px; } .pv-policy__lead { margin: 0; font-size: 15px; line-height: 2; color: #2E2E2E; } .pv-policy__toc { border: 1px solid #DADDE2; background: #F7F8FA; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; } .pv-policy__toc-label { font-size: 11px; letter-spacing: 0.16em; color: #6B6B6B; } .pv-policy__toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; } .pv-policy__toc a { font-size: 14px; line-height: 1.8; color: #2E2E2E; } .pv-policy__toc a:hover { text-decoration: underline; } .pv-policy__sec { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 24px; } .pv-policy__h { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.6; color: #2E2E2E; padding-bottom: 12px; border-bottom: 1px solid #DADDE2; } .pv-policy__p { margin: 0; word-break: normal; line-break: strict; font-size: 15px; line-height: 2; color: #2E2E2E; } .pv-policy__list { list-style: disc; margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; } .pv-policy__list li { list-style: disc; font-size: 15px; line-height: 1.9; color: #2E2E2E; } .pv-policy__contact { border: 1px solid #DADDE2; padding: 24px 28px; } .pv-policy__contact p { margin: 0; font-size: 15px; line-height: 2; color: #2E2E2E; } .pv-policy__contact a { color: #2E2E2E; text-decoration: underline; } .pv-policy__date { margin: 0; font-size: 13px; color: #545454; text-align: right; } .pv-contact-form__agree a { color: #2E2E2E; text-decoration: underline; } @media (max-width: 520px) { .pv-policy { padding: 56px 16px 72px; gap: 32px; } .pv-policy__toc { padding: 20px; } .pv-policy__toc ol { grid-template-columns: minmax(0, 1fr); } .pv-policy__h { font-size: 17px; } } /* ============================================================ v1.64.0 header + layout consistency - Header: labels never break inside a word; tighter spacing up to 1280px; hamburger menu up to 1200px (the desktop row no longer fits there). - Layout widths: 1200px (sections, header, footer) / 880px / 760px; paragraphs up to 640px. - Type scale: body 15px, secondary 14px, notes 13px; section headings 32px, sub headings 26px. ============================================================ */ .desktop-nav .nav-label, .desktop-nav > a, .desktop-nav .nav-item > a, .desktop-only { white-space: nowrap; } /* the header now shares the 1200px content width, so the menu and buttons use a tighter spacing at every desktop width */ .desktop-nav { gap: 26px !important; } .desktop-only { padding-left: 18px !important; padding-right: 18px !important; letter-spacing: 0.08em !important; } @media (max-width: 1200px) { .desktop-nav { display: none !important; } .desktop-only { display: none !important; } .hamburger-btn { display: flex !important; } .header-line-sp { display: inline-flex !important; } .acc-toggle:checked ~ .acc-panel { max-height: 2400px; } .mobile-nav-toggle:checked ~ .container-pad { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: #FFFFFF; border-bottom: 1px solid #DADDE2; } .mobile-nav-toggle:checked ~ .mobile-menu-panel { position: fixed; top: 80px; left: 0; right: 0; bottom: 0; z-index: 1000; background: #FFFFFF; border-top: none; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; animation: plurevo-menu-in 0.18s ease-out; } .mobile-nav-toggle:checked ~ .mobile-menu-panel > .container-pad { padding-bottom: 48px !important; } html:has(#mobile-nav-toggle:checked), body:has(#mobile-nav-toggle:checked) { overflow: hidden; } body:has(#mobile-nav-toggle:checked) .floating-cta { display: none !important; } .hamburger-btn svg line { transition: transform 0.2s ease, opacity 0.2s ease; transform-box: fill-box; transform-origin: center; } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(2) { opacity: 0; } .mobile-nav-toggle:checked ~ .container-pad .hamburger-btn svg line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } .pv-head h2.serif { font-size: 32px !important; } .pv-lead { max-width: 640px; } /* v1.64.0: the wide split (About philosophy etc.) stayed two narrow columns on phones because its rule came after the mobile rule */ @media (max-width: 860px) { .pv-split--wide { grid-template-columns: minmax(0, 1fr); align-items: start; } } /* ============================================================ v1.65.0 adopted design: minimal and calm on desktop, left-aligned on phones ============================================================ */ /* first view: photo stays, smaller title and height */ .page-hero { aspect-ratio: auto !important; height: 320px; min-height: 0 !important; max-height: none !important; } .page-hero__inner { gap: 10px !important; } .page-hero__title { font-size: 30px !important; line-height: 1.5 !important; } .page-hero__lead { font-size: 14px !important; letter-spacing: 0.08em !important; } /* section rhythm and headings */ body.plurevo-fullpage .section-pad-v { padding-top: 96px !important; padding-bottom: 96px !important; } .pv-wrap { padding-top: 96px; padding-bottom: 96px; gap: 44px; } body.plurevo-fullpage h2.serif:not(.pv-band__title):not(.hero-title) { font-size: 26px !important; line-height: 1.6 !important; } .pv-head { gap: 12px; } .pv-head h2.serif::after { content: ""; display: block; width: 32px; height: 1px; background: #2E2E2E; margin: 18px auto 0; } .pv-head--left h2.serif::after { margin-left: 0; } /* in-page menu: pills */ nav[aria-label="ページ内メニュー"] a { border-radius: 999px !important; padding: 8px 18px !important; font-size: 13px !important; transition: border-color .15s ease; } nav[aria-label="ページ内メニュー"] a:hover { border-color: #2E2E2E !important; } /* tables: calm header row */ .pv-table thead th { background: #F3F4F6; color: #2E2E2E; font-size: 13px; } /* buttons side by side get the same width */ body.plurevo-fullpage div:has(> a.btn-primary):has(> a.btn-outline):not(:has(> .header-line-sp)):not(:has(> .desktop-only)) { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(220px, max-content); justify-content: center; } body.plurevo-fullpage div:has(> a.btn-primary):has(> a.btn-outline):not(:has(> .header-line-sp)):not(:has(> .desktop-only)) > a { display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; min-width: 240px; } /* tags, notes */ .pv-tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pv-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #EEF0F2; font-size: 12px; color: #2E2E2E; } .pv-note { margin: 0; font-size: 13px; line-height: 1.9; color: #6B6B6B; } /* handpiece rows */ .pv-hand { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; } .pv-hand__img { aspect-ratio: 16 / 10; overflow: hidden; background: #F3F4F6; } .pv-hand__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-hand__body { display: flex; flex-direction: column; gap: 14px; } .pv-hand__title { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.6; } .pv-hand__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; font-size: 14px; } .pv-hand__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #DADDE2; } .pv-hand__facts dt { color: #6B6B6B; } .pv-hand__facts dd { margin: 0; text-align: right; } /* treatment areas */ .pv-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px 12px; } .pv-areas li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 14px; line-height: 1.6; word-break: keep-all; } .pv-areas__img { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: #F3F4F6; display: block; } .pv-areas__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* slider */ .pv-slider { display: flex; flex-direction: column; gap: 20px; } .pv-slider__bar { display: flex; justify-content: flex-end; } .pv-slider__nav { display: flex; gap: 8px; } .pv-slider__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2E2E2E; background: #FFFFFF; color: #2E2E2E; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .pv-slider__btn:hover:not(:disabled) { background: #2E2E2E; color: #FFFFFF; } .pv-slider__btn:disabled { opacity: .3; cursor: default; } .pv-slider__btn:focus-visible, .pv-slider__track:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; } .pv-slider__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pv-slider__track::-webkit-scrollbar { display: none; } .pv-slider__item { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; margin: 0; } .pv-slider__dots { display: flex; gap: 6px; justify-content: center; } .pv-slider__dots span { width: 28px; height: 2px; background: #DADDE2; } .pv-slider__dots span.is-on { background: #2E2E2E; } .pv-slider.is-static .pv-slider__bar, .pv-slider.is-static .pv-slider__dots { display: none; } .pv-case { display: flex; flex-direction: column; gap: 10px; } .pv-case img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain; display: block; background: #FFFFFF; border: 1px solid #E4E6E9; } .pv-case figcaption { font-size: 14px; color: #2E2E2E; } @media (prefers-reduced-motion: reduce) { .pv-slider__track { scroll-behavior: auto; } } @media (max-width: 860px) { .page-hero { height: 200px; } .page-hero__inner { align-items: flex-start !important; text-align: left !important; padding: 20px !important; } .page-hero__title { font-size: 19px !important; line-height: 1.5 !important; } .page-hero__lead, .page-hero__sub { font-size: 11px !important; letter-spacing: 0.04em !important; } .page-hero__eyebrow { font-size: 9px !important; } body.plurevo-fullpage .section-pad-v { padding-top: 64px !important; padding-bottom: 64px !important; } .pv-wrap { padding-top: 64px !important; padding-bottom: 64px !important; gap: 32px; } body.plurevo-fullpage h2.serif:not(.pv-band__title):not(.hero-title) { font-size: 20px !important; } /* phones: everything reads from the left */ .pv-head { align-items: flex-start !important; text-align: left !important; } .pv-head h2.serif::after { margin-left: 0; } body.plurevo-fullpage [style*="text-align: center"]:not(a):not(button):not(th):not(td):not(figcaption):not(.floating-cta):not(.page-hero__inner) { text-align: left !important; } body.plurevo-fullpage [style*="flex-direction: column"][style*="align-items: center"]:not(a):not(.page-hero__inner) { align-items: flex-start !important; } body.plurevo-fullpage [style*="justify-content: center"][style*="flex-wrap: wrap"] { justify-content: flex-start !important; } .pv-note { text-align: left !important; } /* stacked buttons: same full width */ body.plurevo-fullpage div:has(> a.btn-primary):has(> a.btn-outline):not(:has(> .header-line-sp)):not(:has(> .desktop-only)) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr) !important; width: 100%; justify-content: stretch; } body.plurevo-fullpage div:has(> a.btn-primary):has(> a.btn-outline):not(:has(> .header-line-sp)):not(:has(> .desktop-only)) > a { width: 100% !important; min-width: 0; } .pv-hand { grid-template-columns: minmax(0, 1fr); gap: 20px; } .pv-hand__facts { grid-template-columns: minmax(0, 1fr); } .pv-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; } .pv-areas__img { width: 72px; height: 72px; } .pv-areas li { font-size: 11px; letter-spacing: 0; } .pv-slider__bar, .pv-slider__dots { display: none; } .pv-slider__track { margin-right: -20px; padding-right: 20px; } .pv-slider__item { flex-basis: 78%; } } /* ============================================================ v1.66.0 TOP first view: full-screen photo slideshow (fade + slow zoom), silver monochrome photos ============================================================ */ .pv-fv { position: relative; width: 100%; height: clamp(560px, calc(100svh - 132px), 880px); overflow: hidden; background: #E9ECEF; display: flex; align-items: center; isolation: isolate; } .pv-fv__slides { position: absolute; inset: 0; z-index: -2; } .pv-fv__slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; animation: pv-fv-fade 48s linear infinite; animation-delay: calc(var(--i) * 6s - 1.5s); } .pv-fv__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; transform-origin: var(--org, 50% 50%); animation: pv-fv-zoom 48s linear infinite; animation-delay: inherit; will-change: transform; } @keyframes pv-fv-fade { 0% { opacity: 0; } 3.2% { opacity: 1; } 12.5% { opacity: 1; } 15.7% { opacity: 0; } 100% { opacity: 0; } } @keyframes pv-fv-zoom { 0% { transform: scale(1); } 15.7% { transform: scale(1.1); } 100% { transform: scale(1.1); } } /* soft white veil so the dark text stays readable */ .pv-fv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(247, 248, 250, 0.94) 0%, rgba(247, 248, 250, 0.82) 34%, rgba(247, 248, 250, 0.2) 62%, rgba(247, 248, 250, 0) 100%); } .pv-fv__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; } .pv-fv__copy { max-width: 560px; display: flex; flex-direction: column; gap: 22px; } .pv-fv__eyebrow { color: #2E2E2E !important; } .pv-fv__tag { font-size: 13px; letter-spacing: 0.22em; color: #6B6B6B; } .pv-fv .hero-title { margin: 0; font-size: 40px !important; line-height: 1.6; font-weight: 400; color: #2E2E2E; letter-spacing: 0.06em; max-width: none !important; } .pv-fv__lead { margin: 0; font-size: 15px; line-height: 2; color: #3F3F3F; } .pv-fv__cta { display: flex; gap: 12px; margin-top: 10px; justify-content: start !important; } .pv-fv__cta a { font-size: 13px; letter-spacing: 0.1em; padding: 17px 34px; } .pv-fv__cta .btn-primary { background: #2E2E2E; color: #FFFFFF; } .pv-fv__cta .btn-outline { border: 1px solid #2E2E2E; color: #2E2E2E; background: rgba(255, 255, 255, 0.6); } .pv-fv__scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding-bottom: 76px; font-family: 'Outfit', sans-serif; font-size: 10px; letter-spacing: 0.3em; color: #2E2E2E; writing-mode: vertical-rl; } .pv-fv__scroll::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 64px; background: linear-gradient(#2E2E2E 50%, rgba(46, 46, 46, 0.2) 50%); background-size: 1px 128px; animation: pv-fv-line 2.4s ease-in-out infinite; } @keyframes pv-fv-line { 0% { background-position: 0 -64px; } 100% { background-position: 0 64px; } } @media (prefers-reduced-motion: reduce) { .pv-fv__slide, .pv-fv__slide img, .pv-fv__scroll::after { animation: none; } .pv-fv__slide:first-child { opacity: 1; } } @media (max-width: 860px) { .pv-fv { height: auto; min-height: calc(100svh - 112px); align-items: flex-end; } .pv-fv::before { background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0.1) 22%, rgba(247, 248, 250, 0.82) 46%, rgba(247, 248, 250, 0.97) 100%); } .pv-fv__inner { padding: 180px 20px 40px; } .pv-fv__copy { gap: 14px; } .pv-fv__eyebrow { font-size: 10px !important; } .pv-fv__tag { font-size: 11px; } .pv-fv .hero-title { font-size: 25px !important; line-height: 1.6 !important; } .pv-fv__lead { font-size: 13px; line-height: 1.95; } .pv-fv__cta { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px; margin-top: 6px; } .pv-fv__cta a { width: 100% !important; min-width: 0 !important; padding: 15px 20px; } .pv-fv__scroll { display: none; } } /* v1.67.0: TOP first view = English line + title + buttons only; description moved to "PLUREVOとは" */ .pv-fv__line { display: inline-block; } .pv-fv__copy { gap: 26px; } .pv-fv__cta { margin-top: 14px; } .pv-about { width: 100%; background: #FFFFFF; } .pv-about__inner { max-width: 1200px; margin: 0 auto; padding: 112px 48px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; } .pv-about__text { display: flex; flex-direction: column; gap: 22px; } .pv-about__title { margin: 0; font-weight: 400; color: #2E2E2E; } .pv-about__title::after { content: ""; display: block; width: 32px; height: 1px; background: #2E2E2E; margin-top: 20px; } .pv-about__lead { margin: 0; font-size: 15px; line-height: 2.1; color: #3F3F3F; } .pv-about__more { align-self: flex-start; display: inline-flex; gap: 12px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid #2E2E2E; font-size: 13px; letter-spacing: 0.1em; color: #2E2E2E; text-decoration: none; } .pv-about__more span { transition: transform .2s ease; } .pv-about__more:hover span { transform: translateX(4px); } .pv-about__img { aspect-ratio: 4 / 3; overflow: hidden; background: #F3F4F6; } .pv-about__img img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 860px) { .pv-fv__inner { padding: 260px 20px 56px; } .pv-fv__copy { gap: 16px; } .pv-fv .hero-title { font-size: 24px !important; letter-spacing: 0.04em; } .pv-fv::before { background: linear-gradient(180deg, rgba(247, 248, 250, 0) 0%, rgba(247, 248, 250, 0) 40%, rgba(247, 248, 250, 0.78) 64%, rgba(247, 248, 250, 0.95) 100%); } .pv-about__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 20px; } .pv-about__lead { font-size: 14px; line-height: 2; } } /* ============================================================ v1.68.0 Device pages: Onda Lift build-out on the other device pages (handpiece rows, comparison tables, photo sliders). Every new photo slot stays invisible until a photo exists. ============================================================ */ .pv-slider__item:has(> img[data-slot-missing]) { display: none; } /* photo gallery slider (continues the band above it) */ body.plurevo-fullpage .pv-gallery-sec .pv-wrap { padding-top: 0 !important; } .pv-shot img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; background: #F3F4F6; } /* handpiece rows: spec list, and a text-only row while its photo is not uploaded yet */ .pv-hand__spec { margin: 0; display: flex; flex-direction: column; font-size: 14px; } .pv-hand__spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #DADDE2; } .pv-hand__spec > div:last-child { border-bottom: 1px solid #DADDE2; } .pv-hand__spec dt { color: #6B6B6B; flex: 0 0 auto; } .pv-hand__spec dd { margin: 0; text-align: right; color: #2E2E2E; } .pv-hand__img:has(img[data-slot-missing]) { display: none; } .pv-hand:has(> .pv-hand__img img[data-slot-missing]) { grid-template-columns: minmax(0, 1fr); max-width: 820px; width: 100%; margin: 0 auto; } .pv-reshot-hp .pv-note { text-align: center; } /* optional photo above a function / step */ .pv-numlist__img, .pv-steps__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #F3F4F6; margin-bottom: 14px; } .pv-numlist__img img, .pv-steps__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-numlist__img:has(img[data-slot-missing]), .pv-steps__img:has(img[data-slot-missing]) { display: none; } /* comparison band */ .pv-compare-sec .pv-table--compare th[scope="col"] { white-space: nowrap; } /* Kannam Vision analysis images: 5 per view */ .kv-slider .pv-slider__item { flex-basis: calc((100% - 80px) / 5); } @media (max-width: 860px) { .kv-slider .pv-slider__item { flex-basis: 42%; } .pv-hand__spec dd { text-align: left; } .pv-hand__spec > div { flex-direction: column; gap: 2px; } .pv-compare-sec .pv-table--compare th[scope="col"] { white-space: normal; } } /* ============================================================ v1.69.0 TOP page below the first view: 5 sections (purpose / products / solutions / about / contact) Colours: #FFFFFF, #F7F8FA, #2E2E2E and the existing greys only. ============================================================ */ .pv-home-sec { width: 100%; } .pv-home-inner { max-width: 1200px; margin: 0 auto; padding: 96px 48px; box-sizing: border-box; } .pv-home-head { display: flex; flex-direction: column; gap: 14px; } .pv-home-head--center { align-items: center; text-align: center; } .pv-home-eyebrow { font-size: 11px !important; letter-spacing: 0.24em !important; color: #6B6B6B !important; } .pv-home-h2 { margin: 0; font-weight: 400; letter-spacing: 0.06em; color: #2E2E2E; } .pv-home-lead { margin: 0; font-size: 14px; line-height: 2; color: #6B6B6B; max-width: 560px; } .pv-home-note { margin: 16px 0 0; font-size: 12px; line-height: 1.8; color: #6B6B6B; } .pv-home-note--center { text-align: center; margin-top: 32px; } .pv-home-link { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; color: #2E2E2E; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease; } .pv-home-link:hover, .pv-home-link:focus-visible { border-bottom-color: #2E2E2E; } .pv-home-link--strong { font-size: 13px; letter-spacing: 0.04em; border-bottom-color: #2E2E2E; } .pv-home-arrow { font-family: 'Outfit', sans-serif; font-size: 12px; transition: transform .2s ease; } a:hover > .pv-home-arrow { transform: translateX(3px); } /* PURPOSE: text only, no cards */ .pv-home-purpose { background: #FFFFFF; } .pv-home-purpose__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; } .pv-home-purpose__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 1px solid #DADDE2; } .pv-home-purpose__item { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; row-gap: 6px; padding: 22px 0; border-bottom: 1px solid #DADDE2; } .pv-home-purpose__no { grid-row: span 2; font-size: 12px; color: #A7ADB5; padding-top: 4px; letter-spacing: 0.08em; } .pv-home-purpose__title { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.6; color: #2E2E2E; letter-spacing: 0.04em; } .pv-home-purpose__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; } .pv-home-purpose__links .pv-home-link { color: #6B6B6B; font-size: 12.5px; } .pv-home-purpose__links .pv-home-link:hover { color: #2E2E2E; } /* PRODUCTS: tabs, three products + VIEW ALL per category */ .pv-home-products { background: #F7F8FA; } .pv-home-products__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; } .pv-home-tablist { display: none; gap: 8px; margin-bottom: 32px; } .pv-tabs-ready .pv-home-tablist { display: flex; flex-wrap: wrap; } .pv-home-tab { appearance: none; border: 1px solid #C0C4C9; background: transparent; color: #2E2E2E; font: inherit; font-size: 13px; letter-spacing: 0.04em; padding: 10px 22px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .pv-home-tab:hover { border-color: #2E2E2E; } .pv-home-tab[aria-selected="true"] { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; } .pv-home-tab:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; } .pv-home-panel + .pv-home-panel { margin-top: 56px; } .pv-tabs-ready .pv-home-panel + .pv-home-panel { margin-top: 0; } .pv-tabs-ready .pv-home-panel[hidden] { display: none; } .pv-home-panel__title { margin: 0 0 20px; font-size: 15px; font-weight: 500; color: #2E2E2E; display: flex; gap: 14px; align-items: baseline; } .pv-home-panel__title .font-en { font-size: 11px; letter-spacing: 0.2em; color: #6B6B6B; } .pv-tabs-ready .pv-home-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pv-home-prods { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .pv-home-prod > a { display: flex; flex-direction: column; gap: 6px; height: 100%; color: #2E2E2E; text-decoration: none; } .pv-home-prod__img { display: block; aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; margin-bottom: 12px; } .pv-home-prod__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; display: block; transition: transform .6s ease; } .pv-home-prod > a:hover .pv-home-prod__img img { transform: scale(1.03); } .pv-home-prod__cat { font-size: 11px; letter-spacing: 0.08em; color: #6B6B6B; } .pv-home-prod__name { font-size: 15px; font-weight: 500; line-height: 1.6; letter-spacing: 0.02em; } .pv-home-prod__desc { font-size: 12.5px; line-height: 1.8; color: #6B6B6B; } .pv-home-prod--all > a { aspect-ratio: 1 / 1; height: auto; justify-content: center; align-items: center; gap: 14px; border: 1px solid #C0C4C9; text-align: center; padding: 24px; box-sizing: border-box; transition: background .2s ease, border-color .2s ease; } .pv-home-prod--all > a:hover { background: #FFFFFF; border-color: #2E2E2E; } .pv-home-prod__all { font-size: 18px; letter-spacing: 0.24em; } .pv-home-prod__allname { font-size: 13px; display: inline-flex; gap: 8px; align-items: baseline; } .pv-home-products__more { margin: 28px 0 0; text-align: right; } /* SOLUTIONS: tall photos */ .pv-home-solutions { background: #FFFFFF; } .pv-home-sols { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .pv-home-sol { display: flex; flex-direction: column; gap: 12px; } .pv-home-sol__img { display: block; aspect-ratio: 5 / 4; overflow: hidden; background: #F3F4F6; margin-bottom: 12px; } .pv-home-sol__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; } .pv-home-sol:hover .pv-home-sol__img img { transform: scale(1.03); } .pv-home-sol__title { margin: 0; font-size: 19px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.6; } .pv-home-sol__title a { color: #2E2E2E; text-decoration: none; } .pv-home-sol__text { margin: 0; font-size: 13px; line-height: 2; color: #6B6B6B; } .pv-home-sol__links { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid #DADDE2; display: flex; flex-wrap: wrap; gap: 6px 18px; } .pv-home-sol__links .pv-home-link { font-size: 12.5px; } /* ABOUT: brand image (kept at its own proportions) + text on silver grey */ .pv-home-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; background: #F7F8FA; padding: 96px max(48px, calc((100% - 1200px) / 2 + 48px)); box-sizing: border-box; } .pv-home-about__img { aspect-ratio: 605 / 515; overflow: hidden; background: #E9ECEF; } .pv-home-about__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-home-about__body { display: flex; flex-direction: column; gap: 18px; max-width: 640px; } .pv-home-about__lead { margin: 0; font-size: 14px; line-height: 2.1; color: #4A4A4A; } .pv-home-about__quote { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #2E2E2E; letter-spacing: 0.06em; } .pv-home-about__quote .font-en { font-size: 12px; letter-spacing: 0.24em; color: #6B6B6B; } .pv-home-strengths { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #DADDE2; } .pv-home-strengths li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid #DADDE2; } .pv-home-strength__no { font-size: 12px; color: #A7ADB5; padding-top: 3px; } .pv-home-strength__title { margin: 0 0 2px; font-size: 14px; font-weight: 500; color: #2E2E2E; } .pv-home-strengths p { margin: 0; font-size: 12.5px; line-height: 1.8; color: #6B6B6B; } .pv-home-facts { margin: 4px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; font-size: 12px; } .pv-home-facts > div { display: flex; gap: 12px; } .pv-home-facts dt { color: #6B6B6B; flex: 0 0 auto; } .pv-home-facts dd { margin: 0; color: #2E2E2E; } .pv-home-about__links { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; } /* CONTACT: charcoal band (continues into the footer, divided by a rule) */ .pv-home-contact { background: #2E2E2E; color: #FFFFFF; } .pv-home-contact .pv-home-inner { border-bottom: 1px solid #4A4F54; } .pv-home-contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; } .pv-home-contact__main { display: flex; flex-direction: column; gap: 18px; } body.plurevo-fullpage .pv-home-contact .eyebrow { color: #A7ADB5 !important; } .pv-home-contact .pv-home-h2 { color: #FFFFFF; } .pv-home-contact .pv-home-lead { color: #C0C4C9; } .pv-home-contact__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; max-width: 360px; } .pv-home-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 1px solid #8B9096; color: #FFFFFF; font-size: 14px; letter-spacing: 0.06em; text-decoration: none; transition: background .2s ease, border-color .2s ease, color .2s ease; } .pv-home-btn:hover { border-color: #FFFFFF; } .pv-home-btn--solid { background: #FFFFFF; border-color: #FFFFFF; color: #2E2E2E; } .pv-home-btn--solid:hover { background: #E9ECEF; } .pv-home-btn:focus-visible, .pv-home-link:focus-visible, .pv-home-prod > a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .pv-home-contact__faqtitle { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #FFFFFF; display: flex; gap: 14px; align-items: baseline; } .pv-home-contact__faqtitle .font-en { font-size: 11px; letter-spacing: 0.2em; color: #A7ADB5; } body.plurevo-fullpage .pv-home-contact .faq-item { border-color: #4A4F54; } body.plurevo-fullpage .pv-home-contact .faq-q { color: #FFFFFF; font-size: 14px; } body.plurevo-fullpage .pv-home-contact .faq-q::after { border-color: #C0C4C9; } body.plurevo-fullpage .pv-home-contact .faq-q:hover .faq-qt { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; } body.plurevo-fullpage .pv-home-contact .faq-mark { color: #FFFFFF; font-size: 17px; } body.plurevo-fullpage .pv-home-contact .faq-mark--a { color: #8B9096; } body.plurevo-fullpage .pv-home-contact .faq-at { color: #C0C4C9; font-size: 13px; line-height: 1.9; } @media (max-width: 1024px) { .pv-home-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-home-about { gap: 48px; } } @media (max-width: 860px) { .pv-home-inner { padding: 64px 20px; } .pv-home-purpose__grid, .pv-home-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pv-home-purpose__list { grid-template-columns: minmax(0, 1fr); } .pv-home-purpose__item { padding: 14px 0; row-gap: 4px; } .pv-home-purpose__grid { gap: 24px; } .pv-home-purpose__title { font-size: 15px; } .pv-home-products__top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px; } .pv-home-tablist { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -20px 24px; padding: 0 20px; } .pv-home-tablist::-webkit-scrollbar { display: none; } .pv-home-tab { flex: 0 0 auto; padding: 10px 18px; min-height: 44px; } .pv-home-prods { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; } .pv-home-prods::-webkit-scrollbar { display: none; } .pv-home-prod { flex: 0 0 66%; scroll-snap-align: start; } .pv-home-prod--all > a { aspect-ratio: 1 / 1; } .pv-home-products__more { text-align: left; margin-top: 28px; } .pv-home-sols { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid #DADDE2; } .pv-home-sol { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 20px 0; border-bottom: 1px solid #DADDE2; } .pv-home-sol__img { grid-row: 1 / span 3; aspect-ratio: 1 / 1; margin: 0; } .pv-home-sol .pv-home-eyebrow { font-size: 10px !important; } .pv-home-sol__title { font-size: 16px; } .pv-home-sol__text { font-size: 12.5px; line-height: 1.8; } .pv-home-sol__links { grid-column: 1 / -1; border-top: 0; padding-top: 4px; } .pv-home-about { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 64px 20px; } .pv-home-about__body { max-width: none; gap: 16px; } .pv-home-facts { grid-template-columns: minmax(0, 1fr); } .pv-home-contact__btns { max-width: none; } .pv-home-note--center { text-align: left; } .pv-home-head--center { align-items: flex-start; text-align: left; } } @media (prefers-reduced-motion: reduce) { .pv-home-prod__img img, .pv-home-sol__img img, .pv-home-arrow { transition: none; } } /* ============================================================ v1.70.0 TOP 事業一覧: five full-width image tiles (Machine / Cosmetic / OEM・ODM / Consulting / Repair) Photos toned silver monochrome like the first view; names and text are HTML over a soft dark veil. ============================================================ */ .pv-biz { background: #FFFFFF; padding: 96px 0 0; } .pv-biz__head { padding: 0 20px 48px; } .pv-biz__list { list-style: none; margin: 0; padding: 0 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .pv-biz__link { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #2E2E2E; color: #FFFFFF; text-decoration: none; isolation: isolate; } .pv-biz__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.85) contrast(1.02) brightness(0.98); transition: transform 1.2s ease, filter .6s ease; z-index: -2; } .pv-biz__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 32% at 50% 44%, rgba(30, 32, 35, 0.42) 0%, rgba(30, 32, 35, 0) 100%), linear-gradient(180deg, rgba(30, 32, 35, 0.2) 0%, rgba(30, 32, 35, 0.42) 45%, rgba(30, 32, 35, 0.62) 100%); transition: opacity .6s ease; } .pv-biz__link:hover img, .pv-biz__link:focus-visible img { transform: scale(1.05); filter: grayscale(0.6) contrast(1.02); } .pv-biz__link:hover::before { opacity: 0.85; } .pv-biz__link:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; } .pv-biz__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 16px; text-align: center; } .pv-biz__en { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); font-family: 'Noto Serif JP', serif; font-size: 26px; letter-spacing: 0.08em; font-weight: 400; line-height: 1.3; font-variant-caps: small-caps; } .pv-biz__title { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.7; color: #FFFFFF; } .pv-biz__sub { font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); max-width: 15em; } .pv-biz__more { margin-top: 6px; transition: transform .3s ease; } .pv-biz__link:hover .pv-biz__more { transform: translateY(3px); } .pv-biz__foot { max-width: 1200px; margin: 0 auto; padding: 28px 48px 0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; } .pv-biz__rel { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .pv-biz__rel .pv-home-link { font-size: 12.5px; color: #6B6B6B; } .pv-biz__foot .pv-home-note { margin: 0; } /* the products band follows directly: keep the white gap above it */ .pv-biz + .pv-home-products .pv-home-inner { padding-top: 96px; } .pv-biz { padding-bottom: 96px; } /* photo with words along its top edge: show it a little lower */ .pv-biz__link img.pv-biz__img--lowtop { inset: auto 0 0 0; height: 112%; } .pv-biz__link img.pv-biz__img--zoom { inset: auto 0 0 0; height: 135%; } @media (max-width: 1024px) { .pv-biz__en { font-size: 21px; } .pv-biz__sub { display: none; } } @media (max-width: 860px) { .pv-biz { padding: 64px 0; } .pv-biz__head { padding: 0 20px 28px; } .pv-biz__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 20px; } .pv-biz__item:last-child { grid-column: 1 / -1; } .pv-biz__item:last-child .pv-biz__link { aspect-ratio: 2 / 1; } .pv-biz__en { font-size: 20px; } .pv-biz__title { font-size: 12px; } .pv-biz__more { display: none; } .pv-biz__foot { padding: 20px 20px 0; } } @media (prefers-reduced-motion: reduce) { .pv-biz__link img, .pv-biz__more { transition: none; } } /* ============================================================ v1.71.0 TOP 取扱商品 by category (no tabs): English title + one line, 4 products with a #tag, ALL button ============================================================ */ .pv-cat + .pv-cat { margin-top: 64px; padding-top: 64px; border-top: 1px solid #DADDE2; } .pv-cat__head { margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; font-weight: 400; } .pv-cat__en { font-size: 22px; letter-spacing: 0.26em; color: #2E2E2E; line-height: 1.3; } .pv-cat__jp { font-size: 13px; letter-spacing: 0.1em; color: #6B6B6B; font-weight: 400; } .pv-cat__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .pv-cat__item > a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #2E2E2E; text-decoration: none; } .pv-cat__img { display: block; width: 100%; aspect-ratio: 1 / 1; background: #FFFFFF; overflow: hidden; margin-bottom: 6px; } .pv-cat__img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; display: block; transition: transform .6s ease; } .pv-cat__img img[data-image-slot] { background: transparent; } .pv-cat__item > a:hover .pv-cat__img img { transform: scale(1.04); } .pv-cat__item > a:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 4px; } .pv-cat__name { font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.04em; } .pv-cat__tag { display: inline-block; font-size: 11.5px; line-height: 1.6; letter-spacing: 0.04em; color: #4A4A4A; background: #E9ECEF; padding: 3px 10px; } .pv-cat__all { display: flex; align-items: center; justify-content: center; gap: 16px; width: fit-content; min-width: 280px; min-height: 48px; margin: 36px auto 0; padding: 0 28px; border: 1px solid #8B9096; border-radius: 999px; background: #FFFFFF; color: #2E2E2E; text-decoration: none; transition: border-color .2s ease, background .2s ease, color .2s ease; } .pv-cat__all .font-en { font-size: 12px; letter-spacing: 0.2em; } .pv-cat__all:hover { border-color: #2E2E2E; background: #2E2E2E; color: #FFFFFF; } .pv-cat__all:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; } @media (max-width: 860px) { .pv-cat + .pv-cat { margin-top: 48px; padding-top: 48px; } .pv-cat__head { margin-bottom: 22px; } .pv-cat__en { font-size: 17px; letter-spacing: 0.2em; } .pv-cat__jp { font-size: 12px; } .pv-cat__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; } .pv-cat__list::-webkit-scrollbar { display: none; } .pv-cat__item { flex: 0 0 46%; scroll-snap-align: start; } .pv-cat__name { font-size: 13px; } .pv-cat__tag { font-size: 11px; } .pv-cat__all { min-width: 0; width: 100%; margin-top: 28px; } } @media (prefers-reduced-motion: reduce) { .pv-cat__img img { transition: none; } } /* ============================================================ v1.72.0 Sticky header on every PLUREVO page (the black top bar scrolls away, the white header stays), TOP: no first-view buttons, white product list, FAQ block, contact on a salon photo ============================================================ */ body.plurevo-fullpage div:has(> #mobile-nav-toggle) { position: sticky !important; top: 0; z-index: 900 !important; } body.admin-bar.plurevo-fullpage div:has(> #mobile-nav-toggle) { top: 32px; } @media (max-width: 782px) { body.admin-bar.plurevo-fullpage div:has(> #mobile-nav-toggle) { top: 46px; } } @media (max-width: 600px) { body.admin-bar.plurevo-fullpage div:has(> #mobile-nav-toggle) { top: 0; } } html:has(body.plurevo-fullpage) { scroll-padding-top: 104px; } .pv-split > .pv-head:has(.pv-side-photo) { top: 112px; } .pv-contact__side { top: 112px; } @media (max-width: 860px) { html:has(body.plurevo-fullpage) { scroll-padding-top: 76px; } } /* TOP: first view keeps only the English line and the title */ .pv-fv__copy:not(:has(.pv-fv__cta)) { gap: 18px; } /* TOP: bands — purpose white / business silver / products white / about silver / FAQ white / contact photo */ .pv-biz { background: #F7F8FA; } .pv-home-products { background: #FFFFFF; } .pv-cat__img { background: #FFFFFF; } /* TOP: FAQ */ .pv-home-faq { background: #FFFFFF; } .pv-home-faq__list { max-width: 880px; margin: 48px auto 0; } .pv-faq-more { display: inline-flex; gap: 6px; margin-left: 10px; font-size: 12.5px; color: #2E2E2E; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* TOP: contact on a salon photo (dark veil), then the charcoal footer */ .pv-home-contact { position: relative; isolation: isolate; overflow: hidden; background: #2E2E2E; color: #FFFFFF; } .pv-home-contact__bg { position: absolute; inset: 0; z-index: -2; } .pv-home-contact__bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.7); } .pv-home-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 30, 33, 0.66); } .pv-home-contact__inner { max-width: 1200px; margin: 0 auto; padding: 104px 48px 88px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .pv-home-contact__en { font-family: 'Noto Serif JP', serif; font-size: 34px; letter-spacing: 0.16em; line-height: 1.2; } body.plurevo-fullpage .pv-home-contact__title { margin: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 13px !important; font-weight: 500; letter-spacing: 0.12em; color: #FFFFFF; line-height: 1.6 !important; } .pv-home-contact__lead { margin: 10px 0 0; font-size: 13px; line-height: 2; color: rgba(255, 255, 255, 0.82); } .pv-home-contact__row { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 32px; } .pv-home-contact__btns { display: flex; gap: 14px; margin: 0; max-width: none; flex-direction: row; } .pv-home-contact .pv-home-btn { min-width: 220px; min-height: 54px; } .pv-home-contact .pv-home-btn--solid { background: #FFFFFF; border-color: #FFFFFF; color: #2E2E2E; } .pv-home-contact .pv-home-btn--solid:hover { background: transparent; color: #FFFFFF; } .pv-home-contact__tel { display: flex; flex-direction: column; gap: 6px; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, 0.5); text-align: left; font-size: 12px; color: rgba(255, 255, 255, 0.82); } .pv-home-contact__tel a { display: inline-flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; } .pv-home-contact__tel .font-en { font-size: 24px; letter-spacing: 0.12em; } .pv-home-contact__addr { margin: 40px 0 0; font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); } @media (max-width: 860px) { .pv-home-contact__inner { padding: 72px 20px 64px; } .pv-home-contact__en { font-size: 26px; } .pv-home-contact__row { flex-direction: column; gap: 24px; width: 100%; } .pv-home-contact__btns { flex-direction: column; width: 100%; gap: 12px; } .pv-home-contact .pv-home-btn { min-width: 0; width: 100%; } .pv-home-contact__tel { padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.4); width: 100%; align-items: center; text-align: center; } .pv-home-faq__list { margin-top: 28px; } .pv-faq-more { margin-left: 0; display: inline-flex; margin-top: 6px; } } /* ============================================================ v1.73.0 TOP: ABOUT PLUREVO right under the first view; purpose list removed; products spacing (no rules between categories, one-line lead, more room above each ALL button); development / small lot / FC band; Beyond Selection block ============================================================ */ .pv-intro { background: #FFFFFF; } .pv-intro__inner { max-width: 760px; margin: 0 auto; padding: 112px 48px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .pv-intro__lead { margin: 12px 0 0; font-size: 15px; line-height: 2.2; color: #4A4A4A; letter-spacing: 0.04em; } .pv-intro__links { margin: 16px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; } /* products */ .pv-home-products .pv-home-products__top { margin-bottom: 96px; } .pv-home-products .pv-home-lead { font-size: 12.5px; line-height: 1.9; color: #767676; max-width: none; letter-spacing: 0.04em; } @media (min-width: 1100px) { .pv-home-products .pv-home-lead { white-space: nowrap; } } .pv-cat + .pv-cat { margin-top: 120px; padding-top: 0; border-top: 0; } .pv-cat__all { margin-top: 56px; } /* development / small lot / FC */ .pv-dev { margin-top: 120px; background: #F7F8FA; padding: 64px 56px; } .pv-dev__lead { margin: 0 0 44px; text-align: center; font-family: 'Noto Serif JP', serif; font-size: 18px; letter-spacing: 0.06em; color: #2E2E2E; line-height: 1.8; } .pv-dev__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .pv-dev__item { display: flex; flex-direction: column; gap: 10px; } .pv-dev__en { font-size: 11px; letter-spacing: 0.22em; color: #6B6B6B; } .pv-dev__title { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: 0.06em; color: #2E2E2E; line-height: 1.6; } .pv-dev__text { margin: 0; font-size: 13px; line-height: 1.9; color: #6B6B6B; } .pv-dev__links { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; } .pv-dev__links .pv-home-link { font-size: 12.5px; } .pv-home-products__more { margin-top: 32px; } /* Beyond Selection block */ .pv-home-about__quote2 { line-height: 1.7 !important; } #strengths .pv-home-strengths { margin-top: 12px; } @media (max-width: 860px) { .pv-intro__inner { padding: 72px 20px; align-items: flex-start; text-align: left; } .pv-intro__lead { font-size: 14px; line-height: 2.1; } .pv-intro__links { justify-content: flex-start; } .pv-home-products .pv-home-products__top { margin-bottom: 56px; } .pv-cat + .pv-cat { margin-top: 72px; } .pv-cat__all { margin-top: 36px; } .pv-dev { margin: 72px -20px 0; padding: 48px 20px; } .pv-dev__lead { text-align: left; font-size: 16px; margin-bottom: 28px; } .pv-dev__list { grid-template-columns: minmax(0, 1fr); gap: 32px; } } /* ============================================================ v1.74.0 TOP: SUPPORT cards (photo with plenty of white, centred pill button) after the products; lighter body text so headings and descriptions no longer look alike ============================================================ */ .pv-cta { background: #FFFFFF; padding: 40px 0 128px; } .pv-cta__head { padding: 0 20px 56px; } .pv-cta__list { list-style: none; margin: 0 auto; padding: 0 48px; max-width: 1200px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .pv-cta__item { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .pv-cta__img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #F3F4F6; } .pv-cta__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.55); transition: transform 1s ease; } .pv-cta__item:hover .pv-cta__img img { transform: scale(1.03); } .pv-cta__img { position: relative; } .pv-cta__img img.pv-cta__img--low { position: absolute; inset: auto 0 0 0; height: 114%; } @media (min-width: 861px) { .pv-cta__btn { white-space: nowrap; } } .pv-cta__en { margin: 14px 0 0; font-size: 12px; font-weight: 400; letter-spacing: 0.24em; color: #2E2E2E; } .pv-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 10px 28px; border: 1px solid #8B9096; border-radius: 999px; background: #FFFFFF; color: #2E2E2E; text-decoration: none; font-size: 12.5px; letter-spacing: 0.06em; line-height: 1.6; max-width: 100%; box-sizing: border-box; transition: background .2s ease, border-color .2s ease, color .2s ease; } .pv-cta__btn:hover { background: #2E2E2E; border-color: #2E2E2E; color: #FFFFFF; } .pv-cta__btn:focus-visible { outline: 2px solid #2E2E2E; outline-offset: 3px; } /* lighter descriptions: headings serif / dark, descriptions small / regular weight / grey */ #strengths .pv-home-strengths li { padding: 18px 0; } #strengths .pv-home-strength__title { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 4px; } #strengths .pv-home-strengths p { font-size: 12px; font-weight: 400; color: #767676; letter-spacing: 0.04em; line-height: 1.9; } .pv-cat__jp { font-size: 12px; color: #767676; } .pv-cat__name { font-weight: 400; } .pv-biz__rel .pv-home-link { font-size: 12px; color: #767676; } .pv-intro__lead { font-size: 14px; color: #555555; } @media (max-width: 860px) { .pv-cta { padding: 16px 0 80px; } .pv-cta__head { padding: 0 20px 32px; } .pv-cta__list { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 0 20px; } .pv-cta__img { aspect-ratio: 16 / 10; } .pv-cta__btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pv-cta__img img { transition: none; } } /* ============================================================ v1.75.0 TOP 取扱商品 slider (5+ products in a category) + Beyond Selection photo ============================================================ */ .pv-slider--cat { gap: 24px; } .pv-slider--cat .pv-slider__track { list-style: none; margin: 0; padding: 0; gap: 28px; } .pv-slider--cat .pv-slider__item { flex: 0 0 calc((100% - 84px) / 4); } .pv-slider--cat .pv-slider__bar { margin-top: -64px; margin-bottom: 8px; } #strengths { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } #strengths .pv-home-about__img { aspect-ratio: 3 / 2; } #strengths .pv-home-about__img img { object-position: 45% 50%; } @media (max-width: 860px) { .pv-slider--cat .pv-slider__track { gap: 14px; margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px; } .pv-slider--cat .pv-slider__item { flex: 0 0 46%; } .pv-slider--cat .pv-slider__bar { margin: 0; } #strengths { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ v1.76.0 Common parts on every page, in the TOP page style (first views and the header unchanged): quieter headings (small grey English label, serif title, no rule), lighter body text, card titles in serif, related lists without boxes, pill buttons inside the content, closing contact on the salon photo (see markup). ============================================================ */ /* section headings */ body.plurevo-fullpage .pv-head h2.serif::after { display: none; } body.plurevo-fullpage .section-pad-v .eyebrow, body.plurevo-fullpage .pv-wrap .eyebrow { font-size: 11px; letter-spacing: 0.24em; color: #6B6B6B !important; } body.plurevo-fullpage .pv-head--light .eyebrow { color: #A7ADB5 !important; } body.plurevo-fullpage .pv-head { gap: 14px; } /* body text */ .pv-lead { font-size: 14px; line-height: 2; color: #6B6B6B; } .pv-text { font-size: 14px; line-height: 2.1; color: #555555; } .pv-text--lead { font-size: 15px; color: #4A4A4A; } body.plurevo-fullpage .section-pad-v p[style*="font-size: 15px"] { font-size: 14px !important; } body.plurevo-fullpage .section-pad-v p[style*="color: #4A4A4A"] { color: #555555 !important; } .pv-note { font-size: 12px; color: #767676; } /* card titles: serif, regular weight; descriptions small grey */ .pv-numlist__title, .pv-steps__title, .pv-compare__title, .pv-reason__title, .pv-hand__title { font-family: 'Noto Serif JP', serif; font-weight: 400 !important; letter-spacing: 0.04em; } .pv-numlist__title { font-size: 16px; } .pv-steps__title { font-size: 16px; } .pv-compare__title { font-size: 18px; } .pv-reason__title { font-size: 17px; } .pv-numlist__desc, .pv-steps__desc, .pv-compare__desc, .pv-reason__desc { font-size: 13px; line-height: 1.95; color: #6B6B6B; } .pv-facts__v { font-size: 14px; } .pv-facts__k { font-size: 12px; color: #767676; } .pv-subhead { font-size: 20px !important; letter-spacing: 0.04em; } body.plurevo-fullpage .faq-q { font-weight: 400; } body.plurevo-fullpage .faq-at { font-size: 13.5px; color: #555555; } /* related lists (RELATED PRODUCTS / PAGES): rows on a rule, no boxes */ .pv-related { background: #FFFFFF !important; } .pv-related .pv-related__grid { gap: 0 40px !important; border-top: 1px solid #DADDE2; } .pv-related a.pv-related__card { border: 0 !important; border-bottom: 1px solid #DADDE2 !important; background: transparent !important; padding: 22px 28px 22px 0 !important; position: relative; box-shadow: none !important; transform: none !important; } .pv-related a.pv-related__card::after { content: "→"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #8B9096; transition: transform .2s ease, color .2s ease; } .pv-related a.pv-related__card:hover::after { transform: translate(4px, -50%); color: #2E2E2E; } .pv-related a.pv-related__card > span:last-child { display: none; } .pv-related a.pv-related__card > span:first-child { font-size: 10.5px !important; letter-spacing: 0.12em !important; color: #8B9096 !important; } .pv-related a.pv-related__card > span:nth-child(2) { font-size: 14px !important; font-weight: 400 !important; } .pv-related [style*="border-top: 1px solid #DADDE2; padding-top: 40px"] { border-top: 0 !important; padding-top: 48px !important; } /* pill buttons inside the content (header and first view untouched) */ body.plurevo-fullpage .section-pad-v a.btn-primary, body.plurevo-fullpage .section-pad-v a.btn-outline, body.plurevo-fullpage div.container-pad:not(.section-pad-v) > a.btn-outline { border-radius: 999px !important; min-height: 48px; padding: 14px 34px !important; font-size: 12.5px !important; letter-spacing: 0.08em !important; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; } body.plurevo-fullpage .section-pad-v a.btn-outline, body.plurevo-fullpage div.container-pad:not(.section-pad-v) > a.btn-outline { border-color: #8B9096 !important; background: #FFFFFF; } /* closing contact on sub pages: the page's own title reads a little larger than on TOP */ body.plurevo-fullpage .pv-endcta .pv-home-contact__title { font-size: 14px !important; max-width: 640px; } /* v1.76.0 related rows: left aligned; cards with only a name + "more" show the name at full size; one column on phones */ .pv-related a.pv-related__card { text-align: left !important; align-items: flex-start !important; } .pv-related a.pv-related__card:not(:has(> span:nth-child(3))) > span:first-child { font-size: 14px !important; letter-spacing: 0.04em !important; color: #2E2E2E !important; } @media (max-width: 860px) { .pv-related .pv-related__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; } .pv-related .pv-related__grid > * { flex: none !important; } } /* ============================================================ v1.77.0 Device pages with air and photos: about split into intro / overview (spec + photo) / points; photo frames on points, modes, filters, frequencies, menus and flows; related lists with product cut-outs. Photo frames (.pv-ph) stay hidden on the public page until a photo exists; logged-in users see a dashed frame with the Media Library title to upload. ============================================================ */ .pv-ph { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #F7F8FA; } .pv-ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-ph:has(img[data-slot-missing]) { display: none; } body.logged-in .pv-ph:has(img[data-slot-missing]), body.logged-in .pv-steps__img:has(img[data-slot-missing]), body.logged-in .pv-numlist__img:has(img[data-slot-missing]), body.logged-in .pv-hand__img:has(img[data-slot-missing]) { display: flex !important; align-items: center; justify-content: center; position: relative; border: 1px dashed #C0C4C9; background: #FAFAFB; min-height: 120px; } body.logged-in .pv-ph:has(img[data-slot-missing]) img, body.logged-in .pv-steps__img:has(img[data-slot-missing]) img, body.logged-in .pv-numlist__img:has(img[data-slot-missing]) img, body.logged-in .pv-hand__img:has(img[data-slot-missing]) img { display: none; } body.logged-in [data-pv-label]::after { content: "IMAGE｜" attr(data-pv-label); font-family: 'Outfit', sans-serif; font-size: 10.5px; letter-spacing: 0.06em; color: #8B9096; padding: 8px; text-align: center; word-break: break-all; } body.logged-in .pv-hand:has(> .pv-hand__img img[data-slot-missing]) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); max-width: none; } /* intro: title + text only, centred, with air */ .pv-dev-intro .pv-wrap { padding-top: 112px !important; padding-bottom: 112px !important; } .pv-dev-intro__lead { margin: 12px auto 0; max-width: 720px; font-size: 15px; line-height: 2.2; color: #4A4A4A; letter-spacing: 0.03em; text-align: center; } /* overview: spec + photo */ .pv-dev-overview__title { margin: 4px 0 8px; font-size: 22px; font-weight: 400; letter-spacing: 0.06em; color: #2E2E2E; } .pv-dev-overview .pv-media__img { background: #FFFFFF; object-fit: contain; } /* points with photos */ .pv-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; } .pv-point { display: flex; flex-direction: column; gap: 8px; } .pv-point .pv-ph { margin-bottom: 10px; } .pv-point__no { font-size: 12px; letter-spacing: 0.16em; color: #A7ADB5; } .pv-point__title { margin: 0; font-family: 'Noto Serif JP', serif; font-size: 17px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.6; color: #2E2E2E; } .pv-point__desc { margin: 0; font-size: 13px; line-height: 1.95; color: #6B6B6B; } /* mode / filter / frequency / menu cards */ .pv-mcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; } .pv-mcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; width: 100%; } .pv-mcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-mcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-mcard { display: flex; flex-direction: column; gap: 10px; } .pv-mcard .pv-ph { margin-bottom: 8px; } .pv-mcard__title { margin: 0; font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 400; letter-spacing: 0.04em; color: #2E2E2E; } .pv-mcard__dl { margin: 0; display: flex; flex-direction: column; gap: 6px; } .pv-mcard__dl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.8; border-top: 1px solid #E9ECEF; padding-top: 6px; } .pv-mcard__dl dt { color: #8B9096; font-size: 11.5px; } .pv-mcard__dl dd { margin: 0; color: #4A4A4A; } .pv-compare__col > .pv-ph { margin-bottom: 14px; } .pv-steps__img.pv-ph { aspect-ratio: 4 / 3; } /* related: product cut-outs on a light tile, service photos cropped */ .pv-related .pv-related__grid:has(.pv-related__img) { border-top: 0; gap: 36px 28px !important; } .pv-related a.pv-related__card:has(.pv-related__img) { border-bottom: 0 !important; padding: 0 !important; gap: 10px !important; } .pv-related a.pv-related__card:has(.pv-related__img)::after { display: none; } .pv-related__img { order: -1; aspect-ratio: 4 / 3; margin-bottom: 8px; } .pv-related__img--product { background: #F7F8FA; } .pv-related__img--product img { object-fit: contain; padding: 10%; box-sizing: border-box; background: transparent !important; } .pv-related__img img[data-image-slot] { background: transparent !important; } .pv-related a.pv-related__card:has(.pv-related__img):hover .pv-related__img img { transform: scale(1.03); } .pv-related__img img { transition: transform .6s ease; } .pv-related a.pv-related__card:has(.pv-related__img) > span:not(.pv-related__img):last-child { display: inline-flex; font-size: 11.5px !important; color: #6B6B6B !important; } @media (max-width: 1024px) { .pv-points, .pv-mcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .pv-dev-intro .pv-wrap { padding-top: 72px !important; padding-bottom: 72px !important; } .pv-dev-intro__lead { font-size: 14px; text-align: left; } .pv-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } .pv-point__title { font-size: 15px; } .pv-point__desc { font-size: 12.5px; } .pv-mcards--2, .pv-mcards--3, .pv-mcards--4 { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pv-related .pv-related__grid:has(.pv-related__img) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 14px !important; } } /* v1.77.0 compare columns with photos: equal columns, no side rules */ .pv-compare:has(.pv-ph) { gap: 28px; } .pv-compare:has(.pv-ph) .pv-compare__col { padding: 0 !important; border: 0 !important; } /* v1.77.0 related cards with a photo: label / name / more after the image; 4 cards = 4 columns on PC */ @media (min-width: 861px) { .pv-related .pv-related__grid:has(.pv-related__img):has(> :nth-child(4)):not(:has(> :nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } .pv-related a.pv-related__card:has(.pv-related__img):has(> span:nth-child(4)) > span:nth-child(2) { font-size: 10.5px !important; letter-spacing: 0.12em !important; color: #8B9096 !important; font-weight: 400 !important; } .pv-related a.pv-related__card:has(.pv-related__img):has(> span:nth-child(4)) > span:nth-child(3), .pv-related a.pv-related__card:has(.pv-related__img):not(:has(> span:nth-child(4))) > span:nth-child(2) { font-size: 14px !important; letter-spacing: 0.03em !important; color: #2E2E2E !important; font-weight: 400 !important; } /* ========================================================= v1.78.0 device pages: こんな方におすすめ (top block) and BEFORE / AFTER ========================================================= */ .pv-reco { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid #2E2E2E; } .pv-reco__item { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 6px; padding: 16px 0; border-bottom: 1px solid #E3E5E9; } .pv-reco__chk { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1px solid #A7ABB3; color: #2E2E2E; } .pv-reco__text { font-size: 14.5px; line-height: 1.85; letter-spacing: 0.03em; color: #2E2E2E; word-break: keep-all; overflow-wrap: anywhere; } .pv-dev-reco .pv-media__body { align-self: center; } .pv-ba__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-ba__list--1 { grid-template-columns: minmax(0, 720px); justify-content: center; } .pv-ba__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-ba__item { margin: 0; } .pv-ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .pv-ba__fig { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #ECEEF1; } .pv-ba__fig img { width: 100%; height: 100%; object-fit: cover; display: block; } .pv-ba__fig figcaption { position: absolute; left: 0; top: 0; padding: 5px 10px; font-size: 10.5px; letter-spacing: 0.16em; background: rgba(255,255,255,.88); color: #2E2E2E; } .pv-ba__fig + .pv-ba__fig figcaption { background: #2E2E2E; color: #FFFFFF; } .pv-ba__cap { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: #6B6F76; word-break: keep-all; overflow-wrap: anywhere; } .pv-ba__note { margin-top: 28px !important; } .pv-slider--ba .pv-slider__item { flex: 0 0 calc((100% - 64px) / 3); } .pv-ba__empty { border: 1px dashed #A7ABB3; padding: 40px 24px; text-align: center; font-size: 12.5px; line-height: 1.9; letter-spacing: 0.04em; color: #6B6F76; background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.015) 10px 20px); } body.plurevo-fullpage .pv-ba .pv-wrap { padding-top: 0 !important; } @media (max-width: 900px) { .pv-ba__list, .pv-ba__list--2 { grid-template-columns: minmax(0, 1fr); gap: 28px; } .pv-slider--ba .pv-slider__item { flex: 0 0 86%; } .pv-reco__text { font-size: 14px; } } /* v1.79.0 product cut-outs (white background) sit on the band colour */ .pv-dev-overview .pv-media__img { background: transparent; mix-blend-mode: multiply; aspect-ratio: 1 / 1; max-height: 520px; width: 100%; } .pv-related__img--product img { mix-blend-mode: multiply; } /* ========================================================= v1.80.0 device pages: more air, spec centred (not pinned to the left edge) ========================================================= */ @media (min-width: 861px) { :is(.pv-dev-detail, .pv-dev-intro) > .pv-wrap { max-width: 1240px; padding: 136px clamp(56px, 7vw, 96px) !important; gap: 64px; } :is(.pv-dev-detail, .pv-dev-intro) .pv-head { margin-bottom: 8px; } } /* spec: one centred column */ #spec .pv-facts { width: 100%; max-width: 880px; margin: 0 auto; } #spec .pv-facts__row { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 22px 8px; align-items: baseline; } #spec .pv-facts__k { font-size: 13px; letter-spacing: 0.06em; color: #6B6F76; } #spec .pv-facts__v { font-size: 15px; letter-spacing: 0.03em; } #spec .pv-note { width: 100%; max-width: 880px; margin: 0 auto; } /* long text / notes / sub-headings: same reading column */ :is(.pv-dev-detail, .pv-dev-intro) .pv-wrap > :is(.pv-text, .pv-note), :is(.pv-dev-detail, .pv-dev-intro) .pv-wrap > .pv-subhead:has(+ .pv-text) { width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; } /* handpiece specs: label / value rows */ .pv-hand__spec > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 14px 4px; } .pv-hand__spec dd { text-align: left; } .pv-hand:has(> .pv-hand__img img[data-slot-missing]) { max-width: 880px; } @media (max-width: 860px) { #spec .pv-facts__row { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 18px 0; } .pv-hand__spec > div { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; } :is(.pv-dev-detail, .pv-dev-intro) > .pv-wrap { padding-top: 88px !important; padding-bottom: 88px !important; gap: 44px; } } /* v1.81.0 device pages: the band under the breadcrumb holds only the in-page menu */ .pv-pagenav { padding-top: 40px !important; padding-bottom: 0 !important; } .pv-pagenav-band + .pv-dev-intro > .pv-wrap { padding-top: 96px !important; } @media (max-width: 860px) { .pv-pagenav { padding-top: 28px !important; } .pv-pagenav-band + .pv-dev-intro > .pv-wrap { padding-top: 64px !important; } } /* ========================================================= v1.82.0 device pages: TOP-page type contrast and air (dark serif titles / small grey regular body / tiny letter-spaced labels) ========================================================= */ body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-head { gap: 16px; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-head .eyebrow { font-size: 11px !important; letter-spacing: 0.24em !important; color: #6B6B6B !important; font-weight: 400 !important; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-head h2 { font-size: 28px !important; font-weight: 400 !important; letter-spacing: 0.06em; line-height: 1.6; color: #2E2E2E; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-lead, body.plurevo-fullpage .pv-dev-intro__lead { font-size: 14px !important; line-height: 2.1 !important; color: #4A4A4A !important; font-weight: 400 !important; max-width: 640px; margin-left: auto; margin-right: auto; } /* item titles */ body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-compare__title, .pv-point__title, .pv-steps__title, .pv-numlist__title, .pv-mcard__title, .pv-hand__title, .pv-subhead) { font-family: 'Noto Serif JP', serif; font-weight: 400 !important; letter-spacing: 0.05em; color: #2E2E2E; line-height: 1.7; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-compare__title, .pv-point__title, .pv-steps__title, .pv-numlist__title, .pv-mcard__title, .pv-hand__title) { font-size: 17px !important; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-subhead { font-size: 20px !important; } /* body text */ body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-text, .pv-compare__desc, .pv-point__desc, .pv-steps__desc, .pv-numlist__desc, .pv-mcard p, .pv-mcard__dl dd, .pv-hand__body .pv-text) { font-size: 13.5px !important; line-height: 2.05 !important; color: #6B6B6B !important; font-weight: 400 !important; letter-spacing: 0.04em; } /* small English labels / numbers */ body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-compare__no, .pv-point__no, .pv-numlist__no) { font-size: 11px !important; letter-spacing: 0.22em !important; color: #8B9096 !important; font-weight: 400 !important; } /* notes */ body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-note { font-size: 11.5px !important; line-height: 1.9 !important; color: #8B9096 !important; font-weight: 400 !important; } /* spec table */ body.plurevo-fullpage #spec .pv-facts__v { font-size: 14px; font-weight: 400; color: #2E2E2E; } body.plurevo-fullpage #spec .pv-facts__k { font-size: 12.5px; color: #8B9096; } /* recommend list */ body.plurevo-fullpage .pv-reco__text { font-size: 14px; color: #4A4A4A; font-weight: 400; } /* air: columns and title-to-text */ :is(.pv-dev-detail, .pv-dev-intro) .pv-compare { column-gap: 56px; row-gap: 48px; } :is(.pv-dev-detail, .pv-dev-intro) .pv-compare__col { gap: 10px; } :is(.pv-dev-detail, .pv-dev-intro) .pv-subhead { margin-top: 24px !important; } :is(.pv-dev-detail, .pv-dev-intro) .pv-points { column-gap: 40px; row-gap: 48px; } /* the guide link at the end of 導入方法 */ .pv-intro-guide { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-top: 24px; padding-top: 48px; border-top: 1px solid #E3E5E9; } .pv-intro-guide__text { margin: 0; font-size: 13.5px; line-height: 2; color: #6B6B6B; } @media (max-width: 860px) { body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-head h2 { font-size: 22px !important; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-compare__title, .pv-point__title, .pv-steps__title, .pv-numlist__title, .pv-mcard__title, .pv-hand__title) { font-size: 16px !important; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) .pv-subhead { font-size: 18px !important; } body.plurevo-fullpage :is(.pv-dev-detail, .pv-dev-intro) :is(.pv-text, .pv-compare__desc, .pv-point__desc, .pv-steps__desc, .pv-numlist__desc, .pv-mcard p, .pv-mcard__dl dd) { font-size: 13px !important; } .pv-intro-guide { align-items: flex-start; text-align: left; padding-top: 36px; } } /* v1.82.0 a sub-heading sits close to what it introduces */ :is(.pv-dev-detail, .pv-dev-intro) .pv-wrap > .pv-subhead + * { margin-top: -36px !important; } @media (max-width: 860px) { :is(.pv-dev-detail, .pv-dev-intro) .pv-wrap > .pv-subhead + * { margin-top: -24px !important; } }