@charset "UTF-8"; /* ===================================================================== style-wp.css ｜ メンズ脱毛LP を Cocoon フロントページ(front-page.php)に統合するための上書き スコープは front-top-page ボディクラス（is_front_page() && !is_paged() で付与）に依存。 ページIDには依存しない（旧 page-id 固定スコープ / article.post- から移行済み）。 ===================================================================== */ /* === Google Fonts（欠落分を@importで補う／index.html 12行目と同一） === */ @import url("https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@400;500;700;800;900&family=Orbitron:wght@900&display=swap"); /* === 共通の打ち消しは mens-wp-common/wp-override-common.css に集約（functions.php で本ファイルより先に読込）。 ・body 幅是正（body{position:absolute} 打ち消し）／全幅化（#container〜.entry-content・#content/#content-in/#main） ・#sidebar 非表示／.entry-content 上下余白除去／footer 絶対配置打ち消し／.article h2,h4 font-size／Cocoon本文リセット 以下は本ファイルに残す TOP 固有の指定（ダーク背景移設・フッターメニュー・SP背景・#mens-top breakout 等）。 === */ /* === Cocoonの #content-in/#main/.main の白背景を透明化し、#content のダーク背景(bg_pc.png)を見せる。 TOPページ各セクションは背景透明の設計のため、これが無いと白がFV以下を覆ってしまう（見本はダーク背景）。 ※ #content はダーク背景の担い手にするため、ここでは透明化しない（フッターを白に保つ要）。 === */ body.front-top-page #content-in, body.front-top-page #main, body.front-top-page .main { background: transparent !important; } /* === ダーク背景を body → #content へ移設（フッター/ヘッダーへの暗背景もれ防止・デスクトップ） === 従来 body に bg_pc.png(fixed) を敷いていたが、それが #content の外側（Cocoonフッター #footer / .footer_menu 等） にも透けてフッターが暗くなっていた。TOPページ本文は #content 配下なので、暗背景を #content に限定して敷くと、 フッター（#content の兄弟要素）は body の白が見え、既存サイト同様の白フッターになる。 SP（≤780px）は body::before が背景を担当するため、本ルールはデスクトップ限定。 === */ @media (min-width: 781px) { body.front-top-page { background-image: none !important; } body.front-top-page #content { background-color: #000 !important; background-image: url("assets/img/bg_pc.png") !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: cover !important; background-attachment: fixed !important; } } /* === フッター（.footer_menu / #footer）の調整は mens-wp-common/wp-override-common.css へ移設。 両ページ共通化し、ヒゲにも同じフッター表示を適用（ヒゲ限定で暗色body透け対策も追加）。 === */ /* === SP（≤780px）の背景（白地の根本対策・堅牢版） === 設計では SP時に body{background-color:transparent} とし、.sp-bg（position:fixed / bg_sp.jpg / z-index:-1） が背景を敷くが、その .sp-bg 要素は 見本 index.html(17行目) には在るものの front-page.php へ未移植。 さらに WP では Cocoon系の白背景ラッパー（#main 等。SP時に前述の透明化だけでは取りこぼす場合がある）が、 固定背景レイヤー(z-index:-1)を覆い隠すため、擬似要素だけでは白地が残る（実機/再現テストで確認）。 対策（3点セット）： (1) body を暗色化＋ stacking context 化（::before を body背景の前面・本文の背後に描画させる） (2) body〜#mens-top の全ラッパーを透明化（白いラッパーが固定レイヤーを覆うのを防ぐ） (3) .sp-bg 相当の固定背景レイヤー(::before)で bg_sp.jpg を敷く（iOSで background-attachment:fixed が 効かない問題を避けるため固定要素方式） ※ position:relative はシュリンク（右余白）を起こさないため body の static 指定と矛盾せず安全。 */ @media (max-width: 780px) { /* === 背景（ダーク）＋固定背景レイヤー === body を stacking context 化し、固定背景 ::before(z-index:-1) を本文背後に表示する。 これを外すと iOS で ::before が表示されず FV 以下が白地化するため必須。 */ body.front-top-page { background-color: #000 !important; position: relative !important; z-index: 0 !important; } /* === 上部の黒帯の真因（Web インスペクタで確定） === Cocoon はモバイルヘッダーボタン使用時、固定ヘッダー(高さ46px)の下へ本文を逃がすため body へ .mblt-header-mobile-buttons { margin-top:46px }（style.css:11874 / max-width:1023px） を付与する。TOP は FV をヘッダー背面まで全面表示する設計なので、この46pxの余白が ダーク背景(#000)の黒帯としてヘッダー直上に露出していた。 対策：front-top-page に限りこの押し下げ余白を0に打ち消す。 （ヘッダーは position:fixed なので余白0でも本文と重ならず、設計どおり FV にヘッダーが重なる） */ body.front-top-page.mblt-header-mobile-buttons, body.front-top-page.mblt-header-and-footer-mobile-buttons, body.front-top-page { margin-top: 0 !important; } /* === FV をヘッダー高さぶん下げる（モバイルのみ） === body の押し下げ余白(46px)を0にしたことで FV 最上部がヘッダー背面に食い込むため、 FV だけを下げて視認できるようにする。#fv の margin は不透明ヘッダーが覆う領域に入る ため、上部にダークの隙間（黒帯）は生じない。値はデザイン調整用。 */ body.front-top-page #fv { margin-top: 40px !important; } body.front-top-page #wrapper, body.front-top-page #container, body.front-top-page .container__inner, body.front-top-page #content, body.front-top-page #content-in, body.front-top-page #main, body.front-top-page .main, body.front-top-page .article, body.front-top-page .entry-content, body.front-top-page #mens-top { background: transparent !important; } body.front-top-page::before { content: ""; position: fixed; inset: 0; background-image: url("assets/img/bg_sp.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat; z-index: -1; pointer-events: none; } } /* === style_common.css 由来の打ち消し（footer 絶対配置 / .article h2,h4 font-size）は mens-wp-common/wp-override-common.css へ移設済み。 === */ /* === ラッパーをビューポート全幅へ breakout（中央に戻した.main基準で左右へ広げる） === これが無いと中身がCocoonのコンテンツ幅(約1056px)に収まり右が余る。TOPの #mens-top 相当。 */ body.front-top-page #mens-top { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* === Cocoon本文向けCSS（背景帯・余白・行間・リスト・枠）との競合リセットは mens-wp-common/wp-override-common.css へ移設済み。 === */ /* ===================================================================== ↓ 以下、デザインCSS（ヒゲ・顔脱毛 style.css）。 TOPページ独自の #header / #footer は #mens-top 配下にスコープ化済み （CocoonのヘッダーフッターCSSと衝突させないため。TOPページ独自ヘッダー/フッターは貼付しない）。 ===================================================================== */ /* ===================================================================== ↓ ここから現行デザインCSS（mens-wp-top/assets/css/style.css を移植して自動再生成）。 - #header / #footer は #mens-top 配下にスコープ化（Cocoonの同名IDとの衝突回避）。 - 画像パスは ../img/ → assets/img/ に補正（style-wp.css の配置基準に合わせる）。 - 原本 style.css は無改変。設計更新時は本ファイルを再生成すること。 ===================================================================== */ /* ======================================== Reset / Base ======================================== */ *, *::before, *::after { box-sizing: border-box; max-width: 100%; } html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; color: #ffffff; background-color: #000000; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* PC用背景：781px以上でのみ適用（fixed使用） */ @media (min-width: 781px) { body { background-image: url("assets/img/bg_pc.png"); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; } } .sp-bg { display: none; } h1, h2, h3, h4, h5, h6, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; } input, textarea, select { font: inherit; } /* ======================================== 共通ユーティリティ ======================================== */ .inner { max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } .font-anton { font-family: "Anton", sans-serif; font-weight: 400; } .font-orbitron { font-family: "Orbitron", sans-serif; font-weight: 900; } /* ======================================== 共通 スクロールフェードアップ ======================================== */ [data-scroll-fade] { opacity: 0; transform: translateY(60px); transition: opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } [data-scroll-fade].is-visible { opacity: 1; transform: translateY(0); } /* ======================================== 共通 cta-reveal（CTAボタン 左→右 ワイプ出現 / ふわっと） ======================================== */ [data-cta-reveal] { clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: clip-path, opacity; } [data-cta-reveal].is-revealed-cta { clip-path: inset(0 0 0 0); opacity: 1; } /* ======================================== 共通 char-reveal（1文字ずつ rotate3d / fade） 参考: amagasakiboxing.com GSAP power4.out / duration 0.5s / 280→360deg ======================================== */ [data-char-reveal] .char { display: inline-block; opacity: 0; transform: rotate3d(1, 1, 0, 280deg); transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } [data-char-reveal="fade"] .char { transform: none; } [data-char-reveal].is-revealed .char { opacity: 1; transform: rotate3d(1, 1, 0, 360deg); } [data-char-reveal="fade"].is-revealed .char { transform: none; } /* ======================================== Header ======================================== */ #mens-top #header { position: absolute; top: 0; left: 0; width: 100%; height: 80px; z-index: 100; } #mens-top #header .header__inner { position: relative; width: 100%; max-width: 1120px; height: 100%; margin: 0 auto; box-sizing: border-box; } #mens-top #header .header__logo { position: absolute; left: 40px; top: 18.59px; margin: 0; line-height: 0; } #mens-top #header .header__logo-link { display: inline-block; } #mens-top #header .header__logo-img { width: 212px; height: 45.31px; object-fit: contain; } #mens-top #header .header__pills { position: absolute; right: 110px; top: 20px; display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; } #mens-top #header .header__pill-item { display: block; } #mens-top #header .header__pill { display: inline-flex; align-items: center; justify-content: center; padding: 10px 23px; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 14px; line-height: 1.5; color: #ffffff; text-decoration: none; border-radius: 30.5px; white-space: nowrap; transition: opacity 0.2s ease; } #mens-top #header .header__pill:hover { opacity: 0.8; } #mens-top #header .header__pill--outline { border: 1.5px solid #ffffff; } #mens-top #header .header__pill--cta { background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); } #mens-top #header .header__hamburger { position: absolute; right: 40px; top: 17px; width: 56px; height: 43px; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 102; } #mens-top #header .header__hamburger-text { display: block; font-family: "Anton", sans-serif; font-weight: 400; font-size: 26.17px; line-height: 1.5; color: #ffffff; text-align: center; } #mens-top #header .header__hamburger-bars { position: absolute; left: 1.25px; top: 36.14px; width: 53.59px; } #mens-top #header .header__hamburger-bar { display: block; width: 53.59px; height: 1.87px; background: #ffffff; } #mens-top #header .header__hamburger-bar+.header__hamburger-bar { margin-top: 3.12px; } /* SP用 CTA「カウンセリング予約」は PC では非表示 */ #mens-top #header .header__cta-sp { display: none; } /* フルスクリーンナビ（PC/SP 共通：MENU 押下で開く） */ #mens-top #header .header__nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.95); z-index: 101; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; } body.is-menu-open #mens-top #header .header__nav { visibility: visible; opacity: 1; } body.is-menu-open { overflow: hidden; } #mens-top #header .header__nav-list { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 30px; margin: 0; padding: 0; list-style: none; } #mens-top #header .header__nav-item { display: block; } #mens-top #header .header__nav-link { display: inline-block; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 22px; line-height: 1.5; color: #ffffff; text-decoration: none; transition: opacity 0.2s ease; } #mens-top #header .header__nav-link:hover { opacity: 0.7; } /* ======================================== FV（FV自身はbody固定背景を隠すため独自背景を持つ） ======================================== */ #fv { position: relative; width: 100%; height: 1040px; background: #000000; overflow: hidden; } /* FV 動画：PC は --pc を表示、SP は --sp を表示（SP MQ で切替）。intro→loop はクラス切替で opacity フェード */ #fv .fv__video { display: none; transition: opacity 0.4s ease; } #fv .fv__video--pc { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } #fv .fv__video--loop { opacity: 0; } #fv.is-loop .fv__video--intro { opacity: 0; } #fv.is-loop .fv__video--loop { opacity: 1; } #fv .fv__credit { display: none; } #fv .fv__copy { display: none; } #fv .fv__stats { display: none; } #fv .fv__cta { display: none; } /* PC版（≥1025px）FV要素：画面中央(1120px基準)で px固定。画面幅が変わっても要素は同じ位置・サイズ（FV高さに依存しない） */ @media (min-width: 1025px) { #fv .fv__credit { display: block; position: absolute; left: 71.17%; top: 81.01%; width: 167px; height: auto; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 11px; line-height: 1.5; letter-spacing: -0.06em; text-align: left; color: #ffffff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__credit { opacity: 1; } /* メインコピー（Figma Group 628092: x119, y420, 346×92）CTA上に配置。20%縮小 */ #fv .fv__copy { display: block; position: absolute; left: 9.3%; top: 55%; width: 346px; height: 91.94px; transform: scale(0.8); transform-origin: left top; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__copy { opacity: 1; } #fv .fv__copy span, #fv .fv__copy .fv__copy-brand { position: absolute; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.2; color: #ffffff; white-space: nowrap; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 1); } #fv .fv__copy-otoko { left: 10.79px; top: 0; font-size: 40.2px; letter-spacing: -0.1em; } #fv .fv__copy-no { left: 48.98px; top: 8.04px; font-size: 32.16px; letter-spacing: -0.1em; } #fv .fv__copy-iryou { left: 81.14px; top: 0; font-size: 40.2px; } #fv .fv__copy-nara { left: 241.95px; top: 8.04px; font-size: 32.16px; letter-spacing: -0.07em; } #fv .fv__copy-brand { left: 0; top: 56.94px; width: 346px; font-size: 29.4px; letter-spacing: -0.1em; text-align: center; } #fv .fv__stats { display: block; position: absolute; left: 63.2%; top: 49%; width: 396px; height: 207px; transform: scale(0.9); transform-origin: left top; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__stats { opacity: 1; } #fv .fv__stats>* { position: absolute; margin: 0; } #fv .fv__stats-cases-num, #fv .fv__stats-clinics-num { top: 13.33%; width: 44.5%; height: 42.5%; font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 73px; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #e00d0d; opacity: 0.9; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 20px rgba(0, 0, 0, 1); } #fv .fv__stats-cases-num { left: 0%; } #fv .fv__stats-clinics-num { left: 55.5%; } #fv .fv__stats-cases-label, #fv .fv__stats-cases-unit, #fv .fv__stats-clinics-label, #fv .fv__stats-clinics-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 25px; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } #fv .fv__stats-cases-label { left: 12.9%; top: 0%; width: 18.55%; } #fv .fv__stats-cases-unit { left: 15.97%; top: 56.44%; width: 12.56%; } #fv .fv__stats-clinics-label { left: 71.53%; top: 0%; width: 12.56%; } #fv .fv__stats-clinics-unit { left: 68.46%; top: 56.44%; width: 18.55%; } #fv .fv__stats-cases-note { left: 29.29%; top: 57.62%; width: 5.14%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 13px; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } #fv .fv__stats-divider { left: 50%; top: 3.92%; bottom: 33.36%; width: 0; border-right: 1.24px solid #ffffff; transform: translateX(-50%); } #fv .fv__stats-footnote { left: -2%; top: 82.6%; width: 86.87%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 11px; line-height: 1.5; text-align: center; color: #cacaca; } #fv .fv__cta { display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; left: 6.25%; top: 69%; width: 380px; height: 80.95px; transform: scale(0.9); background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.3); border-radius: 46px; text-decoration: none; overflow: hidden; z-index: 3; opacity: 0; transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } #fv.show-credit .fv__cta { opacity: 1; } #fv .fv__cta-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -0.06em; color: #ffffff; } #fv .fv__cta-arrow { display: inline-block; flex: none; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #ffffff; } #fv .fv__cta:hover, #fv .fv__cta:focus-visible, #fv .fv__cta:active { transform: scale(0.873); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); } #fv .fv__cta::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #fv .fv__cta:hover::before, #fv .fv__cta:focus-visible::before, #fv .fv__cta:active::before { left: 125%; } } /* ≥1250px：fv__stats / CTA を現状(scale0.9)から10%大きく（0.9×1.1=0.99）。1025〜1250pxは現状のまま */ @media (min-width: 1250px) { #fv .fv__stats { transform: scale(0.99); } #fv .fv__cta { transform: scale(0.99); } #fv .fv__cta:hover, #fv .fv__cta:focus-visible, #fv .fv__cta:active { transform: scale(0.9603); } } /* 1025px〜1630px：PC動画は両端20%ずつ（計40%）トリミングして中央60%を表示（左の「肌も頂きへ」見切れ防止）。FV高さは動画(166.67%幅)のアスペクト比+ヘッダー80px。min-heightで要素見切れ防止 */ @media (min-width: 1025px) and (max-width: 1630px) { #fv { height: calc(100vw * 1.6667 * 870 / 2560 + 80px); min-height: 750px; } #fv .fv__video--pc { width: 166.67%; max-width: none; left: -27.33%; } } /* ≥1631px：FV高さ1040px固定の帯。要素の横位置を画面中央基準px固定にし、画面幅が広がっても外側に動かないようにする（1630px時点の位置に合わせる） */ @media (min-width: 1631px) { #fv .fv__credit { left: calc(50% + 345px); } #fv .fv__copy { left: calc(50% - 663px); } #fv .fv__stats { left: calc(50% + 215px); } #fv .fv__cta { left: calc(50% - 713px); } } /* FV 動画 PC/SP 切替：≤1024px（タブレット〜SP）は SP動画、≥1025px は PC動画。FV内の各テキスト・stats・CTAも同じMQで定義（SP MQと同じ vw 基準スタイル） */ @media (max-width: 1024px) { #fv .fv__video--pc { display: none; } #fv .fv__video--sp { display: block; position: absolute; top: -20px; left: 0; width: 100%; height: 100%; object-fit: cover; } /* credit / copy / stats / cta：SP MQ と同じ vw 基準スタイルをタブレット帯にも適用 */ #fv .fv__credit { display: block; position: absolute; left: 63.333vw; top: calc(103.385vw + 40px); width: 32.538vw; height: 8.077vw; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 2.051vw; line-height: 1.3; letter-spacing: -0.1em; text-align: center; color: #ffffff; text-shadow: 0 0 2.564vw rgba(70, 0, 0, 0.5); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__credit { opacity: 1; } #fv .fv__copy { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__copy { opacity: 1; } #fv .fv__copy span, #fv .fv__copy .fv__copy-brand { position: absolute; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.2; color: #ffffff; white-space: nowrap; } #fv .fv__copy-otoko { left: calc(50% - 3.397vw - 24.167vw); top: 123.846vw; width: 6.795vw; height: 8.205vw; font-size: 6.795vw; letter-spacing: -0.1em; } #fv .fv__copy-no { left: calc(50% - 2.756vw - 18.269vw); top: 125.256vw; width: 5.513vw; height: 6.667vw; font-size: 5.513vw; letter-spacing: -0.1em; } #fv .fv__copy-iryou { left: calc(50% - 13.59vw - 2.051vw); top: 123.846vw; width: 27.179vw; height: 8.205vw; font-size: 6.795vw; } #fv .fv__copy-nara { left: calc(50% - 7.885vw + 19.679vw); top: 125.256vw; width: 15.769vw; height: 6.667vw; font-size: 5.513vw; letter-spacing: -0.07em; } #fv .fv__copy-brand { left: calc(50% - 29.359vw); top: 133.59vw; width: 58.718vw; height: 6.026vw; font-size: 5vw; letter-spacing: -0.1em; text-align: center; } #fv .fv__stats { display: block; position: absolute; left: calc(50% - 34.615vw); top: 155vw; width: 69.231vw; height: 36.923vw; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__stats { opacity: 1; } #fv .fv__stats>* { position: absolute; margin: 0; } #fv .fv__stats-cases-num, #fv .fv__stats-clinics-num { top: 13.19%; width: 44.63%; height: 41.67%; font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 12.821vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #e00d0d; opacity: 0.9; } #fv .fv__stats-cases-num { left: 0%; } #fv .fv__stats-clinics-num { left: 55.37%; } #fv .fv__stats-cases-label, #fv .fv__stats-cases-unit, #fv .fv__stats-clinics-label, #fv .fv__stats-clinics-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.359vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } #fv .fv__stats-cases-label { left: 12.96%; top: 0%; width: 18.52%; } #fv .fv__stats-cases-unit { left: 16.11%; top: 55.21%; width: 12.59%; } #fv .fv__stats-clinics-label { left: 71.48%; top: 0%; width: 12.59%; } #fv .fv__stats-clinics-unit { left: 68.33%; top: 55.21%; width: 18.52%; } #fv .fv__stats-cases-note { left: 29.26%; top: 56.6%; width: 5.19%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.051vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } #fv .fv__stats-divider { left: 50%; top: 3.82%; bottom: 34.38%; width: 0; border-right: 0.216vw solid #ffffff; transform: translateX(-50%); } #fv .fv__stats-footnote { left: 6.3%; top: 76.39%; width: 87.59%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.051vw; line-height: 1.5; text-align: center; color: #cacaca; } #fv .fv__cta { display: flex; align-items: center; justify-content: center; gap: 1.923vw; position: absolute; left: calc(50% - 33.333vw); top: 200vw; width: 66.667vw; height: 15.385vw; background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); box-shadow: 0 0.769vw 1.346vw rgba(0, 0, 0, 0.25), inset 0 -0.385vw 0 rgba(0, 0, 0, 0.35), inset 0 0.385vw 0 rgba(255, 255, 255, 0.3), inset 0.385vw 0 0 rgba(255, 255, 255, 0.2), inset -0.385vw 0 0 rgba(0, 0, 0, 0.2); border-radius: 12.821vw; text-decoration: none; overflow: hidden; z-index: 3; opacity: 0; transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } #fv.show-credit .fv__cta { opacity: 1; } #fv .fv__cta-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.038vw; line-height: 1.2; letter-spacing: -0.06em; color: #ffffff; } #fv .fv__cta-arrow { display: inline-block; flex: none; width: 0; height: 0; border-top: 1.667vw solid transparent; border-bottom: 1.667vw solid transparent; border-left: 1.795vw solid #ffffff; } #fv .fv__cta:hover, #fv .fv__cta:focus-visible, #fv .fv__cta:active { transform: scale(0.96); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); } #fv .fv__cta::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #fv .fv__cta:hover::before, #fv .fv__cta:focus-visible::before, #fv .fv__cta:active::before { left: 125%; } } /* タブレット帯（781〜1024px）：FV高さをSP動画アスペクト(706:1712)に合わせる。動画は上端ぴったり配置（ヘッダーの後ろに上部少しかぶる） */ @media (min-width: 781px) and (max-width: 1024px) { #fv { height: calc(100vw * 1712 / 706); } #fv .fv__video--sp { top: 0; height: 100%; object-fit: cover; } } /* ======================================== SV ======================================== */ #sv { position: relative; width: 100%; padding: 120px 40px 100px; box-sizing: border-box; } #sv .sv__gradient { position: absolute; top: 0; left: 0; width: 100%; height: 133px; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; z-index: 0; } #sv .sv__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 80px; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; z-index: 1; } /* SV - カード */ #sv .sv__cards { display: flex; gap: 50px; } #sv .sv__card { display: flex; justify-content: space-between; align-items: center; width: 470px; height: 150px; padding: 0 40px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; color: #ffffff; transition: opacity 0.2s ease; box-sizing: border-box; } #sv .sv__card:hover { opacity: 0.75; } #sv .sv__card-text { display: flex; flex-direction: column; gap: 5px; } #sv .sv__card-title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; color: #ffffff; } #sv .sv__card-desc { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #8e8e8e; } #sv .sv__card-more { display: flex; flex-direction: column; align-items: center; gap: 23px; } #sv .sv__card-more-text { font-family: "Anton", sans-serif; font-weight: 400; font-size: 22px; line-height: 1.5; color: #ffffff; } #sv .sv__card-more-arrow { display: block; width: 81px; height: 7px; } /* SV - お知らせ */ #sv .sv__notice { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 580px; padding: 50px 20px; background: rgba(0, 0, 0, 0.3); border: 2px solid #ffffff; border-radius: 10px; box-sizing: border-box; } #sv .sv__notice-title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.5; letter-spacing: -0.04em; color: #ffffff; text-align: center; } #sv .sv__notice-list { display: flex; flex-direction: column; align-items: center; gap: 20px; width: max-content; max-width: none; } #sv .sv__notice-item { display: inline-block; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.6; color: #ffffff; text-align: center; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; transition: opacity 0.2s ease; } #sv .sv__notice-item:hover { opacity: 0.75; } #sv .sv__notice-divider { width: 520px; height: 1px; margin: 0; background: #ffffff; border: 0; } #sv .sv__notice-all { display: inline-block; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.6; color: #ffffff; text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.2s ease; } #sv .sv__notice-all:hover { opacity: 0.75; } #sv .sv__banner { position: relative; display: block; max-width: 800px; overflow: hidden; } #sv .sv__banner img { display: block; width: 100%; height: auto; } /* SV - メニューグリッド */ /* NAVIGATION（旧 sv__menu）：見出し + 4列×2行のコンテンツメニュー */ #sv .sv__menu-title { margin: 0 0 -50px; padding-bottom: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 60px; line-height: 1.2; color: #ffffff; text-align: center; } #sv .sv__menu { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 10px; justify-content: center; max-width: 790px; width: 100%; margin: 0 auto; } #sv .sv__menu-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; background: rgba(255, 255, 255, 0.2); color: #ffffff; transition: opacity 0.2s ease; box-sizing: border-box; } #sv .sv__menu-item:hover { opacity: 0.8; } #sv .sv__menu-text { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(14px, calc(2.857vw - 8.3px), 18px); line-height: 1.6; text-align: left; color: #ffffff; } #sv .sv__menu-arrow { display: block; width: 10px; height: 4px; } /* ======================================== FEATURES ======================================== */ #features { position: relative; width: 100%; padding: 200px 40px; box-sizing: border-box; } #features .features__bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1120px; height: 100%; z-index: 0; pointer-events: none; } #features .features__bg-smoke { position: absolute; display: block; } #features .features__bg-smoke--01 { top: -283px; left: -345px; width: 706.11px; height: 566.59px; } #features .features__bg-smoke--02 { top: -52px; left: 953px; width: 563px; height: 463px; } #features .features__bg-smoke--03 { top: 903px; left: -138px; width: 362px; height: 252px; opacity: 0.3; } #features .features__bg-smoke--04 { top: 1569px; left: 857px; width: 551px; height: 444px; opacity: 0.5; } #features .features__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } /* FEATURES - 見出し */ #features .features__head { display: flex; flex-direction: column; width: clamp(941px, 89.6vw, 1120px); padding-bottom: 80px; } #features .features__h2 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; } #features .features__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #features .features__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #features .features__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #features .features__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #features .features__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #features .features__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #features .features__h2.is-animated span:nth-child(5) { transition-delay: 240ms; } #features .features__h2.is-animated span:nth-child(6) { transition-delay: 300ms; } #features .features__h2.is-animated span:nth-child(7) { transition-delay: 360ms; } #features .features__h2.is-animated span:nth-child(8) { transition-delay: 420ms; } #features .features__h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #8e8e8e; } /* FEATURES - 01 アイテム */ #features .features__item { display: flex; justify-content: space-between; width: clamp(941px, 89.6vw, 1120px); padding-bottom: 100px; } /* FEATURES - 左コンテンツ */ #features .features__content { display: flex; flex-direction: column; width: 560px; } #features .features__h4 { position: relative; width: clamp(470px, 44.8vw, 560px); height: clamp(243px, 23.12vw, 289px); margin-bottom: 0; } #features .features__h4-num { position: absolute; top: 0; left: 0; width: 127.45px; height: auto; opacity: 0.7; filter: saturate(2); } #features .features__h4-sub { position: absolute; top: 70px; left: 0; display: block; width: 560px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.3; letter-spacing: -0.04em; text-align: center; color: #ffffff; text-shadow: 0 -8px 40px rgba(0, 0, 0, 0.8); } #features .features__h4-main { position: absolute; top: 120px; left: 0; display: block; width: 560px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 65px; line-height: 1.3; letter-spacing: -0.04em; text-align: center; background: linear-gradient(0deg, rgba(187, 0, 1, 1) 0%, rgba(255, 0, 1, 1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 -8px 10px rgba(0, 0, 0, 0.8)); } #features .features__desc { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(15.12px, 1.44vw, 18px); line-height: 1.6; color: #ffffff; } /* FEATURES - 右アイコン */ #features .features__icons { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 494px; } #features .features__icon-grid { display: grid; grid-template-columns: repeat(3, clamp(134px, 12.8vw, 160px)); grid-auto-rows: clamp(134px, 12.8vw, 160px); gap: clamp(6px, 0.56vw, 7px); } #features .features__icon-item { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: clamp(134px, 12.8vw, 160px); height: clamp(134px, 12.8vw, 160px); padding: 20px 10px 22px; background: rgba(0, 0, 0, 0.2); border: 1.45px solid #ffffff; backdrop-filter: blur(2.2px); -webkit-backdrop-filter: blur(2.2px); box-sizing: border-box; } #features .features__icon-img { display: flex; justify-content: center; align-items: center; width: 100%; min-height: clamp(59px, 5.6vw, 70px); } #features .features__icon-img img { max-width: 100%; max-height: clamp(59px, 5.6vw, 70px); width: auto; height: auto; } #features .features__icon-label { display: flex; flex-direction: column; align-items: center; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(15.9px, 1.512vw, 18.9px); line-height: 1.1; text-align: center; color: #ffffff; } #features .features__icon-sub { display: block; margin-top: 4px; font-size: clamp(9.78px, 0.931vw, 11.64px); font-weight: 400; letter-spacing: -0.05em; line-height: 1.2; } #features .features__note { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: center; color: #ffffff; } /* FEATURES - 02 アイテム */ #features .features__item--02 { position: relative; align-items: flex-start; padding-top: 0; padding-bottom: 80px; } #features .features__decoration { position: relative; z-index: 1; width: clamp(415px, 39.52vw, 494px); height: clamp(415px, 39.52vw, 494px); } #features .features__decoration-box { position: relative; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); backdrop-filter: blur(2.24px); -webkit-backdrop-filter: blur(2.24px); border-radius: 7.057px; overflow: hidden; } #features .features__decoration-label { position: absolute; top: clamp(33.79px, 3.218vw, 40.23px); left: clamp(29.64px, 2.823vw, 35.29px); width: clamp(165px, 15.68vw, 196px); font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(29.64px, 2.823vw, 35.29px); line-height: 1.4; color: #e00d0d; z-index: 2; } #features .features__decoration-logo { position: absolute; top: clamp(52.92px, 5.04vw, 63px); left: clamp(32.76px, 3.12vw, 39px); width: clamp(349.57px, 33.292vw, 416.15px); height: clamp(308.8px, 29.41vw, 367.62px); z-index: 1; } #features .features__content--02 { position: relative; z-index: 1; width: clamp(470px, 44.8vw, 560px); align-items: center; } #features .features__h4--02 { width: clamp(470px, 44.8vw, 560px); height: clamp(243px, 23.12vw, 289px); margin-bottom: 0; } #features .features__h4-num--02 { top: 0; left: auto; right: 0; width: 148.45px; height: auto; } #features .features__h4-main--02 { top: 70px; left: 0; width: 560px; font-size: 68px; line-height: 1.3; background: linear-gradient(0deg, rgba(187, 0, 1, 1) 0%, rgba(255, 0, 1, 1) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 -8px 10px rgba(0, 0, 0, 0.8)); } #features .features__h4-sub--02 { top: 163px; left: 0; width: 560px; } #features .features__desc--02 { width: clamp(470px, 44.8vw, 560px); text-align: left; } #features .features__link { display: inline-block; margin-top: 40px; align-self: center; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: clamp(23.52px, 2.24vw, 28px); line-height: 1.6; color: #ffffff; text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.2s ease; } #features .features__link:hover { opacity: 0.75; } /* FEATURES - 区切り線（新デザインPCでは非表示／SPで表示） */ #features .features__divider { display: none; } /* FEATURES - CTAボタン */ #features .features__cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 0; width: 350px; height: 80px; padding: 0; background: transparent; border: 2px solid #ffffff; border-radius: 9999px; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; color: #ffffff; text-decoration: none; } #features .features__cta-arrow { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #ffffff; } /* ======================================== PLANS ======================================== */ #plans { position: relative; width: 100%; padding: 0 40px 180px; box-sizing: border-box; overflow: hidden; } #plans .plans__hero { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1120px; height: 100%; z-index: 0; pointer-events: none; } #plans .plans__bg-smoke { position: absolute; display: block; } #plans .plans__bg-smoke--01 { top: -258.97px; left: -524px; width: 1124.73px; height: 1013.21px; opacity: 0.8; } #plans .plans__bg-smoke--02 { top: 1730px; left: 937px; width: 641.54px; height: 537.22px; opacity: 0.6; } /* PLANS - 見出し（横書き column / FEATURES と同じ方式） */ #plans .plans__head { position: relative; z-index: 2; display: flex; flex-direction: column; max-width: 1120px; margin: 0 auto; padding: 0 0 80px; box-sizing: border-box; } #plans .plans__h2 { margin: 0; } #plans .plans__h2-text { display: inline-block; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; } #plans .plans__h3 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #8e8e8e; } #plans .plans__inner { position: relative; z-index: 2; width: 946px; margin: 0 auto; } /* PLANS - 料金カード共通 */ /* PLANS - スライダーラッパー（PCは透過、SPでカードスライダーとして機能） */ #plans .plans__slider { position: relative; width: 100%; height: 1602px; } #plans .plans__slider-track { display: none; } #plans .plans__cards { position: relative; width: 100%; height: 100%; } #plans .plans__card { position: absolute; width: 448px; height: 776px; padding: 0; border-radius: 6.787879px; overflow: hidden; backdrop-filter: blur(6.787879px); -webkit-backdrop-filter: blur(6.787879px); box-sizing: border-box; } /* PLANS - カード出現アニメ（右下から左上へ平面回転で起き上がる）／3枚とも 8.75deg / 0.9s */ #plans .plans__card[data-scroll-fade] { opacity: 0; transform: rotate(8.75deg) translateZ(0); transform-origin: 0% 100%; transition: opacity 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #plans .plans__card[data-scroll-fade].is-visible { opacity: 1; transform: rotate(0) translateZ(0); } #plans .plans__card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; opacity: 0.7; } #plans .plans__card-inner { position: relative; z-index: 1; width: 100%; height: 100%; } /* PLANS - カード位置 */ #plans .plans__card--a { left: calc(50% - 448px / 2 - 249px); top: 0; } #plans .plans__card--b { left: calc(50% - 448px / 2 + 249px); top: 0; } #plans .plans__card--c { left: calc(50% - 448px / 2); top: 826px; } /* PLANS - カード見出しエリア */ #plans .plans__card-head { position: absolute; left: 42px; top: 34.83px; width: 262px; height: 99.33px; } #plans .plans__card--c .plans__card-head { left: 52.8px; top: 0; width: 215px; height: 75px; } /* カードA: タイトル */ #plans .plans__card--a .plans__card-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 56px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 40px; line-height: 140%; letter-spacing: -0.04em; color: #ffffff; text-align: center; white-space: nowrap; } /* カードB: タイトル */ #plans .plans__card--b .plans__card-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 56px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 40px; line-height: 140%; letter-spacing: -0.04em; color: #ffffff; text-align: center; white-space: nowrap; } /* カードC: タイトル（全身脱毛 / .plans__card-title--full） */ #plans .plans__card--c .plans__card-title { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 53.6px; line-height: 140%; letter-spacing: 0; color: #ffffff; text-align: center; white-space: nowrap; } #plans .plans__card--c .plans__card-title--full { width: 215px; height: 75px; } #plans .plans__card-parts { position: absolute; left: 12px; top: 48.67px; width: 88.67px; height: 50.67px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 4px; } #plans .plans__card-parts-num { position: relative; top: 2px; font-family: "Anton", sans-serif; font-weight: 400; font-size: 36px; line-height: 140%; letter-spacing: -0.04em; color: #ffffff; } #plans .plans__card-parts-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 33.33px; line-height: 140%; letter-spacing: -0.04em; color: #ffffff; } #plans .plans__card-type { position: absolute; left: 232px; top: 93.5px; display: flex; align-items: center; justify-content: center; width: 78.67px; height: 33px; padding: 10px 13.33px; box-sizing: border-box; border: 1.33px solid #ffffff; border-radius: 66.67px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 17.33px; line-height: 100%; color: #ffffff; white-space: nowrap; } #plans .plans__card--c .plans__card-type { left: 110px; top: 102.6px; width: auto; height: auto; padding: 12px 16px; border-width: 1.36px; border-radius: 99.2px; font-size: 22.4px; } #plans .plans__card-count { position: absolute; left: 315px; top: 44.83px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 81.33px; height: 81.33px; padding: 10px; background: #ffffff; box-sizing: border-box; text-align: center; color: #d52d2d; } #plans .plans__card-count-label { flex: 0 0 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; color: #811211; } #plans .plans__card-count-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 33.33px; line-height: 1; color: #811211; } #plans .plans__card-count-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 30.67px; line-height: 1; color: #811211; } #plans .plans__card--c .plans__card-count { left: 288.8px; top: 40.4px; width: 108px; height: 108px; padding: 0; display: block; color: #61090b; } #plans .plans__card--c .plans__card-count-label { position: absolute; left: 27.2px; top: 8px; width: 55px; height: 41px; font-size: 27.2px; line-height: 150%; } #plans .plans__card--c .plans__card-count-num { position: absolute; left: 24.8px; top: 40px; width: 20px; height: 60px; font-size: 40px; line-height: 150%; } #plans .plans__card--c .plans__card-count-unit { position: absolute; left: 50px; top: 40px; width: 38px; height: 56px; font-size: 37.33px; line-height: 150%; } #plans .plans__card-divider { position: absolute; top: 140.5px; left: 40px; width: 360px; height: 1px; margin: 0; background: #ffffff; border: 0; opacity: 0.6; } #plans .plans__card--c .plans__card-divider { top: 180.4px; left: 28px; width: 392px; } #plans .plans__card-visual { position: absolute; top: 262.83px; left: 60px; width: 320.33px; height: 273.33px; display: flex; justify-content: center; align-items: center; } #plans .plans__card-visual-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } #plans .plans__card--c .plans__card-visual--body { top: 205px; left: 138.4px; width: 172px; height: 278.4px; } #plans .plans__card-visual--body .plans__card-visual-img { max-height: 100%; width: auto; } #plans .plans__card-parts-list { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; } #plans .plans__card-parts-list-row { position: absolute; display: flex; gap: 6.67px; list-style: none; padding: 0; margin: 0; } #plans .plans__card-parts-list-row>span { display: flex; align-items: center; justify-content: center; height: 30.67px; padding: 0 16.67px; background: rgba(255, 255, 255, 0.3); font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18.67px; line-height: 1; letter-spacing: -0.04em; color: #ffffff; box-sizing: border-box; white-space: nowrap; } #plans .plans__card-parts-list-row:nth-child(1) { left: 59.33px; top: 160.5px; width: 324.33px; } #plans .plans__card-parts-list-row:nth-child(1)>span:nth-child(1) { width: 52.33px; } /* 鼻 */ #plans .plans__card-parts-list-row:nth-child(1)>span:nth-child(2) { width: 71.33px; } /* 鼻下 */ #plans .plans__card-parts-list-row:nth-child(1)>span:nth-child(3) { width: 90.33px; } /* あご上 */ #plans .plans__card-parts-list-row:nth-child(1)>span:nth-child(4) { width: 90.33px; } /* あご下 */ #plans .plans__card-parts-list-row:nth-child(2) { left: 50px; top: 196.17px; width: 342.33px; } #plans .plans__card-parts-list-row:nth-child(2)>span:nth-child(1) { width: 90.33px; } /* おでこ */ #plans .plans__card-parts-list-row:nth-child(2)>span:nth-child(2) { width: 71.33px; } /* ほほ */ #plans .plans__card-parts-list-row:nth-child(2)>span:nth-child(3) { width: 108.33px; } /* もみあげ */ #plans .plans__card-parts-list-row:nth-child(2)>span:nth-child(4) { width: 52.33px; } /* 首 */ #plans .plans__card-price { position: absolute; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 13.33px; } /* カードA/B: 360×150 */ #plans .plans__card--a .plans__card-price, #plans .plans__card--b .plans__card-price { left: 40px; bottom: 80px; width: 360px; height: 150px; } /* カードC: 360×124 */ #plans .plans__card--c .plans__card-price { left: 40px; bottom: 105px; width: 360px; height: 124px; } #plans .plans__card-price-label { width: 27px; height: 87px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26.67px; line-height: 110%; text-align: center; color: #ffffff; } /* カードB「月々」は2文字・40px */ #plans .plans__card--b .plans__card-price-label { width: 40px; height: 88px; font-size: 40px; } #plans .plans__card-price-main { display: flex; flex-direction: row; align-items: center; gap: 6.67px; width: 312.67px; height: 150px; } #plans .plans__card-price-num { width: 246px; height: 150px; font-family: "Anton", sans-serif; font-weight: 400; font-size: 100px; line-height: 150%; letter-spacing: 0.06em; color: #ffffff; white-space: nowrap; } #plans .plans__card--c .plans__card-price-num { width: 262px; height: 124px; font-size: 82.67px; letter-spacing: 0.02em; } #plans .plans__card-price-unit { position: relative; width: 60px; height: 101.33px; } #plans .plans__card-price-tax { position: absolute; left: 6px; top: 0; width: 48px; height: 34px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 140%; text-align: center; color: #ffffff; } #plans .plans__card-price-yen { position: absolute; left: 0; top: 17.33px; width: 60px; height: 84px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 60px; line-height: 140%; text-align: center; color: #ffffff; } #plans .plans__card--c .plans__card-price-unit { width: 54px; height: 89.67px; } #plans .plans__card--c .plans__card-price-tax { left: 6.33px; top: 0; width: 43px; height: 30px; font-size: 21.33px; } #plans .plans__card--c .plans__card-price-yen { left: 0; top: 14.67px; width: 54px; height: 75px; font-size: 53.33px; } /* カードB: タイトル parts「6部位脱毛」用に幅拡張＋nowrap */ #plans .plans__card--b .plans__card-parts { width: auto; white-space: nowrap; } #plans .plans__card--b .plans__card-parts-unit { white-space: nowrap; } /* カードA: タイトル parts「3部位脱毛」用に幅拡張＋nowrap */ #plans .plans__card--a .plans__card-parts { width: auto; white-space: nowrap; } #plans .plans__card--a .plans__card-parts-unit { white-space: nowrap; } #plans .plans__card--b .plans__card-visual { top: 230.6px; left: 147.2px; width: 153.6px; height: 252.14px; } /* カードB: Frame 628629 — 一括払 + 月々 の2段ラッパー */ #plans .plans__card-price-wrap { position: absolute; top: 469.74px; left: 28px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; width: 392px; height: 148.2px; z-index: 2; } /* カードB: 一括払行（ラッパー内 flow） */ #plans .plans__card--b .plans__card-price-wrap .plans__card-price { position: relative; left: auto; bottom: auto; align-self: center; gap: 8px; width: auto; height: auto; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-label { width: auto; height: auto; font-size: 25.6px; line-height: 110%; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-main { width: auto; height: auto; gap: 4px; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-num { width: auto; height: auto; font-size: 86.4px; letter-spacing: 0.02em; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-unit { width: 55px; height: 66px; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-tax { left: 4.8px; top: -10px; width: 45px; height: 16px; font-size: 22.4px; line-height: 140%; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price-yen { left: 0; top: 4px; width: 55px; height: 40px; font-size: 54.4px; line-height: 140%; } /* カードC: 一括払行（ラッパー内 flow） */ #plans .plans__card--c .plans__card-price-wrap .plans__card-price { position: relative; left: auto; bottom: auto; align-self: center; gap: 8px; width: auto; height: auto; } /* カードC: 一括払行のみ 15px 下に（月々行は影響なし） */ #plans .plans__card--c .plans__card-price-wrap .plans__card-price:not(.plans__card-price--monthly) { transform: translateY(10px); } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-label { width: auto; height: auto; font-size: 25.6px; line-height: 110%; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-main { width: auto; height: auto; gap: 4px; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-num { width: auto; height: auto; font-size: 86.4px; letter-spacing: 0.02em; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-unit { width: 55px; height: 66px; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-tax { left: 4.8px; top: -10px; width: 45px; height: 16px; font-size: 22.4px; line-height: 140%; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price-yen { left: 0; top: 4px; width: 55px; height: 40px; font-size: 54.4px; line-height: 140%; } /* カードB: 月々行（小サイズ・暗背景） */ #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly { align-self: stretch; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 0 8px; width: auto; height: auto; margin-top: -25px; background: rgba(0, 0, 0, 0.3); box-sizing: border-box; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-label { width: 19.2px; height: auto; font-size: 17.6px; line-height: 110%; writing-mode: vertical-rl; text-orientation: upright; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-num { width: auto; height: auto; font-size: 44.8px; letter-spacing: 0.02em; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-unit { width: 52px; height: 34.2px; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-tax { left: 2.2px; top: -8px; width: 49px; height: 10px; font-size: 13.6px; line-height: 140%; } #plans .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-yen { left: 0; top: 3px; width: 52px; height: 19px; font-size: 25.6px; line-height: 140%; } /* カードC: 月々行（小サイズ・暗背景） */ #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly { align-self: stretch; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; padding: 0 8px; width: auto; height: auto; margin-top: -15px; background: rgba(0, 0, 0, 0.3); box-sizing: border-box; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-label { width: 19.2px; height: auto; font-size: 17.6px; line-height: 110%; writing-mode: vertical-rl; text-orientation: upright; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-main { width: auto; height: auto; gap: 4px; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-num { width: auto; height: auto; font-size: 44.8px; line-height: 150%; letter-spacing: 0.02em; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-unit { width: 52px; height: 34.2px; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-tax { left: 2.2px; top: -8px; width: 49px; height: 10px; font-size: 13.6px; line-height: 140%; } #plans .plans__card--c .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-yen { left: 0; top: 3px; width: 52px; height: 19px; font-size: 25.6px; line-height: 140%; } /* 注釈 — Figma: 360×39 */ #plans .plans__card-note { position: absolute; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 12.8px; line-height: 120%; letter-spacing: -0.03em; text-align: justify; color: #ffffff; } /* カードA/B: 注釈位置 */ #plans .plans__card--a .plans__card-note, #plans .plans__card--b .plans__card-note { left: 24px; bottom: 38px; width: 400px; } #plans .plans__card--b .plans__card-note { top: 670px; bottom: auto; left: 28px; width: 392px; font-size: 12.8px; line-height: 130%; letter-spacing: -0.02em; } /* カードC: 注釈位置 */ #plans .plans__card--c .plans__card-note { left: 40px; bottom: 25px; width: 375px; } #plans .plans__cta-wrap { display: flex; justify-content: center; margin-top: 100px; } #plans .plans__cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; width: 350px; height: 80px; padding: 0; background: transparent; border: 2px solid #ffffff; border-radius: 9999px; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; color: #ffffff; text-decoration: none; } #plans .plans__cta-text { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; } #plans .plans__cta-arrow { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #ffffff; } /* ======================================== CASE ======================================== */ #case { position: relative; width: 100%; padding: 0 40px 180px; box-sizing: border-box; } #case .case__bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1120px; height: 100%; z-index: 0; pointer-events: none; } #case .case__bg-smoke { position: absolute; left: -345px; top: 656px; width: 974px; height: 800px; max-width: none; opacity: 0.15; filter: blur(4px); pointer-events: none; } #case .case__bg-smoke--02 { left: 1013px; top: 846px; width: 459.45px; height: 369.83px; opacity: 0.2; filter: none; } #case .case__bg-smoke--03 { left: 815px; top: -137px; width: 869.44px; height: 697.64px; opacity: 0.3; filter: none; } #case .case__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } /* CASE - 見出し */ #case .case__head { display: flex; flex-direction: column; width: 1120px; padding-bottom: 80px; } #case .case__h2 { margin: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; } #case .case__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #case .case__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #case .case__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #case .case__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #case .case__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #case .case__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #case .case__h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #8e8e8e; } /* CASE - アイテムグループ */ #case .case__items { display: flex; flex-direction: column; align-items: center; width: 100%; padding-bottom: 0; } /* CASE - 1アイテム（ヒゲ / 脚 共通） */ #case .case__item { display: flex; flex-direction: column; align-items: center; width: 700px; } #case .case__item--hige { padding-bottom: 100px; } #case .case__item--leg { padding-bottom: 80px; } /* CASE - h3 サブタイトル（{ts1}=「ヒゲ脱毛」「脚脱毛」 50px / 残り 40px） */ #case .case__item-title { margin: 0 0 50px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 50px; line-height: 1.4; text-align: center; color: #ffffff; } #case .case__item-title-strong { font-size: 50px; } #case .case__images { display: flex; justify-content: center; align-items: center; gap: 10px; width: clamp(700px, calc(21.15vw + 535px), 810px); max-width: 100%; } #case .case__image { position: relative; margin: 0; width: clamp(345px, calc(10.58vw + 262.5px), 400px); aspect-ratio: 400 / 320; height: auto; overflow: hidden; } #case .case__image-img { position: absolute; max-width: none; display: block; } #case .case__image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; pointer-events: none; } #case .case__image--before::after { background: linear-gradient(90deg, #000000 0%, #5c0000 100%); } #case .case__image--after::after { background: linear-gradient(90deg, #5c0000 0%, #ff0001 100%); } #case .case__item--hige .case__image--before .case__image-img { width: 100%; height: auto; left: 0%; top: -14%; } #case .case__item--hige .case__image--after .case__image-img { width: 100%; height: auto; left: 0%; top: -13%; } #case .case__item--leg .case__image--before .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } #case .case__item--leg .case__image--after .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } /* BEFORE/AFTER ラベル（白統一・帯の中央） */ #case .case__image-label { position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; margin: 0; padding: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 32px; line-height: 60px; text-align: center; color: #ffffff; z-index: 1; } /* CASE - 詳細ボックス（520幅 / grid 3カラム：ラベル列 | 縦線 | 値列） */ #case .case__detail { display: flex; justify-content: center; padding-top: 40px; } #case .case__detail-wrap { display: flex; flex-direction: column; gap: 20px; width: 520px; } #case .case__detail-box { display: grid; grid-template-columns: max-content 1px 1fr; align-items: center; column-gap: 20px; row-gap: 10px; width: 520px; padding: 40px 20px 40px 40px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-sizing: border-box; } #case .case__detail-list { display: contents; } #case .case__detail-row { display: contents; } #case .case__detail-label { grid-column: 1; margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; color: #ffffff; } #case .case__detail-value { grid-column: 3; margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; color: #ffffff; } #case .case__detail-line { grid-column: 2; grid-row: 1 / span 4; width: 1px; height: 120px; background: #ffffff; justify-self: center; align-self: center; } #case .case__detail-note { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; text-align: left; color: #ffffff; } #case .case__cta { position: relative; display: block; width: 350px; height: 80px; background: transparent; border: 2px solid #ffffff; border-radius: 100px; text-decoration: none; box-sizing: border-box; } #case .case__cta-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; text-align: center; color: #ffffff; white-space: nowrap; } #case .case__cta-arrow { position: absolute; right: 22px; top: calc(50% - 8px); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #ffffff; } /* ======================================== PARTS ======================================== */ #parts { position: relative; width: 100%; padding: 0 40px 200px; box-sizing: border-box; isolation: isolate; } #parts .parts__bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1120px; height: 100%; z-index: 0; pointer-events: none; } /* PARTS - 装飾帯（CASE と同じパターン、寸法は PARTS 用） */ #parts .parts__band { position: absolute; display: flex; flex-direction: row; align-items: center; padding: 0; pointer-events: none; width: max(110vw, 1408px); max-width: none; height: calc(max(100vw, 1120px) * 68.728 / 2200); left: min(-64px, calc(640px - 55vw)); margin-left: 0; } #parts .parts__band--a { top: 560px; transform: rotate(6.08deg); transform-origin: 0 0; opacity: 0.6; filter: blur(2px); z-index: 1; } #parts .parts__band--b { top: 770px; transform: rotate(-14.69deg); transform-origin: 0 0; opacity: 0.6; z-index: 2; } /* parts__band - クロス出現アニメ：band--a は左→右、band--b は右→左 にワイプして交差 */ /* #parts セクションが viewport に入った時に JS が .is-band-revealed を付与 → animation再生 */ @keyframes bandWipeA { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } } @keyframes bandWipeB { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0); } } #parts .parts__band--a { clip-path: inset(0 100% 0 0); } #parts .parts__band--b { clip-path: inset(0 0 0 100%); } #parts .parts__band--a.is-band-revealed { animation: bandWipeA 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } #parts .parts__band--b.is-band-revealed { animation: bandWipeB 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } #parts .parts__band-group { position: relative; flex: none; width: calc(100% / 3); height: 100%; background: #000000; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; } #parts .parts__band-group::before, #parts .parts__band-group::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #ffffff; } #parts .parts__band-group::before { top: 6.7%; } #parts .parts__band-group::after { top: 91.09%; } #parts .parts__band-text { display: inline-block; margin: 0; padding: 0 6px; font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 22px; line-height: 120%; letter-spacing: -0.04em; color: #ffffff; white-space: nowrap; transform: skewX(-15deg); } /* PARTS - inner */ #parts .parts__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } #parts .parts__head { display: flex; flex-direction: column; align-items: flex-start; width: 1120px; padding: 0 0 100px; box-sizing: content-box; } #parts .parts__h2 { margin: 0; width: auto; height: auto; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; white-space: nowrap; } #parts .parts__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #parts .parts__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #parts .parts__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #parts .parts__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #parts .parts__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #parts .parts__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #parts .parts__h2.is-animated span:nth-child(5) { transition-delay: 240ms; } #parts .parts__h3 { width: auto; height: auto; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #a4a4a4; } #parts .parts__grid { position: relative; width: 760px; height: 552px; } #parts .parts__item { position: absolute; width: 240px; height: 216px; overflow: hidden; border-radius: 7.5px; background: #000000; cursor: pointer; -webkit-tap-highlight-color: transparent; } #parts .parts__item--face { left: 0; top: 0; } #parts .parts__item--full { left: 260px; top: 0; } #parts .parts__item--vio { left: 520px; top: 0; } #parts .parts__item--arms { left: 0; top: 236px; } #parts .parts__item--legs { left: 260px; top: 236px; } #parts .parts__item--torso { left: 520px; top: 236px; } #parts .parts__item-img { position: absolute; max-width: none; display: block; filter: grayscale(1); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease; transform-origin: 50% 50%; } #parts .parts__item--face .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } #parts .parts__item--full .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } #parts .parts__item--vio .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } #parts .parts__item--arms .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } #parts .parts__item--legs .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } #parts .parts__item--torso .parts__item-img { width: 250px; height: auto; left: 0; top: 0; } /* PARTS - 多重オーバーレイ（デフォルト: グレー暗、ホバー: 赤） */ #parts .parts__item::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); mix-blend-mode: multiply; pointer-events: none; z-index: 1; transition: background-color 0.6s ease; } /* ホバー / フォーカス: 画像 1.1 倍ズーム + 赤オーバーレイ（ふわっと変化） */ #parts .parts__item:hover .parts__item-img, #parts .parts__item:focus-visible .parts__item-img { transform: scale(1.1); } #parts .parts__item:hover::after, #parts .parts__item:focus-visible::after { background: rgba(255, 0, 0, 0.6); } /* PARTS - テキストオーバーレイ */ #parts .parts__item-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 2; pointer-events: none; } #parts .parts__item-en { font-family: "Anton", sans-serif; font-weight: 400; font-size: 60px; line-height: 1.2; color: #ffffff; text-align: center; } #parts .parts__item-en--full { font-size: 52.5px; } #parts .parts__item-ja { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; color: #ffffff; text-align: center; } #parts .parts__item-ja--vio { font-size: 22.5px; } /* PARTS - CTAボタン（CASE と同じ構造、テキスト幅のみ 160px） */ #parts .parts__cta { position: relative; display: block; width: 350px; height: 80px; margin-top: 0; background: transparent; border: 2px solid #ffffff; border-radius: 100px; text-decoration: none; box-sizing: border-box; } #parts .parts__cta-text { position: absolute; width: 180px; height: 30px; left: calc(50% - 80px - 9.21px); top: calc(50% - 15px - 1px); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 150%; text-align: center; color: #ffffff; } #parts .parts__cta-arrow { position: absolute; right: 22px; top: calc(50% - 8px); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #ffffff; } /* ======================================== 医療脱毛とエステ脱毛の違い ======================================== */ #differences { position: relative; width: 100%; padding: 0 40px 200px; box-sizing: border-box; } #differences .differences__inner { display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } /* DIFFERENCES - h3 タイトル */ #differences .differences__h3 { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 3px; margin: 0; padding: 0 0 50px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #ffffff; text-align: center; } #differences .differences__h3-row { display: inline-flex; align-items: flex-end; } #differences .differences__h3-large { font-size: 48px; line-height: 1.4; } #differences .differences__h3-small { font-size: 40px; line-height: 1.4; } #differences .differences__table { display: grid; grid-template-columns: 246fr 393fr 393fr; grid-template-rows: 170px 330px 160px 160px 160px 160px; gap: 4px; max-width: 1040px; width: 100%; } /* セル共通 */ #differences .differences__cell { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px 20px; box-sizing: border-box; } /* 1行目: 列見出し */ #differences .differences__cell--empty { background: transparent; padding: 0; } /* エステ列見出し：外側170透明、内側120高の白20%ボックスを下寄せ（上50空白） */ #differences .differences__cell--head-este-outer { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; background: transparent; padding: 0; box-sizing: border-box; } #differences .differences__cell-head-este-box { display: flex; justify-content: center; align-items: center; height: 120px; padding: 0 20px; background: rgba(255, 255, 255, 0.2); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.5; color: #ffffff; text-align: center; box-sizing: border-box; } /* 医療列見出し：170全体ベタ赤、32px */ #differences .differences__cell--head-medical { background: rgba(217, 0, 1, 0.7); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 32px; line-height: 1.5; color: #ffffff; text-align: center; } /* 行ラベル列 */ #differences .differences__cell--label { background: rgba(255, 255, 255, 0.2); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.5; color: #ffffff; text-align: center; } /* データセル */ #differences .differences__cell--data { background: rgba(0, 0, 0, 0.6); gap: 10px; } #differences .differences__cell-text { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.4; color: #d1d1d1; text-align: center; } #differences .differences__cell-strong { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.4; color: #ffffff; letter-spacing: -0.08em; } #differences .differences__cell-emphasis { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 23.4px; line-height: 1.4; color: #ffffff; } /* 数値（Anton） */ #differences .differences__cell-number { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 4px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 38px; line-height: 1.1; color: #ffffff; } #differences .differences__cell-num-big { font-family: "Anton", sans-serif; font-weight: 400; font-size: 52px; line-height: 1; color: #ffffff; } #differences .differences__cell-tilde { display: inline-block; transform: translateY(-0.3em); } /* 仕組み行（330高 / イラスト入り） */ #differences .differences__cell--tall { padding: 31.5px 20px; gap: 20px; } #differences .differences__cell-img { display: block; width: 300px; height: 180px; } /* 注釈 */ #differences .differences__note { width: 1040px; margin: 20px 0 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #ffffff; text-align: left; } /* SP専用改行（PCでは非表示） */ #differences .differences__br-sp { display: none; } /* ======================================== Q&A ======================================== */ #qa { position: relative; width: 100%; padding: 0 40px 200px; box-sizing: border-box; overflow-x: clip; isolation: isolate; } #qa .qa__inner { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; align-items: center; } /* Q&A - 装飾煙 */ #qa .qa__smoke { position: absolute; max-width: none; pointer-events: none; z-index: 0; } #qa .qa__smoke--01 { left: calc(50% + 277px); top: -134px; width: 570px; height: 469px; opacity: 0.4; filter: blur(2px); } /* Q&A - 見出し */ #qa .qa__head { width: 1120px; padding-bottom: 80px; box-sizing: border-box; z-index: 1; } #qa .qa__h2 { margin: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; } #qa .qa__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #qa .qa__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #qa .qa__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #qa .qa__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #qa .qa__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #qa .qa__h3 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #8e8e8e; } /* Q&A - リスト */ #qa .qa__list { width: 1040px; padding-bottom: 80px; box-sizing: border-box; z-index: 2; } #qa .qa__box { width: 100%; padding: 20px 40px; box-sizing: border-box; background: #000000; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 10px; } /* Q&A - 項目 */ #qa .qa__item { width: 100%; } #qa .qa__divider { width: 960px; height: 0; margin: 0 auto; border-top: 1px solid #ffffff; } /* Q&A - Q行 */ #qa .qa__q { display: flex; flex-direction: row; align-items: center; gap: 20px; width: 100%; padding: 20px 20px 30px; box-sizing: border-box; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: left; } #qa .qa__q-mark { flex: none; width: 27px; font-family: "Anton", sans-serif; font-weight: 400; font-size: 38px; line-height: 2; color: #ffffff; text-align: center; } #qa .qa__q-text { flex: 1; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #ffffff; } /* Q&A - +/− アイコン（縦バーが90度回転して − に変化） */ #qa .qa__icon { position: relative; flex: none; width: 20px; height: 20px; } #qa .qa__icon::before, #qa .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: #ffffff; } #qa .qa__icon::before { width: 20px; height: 2px; transform: translate(-50%, -50%); } #qa .qa__icon::after { width: 2px; height: 20px; transform: translate(-50%, -50%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #qa .qa__item.is-open .qa__icon::after { transform: translate(-50%, -50%) rotate(-90deg); } /* Q&A - A行（アコーディオン） */ #qa .qa__a { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } #qa .qa__item.is-open .qa__a { max-height: 400px; } #qa .qa__a-inner { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; margin: 0 0 30px; padding: 20px; background: rgba(255, 255, 255, 0.2); box-sizing: border-box; } #qa .qa__a-mark { flex: none; width: 27px; font-family: "Anton", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.6; color: #e00d0d; text-align: center; position: absolute; top: 7px; } #qa .qa__a-text { flex: 1; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #ffffff; padding-left: 3.13vw; } #qa .qa__a-body { flex: 1; display: flex; flex-direction: column; gap: 20px; } #qa .qa__a-body .qa__a-text { flex: none; } #qa .qa__a-link { text-decoration: underline; color: inherit; } #qa .qa__a-note { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #ffffff; } #qa .qa__cta { position: relative; display: block; width: 350px; height: 80px; box-sizing: border-box; background: transparent; border: 2px solid #ffffff; border-radius: 100px; text-decoration: none; z-index: 3; } /* テキスト: 中央 -9.21px、斜体skew行列（CASE/PARTSサブタイトル共通） */ #qa .qa__cta-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; text-align: center; color: #ffffff; white-space: nowrap; } /* 矢印: 右側 91.3% 中央 */ #qa .qa__cta-arrow { position: absolute; left: 91.3%; top: 50%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #ffffff; transform: translate(-50%, -50%); } /* ======================================== COLUMN ======================================== */ #column { position: relative; width: 100%; padding: 0 0 200px 0; box-sizing: border-box; overflow-x: clip; isolation: isolate; } #column .column__inner { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; box-sizing: border-box; } /* COLUMN - 背景装飾 */ #column .column__bg-smoke { position: absolute; max-width: none; pointer-events: none; z-index: 0; } #column .column__bg-smoke--01 { left: -400.96px; top: -419px; width: 789.67px; height: 662.12px; opacity: 0.8; } #column .column__bg-smoke--02 { left: 890px; top: 824px; width: 499.67px; height: 388.84px; opacity: 0.8; } #column .column__head { align-self: start; width: clamp(905px, 86.15vw, 1120px); padding-bottom: 80px; box-sizing: border-box; z-index: 1; } #column .column__h2 { margin: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #ffffff; } #column .column__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #column .column__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #column .column__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #column .column__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #column .column__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #column .column__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #column .column__h2.is-animated span:nth-child(5) { transition-delay: 240ms; } #column .column__h2.is-animated span:nth-child(6) { transition-delay: 300ms; } #column .column__h3 { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.02em; color: #8e8e8e; } /* COLUMN - スライダー（divider廃止、cards のはみ出しを overflow: hidden で確実にクリップ） */ /* slider をラップして矢印を余白（slider の overflow:hidden 外）に置く */ #column .column__slider-wrap { position: relative; width: 100%; z-index: 3; } #column .column__slider { --cols: 3; --gap: 20px; position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; z-index: 3; overflow: hidden; padding-bottom: 80px; } #column .column__cards { display: flex; flex-direction: row; gap: var(--gap); padding: 0; width: max-content; max-width: none; align-self: flex-start; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } #column .column__cards.is-dragging { cursor: grabbing; transition: none; } /* PC：左寄せで3枚がコンテンツ幅いっぱいに収まる幅（(内側幅 − gap×2) ÷ 3） */ #column .column__card { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: calc((min(100vw, 1120px) - 2 * var(--gap)) / 3); flex: none; text-decoration: none; } #column .column__card-image { position: relative; width: 100%; aspect-ratio: 408 / 272; height: auto; overflow: hidden; border-radius: 10px; background: #a4a4a4; } #column .column__card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; max-width: none; pointer-events: none; -webkit-user-drag: none; } #column .column__card-image::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); pointer-events: none; } /* COLUMN - カードタイトル */ #column .column__card-title { margin: 0; align-self: stretch; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.5; letter-spacing: -0.04em; color: #ffffff; } #column .column__slider-arrow { position: absolute; top: clamp(85px, calc(10.4615vw - 25px), 111px); width: 50px; height: 50px; padding: 0; background: rgba(0, 0, 0, 0.6); border: 0; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; } #column .column__slider-arrow:hover { opacity: 0.8; } /* 矢印は左右60px余白の中央に配置（カードに被らない）。left/right:-55px = wrap外側の余白へ */ #column .column__slider-arrow--prev { left: -55px; } #column .column__slider-arrow--next { right: -55px; } #column .column__slider-arrow-icon { display: block; width: 12px; height: 12px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; } #column .column__slider-arrow--prev .column__slider-arrow-icon { transform: rotate(-135deg); margin-left: 4px; } #column .column__slider-arrow--next .column__slider-arrow-icon { transform: rotate(45deg); margin-right: 4px; } #column .column__slider-track { display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; height: auto; margin-top: 80px; } #column .column__slider-segment { display: block; width: 8px; height: 8px; border-radius: 50%; background: #a4a4a4; cursor: pointer; transition: background 0.3s; } #column .column__slider-segment--active { background: #ffffff; } #column .column__cta { position: relative; display: block; width: 350px; height: 80px; margin-top: 0; box-sizing: border-box; background: transparent; border: 2px solid #ffffff; border-radius: 100px; text-decoration: none; z-index: 4; } #column .column__cta-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; text-align: center; color: #ffffff; white-space: nowrap; } #column .column__cta-arrow { position: absolute; left: 91.3%; top: 50%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #ffffff; transform: translate(-50%, -50%); } /* ======================================== CTA バナー（相談） ======================================== */ #cta { width: 100%; padding: 0 0 100px; box-sizing: border-box; display: flex; justify-content: center; } #cta .cta__link { position: relative; display: block; width: 480px; height: 480px; border-radius: 7.33px; overflow: hidden; } #cta .cta__img { display: block; width: 480px; height: 480px; } /* ホバー / タップで白30%オーバーレイがふわっと出現 */ #cta .cta__link::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 2; } #cta .cta__link:hover::after, #cta .cta__link:focus-visible::after, #cta .cta__link:active::after { opacity: 1; } #cta .cta__button { position: absolute; left: 48.73px; top: 375.27px; width: 381.82px; height: 82.91px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); box-shadow: 0 4.36px 7.64px rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 3px 0 0 rgba(255, 255, 255, 0.2), inset -3px 0 0 rgba(0, 0, 0, 0.2); border-radius: 999px; pointer-events: none; overflow: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; z-index: 3; } #cta .cta__button-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22.91px; line-height: 1.2; letter-spacing: -0.06em; color: #ffffff; } #cta .cta__button-arrow { flex: none; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #ffffff; } /* ホバー時：CTAボタンが「凹む」（縮小＋inset影） */ #cta .cta__link:hover .cta__button, #cta .cta__link:focus-visible .cta__button, #cta .cta__link:active .cta__button { transform: scale(0.96); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); } /* ホバー時：CTAボタン上に「キラッ」と光が走る */ #cta .cta__button::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #cta .cta__link:hover .cta__button::before, #cta .cta__link:focus-visible .cta__button::before, #cta .cta__link:active .cta__button::before { left: 125%; } /* ======================================== CLINIC（クリニック一覧） Figma PC: 177:39907 / 1040幅box / row [head][divider 410][col1][col2] ======================================== */ #clinic { width: 100%; padding: 80px 60px 100px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; } /* gap は viewport 1170px で 90 / 1050px で 50 へ線形に縮む（右側のはみ出し防止、 詰まりすぎ防止） */ /* --s: viewport 1240→1050 で 1.0→0.83 に補間し、box とその中身を比例縮小 */ #clinic .clinic__box { --s: clamp(0.83, calc((100vw - 120px) / 1120px), 1); display: flex; flex-direction: row; align-items: flex-start; gap: calc(57px * var(--s)); width: calc(1120px * var(--s)); padding: calc(60px * var(--s)) calc(40px * var(--s)); box-sizing: border-box; background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), rgba(0, 0, 0, 0.3); border-radius: 10px; } /* head：Figma 0520版 — h2/h3 を縦に積む横書きレイアウト（368×202 column） */ #clinic .clinic__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-left: 0; } #clinic .clinic__h2 { font-family: "Anton", sans-serif; font-weight: 400; font-size: calc(160px * var(--s)); line-height: 1.1; color: #ffffff; margin: 0; white-space: nowrap; } #clinic .clinic__h2 span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } #clinic .clinic__h2.is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } #clinic .clinic__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #clinic .clinic__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #clinic .clinic__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #clinic .clinic__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #clinic .clinic__h2.is-animated span:nth-child(5) { transition-delay: 240ms; } #clinic .clinic__h2.is-animated span:nth-child(6) { transition-delay: 300ms; } #clinic .clinic__h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: calc(26px * var(--s)); line-height: 1; letter-spacing: -0.04em; color: #ffffff; margin: 0; } #clinic .clinic__h3 br { display: none; } /* 縦書きdivider：高さ410 / gray #8E8E8E / 2px */ #clinic .clinic__divider { flex: none; align-self: stretch; width: 0; min-height: calc(410px * var(--s)); border-left: 2px solid #8e8e8e; } #clinic .clinic__col { display: flex; flex-direction: column; gap: calc(10px * var(--s)); width: calc(234px * var(--s)); flex: none; } #clinic .clinic__area-head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: calc(234px * var(--s)); height: calc(60px * var(--s)); padding: 0; background: transparent; border: 0; cursor: pointer; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: calc(18px * var(--s)); line-height: 1.6; color: #ffffff; text-align: left; -webkit-tap-highlight-color: transparent; } #clinic .clinic__area-label { display: block; } #clinic .clinic__area-icon { position: relative; flex: none; width: calc(15.34px * var(--s)); height: calc(15.34px * var(--s)); } #clinic .clinic__area-icon::before, #clinic .clinic__area-icon::after { content: ""; position: absolute; background: #ffffff; } #clinic .clinic__area-icon::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); } #clinic .clinic__area-icon::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } #clinic .clinic__area.is-open .clinic__area-icon::after { transform: translateX(-50%) rotate(-90deg); } #clinic .clinic__area-body { display: flex; flex-direction: column; gap: 10px; padding-top: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #clinic .clinic__area.is-open .clinic__area-body { max-height: 600px; padding-top: 10px; } #clinic .clinic__sublink { display: flex; align-items: center; justify-content: center; width: 234px; height: 60px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); color: #000000; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; text-decoration: none; transition: opacity 0.3s; } #clinic .clinic__sublink:hover { opacity: 0.7; } /* ======================================== フッター上バナー（#footer-banner） 1280幅 / padding 0 60 100 / 中央寄せ タイトル → 2×2サービスカード → 100gap → 1×2ロゴカード → 100pb → CTA ======================================== */ #footer-banner { width: 100%; padding: 50px 40px 100px; box-sizing: border-box; } #footer-banner .footer-banner__inner { display: flex; flex-direction: column; align-items: center; max-width: 1120px; width: 100%; margin: 0 auto; } /* タイトル */ #footer-banner .footer-banner__title { margin: 0 0 40px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.5; letter-spacing: -0.04em; color: #ffffff; text-align: center; } /* 2×2 サービスカードグリッド */ #footer-banner .footer-banner__grid { display: grid; grid-template-columns: repeat(2, 490px); gap: 20px; margin-bottom: 100px; } #footer-banner .footer-banner__card { position: relative; display: block; width: 490px; height: 154px; overflow: hidden; text-decoration: none; } #footer-banner .footer-banner__card-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; } /* ホバー/タップで白30%オーバーレイがふわっとフェードイン（テキスト含めバナー全体を白く） */ #footer-banner .footer-banner__card::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 4; } #footer-banner .footer-banner__card:hover::after, #footer-banner .footer-banner__card:focus-visible::after, #footer-banner .footer-banner__card:active::after { opacity: 1; } /* 右寄せのテキスト群（上に黒帯サブタイトル、下にタイトル） */ #footer-banner .footer-banner__card-text { position: absolute; right: 29px; top: 38.76px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 3; color: #ffffff; } #footer-banner .footer-banner__card-subtitle { margin: 0; padding: 6px 8px; background: #000000; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14.63px; line-height: 1.3; color: #ffffff; text-align: center; white-space: nowrap; } #footer-banner .footer-banner__card-title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36.57px; line-height: 1.2; color: #ffffff; text-align: center; white-space: nowrap; } /* ロゴカード 1×2 */ #footer-banner .footer-banner__logos { display: grid; grid-template-columns: repeat(2, 490px); gap: 20px; margin-bottom: 100px; } #footer-banner .footer-banner__logo-card { position: relative; display: block; width: 490px; height: 154px; overflow: hidden; } #footer-banner .footer-banner__logo-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* ホバー/タップで白30%オーバーレイがふわっとフェードイン */ #footer-banner .footer-banner__logo-card::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #footer-banner .footer-banner__logo-card:hover::after, #footer-banner .footer-banner__logo-card:focus-visible::after, #footer-banner .footer-banner__logo-card:active::after { opacity: 1; } #footer-banner .footer-banner__cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 15px; width: 525px; height: 114px; background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); box-shadow: 0 6px 10.5px rgba(0, 0, 0, 0.25), inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 3px 0 0 rgba(255, 255, 255, 0.2), inset -3px 0 0 rgba(0, 0, 0, 0.2); border-radius: 999px; text-decoration: none; overflow: hidden; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } #footer-banner .footer-banner__cta-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 31.5px; line-height: 1.2; letter-spacing: -0.06em; color: #ffffff; } #footer-banner .footer-banner__cta-arrow { display: inline-block; flex: none; width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 14px solid #ffffff; } /* CTAが2つ並ぶ場合のみ、1個目の右に余白を付ける（直後に同クラスが続く時だけ適用） */ #footer-banner .footer-banner__cta:has(+ .footer-banner__cta) { margin-right: 20px; } /* ホバー時：「凹む」（縮小 + inset影） */ #footer-banner .footer-banner__cta:hover, #footer-banner .footer-banner__cta:focus-visible, #footer-banner .footer-banner__cta:active { transform: scale(0.96); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); } /* ホバー時：CTA上に「キラッ」と光が走る */ #footer-banner .footer-banner__cta::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #footer-banner .footer-banner__cta:hover::before, #footer-banner .footer-banner__cta:focus-visible::before, #footer-banner .footer-banner__cta:active::before { left: 125%; } /* SP追従CTA（.floating-banner）のレイアウトは mens-wp-common/wp-components-common.css に集約（TOP／ヒゲ共通）。 */ /* ======================================== Footer ======================================== */ #mens-top #footer { width: 100%; margin: 0 auto; } #mens-top #footer .footer__breadcrumb { width: 100%; padding: 14px 40px; box-sizing: border-box; } #mens-top #footer .footer__breadcrumb-list { display: flex; flex-direction: row; align-items: center; gap: 20px; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; list-style: none; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; color: #a4a4a4; } #mens-top #footer .footer__breadcrumb-item { display: flex; align-items: center; gap: 20px; } #mens-top #footer .footer__breadcrumb-item:not(:last-child)::after { content: ""; display: block; width: 1px; height: 12px; background: #a4a4a4; transform: rotate(20deg); } #mens-top #footer .footer__breadcrumb-link { color: #a4a4a4; text-decoration: none; transition: opacity 0.3s; } #mens-top #footer .footer__breadcrumb-link:hover { opacity: 0.7; } #mens-top #footer .footer__main { width: 100%; background: #000000; } #mens-top #footer .footer__main-inner { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; max-width: 1120px; width: 100%; margin: 0 auto; padding: 80px 120px 180px; gap: 60px; box-sizing: border-box; } /* Footer - ブランド（ロゴ + SNS） */ #mens-top #footer .footer__brand { display: flex; flex-direction: column; gap: 47px; width: 248px; flex: none; } #mens-top #footer .footer__logo-link { display: block; } #mens-top #footer .footer__logo-img { display: block; width: 248px; height: 53px; object-fit: contain; } #mens-top #footer .footer__sns { display: flex; flex-direction: row; gap: 10px; margin: 0 auto; padding: 0; list-style: none; } #mens-top #footer .footer__sns-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #a4a4a4; overflow: hidden; transition: opacity 0.3s; } #mens-top #footer .footer__sns-link:hover { opacity: 0.7; } /* SNSアイコン: assets/img/ に sns_instagram.svg / sns_x.svg / sns_youtube.svg / sns_line.svg を配置すれば自動表示 */ #mens-top #footer .footer__sns-icon { display: block; width: 60%; height: 60%; max-width: 100%; max-height: 100%; object-fit: contain; } /* Facebook のみ +30% 拡大、少し下にオフセット */ #mens-top #footer .footer__sns-icon--facebook { width: 85%; height: 85%; transform: translateY(5px); } /* YouTube のみ +20% 拡大 */ #mens-top #footer .footer__sns-icon--youtube { width: 72%; height: 72%; } #mens-top #footer .footer__nav-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin: 0; padding: 0; list-style: none; width: 190px; flex: none; } #mens-top #footer .footer__nav-item { width: 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #ffffff; } #mens-top #footer .footer__nav-link { color: #ffffff; text-decoration: none; transition: opacity 0.3s; } #mens-top #footer .footer__nav-link:hover { opacity: 0.7; } #mens-top #footer .footer__copyright { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 100%; height: 132px; background: #a4a4a4; box-sizing: border-box; } #mens-top #footer .footer__copyright-links { display: flex; flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; color: #000000; } #mens-top #footer .footer__copyright-link { display: flex; align-items: center; gap: 12px; color: #000000; text-decoration: none; transition: opacity 0.3s; } #mens-top #footer .footer__copyright-link:hover { opacity: 0.7; } #mens-top #footer .footer__copyright-sep { color: #000000; } #mens-top #footer .footer__copyright-text { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.4; color: #000000; text-align: center; } /* ======================================== SP（780px設計 / max-width: 780px） Figma 780px設計を vw 単位で実装。1px = (1/780)*100vw ≒ 0.1282vw viewport=device-width のため、任意の画面幅で比例縮小される （400px端末→ 51.3% 縮小、375px端末→ 48.1% 縮小） ======================================== */ @media (max-width: 780px) { /* SP背景：.sp-bg img タグをビューポートに固定。object-fit: cover で全端末・比率維持・全画面カバー。100lvh で「アドレスバー消えた時の最大高さ」を常時確保（アドレスバーの裏まで画像が伸びる→黒帯出ない） */ html { background-color: #000000; } body { background-color: transparent; } .sp-bg { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: url("assets/img/bg_sp.jpg"); background-size: cover; background-position: center top; background-repeat: no-repeat; z-index: -1; pointer-events: none; } /* ===== Header SP は 1050MQ に移動（min() cap で 780-1050 帯でも適用） ===== */ /* ===== FV SP ===== Figma SP 780×1864 ratio. 動画2本（intro→loop）を絶対配置で重ねる */ #fv { height: 238.974vw; /* 1864 at 780 */ } /* intro 再生中は非表示、loop 動画に切り替わった瞬間（#fv.is-loop）にフェードイン */ #fv .fv__credit { display: block; position: absolute; left: 63.333vw; top: 103.385vw; width: 32.538vw; height: 8.077vw; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 2.051vw; line-height: 1.3; letter-spacing: -0.1em; text-align: center; color: #ffffff; text-shadow: 0 0 2.564vw rgba(70, 0, 0, 0.5); z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__credit { opacity: 1; } /* メインコピー：「男の医療脱毛なら、エミナルクリニックメンズ。」 */ /* fv__credit と同じタイミング（intro 終了2秒前 = .show-credit）でフェードイン */ #fv .fv__copy { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__copy { opacity: 1; } #fv .fv__copy span, #fv .fv__copy .fv__copy-brand { position: absolute; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.2; color: #ffffff; white-space: nowrap; } #fv .fv__copy-otoko { left: calc(50% - 3.397vw - 24.167vw); top: 123.846vw; width: 6.795vw; height: 8.205vw; font-size: 6.795vw; letter-spacing: -0.1em; } #fv .fv__copy-no { left: calc(50% - 2.756vw - 18.269vw); top: 125.256vw; width: 5.513vw; height: 6.667vw; font-size: 5.513vw; letter-spacing: -0.1em; } #fv .fv__copy-iryou { left: calc(50% - 13.59vw - 2.051vw); top: 123.846vw; width: 27.179vw; height: 8.205vw; font-size: 6.795vw; } #fv .fv__copy-nara { left: calc(50% - 7.885vw + 19.679vw); top: 125.256vw; width: 15.769vw; height: 6.667vw; font-size: 5.513vw; letter-spacing: -0.07em; } #fv .fv__copy-brand { left: calc(50% - 29.359vw); top: 133.59vw; width: 58.718vw; height: 6.026vw; font-size: 5vw; letter-spacing: -0.1em; text-align: center; } #fv .fv__stats { display: block; position: absolute; left: calc(50% - 34.615vw); top: 155vw; width: 69.231vw; height: 36.923vw; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } #fv.show-credit .fv__stats { opacity: 1; } #fv .fv__stats>* { position: absolute; margin: 0; } #fv .fv__stats-cases-num, #fv .fv__stats-clinics-num { top: 13.19%; width: 44.63%; height: 41.67%; font-family: "Orbitron", sans-serif; font-weight: 900; font-size: 12.821vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #e00d0d; opacity: 0.9; } #fv .fv__stats-cases-num { left: 0%; } #fv .fv__stats-clinics-num { left: 55.37%; } /* ラベル & 単位：34px Bold 白 中央 */ #fv .fv__stats-cases-label, #fv .fv__stats-cases-unit, #fv .fv__stats-clinics-label, #fv .fv__stats-clinics-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.359vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } #fv .fv__stats-cases-label { left: 12.96%; top: 0%; width: 18.52%; } #fv .fv__stats-cases-unit { left: 16.11%; top: 55.21%; width: 12.59%; } #fv .fv__stats-clinics-label { left: 71.48%; top: 0%; width: 12.59%; } #fv .fv__stats-clinics-unit { left: 68.33%; top: 55.21%; width: 18.52%; } /* ※1 小注釈：16px Regular 白 */ #fv .fv__stats-cases-note { left: 29.26%; top: 56.6%; width: 5.19%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.051vw; line-height: 1.2; letter-spacing: -0.04em; text-align: center; color: #ffffff; } /* 縦区切り線：1.687px 白 / 中央 */ #fv .fv__stats-divider { left: 50%; top: 3.82%; bottom: 34.38%; width: 0; border-right: 0.216vw solid #ffffff; transform: translateX(-50%); } /* 注釈本文：16px Regular #CACACA / 150% / 中央 */ #fv .fv__stats-footnote { left: 6.3%; top: 76.39%; width: 87.59%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.051vw; line-height: 1.5; text-align: center; color: #cacaca; } /* メインCTA：footer-banner__cta と同じ赤グラデpill / ホバー縮小+inset影+キラッ */ #fv .fv__cta { display: flex; align-items: center; justify-content: center; gap: 1.923vw; position: absolute; left: calc(50% - 33.333vw); top: 200vw; width: 66.667vw; height: 15.385vw; background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); box-shadow: 0 0.769vw 1.346vw rgba(0, 0, 0, 0.25), inset 0 -0.385vw 0 rgba(0, 0, 0, 0.35), inset 0 0.385vw 0 rgba(255, 255, 255, 0.3), inset 0.385vw 0 0 rgba(255, 255, 255, 0.2), inset -0.385vw 0 0 rgba(0, 0, 0, 0.2); border-radius: 12.821vw; text-decoration: none; overflow: hidden; z-index: 3; opacity: 0; transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } #fv.show-credit .fv__cta { opacity: 1; } #fv .fv__cta-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.038vw; line-height: 1.2; letter-spacing: -0.06em; color: #ffffff; } #fv .fv__cta-arrow { display: inline-block; flex: none; width: 0; height: 0; border-top: 1.667vw solid transparent; border-bottom: 1.667vw solid transparent; border-left: 1.795vw solid #ffffff; } /* ホバー/タップで「凹む」（縮小 + inset影） */ #fv .fv__cta:hover, #fv .fv__cta:focus-visible, #fv .fv__cta:active { transform: scale(0.96); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); } /* ホバー時：CTA上に「キラッ」と光が走る */ #fv .fv__cta::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } #fv .fv__cta:hover::before, #fv .fv__cta:focus-visible::before, #fv .fv__cta:active::before { left: 125%; } /* ===== SV SP ===== Figma 780px設計値 */ #sv { padding: 5.128vw 0 15.385vw; } #sv .sv__gradient { height: 17.051vw; } #sv .sv__inner { width: 100%; gap: 10.256vw; } #sv .sv__cards { flex-direction: column; gap: 6.41vw; } #sv .sv__card { width: 89.744vw; height: 28.205vw; padding: 0 5.128vw; border-right-width: 0.256vw; border-bottom-width: 0.256vw; } #sv .sv__card-text { gap: 0.641vw; } #sv .sv__card-title { font-size: 5.128vw; } #sv .sv__card-desc { font-size: 3.59vw; color: #8e8e8e; } #sv .sv__card-more { gap: 2.949vw; } #sv .sv__card-more-text { font-size: 3.59vw; } #sv .sv__card-more-arrow { width: 10.385vw; height: 0.897vw; } #sv .sv__notice { width: 89.744vw; padding: 7.692vw 5.128vw; gap: 5.128vw; border-width: 0.256vw; border-radius: 1.282vw; } #sv .sv__notice-title { font-size: 4.615vw; } #sv .sv__notice-list { gap: 3.846vw; } #sv .sv__notice-item { font-size: 2.821vw; } #sv .sv__notice-divider { width: 66.667vw; } #sv .sv__notice-all { font-size: 3.59vw; } /* バナー：お知らせboxと同じ700幅で揃える */ #sv .sv__banner { width: 89.744vw; } /* NAVIGATION 見出し：80px Anton、margin-bottom -50（約-6.4vw でメニューに食い込ませる） */ #sv .sv__menu-title { margin: 0 0 -6.41vw; /* -50 */ padding-bottom: 0; font-size: 10.256vw; } #sv .sv__menu { grid-template-columns: repeat(2, 43.59vw); grid-auto-rows: 12.821vw; gap: 1.282vw; } #sv .sv__menu-item { padding: 0 2.564vw; } #sv .sv__menu-text { font-size: 3.59vw; } #sv .sv__menu-arrow { width: 2.436vw; height: 0.897vw; } /* ===== CASE SP ===== Figma値ベース */ #case { padding: 0 0 23.077vw; } #case .case__inner { width: 100%; padding: 0 7.692vw; box-sizing: border-box; } /* 装飾bg画像（位置・サイズSP値） */ #case .case__bg { width: 100%; height: 100%; left: 0; transform: none; } #case .case__bg-smoke { left: -84.615vw; /* -660 */ top: 107.685vw; width: 164.103vw; height: 134.872vw; opacity: 0.15; } #case .case__head { width: 89.744vw; padding-bottom: 10.256vw; } #case .case__h2 { font-size: 17.949vw; line-height: 1.1; } #case .case__h3 { font-size: 4.615vw; } /* items 全幅 */ #case .case__items { width: 100%; } #case .case__item { width: 89.744vw; } #case .case__item--hige { padding: 0 0 15.385vw; } #case .case__item--leg { padding: 0 0 10.256vw; } #case .case__item-title { width: auto; height: auto; margin-bottom: 6.41vw; font-size: 6.41vw; } #case .case__item-title-strong { font-size: 6.41vw; } #case .case__images { flex-direction: row; justify-content: center; gap: 3.846vw; width: 100%; max-width: none; align-items: center; } #case .case__image { border-radius: 0; position: relative; overflow: hidden; } #case .case__item--hige .case__image, #case .case__item--leg .case__image { width: 44.487vw; height: 43.59vw; } /* 帯：347×70 / 画像下端 */ #case .case__image::after { height: 8.974vw; } /* ヒゲ画像のクロップ位置（PC版と同じ%指定で統一） */ #case .case__item--hige .case__image--before .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } #case .case__item--hige .case__image--after .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } /* 脚画像のクロップ位置（PC版と同じ%指定で統一） */ #case .case__item--leg .case__image--before .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } #case .case__item--leg .case__image--after .case__image-img { width: 100%; height: auto; left: 0%; top: 0%; } /* BEFORE/AFTER ラベル（Anton 40 / 白統一 / 帯中央） */ #case .case__image-label { width: 100%; height: 8.974vw; left: 0; bottom: 0; top: auto; font-size: 5.128vw; line-height: 8.974vw; /* 70 = 帯高さで中央 */ text-align: center; } #case .case__item--hige .case__image-label, #case .case__item--leg .case__image-label { color: #ffffff; top: auto; } #case .case__item--hige .case__image--before .case__image-label, #case .case__item--leg .case__image--before .case__image-label { left: 0; width: 100%; } #case .case__item--hige .case__image--after .case__image-label, #case .case__item--leg .case__image--after .case__image-label { left: 0; width: 100%; } /* 詳細：padding-top 40 */ #case .case__detail { width: 89.744vw; padding-top: 5.128vw; padding-bottom: 0; } #case .case__item--hige .case__detail, #case .case__item--leg .case__detail { padding-bottom: 0; } #case .case__detail-wrap { width: 89.744vw; gap: 2.564vw; } #case .case__detail-box { width: 89.744vw; padding: 5.128vw; border-radius: 1.282vw; column-gap: 2.564vw; row-gap: 1.282vw; } #case .case__detail-label, #case .case__detail-value { font-size: 2.821vw; line-height: 1.6; } #case .case__detail-line { width: 0.128vw; height: 21.795vw; } /* 注釈：18 Regular / 150% / 白 */ #case .case__detail-note { margin: 0; width: auto; font-size: 2.308vw; line-height: 1.5; letter-spacing: normal; } #case .case__cta { width: 66.667vw; height: 15.385vw; padding: 0; font-style: normal; font-weight: 700; border-width: 0.256vw; border-radius: 12.821vw; } #case .case__cta-text { position: absolute; width: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.59vw; line-height: 1.5; } #case .case__cta-arrow { border-top-width: 1.538vw; border-bottom-width: 1.538vw; border-left-width: 1.538vw; } /* ===== Q&A SP ===== Figma 780px設計値 */ #qa { padding: 0 0 23.077vw; } #qa .qa__inner { padding: 0 7.692vw; } #qa .qa__smoke--01 { left: calc(50% + 3.462vw); /* +27 */ top: -27.692vw; /* -216 */ width: 73.077vw; height: 60.128vw; opacity: 0.15; filter: blur(0.513vw); } #qa .qa__head { width: 89.744vw; padding-bottom: 10.256vw; } #qa .qa__h2 { font-size: 17.949vw; line-height: 1.1; } #qa .qa__h3 { font-size: 4.615vw; color: #8e8e8e; letter-spacing: -0.02em; } /* list：700幅、pb 80 */ #qa .qa__list { width: 89.744vw; padding-bottom: 10.256vw; } #qa .qa__box { padding: 5.128vw; border-radius: 1.282vw; } /* divider：620×1 白 */ #qa .qa__divider { width: 79.487vw; height: 0.128vw; } #qa .qa__q { padding: 6.41vw 2.564vw; gap: 2.564vw; align-items: flex-start; } #qa .qa__q-mark { width: 3.462vw; position: relative; top: -1.6vw; font-size: 6.41vw; line-height: 1.6; } #qa .qa__q-text { font-size: 3.59vw; line-height: 1.6; } /* 開閉アイコン：20×20、線2px */ #qa .qa__icon { width: 2.564vw; height: 2.564vw; } #qa .qa__icon::before { width: 100%; height: 0.256vw; } #qa .qa__icon::after { width: 0.256vw; height: 100%; } #qa .qa__item.is-open .qa__a { max-height: 100vh; } #qa .qa__a-inner { margin: 0 0 6.41vw; padding: 5.128vw 2.564vw; gap: 2.564vw; background: rgba(255, 255, 255, 0.2); align-items: flex-start; } #qa .qa__a-mark { width: 3.462vw; position: relative; top: -1.6vw; font-size: 6.41vw; line-height: 1.6; color: #e00d0d; } #qa .qa__a-text { font-size: 3.59vw; line-height: 1.6; padding-left: 0.13vw; } #qa .qa__a-body { gap: 2.564vw; } #qa .qa__a-note { font-size: 2.308vw; line-height: 1.5; } #qa .qa__cta { width: 66.667vw; height: 15.385vw; border-width: 0.256vw; border-radius: 12.821vw; } #qa .qa__cta-text { width: auto; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.59vw; } #qa .qa__cta-arrow { border-top-width: 0.769vw; border-bottom-width: 0.769vw; border-left-width: 1.154vw; } /* ===== CTA（相談バナー）SP ===== */ #cta .cta__link { width: 80%; height: auto; } #cta .cta__img { width: 100%; height: auto; } /* 赤ボタンはバナー内に収まるよう % で比率配置（PC値 480px ベースを画像幅比に換算） */ #cta .cta__button { left: 10.152%; top: 78.181%; width: 79.546%; height: 17.273%; gap: 2vw; } #cta .cta__button-text { font-size: 3.818vw; /* 22.91 × (80/480) */ } #cta .cta__button-arrow { border-top-width: 1.167vw; border-bottom-width: 1.167vw; border-left-width: 1.667vw; } } /* ======================================== SV: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ※ サイズは min(Xvw, Ypx) でcap：viewport 780pxまではFigma実値、 780以下はvw比例縮小 ======================================== */ @media (max-width: 1050px) { #sv .sv__cards { flex-direction: column; gap: min(6.41vw, 50px); } #sv .sv__card { width: min(89.744vw, 700px); height: min(28.205vw, 220px); padding: 0 min(5.128vw, 40px); border-right-width: min(0.256vw, 2px); border-bottom-width: min(0.256vw, 2px); } #sv .sv__card-text { gap: min(0.641vw, 5px); } /* フォントは 1050→PC値 / 780→SP値 で線形補間 */ #sv .sv__card-title { font-size: clamp(26px, calc(80.5px - 5.19vw), 40px); } #sv .sv__card-desc { font-size: clamp(18px, calc(56.89px - 3.704vw), 28px); color: #8e8e8e; } #sv .sv__card-more { gap: min(2.949vw, 23px); } #sv .sv__card-more-text { font-size: clamp(22px, calc(45.33px - 2.222vw), 28px); } #sv .sv__card-more-arrow { width: min(10.385vw, 81px); height: min(0.897vw, 7px); } #sv .sv__notice { width: min(89.744vw, 700px); padding: min(7.692vw, 60px) min(5.128vw, 40px); gap: min(5.128vw, 40px); border-width: min(0.256vw, 2px); border-radius: min(1.282vw, 10px); } #sv .sv__notice-title { font-size: clamp(24px, calc(70.67px - 4.444vw), 36px); } #sv .sv__notice-list { gap: min(3.846vw, 30px); } #sv .sv__notice-item { font-size: clamp(20px, calc(27.78px - 0.741vw), 22px); } #sv .sv__notice-divider { width: min(66.667vw, 520px); } #sv .sv__notice-all { font-size: clamp(26px, calc(33.78px - 0.741vw), 28px); } } /* ======================================== SV: 780以下は Figma SP実値（vw比例縮小）で 1050MQ の clamp/cap を上書き ※ 1050MQ が後勝ちにならないよう、ここで再宣言してカスケードを確定させる ======================================== */ @media (max-width: 780px) { #sv .sv__card-title { font-size: 5.128vw; } #sv .sv__card-desc { font-size: 3.59vw; } #sv .sv__card-more-text { font-size: 3.59vw; } #sv .sv__notice-title { font-size: 4.615vw; } #sv .sv__notice-item { font-size: 2.821vw; } #sv .sv__notice-all { font-size: 3.59vw; } } /* ======================================== COLUMN: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ※ サイズは min(Xvw, Ypx) でcap：viewport 780pxまではFigma実値、 780以下はvw比例縮小 ======================================== */ @media (max-width: 1050px) { #column { padding: 0 0 min(23.077vw, 180px); } /* SPは1枚中央＝60px余白不要なのでinnerのpaddingを解除 */ #column .column__inner { padding-left: 40px; } #column .column__head { width: min(89.744vw, 700px); padding-bottom: min(10.256vw, 80px); } #column .column__h2 { font-size: min(17.949vw, 120px); line-height: 1.1; } #column .column__h3 { font-size: min(4.615vw, 25px); color: #8e8e8e; letter-spacing: -0.02em; } #column .column__slider { --cols: 1; } #column .column__cards { gap: min(2.564vw, 20px); padding: 0; } /* card：幅は 61.538vw で比例（480pxのcapを外す＝780-1050で1枚中央時の左余白が過大になるのを防ぐ。≤780は元から61.538vw使用で無変化） */ #column .column__card { width: 61.538vw; gap: min(5.128vw, 40px); } #column .column__card-image { width: 100%; aspect-ratio: 480 / 320; height: auto; border-radius: min(1.282vw, 10px); } #column .column__card-title { font-size: min(3.59vw, 22px); } #column .column__slider-arrow { top: calc((min(41.026vw, 320px) - min(7.692vw, 60px)) / 2); width: min(7.692vw, 60px); height: min(7.692vw, 60px); border-radius: 50%; } #column .column__slider-arrow--prev { left: -10px; } #column .column__slider-arrow--next { right: 10px; } #column .column__slider-arrow-icon { width: min(1.795vw, 14px); height: min(1.795vw, 14px); border-top-width: min(0.385vw, 3px); border-right-width: min(0.385vw, 3px); border-bottom: 0; border-left: 0; } /* dot：12×12 / gap 16 */ #column .column__slider-track { gap: min(2.051vw, 16px); margin-top: min(10.256vw, 80px); } #column .column__slider-segment { width: min(1.538vw, 12px); height: min(1.538vw, 12px); } #column .column__cta { width: min(66.667vw, 380px); height: min(15.385vw, 80px); margin-top: 0; border-width: min(0.256vw, 2px); border-radius: min(12.821vw, 100px); } #column .column__cta-text { width: auto; height: auto; font-size: min(3.59vw, 22px); } #column .column__cta-arrow { left: 90%; border-top-width: min(0.769vw, 6px); border-bottom-width: min(0.769vw, 6px); border-left-width: min(1.154vw, 9px); } } /* ======================================== COLUMN: 780以下はFigma実値（vw比例縮小）で 1050 MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #column .column__inner { padding-left: 7.692vw; } #column .column__h2 { font-size: 17.949vw; } #column .column__h3 { font-size: 4.615vw; } #column .column__card-title { font-size: 3.59vw; } #column .column__cta { width: 66.667vw; height: 15.385vw; } #column .column__cta-text { font-size: 3.59vw; } } /* ======================================== CLINIC: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #clinic .clinic__h2 { font-size: 17.949vw; } #clinic .clinic__h3 { font-size: 4.615vw; } } /* ======================================== Q&A: 1050以下は h2/h3 を縮小cap（COLUMN/FLOW/CLINIC と統一） ======================================== */ @media (max-width: 1050px) { #qa .qa__h2 { font-size: min(17.949vw, 120px); line-height: 1.1; } #qa .qa__h3 { font-size: min(4.615vw, 25px); } } /* ======================================== FEATURES: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ======================================== */ @media (max-width: 1050px) { #features { padding: min(10.077vw, 78.6px) 0; box-sizing: border-box; } #features .features__bg { width: 100%; height: 100%; top: 0; left: 0; transform: none; } #features .features__bg-smoke--01 { top: min(0.641vw, 5px); left: max(-43.59vw, -340px); width: min(111.467vw, 869.44px); height: min(89.441vw, 697.64px); } #features .features__bg-smoke--02 { top: max(-10.385vw, -81px); left: min(55.641vw, 434px); width: min(72.179vw, 563px); height: min(59.359vw, 463px); opacity: 0.4; } #features .features__bg-smoke--03 { top: min(83.718vw, 653px); left: max(-35.41vw, -284px); width: min(58.904vw, 459.45px); height: min(47.414vw, 369.83px); opacity: 0.6; } #features .features__bg-smoke--04 { top: min(201.154vw, 1569px); left: min(56.923vw, 444px); width: min(70.668vw, 551.21px); height: min(56.885vw, 443.7px); opacity: 0.7; } #features .features__inner { width: 100%; padding: 0; } #features .features__head { width: min(89.744vw, 700px); padding-bottom: min(10.256vw, 80px); margin-left: 40px; margin-right: 0; align-self: flex-start; } #features .features__h2 { font-size: min(17.949vw, 120px); line-height: 1.1; } #features .features__h3 { font-size: min(4.615vw, 25px); } /* item-01：column / order でフラット並び替え */ #features .features__item { flex-direction: column; align-items: center; width: min(89.744vw, 700px); gap: min(5.128vw, 0); padding-bottom: 0; } #features .features__item--01 { padding-bottom: min(15.385vw, 120px); } #features .features__content { display: contents; } #features .features__h4 { order: 1; } #features .features__icons { order: 2; } #features .features__desc { order: 3; } /* h4 */ #features .features__h4 { width: min(89.744vw, 700px); height: min(38.382vw, 299px); margin-bottom: 0; } #features .features__h4-num { width: min(20.123vw, 156.96px); left: 0; top: 0; } #features .features__h4-sub { top: min(9.974vw, 70px); left: 0; width: min(89.744vw, 700px); font-size: min(6.692vw, 52px); } #features .features__h4-main { top: min(18.641vw, 145.4px); left: 0; width: min(89.744vw, 700px); font-size: min(9.23vw, 72px); } #features .features__desc { font-size: min(3.59vw, 28px); width: min(89.744vw, 700px); text-align: left; margin-top: 40px; } /* アイコングリッド */ #features .features__icons { width: min(89.744vw, 700px); gap: min(2.564vw, 20px); } #features .features__icon-grid { grid-template-columns: repeat(3, min(29.231vw, 228px)); grid-auto-rows: min(29.231vw, 228px); column-gap: min(1.026vw, 8px); row-gap: min(1.282vw, 10px); } #features .features__icon-item { width: min(29.231vw, 228px); height: min(29.231vw, 228px); gap: min(2.269vw, 17.7px); padding: min(2.692vw, 21px) min(1.282vw, 10px) min(2.821vw, 22px); border-width: min(0.256vw, 2px); -webkit-backdrop-filter: blur(min(0.385vw, 3px)); backdrop-filter: blur(min(0.385vw, 3px)); } #features .features__icon-img { min-height: min(11.538vw, 90px); } #features .features__icon-img img { max-height: min(11.538vw, 90px); } #features .features__icon-label { font-size: min(3.333vw, 26px); line-height: 1.1; } #features .features__icon-sub { font-size: min(2.051vw, 16px); margin-top: min(0.513vw, 4px); } #features .features__note { font-size: min(2.308vw, 18px); } #features .features__divider { display: none; } /* item-02 */ #features .features__item--02 { flex-direction: column; align-items: center; gap: min(5.128vw, 0); padding: 0 0 min(10.256vw, 80px); } #features .features__content--02 { display: contents; } #features .features__h4--02 { order: 1; width: min(89.744vw, 700px); height: min(38.382vw, 299px); margin-bottom: 0; } #features .features__h4-num--02 { width: min(23.456vw, 182.96px); left: 0; top: max(-3.846vw, -30px); right: auto; } #features .features__h4-main--02 { top: min(8.974vw, 70px); left: 0; width: min(89.744vw, 700px); font-size: min(9.23vw, 72px); } #features .features__h4-sub--02 { top: min(21.641vw, 165.4px); left: 0; width: min(89.744vw, 700px); font-size: min(6.692vw, 52px); } #features .features__decoration { order: 2; width: min(89.744vw, 700px); height: min(84.615vw, 660px); } #features .features__decoration-box { width: min(89.744vw, 700px); height: min(84.615vw, 660px); border-radius: min(1.282vw, 10px); } #features .features__decoration-label { top: min(7.308vw, 57px); left: min(6.41vw, 50px); width: min(35.513vw, 277px); font-size: min(6.41vw, 50px); } #features .features__decoration-logo { top: min(8.974vw, 70px); left: min(7.051vw, 55px); width: min(75.6vw, 589.68px); height: min(66.785vw, 520.92px); } #features .features__desc--02 { order: 3; width: min(89.744vw, 700px); font-size: min(3.59vw, 28px); text-align: left; margin-top: 40px; } #features .features__link { order: 4; margin-top: min(5.128vw, 40px); font-size: min(3.59vw, 28px); } #features .features__cta { width: 350px; height: 80px; padding: 0; font-style: normal; font-weight: 700; font-size: 20px; border-width: 2px; border-radius: 100px; margin-top: 0; gap: 14px; } #features .features__cta-arrow { border-top-width: 6px; border-bottom-width: 6px; border-left-width: 9px; } } /* ======================================== FEATURES: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #features { padding: 10.077vw 0; } #features .features__h2 { font-size: 17.949vw; } #features .features__h3 { font-size: 4.615vw; } #features .features__h4-sub { font-size: 6.692vw; } #features .features__h4-main { font-size: 9.23vw; } #features .features__h4-sub--02 { font-size: 6.692vw; } #features .features__h4-main--02 { font-size: 9.23vw; } #features .features__desc { font-size: 3.59vw; } #features .features__desc--02 { font-size: 3.59vw; margin-top: 40px; } #features .features__icon-label { font-size: 3.333vw; } #features .features__icon-sub { font-size: 2.051vw; } #features .features__note { font-size: 2.308vw; } #features .features__decoration-label { font-size: 6.41vw; } #features .features__link { font-size: 3.59vw; } #features .features__cta { width: 66.667vw; height: 15.385vw; font-size: 3.59vw; border-width: 0.256vw; gap: 1.795vw; border-radius: 12.821vw; } #features .features__cta-arrow { border-top-width: 1.538vw; border-bottom-width: 1.538vw; border-left-width: 1.538vw; } } /* ======================================== PLANS: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ======================================== */ @media (max-width: 1050px) { #plans { padding: min(7.692vw, 60px) 0 min(23.077vw, 180px); } #plans .plans__hero { width: 100%; height: min(209.103vw, 1631px); top: max(-42.077vw, -414px); } #plans .plans__head { width: min(89.744vw, 700px); padding-bottom: min(10.256vw, 80px); margin-left: 40px; margin-right: 0; } #plans .plans__h2 { width: auto; height: auto; } #plans .plans__h2-text { font-size: min(17.949vw, 120px); line-height: 1.1; } #plans .plans__h3 { width: auto; height: auto; font-size: min(4.615vw, 25px); } /* inner / slider */ #plans .plans__inner { width: 100%; height: auto; margin: 0 auto; padding: 0; } #plans .plans__slider { width: 100%; height: auto; overflow: hidden; padding-bottom: min(10.256vw, 80px); touch-action: pan-y; } /* cards 横並び */ #plans .plans__cards { display: flex; flex-direction: row; width: max-content; max-width: none; height: auto; gap: min(3.846vw, 30px); padding: 0 min(7.692vw, 60px) min(10.256vw, 80px); transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } #plans .plans__cards.is-dragging { transition: none; cursor: grabbing; } #plans .plans__card { position: static; width: 448px; height: 776px; flex-shrink: 0; backdrop-filter: blur(6.787879px); -webkit-backdrop-filter: blur(6.787879px); border-radius: 6.787879px; } #plans .plans__card--a, #plans .plans__card--b, #plans .plans__card--c { left: auto; top: auto; } /* スライダーセグメント */ #plans .plans__slider-track { display: flex; gap: 0; width: min(69.231vw, 540px); margin: 0 auto; align-items: center; } #plans .plans__slider-segment { width: min(23.077vw, 180px); height: min(0.897vw, 7px); background: rgba(255, 255, 255, 0.3); border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #plans .plans__slider-segment--active { background: #ffffff; } /* CTA */ #plans .plans__cta-wrap { display: flex; justify-content: center; margin-top: 0; } #plans .plans__cta { width: 350px; height: 80px; padding: 0; font-style: normal; font-weight: 700; font-size: 20px; border-width: 2px; border-radius: 100px; gap: 14px; } #plans .plans__cta-arrow { border-top-width: min(1.538vw, 12px); border-bottom-width: min(1.538vw, 12px); border-left-width: min(1.538vw, 12px); } /* card-inner は PC継承（100%/100%）で card にフィット、 scale変換なし */ } /* ======================================== PLANS: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き ※ card は 71.795vw / 124.359vw に拡大、 card-inner は scale で 1.25倍化 ======================================== */ @media (max-width: 780px) { #plans .plans__head { margin-left: 7.692vw; } #plans .plans__h2-text { font-size: 17.949vw; } #plans .plans__h3 { font-size: 4.615vw; } #plans .plans__card { width: 71.795vw; height: 124.359vw; backdrop-filter: blur(1.282vw); -webkit-backdrop-filter: blur(1.282vw); border-radius: 1.282vw; } #plans .plans__card-inner { width: 448px; max-width: none; height: 776px; transform: scale(calc(100vw / 624px)); transform-origin: top left; } /* note は固定widthを止めて左右レスポンシブに（card-inner内の対称padding 15pxずつ） */ #plans .plans__card--a .plans__card-note, #plans .plans__card--b .plans__card-note { left: 25px; right: 15px; width: auto; } /* CTA: 他CTAと同サイズに揃える（66.667vw / 15.385vw / font 3.590vw / gap 1.795vw） */ #plans .plans__cta { width: 66.667vw; height: 15.385vw; font-size: 3.59vw; border-width: 0.256vw; gap: 1.795vw; border-radius: 12.821vw; } #plans .plans__cta-arrow { border-top-width: 1.538vw; border-bottom-width: 1.538vw; border-left-width: 1.538vw; } } /* ======================================== CASE: 1050以下は h2/h3 を統一ルールで cap + item-title を 35px に ======================================== */ @media (max-width: 1050px) { #case .case__h2 { font-size: min(17.949vw, 120px); line-height: 1.1; } #case .case__h3 { font-size: min(4.615vw, 25px); } /* 1050〜780 は item-title を 35px に固定 */ #case .case__item-title { font-size: min(6.41vw, 35px); } #case .case__item-title-strong { font-size: min(6.41vw, 35px); } } /* ======================================== Q&A: 780以下は Figma実値（vw比例） ======================================== */ @media (max-width: 780px) { #qa .qa__h2 { font-size: 17.949vw; } #qa .qa__h3 { font-size: 4.615vw; } } /* ======================================== DIFFERENCES: タブレット・縮小PC（max-width: 1050px）でSPレイアウト切替 ※ 画像 ms_01/ms_02 のサイズ切替（PC横長→SP縦長）もここで発火 ======================================== */ @media (max-width: 1050px) { #differences { padding: 0 0 min(23.077vw, 180px); } #differences .differences__inner { width: 100%; padding: 0; box-sizing: border-box; } #differences .differences__h3 { flex-direction: column; padding: 0 0 min(6.41vw, 50px); gap: 0; } #differences .differences__h3-large { font-size: min(7.692vw, 60px); line-height: 1.3; } #differences .differences__h3-small { font-size: min(6.41vw, 50px); line-height: 1.3; } #differences .differences__table { grid-template-columns: min(21.538vw, 168px) min(33.59vw, 262px) min(33.59vw, 262px); grid-template-rows: min(21.795vw, 170px) min(52.564vw, 410px) min(26.923vw, 210px) min(26.923vw, 210px) min(26.923vw, 210px) min(26.923vw, 210px); gap: min(0.513vw, 4px); width: min(89.744vw, 700px); } /* セル共通 */ #differences .differences__cell { padding: min(1.282vw, 10px); } /* 列見出し */ #differences .differences__cell-head-este-box { height: min(15.385vw, 120px); padding: 0 min(1.282vw, 10px); font-size: min(3.59vw, 28px); } #differences .differences__cell--head-medical { font-size: min(5.128vw, 40px); } /* 行ラベル */ #differences .differences__cell--label { font-size: min(3.59vw, 21px); } /* データセル */ #differences .differences__cell--data { gap: min(1.282vw, 10px); } #differences .differences__cell-text { font-size: min(3.077vw, 23px); } #differences .differences__cell-strong { font-size: min(4.359vw, 32px); letter-spacing: -0.08em; } #differences .differences__cell-emphasis { font-size: min(3.923vw, 32px); } /* 数値 */ #differences .differences__cell-number { font-size: min(4.359vw, 34px); gap: min(0.385vw, 3px); } #differences .differences__cell-num-big { font-size: min(6.667vw, 52px); transform: translateY(0.05em); } #differences .differences__cell-num-big--lg { font-size: min(9.487vw, 66px); transform: translateY(0.05em); } #differences .differences__cell--tall { padding: min(5.128vw, 40px) min(1.282vw, 10px); gap: min(2.564vw, 20px); } #differences .differences__cell-img { width: min(27.436vw, 214px); height: min(29.231vw, 228px); } /* 注釈 */ #differences .differences__note { width: min(89.744vw, 700px); margin: min(2.564vw, 20px) 0 0; padding: 0; box-sizing: border-box; font-size: min(2.308vw, 18px); line-height: 1.5; text-align: left; } /* SP専用改行を有効化 */ #differences .differences__br-sp { display: inline; } } /* ======================================== PARTS: タブレット・縮小PC（max-width: 1050px）でSPレイアウト切替 ======================================== */ @media (max-width: 1050px) { #parts { padding: 0 0 min(23.077vw, 180px); } /* 装飾帯：SP位置に上書き、テキストvw */ #parts .parts__band--a { top: min(105.32vw, 821.5px); } #parts .parts__band--b { top: min(123.928vw, 966.6px); } #parts .parts__band-text { font-size: min(2.821vw, 22px); } /* parts__inner */ #parts .parts__inner { width: 100%; padding-inline: 40px; } #parts .parts__head { width: 100%; padding: 0 0 min(17.949vw, 140px); box-sizing: border-box; } #parts .parts__h2 { width: auto; height: auto; font-size: min(17.949vw, 120px); line-height: 1.1; } #parts .parts__h3 { width: auto; height: auto; font-size: min(4.615vw, 25px); } #parts .parts__grid { width: min(84.615vw, 660px); height: min(115.897vw, 904px); } /* card 320×288 */ #parts .parts__item { width: min(41.026vw, 320px); height: min(36.923vw, 288px); border-radius: min(1.282vw, 10px); } /* SP 2列×3行配置 */ #parts .parts__item--face { left: 0; top: 0; } #parts .parts__item--full { left: min(43.59vw, 340px); top: 0; } #parts .parts__item--vio { left: 0; top: min(39.487vw, 308px); } #parts .parts__item--arms { left: min(43.59vw, 340px); top: min(39.487vw, 308px); } #parts .parts__item--legs { left: 0; top: min(78.974vw, 616px); } #parts .parts__item--torso { left: min(43.59vw, 340px); top: min(78.974vw, 616px); } /* 画像差し替えにより全アイテム統一：width cap 250px (= 32.051vw at 780SP) / 左上揃え */ #parts .parts__item--face .parts__item-img, #parts .parts__item--full .parts__item-img, #parts .parts__item--vio .parts__item-img, #parts .parts__item--arms .parts__item-img, #parts .parts__item--legs .parts__item-img, #parts .parts__item--torso .parts__item-img { width: min(41.051vw, 325px); height: auto; left: 0; top: 0; } /* テキスト */ #parts .parts__item-content { gap: min(0.513vw, 4px); } #parts .parts__item-en { font-size: min(10.256vw, 80px); } #parts .parts__item-en--full { font-size: min(8.974vw, 70px); } #parts .parts__item-ja { font-size: min(3.846vw, 30px); } #parts .parts__item-ja--vio { font-size: min(3.846vw, 30px); } #parts .parts__grid+.parts__cta, #parts .parts__cta { margin-top: min(20.513vw, 160px); } } /* ======================================== PARTS: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #parts { padding: 0 0 23.077vw; } #parts .parts__band--a { top: 121.32vw; transform: rotate(12.08deg); } #parts .parts__band--b { top: 97.928vw; transform: rotate(-13.92deg); } #parts .parts__band-text { font-size: 2.821vw; } #parts .parts__inner { padding: 0 7.692vw; } #parts .parts__head { padding: 0 0 17.949vw; } #parts .parts__h2 { font-size: 17.949vw; } #parts .parts__h3 { font-size: 4.615vw; } #parts .parts__grid { width: 84.615vw; height: 115.897vw; } #parts .parts__item { width: 41.026vw; height: 36.923vw; border-radius: 1.282vw; } #parts .parts__item--full { left: 43.59vw; } #parts .parts__item--vio { top: 39.487vw; } #parts .parts__item--arms { left: 43.59vw; top: 39.487vw; } #parts .parts__item--legs { top: 78.974vw; } #parts .parts__item--torso { left: 43.59vw; top: 78.974vw; } #parts .parts__item--face .parts__item-img, #parts .parts__item--full .parts__item-img, #parts .parts__item--vio .parts__item-img, #parts .parts__item--arms .parts__item-img, #parts .parts__item--legs .parts__item-img, #parts .parts__item--torso .parts__item-img { width: 42.051vw; height: auto; left: 0; top: 0; } #parts .parts__item-content { gap: 0.513vw; } #parts .parts__item-en { font-size: 10.256vw; } #parts .parts__item-en--full { font-size: 8.974vw; } #parts .parts__item-ja { font-size: 3.846vw; } #parts .parts__item-ja--vio { font-size: 3.846vw; } /* CTA：qa__cta と同サイズに揃える */ #parts .parts__grid+.parts__cta, #parts .parts__cta { margin-top: 20.513vw; width: 66.667vw; height: 15.385vw; border-width: 0.256vw; border-radius: 12.821vw; } #parts .parts__cta-text { width: auto; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 3.59vw; white-space: nowrap; } #parts .parts__cta-arrow { border-top-width: 1.769vw; border-bottom-width: 1.769vw; border-left-width: 2.154vw; top: calc(50% - 5px); } } /* ======================================== DIFFERENCES: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #differences { padding: 0 0 23.077vw; } #differences .differences__h3 { padding: 0 0 6.41vw; } #differences .differences__h3-large { font-size: 7.692vw; } #differences .differences__h3-small { font-size: 6.41vw; } #differences .differences__table { grid-template-columns: 21.538vw 33.59vw 33.59vw; grid-template-rows: 21.795vw 52.564vw 26.923vw 26.923vw 26.923vw 26.923vw; gap: 0.513vw; width: 89.744vw; } #differences .differences__cell { padding: 1.282vw; } #differences .differences__cell-head-este-box { height: 15.385vw; padding: 0 1.282vw; font-size: 3.59vw; } #differences .differences__cell--head-medical { font-size: 5.128vw; } #differences .differences__cell--label { font-size: 2.59vw; } #differences .differences__cell--data { gap: 1.282vw; } #differences .differences__cell-text { font-size: 2.8vw; } #differences .differences__cell-strong { font-size: 3.5vw; } #differences .differences__cell-emphasis { font-size: 3.5vw; } #differences .differences__cell-number { font-size: 4.359vw; gap: 0.385vw; } #differences .differences__cell-num-big { font-size: 6.667vw; transform: translateY(0.05em); } #differences .differences__cell-num-big--lg { font-size: 8.2vw; transform: translateY(0.05em); } #differences .differences__cell-tilde { transform: translateY(-0.3em); } #differences .differences__cell--tall { padding: 5.128vw 1.282vw; gap: 2.564vw; } #differences .differences__cell-img { width: 27.436vw; height: 29.231vw; } #differences .differences__note { width: 89.744vw; margin: 2.564vw 0 0; font-size: 2.308vw; } } /* ======================================== CLINIC: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ※ サイズは min(Xvw, Ypx) でcap：viewport 780pxまではFigma実値、 780以下はvw比例縮小 ======================================== */ @media (max-width: 1050px) { #clinic { padding: min(23.077vw, 100px) 0; align-items: center; } #clinic .clinic__box { flex-direction: column; align-items: center; gap: 0; width: min(89.744vw, 700px); padding: min(5.128vw, 40px) min(2.564vw, 20px); background: rgba(255, 255, 255, 0.2); border-radius: 10px; } /* head：column / 左配置・左揃え */ #clinic .clinic__head { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 0; padding: min(5.128vw, 40px) 0 min(7.692vw, 60px); margin-left: 0; } /* h2「CLINIC」：Figma SP 0520版 Anton 140px / 110% */ #clinic .clinic__h2 { display: block; height: auto; grid-template-rows: none; font-size: min(17.949vw, 140px); line-height: 1.1; } #clinic .clinic__h2 span { display: inline-block; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; } #clinic .clinic__h2.is-animated span { transform: translate(0, 0) rotate(0); } /* h3「クリニック一覧」：Figma SP 0520版 Noto Sans JP Bold 36px / 150% / -2% */ #clinic .clinic__h3 { font-size: min(4.615vw, 36px); line-height: 1.5; letter-spacing: -0.02em; } #clinic .clinic__h3 br { display: none; } /* PC用divider非表示 */ #clinic .clinic__divider { display: none; } /* 列コンテナ解除：8エリアを直接 box の子として縦並びに */ #clinic .clinic__col { display: contents; } #clinic .clinic__area { width: min(84.615vw, 660px); } #clinic .clinic__area--1 { order: 1; } #clinic .clinic__area--2 { order: 2; } #clinic .clinic__area--3 { order: 3; } #clinic .clinic__area--4 { order: 4; } #clinic .clinic__area--5 { order: 5; } #clinic .clinic__area--6 { order: 6; } #clinic .clinic__area--7 { order: 7; } #clinic .clinic__area--8 { order: 8; } /* エリアヘッダ */ #clinic .clinic__area-head { width: 100%; height: auto; gap: min(2.564vw, 20px); padding: min(6.41vw, 50px) min(2.564vw, 20px); font-size: min(3.59vw, 28px); border-top: 1px solid #ffffff; } #clinic .clinic__area--1 .clinic__area-head { border-top: 0; } #clinic .clinic__area-label { flex: 1; } #clinic .clinic__area-icon { width: min(2.564vw, 20px); height: min(2.564vw, 20px); } /* area-body：1050〜780 は 3列グリッド（Q&A同様 max-height トランジションで開閉） */ #clinic .clinic__area-body { display: grid; flex-direction: initial; grid-template-columns: repeat(3, 1fr); justify-content: initial; gap: min(2.564vw, 20px); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1); } #clinic .clinic__area.is-open .clinic__area-body { max-height: 100vh; padding: 0 0 min(6.41vw, 50px); } #clinic .clinic__sublink { width: 100%; height: auto; padding: min(3.846vw, 30px) min(1.282vw, 10px); font-size: min(3.59vw, 28px); } } /* ======================================== cta: 780以下は padding を 0 0 に切替 ======================================== */ @media (max-width: 780px) { #cta { padding: 0 0; } } /* ======================================== clinic: 780以下は sublink を 2列グリッドに切替 ======================================== */ @media (max-width: 780px) { #clinic .clinic__area-body { grid-template-columns: repeat(2, 1fr); } } /* ======================================== footer-banner: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 ※ 1050-780の cap は SP値の 80% に縮小（タブレット帯でやや小さめ表示） ※ 780以下は vw比例（=Figma SP実値）で 1050MQ cap を上書き ======================================== */ @media (max-width: 1050px) { #footer-banner { padding: min(6.41vw, 50px) 0 min(15.385vw, 96px); } #footer-banner .footer-banner__inner { max-width: none; width: 100%; } #footer-banner .footer-banner__title { margin: 0 0 min(5.128vw, 32px); font-size: min(4.615vw, 28.8px); } #footer-banner .footer-banner__grid { grid-template-columns: 1fr; justify-items: center; gap: min(2.564vw, 16px); margin-bottom: min(10.256vw, 64px); } #footer-banner .footer-banner__card { width: min(85.897vw, 536px); height: min(26.923vw, 168px); } #footer-banner .footer-banner__card-text { right: min(3.718vw, 23.2px); top: min(5.128vw, 32px); gap: min(0.769vw, 4.8px); } #footer-banner .footer-banner__card-subtitle { padding: min(0.769vw, 4.8px) min(1.026vw, 6.4px); font-size: min(2.564vw, 16px); } #footer-banner .footer-banner__card-title { font-size: min(6.41vw, 40px); } /* ロゴカード 1列縦並び 536×168 */ #footer-banner .footer-banner__logos { grid-template-columns: 1fr; justify-items: center; gap: min(2.564vw, 16px); margin-bottom: min(10.256vw, 64px); } #footer-banner .footer-banner__logo-card { width: min(85.897vw, 536px); height: min(26.923vw, 168px); } #footer-banner .footer-banner__cta { width: min(66.667vw, 416px); height: min(15.385vw, 96px); gap: min(1.923vw, 12px); border-radius: min(12.821vw, 80px); } #footer-banner .footer-banner__cta-text { font-size: min(4.038vw, 25.2px); } #footer-banner .footer-banner__cta-arrow { border-top-width: min(1.667vw, 10.4px); border-bottom-width: min(1.667vw, 10.4px); border-left-width: min(1.795vw, 11.2px); } } /* ======================================== footer-banner: 780以下は Figma SP実値（vw比例縮小）で 1050MQ の cap を上書き ======================================== */ @media (max-width: 780px) { #footer-banner .footer-banner__title { margin-bottom: 5.128vw; font-size: 4.615vw; } #footer-banner .footer-banner__grid { gap: 2.564vw; margin-bottom: 10.256vw; } #footer-banner .footer-banner__card { width: 85.897vw; height: 26.923vw; } #footer-banner .footer-banner__card-text { right: 3.718vw; top: 5.128vw; gap: 0.769vw; } #footer-banner .footer-banner__card-subtitle { padding: 0.769vw 1.026vw; font-size: 2.564vw; } #footer-banner .footer-banner__card-title { font-size: 6.41vw; } #footer-banner .footer-banner__logos { gap: 2.564vw; margin-bottom: 10.256vw; } #footer-banner .footer-banner__logo-card { width: 85.897vw; height: 26.923vw; } #footer-banner .footer-banner__cta { width: 66.667vw; height: 15.385vw; gap: 1.923vw; border-radius: 12.821vw; } #footer-banner .footer-banner__cta-text { font-size: 4.038vw; } #footer-banner .footer-banner__cta-arrow { border-top-width: 1.667vw; border-bottom-width: 1.667vw; border-left-width: 1.795vw; } } /* ======================================== Footer: 1280→781 で可変縮小（4カラムレイアウト維持） ※ 780 以下は次の SP MQ で縦並び化されるため、ここは「横並びを保ったまま縮小」専用 ======================================== */ @media (max-width: 1120px) { /* メインメニュー：padding/gap を viewport 比例で縮小（min は 781 で破綻しないよう設定） */ #mens-top #footer .footer__main-inner { padding-top: clamp(40px, 6.25vw, 80px); padding-right: clamp(30px, 9.375vw, 120px); padding-bottom: clamp(100px, 14.063vw, 180px); padding-left: clamp(30px, 9.375vw, 120px); gap: clamp(20px, 4.688vw, 60px); } /* ブランド：ロゴ + SNS を可変縮小 */ #mens-top #footer .footer__brand { width: clamp(150px, 19.375vw, 248px); gap: clamp(24px, 3.672vw, 47px); } #mens-top #footer .footer__logo-img { width: 100%; height: auto; } #mens-top #footer .footer__sns { gap: clamp(6px, 0.781vw, 10px); } #mens-top #footer .footer__sns-link { width: clamp(28px, 3.125vw, 40px); height: clamp(28px, 3.125vw, 40px); } /* ナビ列：3列とも幅を 190→120 で可変、フォントも縮小 */ #mens-top #footer .footer__nav-col { width: clamp(120px, 14.844vw, 190px); gap: clamp(14px, 1.563vw, 20px); } #mens-top #footer .footer__nav-item { font-size: clamp(13px, 1.406vw, 18px); } } /* ======================================== Footer: 780以下はSPレイアウト（Figma 177:39038 準拠） - パンくず: 780×66, padding-left 40, 22px Medium gray #8E8E8E - メニュー: 黒bg, padding 60 40 180, gap 80 - nav (表): gap 40, padding 40 0, 13項目 580幅 28px Medium 左寄せ 白 - logo: 372×79.5（nav の下） - SNS: 4個 各74×74, gap 40 - コピーライト: 780×300, 灰 #8E8E8E, テキスト 20px Regular 中央 / 法人概要+PPに下線 ======================================== */ @media (max-width: 780px) { #mens-top #footer .footer__breadcrumb { height: 8.462vw; padding: 0; } #mens-top #footer .footer__breadcrumb-list { height: 100%; align-items: center; padding: 0 5.128vw; gap: 1.923vw; font-size: 2.821vw; color: #8e8e8e; } #mens-top #footer .footer__breadcrumb-item { gap: 1.923vw; color: #8e8e8e; } #mens-top #footer .footer__breadcrumb-link { color: #8e8e8e; } #mens-top #footer .footer__breadcrumb-item:not(:last-child)::after { width: 0.897vw; height: 0.897vw; background: transparent; border: 0; border-top: 0.256vw solid #8e8e8e; border-right: 0.256vw solid #8e8e8e; transform: rotate(45deg); } #mens-top #footer .footer__main-inner { flex-direction: column; align-items: center; padding: 7.692vw 5.128vw 23.077vw; gap: 4.5vw; /* 40（nav-col間用）。brand前にmargin-topで +40 して計80 */ } /* align-self: flex-start で footer__main-inner の左padding（40）端に左寄せ → パンくずと左端が揃う */ #mens-top #footer .footer__nav-col { align-self: flex-start; width: 74.359vw; align-items: stretch; gap: 5.128vw; padding: 0; margin: 0; } #mens-top #footer .footer__nav-col:last-of-type { padding-bottom: 5.128vw; } #mens-top #footer .footer__nav-item { width: 100%; font-size: 3.59vw; text-align: left; } #mens-top #footer .footer__brand { order: 1; width: auto; align-items: center; gap: 5.128vw; margin-top: 5.128vw; /* +40 で nav-col との間が 80 になる */ } #mens-top #footer .footer__logo-img { width: 47.692vw; height: 10.192vw; object-fit: contain; } #mens-top #footer .footer__sns { gap: 5.128vw; } #mens-top #footer .footer__sns-link { width: 9.487vw; height: 9.487vw; } #mens-top #footer .footer__sns-icon--facebook { transform: translateY(0.641vw); } #mens-top #footer .footer__copyright { height: 38.462vw; padding: 6.225vw 0 0; background: #8e8e8e; gap: 3.59vw; /* 28（空行分） */ justify-content: flex-start; } #mens-top #footer .footer__copyright-links { gap: 1.538vw; font-size: 2.564vw; text-align: center; } #mens-top #footer .footer__copyright-link { gap: 1.538vw; color: #000000; } #mens-top #footer .footer__copyright-label { text-decoration: underline; } #mens-top #footer .footer__copyright-sep { color: #000000; } #mens-top #footer .footer__copyright-text { font-size: 2.564vw; text-align: center; color: #000000; } } /* ======================================== Header: 1050以下でSPレイアウト（ハンバーガーメニュー化） ※ サイズは min(Xvw, Y@780) で cap：viewport 780pxまでは780SP実値、 780以下はvw比例縮小 ※ ナビメニューの改行を避けるため、PC幅を 1050 まで上げて早めにSP化 ======================================== */ @media (max-width: 1025px) { #mens-top #header { width: 100%; height: min(14.103vw, 110px); z-index: 201; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #mens-top #header .header__inner { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; } /* PC用 3つのピル型ボタンは SP では非表示 */ #mens-top #header .header__pills { display: none; } /* PC用 MENU は SP では非表示（SP は下記の SP 用ハンバーガー位置に上書き） */ #mens-top #header .header__logo { position: absolute; left: min(5.128vw, 40px); top: min(5.256vw, 41px); } #mens-top #header .header__logo-img { width: min(28.846vw, 225px); height: min(6.164vw, 48px); } #mens-top #header .header__cta-sp { display: flex; align-items: center; justify-content: center; position: absolute; right: min(18.817vw, 146.77px); top: min(4.487vw, 35px); width: min(30.513vw, 238px); height: min(7.821vw, 61px); background: linear-gradient(0deg, #bb0001 0%, #ff0001 100%); border-radius: min(3.91vw, 30.5px); box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: min(2.564vw, 20px); line-height: 1.5; color: #ffffff; text-align: center; text-decoration: none; } #mens-top #header .header__hamburger { position: absolute; right: min(5vw, 39px); top: min(3.462vw, 27px); width: min(11.538vw, 90px); height: min(8.846vw, 69px); padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 202; } #mens-top #header .header__hamburger-text { font-size: min(5.385vw, 42px); } #mens-top #header .header__hamburger-bars { position: absolute; left: min(0.256vw, 2px); top: min(7.436vw, 58px); width: min(11.026vw, 86px); } #mens-top #header .header__hamburger-bar { display: block; width: min(11.026vw, 86px); height: min(0.385vw, 3px); background: #ffffff; } #mens-top #header .header__hamburger-bar+.header__hamburger-bar { margin-top: min(0.641vw, 5px); } }