@charset "UTF-8"; /* ===================================================================== style-wp.css ｜ ヒゲ・顔脱毛 を Cocoon 固定ページ(page-hige.php)に統合するための上書き スコープは wp-hige-page ボディクラス（functions.php の body_class で is_page('hige') 時に付与）に依存。 ページIDには依存しない（旧 page-id 固定スコープ / article.post- から移行済み＝TOPの front-top-page と同手法）。 ===================================================================== */ /* === 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にしか無かった body位置是正・footer打ち消しもこれで適用される。 === */ /* === ラッパーをビューポート全幅へ breakout（中央に戻した.main基準で左右へ広げる） === これが無いと中身がCocoonのコンテンツ幅(約1056px)に収まり右が余る。TOPの #mens-top 相当。 */ body.wp-hige-page #mens-hige { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* ===================================================================== ↓ 以下、デザインCSS（ヒゲ・顔脱毛 style.css）。 LP独自の #header / #footer は #mens-hige 配下にスコープ化済み （CocoonのヘッダーフッターCSSと衝突させないため。LP独自ヘッダー/フッターは貼付しない）。 ===================================================================== */ /* ============================================================= エミナルクリニック メンズ｜ヒゲ・顔脱毛ページ - TOP（../第一階層/style.css）の基盤を継承 - 共通: Reset / Utilities / Animations / Header / Footer - セクション固有: 上から順に追記 ============================================================= */ /* ======================================== Reset / Base ======================================== */ *, *::before, *::after { box-sizing: border-box; max-width: 100%; } html { font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; color: #FFFFFF; background-color: #000000; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* 各セクションの背景画像（background_pc.png / background_sp.png）の拡大率を統一するため viewport 基準で固定。各セクションは同じ viewport-relative な背景を共有する。 */ #before-after, #price, #option-menu, #parts-choice, #discount, #reason, #differences, #no-extra, #machine, #beginner, #qa, #flow, #clinic, #greeting, #menu, #popular { background-attachment: fixed; } 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(.2, .7, .2, 1), transform 1.2s cubic-bezier(.2, .7, .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(.2, .7, .2, 1), opacity 0.8s cubic-bezier(.2, .7, .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） ======================================== */ [data-char-reveal] .char { display: inline-block; opacity: 0; transform: rotate3d(1, 1, 0, 280deg); transition: opacity .5s cubic-bezier(.25, 1, .5, 1), transform .5s cubic-bezier(.25, 1, .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; } /* ======================================== 共通 title-animation（h2 統一・1文字ずつ角度付き下から浮上） セクションごとに #ID 配下で nth-child 遅延を追記 ======================================== */ [data-title-animation] span { display: inline-block; opacity: 0; transform: translate(0, 60px) rotate(12deg); transform-origin: 0 100%; transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); } [data-title-animation].is-animated span { opacity: 1; transform: translate(0, 0) rotate(0); } /* 文字数別 nth-child 遅延は、各セクションの h2 配下で個別指定する（TOPと同様） */ /* ======================================== Header（下層ページ用：CTA pill 3つ + MENU） Figma: 1280×80 frame, backdrop-filter: blur(10px) ======================================== */ #mens-hige #header { position: absolute; top: 0; left: 0; width: 100%; height: 80px; z-index: 100; background: transparent; } #mens-hige #header .header__inner { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 1120px; width: 100%; height: 100%; margin: 0 auto; padding: 0 40px; box-sizing: border-box; } #mens-hige #header .header__logo { margin: 0; line-height: 0; } #mens-hige #header .header__logo-link { display: inline-block; } #mens-hige #header .header__logo-img { width: 212px; height: auto; } /* ヘッダーアクション（CTA pill 3つ + MENU） */ #mens-hige #header .header__actions { display: flex; align-items: center; gap: 8px; } #mens-hige #header .header__pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 30.5px; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 14px; line-height: 1.5; color: #FFFFFF; text-decoration: none; transition: opacity .2s ease; box-sizing: border-box; } #mens-hige #header .header__pill:hover { opacity: .8; } #mens-hige #header .header__pill--outline { border: 1.5px solid #FFFFFF; } #mens-hige #header .header__pill--cta { background: linear-gradient(0deg, #BB0001 0%, #FF0001 100%); border: 0; } /* MENU (ハンバーガー) - PC */ #mens-hige #header .header__hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 56px; height: 43px; margin-left: 12px; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 102; } #mens-hige #header .header__hamburger-text { display: block; font-family: "Anton", sans-serif; font-weight: 400; font-size: 22px; line-height: 1; color: #FFFFFF; } #mens-hige #header .header__hamburger-bars { display: flex; flex-direction: column; gap: 4px; width: 50px; } #mens-hige #header .header__hamburger-bar { display: block; width: 100%; height: 2px; background: #FFFFFF; } /* グローバルナビ（フルスクリーンオーバーレイ、ハンバーガー操作で表示） */ #mens-hige #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-hige #header .header__nav { visibility: visible; opacity: 1; } body.is-menu-open { overflow: hidden; } #mens-hige #header .header__nav-list { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 30px; } #mens-hige #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; transition: opacity .2s ease; } #mens-hige #header .header__nav-link:hover { opacity: .7; } /* ======================================== セクション骨組み（仮スタイル・実装時に上書き） 全 19 セクションのプレースホルダ。各セクション固有のCSSは このコメントブロック下に追記していく。 ======================================== */ /* ======================================== 1. FV（ページヘッダーバナー 1280×430） Figma 190:51850 + ブランド帯テキスト 190:65160 ======================================== */ #fv { position: relative; z-index: 1; width: 100%; height: 430px; background: #FFFFFF; overflow: visible; } /* 背景マスク：写真 + 黒オーバーレイ + 上→下フェードグラデ（全幅レスポンシブ） */ #fv .fv__bg { position: absolute; top: 0; left: 0; right: 0; bottom: -20px; overflow: hidden; pointer-events: none; /* 背景写真を下へ32px延長し、ブランド帯テキスト下の黒の境界を下げる（ページ全体はずらさない） */ } #fv .fv__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left center; transform: scale(2.5); transform-origin: top left; /* 左上を起点に右下方向へ拡大（顔を中央寄り・大きく） */ } /* PC〜タブレット(≥782px)：人物サイズを一定に保ち、画面が狭くなったら右(空白)を詰める。 height基準＋width:autoで大きさ固定、left基準で人物を左に残し右をクロップ。SP(≤781px)は別ルールで現状維持 */ @media screen and (min-width:782px) { #fv .fv__bg-img { width: auto; height: 100%; left: 0; right: auto; object-position: left bottom; /* 画面幅が狭くなるほど少しずつ左へ。1440px以上はズレ0、そこから狭くなるほど左へ移動（min(0px,…)で上限固定） */ transform: translateX(min(0px, (100vw - 2100px) * 0.7)) translateY(300px) scale(2.5); transform-origin: bottom left; } } #fv .fv__bg-overlay-black { position: absolute; inset: 0; background: #000000; opacity: 0.55; } #fv .fv__bg-overlay-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%); opacity: 0.6; } /* ほんのりノイズ（フィルムグレイン）。テキストより背面で重ねる */ #fv .fv__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='fvNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fvNoise)'/%3E%3C/svg%3E"); background-size: 160px 160px; } /* テキストコンテンツ */ #fv .fv__content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 1120px; width: 100%; height: 100%; margin: 0 auto; padding: 196px 295px 0 40px; box-sizing: border-box; text-align: right; } @media screen and (min-width:1280px) { #fv .fv__content { max-width: 1500px; } } #fv .fv__sub { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5; color: #FFFFFF; margin: 0; transform: translateY(10px); /* 「エミナルクリニックメンズの」を少し下げて黒帯との間隔を詰める */ } /* h1 ページタイトル（黒い四角の高さを文字より低くして、上下に文字をはみ出させる） */ #fv .fv__h1 { display: inline-flex; justify-content: center; align-items: center; padding: 0 8px 0 0; position: relative; background: transparent; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.5; color: #FFFFFF; } #fv .fv__h1::before { content: ''; position: absolute; inset: 25% 0; background: #000000; z-index: -1; pointer-events: none; } #fv .fv__h1 .fv__h1-ts11 { font-size: 56px; } #fv .fv__h1 .fv__h1-ts62 { font-size: 56px; letter-spacing: -0.16em; } #fv .fv__h1 .fv__h1-ts63 { font-size: 44px; letter-spacing: -0.09em; } /* 「ヒゲ・顔脱毛」の白文字だけを少し上げる。topはボックスサイズを変えないので黒帯(::before)は動かない。 あわせて浮き上がり登場アニメーション([data-title-animation])を無効化し、最初から表示する。 （#fv が付くのでFVのh1だけ対象。他セクションのタイトルアニメーションには影響しない） */ #fv .fv__h1 span { position: relative; top: -5px; opacity: 1; transform: none; transition: none; } /* h1 タイトルアニメーション delay（6文字分） */ #fv .fv__h1.is-animated span:nth-child(1) { transition-delay: 0ms; } #fv .fv__h1.is-animated span:nth-child(2) { transition-delay: 60ms; } #fv .fv__h1.is-animated span:nth-child(3) { transition-delay: 120ms; } #fv .fv__h1.is-animated span:nth-child(4) { transition-delay: 180ms; } #fv .fv__h1.is-animated span:nth-child(5) { transition-delay: 240ms; } #fv .fv__h1.is-animated span:nth-child(6) { transition-delay: 300ms; } /* ブランド帯テキスト「EMINAL CLINIC MEN'S」 Figma: Orbitron Black 120px, white, x=-66 y=357.77, width=1411 height=141.81 FV下端をまたぐ位置（FVは430高なのでテキストは下70pxほどはみ出る） */ /* ブランド帯（外枠）：位置・skew・overflow・初期は下から出現アニメ */ #fv .fv__brand-band { position: absolute; left: 0; right: 0; top: 357.77px; width: 100%; height: auto; overflow: hidden; pointer-events: none; z-index: 4; max-width: none; opacity: 1; transform: skewX(-10deg) translateY(0); transform-origin: center center; animation: none; /* 浮き上がり登場(fvBrandAppear)を無効化。横スクロールは .fv__brand-band-track 側で継続 */ } /* スクロールトラック：横方向の無限ループ（出現アニメ完了後にスタート） */ #fv .fv__brand-band-track { display: flex; width: max-content; max-width: none; animation: fvBrandScroll 20s linear 1.5s infinite; will-change: transform; } /* 個々のテキストブロック */ #fv .fv__brand-band-text { display: inline-block; padding-right: 80px; font-family: "Orbitron", sans-serif; font-weight: 900; font-size: clamp(100px, 11vw, 160px); line-height: 1.2; letter-spacing: 0em; color: #FFFFFF; white-space: nowrap; } /* 出現アニメ：下から60px → 通常位置（skewX -10deg を維持） */ @keyframes fvBrandAppear { to { opacity: 1; transform: skewX(-10deg) translateY(0); } } /* 横スクロール：4コピーあるので translateX(-25%) で 1 コピー分移動 → シームレスループ */ @keyframes fvBrandScroll { from { transform: translateX(0); } to { transform: translateX(-25%); } } /* アクセシビリティ：動きを減らす設定のユーザー向け */ @media (prefers-reduced-motion: reduce) { #fv .fv__brand-band { animation: none; opacity: 1; transform: skewX(-10deg) translateY(0); } #fv .fv__brand-band-track { animation: none; } } /* スクロールボタン（右下・円形 / SCROLL テキスト + 下向き矢印） 画面右下に position:fixed で常時固定表示 */ .fv__scroll { position: absolute; top: auto; right: 70px; bottom: -20px; z-index: 9999; box-sizing: border-box; padding-top: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 80px; height: 80px; border: 0.94px solid rgba(255, 255, 255, 0.6); border-radius: 50%; text-decoration: none; color: #FFFFFF; transition: opacity .3s ease, border-color .3s ease; } .fv__scroll:hover { opacity: 0.65; } /* 2ndビューを過ぎたら非表示（上に戻ると再表示） */ .fv__scroll.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .fv__scroll-text { font-family: "Anton", sans-serif; font-weight: 400; font-size: 18px; line-height: 1; letter-spacing: 0.04em; text-indent: 0.04em; color: #FFFFFF; transform: translateY(4px); } /* 矢印：縦線 + 下向きシェブロンを1つのSVGパスで描画（縦線と斜線の中心軸を完全一致させる） */ .fv__scroll-arrow { display: block; width: 14px; height: 28px; animation: fvScrollArrow 1.8s ease-in-out infinite; } /* 矢印が下にふわっと動くループ（スクロール誘導） */ @keyframes fvScrollArrow { 0% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(6px); opacity: .35; } 100% { transform: translateY(0); opacity: .9; } } @media (prefers-reduced-motion: reduce) { .fv__scroll-arrow { animation: none; } } /* ========== ページトップへ戻るボタン（.pagetop）は mens-wp-common/wp-components-common.css へ一本化（TOP/ヒゲ共通） ========== */ /* ========== SP専用：画面下固定CTA（白いガウス + 予約ボタン / Figma 525:132750） ========== */ /* PC・タブレットでは非表示。SP実機（≤781px）のみ画面下に常時固定 */ .sp-cta { display: none; } @media screen and (max-width: 781px) { .sp-cta { display: flex; justify-content: center; align-items: flex-end; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9997; padding: 0 0 2.564vw; box-sizing: border-box; pointer-events: none; } /* 白いガウス：白一色・半透明のフラットな帯（パッキリ）＋背後をブラー */ .sp-cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: -0.641vw; height: 19.872vw; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: none; z-index: -1; } /* ボタンはサイト共通の discount__cta をそのまま流用（デザインは下の共通ルールを継承）。ここではタップ可否のみ指定 */ .sp-cta .discount__cta { pointer-events: auto; } } /* ======================================== 2. SV（リード文セクション） Figma 190:51861: 黒乗算60% / 上下padding150px / 中央寄せ / 内テキスト818幅26px Medium ======================================== */ #sv { position: relative; width: 100%; padding: 150px 0; background: rgba(0, 0, 0, 0.6); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; } #sv .sv__lead { width: 900px; max-width: 100%; padding: 0 40px; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 26px; line-height: 1.6; letter-spacing: -0.02em; color: #FFFFFF; text-align: left; margin: 0; } /* ======================================== 3. ビフォーアフター（症例） / Figma 190:51863 セクション: 1280×hug / 上下padding180 / column center 背景: background_pc.png（SPでは background_sp.png に切替） ======================================== */ #before-after { position: relative; width: 100%; padding: 180px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } /* 装飾：煙画像をセクション右下に自然サイズで配置 */ #before-after .before-after__smoke { position: absolute; right: 0; bottom: 0; width: auto; height: auto; max-width: 30%; max-height: 50%; object-fit: contain; pointer-events: none; z-index: 0; } /* 左上の煙 */ #before-after .before-after__smoke--tl { right: auto; bottom: auto; top: 0; left: 0; } #before-after .before-after__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 1120px; max-width: 100%; padding: 0 40px; box-sizing: border-box; } /* 見出し（subtitle + 1行タイトル / 1120幅 / 下padding80） */ #before-after .before-after__head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 1120px; max-width: 100%; padding: 0 0 80px; } #before-after .before-after__subtitle { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; color: #8E8E8E; text-align: center; margin: 0; } /* タイトル h2：[ヒゲ・顔脱毛 白枠] - 10px - の - 4px - ビフォーアフター を1行表示 */ #before-after .before-after__title { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0; font-weight: 700; line-height: 1.4; color: #FFFFFF; } #before-after .before-after__title-pair { display: inline-flex; align-items: center; gap: 10px; } #before-after .before-after__title-box { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; padding: 30px 20px; box-sizing: border-box; } #before-after .before-after__title-jp { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: #FFFFFF; text-align: center; } #before-after .before-after__title-jp .before-after__ts51 { letter-spacing: -0.02em; } #before-after .before-after__title-jp .before-after__ts52 { letter-spacing: -0.18em; } #before-after .before-after__title-no { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.4; color: #FFFFFF; } #before-after .before-after__title-main { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.4; color: #FFFFFF; } /* 症例画像（BEFORE / AFTER）2枚並び、それぞれ 400×320 ／ 810幅で space-between */ #before-after .before-after__cases { display: flex; justify-content: space-between; align-items: center; width: 810px; max-width: 100%; } #before-after .before-after__case { position: relative; width: 400px; height: 320px; margin: 0; overflow: hidden; } #before-after .before-after__case-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; } /* ラベル（BEFORE / AFTER）：画像下部に被さる赤系グラデ帯（400×60、 y=261） */ #before-after .before-after__case-label { position: absolute; left: 0; top: 261px; width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; font-family: "Anton", sans-serif; font-weight: 400; font-size: 32px; line-height: 1.4; color: #FFFFFF; margin: 0; } #before-after .before-after__case-label--before { background: linear-gradient(90deg, #000000 0%, #5C0000 100%); } #before-after .before-after__case-label--after { background: linear-gradient(90deg, #5C0000 0%, #FF0001 100%); } /* case詳細（520幅・黒60%・border-radius 10 / 上padding40 / 4行×2列のGrid） */ #before-after .before-after__detail { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 40px; } #before-after .before-after__detail-box { display: grid; grid-template-columns: auto 1px auto; grid-template-rows: repeat(4, auto); column-gap: 24px; row-gap: 10px; align-items: center; width: fit-content; min-width: 520px; max-width: none; padding: 40px; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-sizing: border-box; } #before-after .before-after__detail-box dt, #before-after .before-after__detail-box dd { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.6; color: #FFFFFF; margin: 0; white-space: nowrap; max-width: none; } #before-after .before-after__detail-box dt { grid-column: 1; text-align: left; } #before-after .before-after__detail-box dd { grid-column: 3; text-align: left; } #before-after .before-after__detail-divider { grid-column: 2; grid-row: 1 / -1; width: 1px; background: #FFFFFF; align-self: stretch; } #before-after .before-after__note { width: 510px; max-width: 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #FFFFFF; text-align: left; margin: 0; } /* h2 タイトルアニメーション delay（ヒゲ・顔脱毛 = 6文字分） */ #before-after .before-after__title-jp.is-animated span:nth-child(1) { transition-delay: 0ms; } #before-after .before-after__title-jp.is-animated span:nth-child(2) { transition-delay: 60ms; } #before-after .before-after__title-jp.is-animated span:nth-child(3) { transition-delay: 120ms; } /* タイトル レスポンシブ：1050px以下で2段組み・左寄せ・文字サイズ縮小 */ @media (max-width: 1050px) { #before-after .before-after__head { align-items: flex-start; } #before-after .before-after__subtitle { text-align: left; } #before-after .before-after__title { flex-direction: column; gap: 16px; align-items: flex-start; justify-content: flex-start; } #before-after .before-after__title-jp { font-size: 48px; } #before-after .before-after__title-box { padding: 22px 16px; } #before-after .before-after__title-no { font-size: 36px; } #before-after .before-after__title-main { font-size: 36px; } } /* SP（780px以下）：さらに vw 比例で縮小 */ @media (max-width: 780px) { #before-after .before-after__title { gap: 2.051vw; /* 16 */ } #before-after .before-after__title-jp { font-size: 10.256vw; /* 80px */ } #before-after .before-after__title-box { padding: 2.821vw 2.051vw; /* 22, 16 */ } #before-after .before-after__title-no { font-size: 7.692vw; /* 60px */ } #before-after .before-after__title-main { font-size: 7.692vw; /* 60px */ } } /* case詳細 レスポンシブ：1050px以下で box を親幅いっぱい・テキスト折り返し許可 */ @media (max-width: 1050px) { #before-after .before-after__detail { align-self: stretch; } #before-after .before-after__detail-box { width: 100%; min-width: 0; grid-template-columns: auto 1px 1fr; /* 値カラムが残り幅を埋める */ column-gap: 20px; } #before-after .before-after__detail-box dt, #before-after .before-after__detail-box dd { white-space: normal; /* SPでは折り返し許可（Figma準拠） */ max-width: 100%; } #before-after .before-after__note { width: 100%; } } /* SP（780px以下）：padding を vw比例 */ @media (max-width: 780px) { /* 左右paddingを詰めて、写真(cases)・施術内容ボックスの横幅を広げる */ #before-after .before-after__inner { padding: 0 0.641vw; /* 40→5 さらに横幅を広げる */ } /* before/after写真の間にほんの少し隙間 */ #before-after .before-after__cases { gap: 0.769vw; /* 6px */ } #before-after .before-after__detail-box { padding: 5.128vw 3.846vw; /* 上下40 / 左右30（左右を詰めてテキストエリアを広げる） */ column-gap: 2.564vw; row-gap: 1.282vw; border-radius: 0.641vw; /* 10→5 角を少し尖らせる */ } #before-after .before-after__detail-box dt, #before-after .before-after__detail-box dd { font-size: 2.821vw; /* 22 */ } #before-after .before-after__note { font-size: 2.308vw; /* 18px */ } } /* ======================================== 4. 料金メニュー / Figma 190:51902 セクション: hug column / 下padding 180 / 中央寄せ 背景: background_pc.png（ビフォーアフターと同じ） ======================================== */ #price { position: relative; width: 100%; padding: 0 0 60px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #price .price__inner { display: flex; flex-direction: column; align-items: center; width: 1120px; max-width: 100%; padding: 0 40px; box-sizing: border-box; } /* 見出し（ビフォーアフター同等の白枠付き 1120 / gap20 / padding-bottom 80） */ #price .price__head { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 1120px; max-width: 100%; padding: 0 0 80px; } #price .price__subtitle { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.2; color: #CACACA; text-align: center; margin: 0; } /* タイトル：[ヒゲ・顔脱毛 白枠] - 10px - の - 9px - 料金メニュー */ #price .price__title { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 0; font-weight: 700; line-height: 1.4; color: #FFFFFF; } #price .price__title-pair { display: inline-flex; align-items: center; gap: 10px; } #price .price__title-box { display: inline-flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; padding: 30px 20px; box-sizing: border-box; } #price .price__title-jp { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: #FFFFFF; text-align: center; } #price .price__title-jp .price__ts51 { letter-spacing: -0.02em; } #price .price__title-jp .price__ts52 { letter-spacing: -0.18em; } #price .price__title-no { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.4; color: #FFFFFF; } #price .price__title-main { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.4; color: #FFFFFF; } /* 料金カード：2段 grid（1段目=2枚、2段目=1枚を中央寄せ） */ #price .price__cards { display: grid; grid-template-columns: repeat(2, 448px); justify-content: center; gap: 50px; width: 100%; } /* 料金カードの自作スクロールバー（常時表示／JSで横スクロールに連動）。表示/非表示は JS が出し分け（スクロール不要な幅では隠す） */ .cards-scrollbar { position: relative; display: none; width: calc(100% - 40px); height: 4px; margin: 28px auto 0; transform: translateX(-2.564vw); background: rgba(255, 255, 255, 0.3); border-radius: 0; overflow: hidden; } .cards-scrollbar__thumb { position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: #FFFFFF; border-radius: 0; cursor: grab; touch-action: none; } .cards-scrollbar__thumb:active { cursor: grabbing; } /* PC：カード下の自作スクロールバーは非表示（JSのインライン display を !important で打ち消す）。 PC は grid 表示で横スクロール不要なため、料金カード／オプションメニュー両方を初期表示から隠す。 */ @media (min-width: 781px) { #price .cards-scrollbar, #option-menu .cards-scrollbar { display: none !important; } } /* ====== 料金カード（Figma 268:75747 / 全カード 448×776 同寸固定 / cqi = card幅%） ====== */ #price .plans__card { container-type: inline-size; position: relative; margin: 0; width: 100%; max-width: 448px; aspect-ratio: 448 / 776; padding: 0; border-radius: 6.787879px; overflow: hidden; backdrop-filter: blur(6.787879px); -webkit-backdrop-filter: blur(6.787879px); box-sizing: border-box; } #price .plans__card:nth-child(3) { grid-column: 1 / -1; justify-self: center; } #price .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; } #price .plans__card-inner { position: relative; z-index: 1; width: 100%; height: 100%; } /* ヘッダ（タイトル＋部位数） */ #price .plans__card-head { position: absolute; left: 9.375cqi; top: 7.775cqi; width: 58.482cqi; height: 22.172cqi; } #price .plans__card--a .plans__card-title, #price .plans__card--b .plans__card-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 12.5cqi; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 8.929cqi; line-height: 140%; letter-spacing: -0.04em; color: #FFFFFF; text-align: center; white-space: nowrap; } /* 3枚目（全顔）はタイトルを左揃え（部位数テキストの左端に合わせる） */ #price .plans__card:nth-child(3) .plans__card-title { left: 2.679cqi; transform: none; text-align: left; } #price .plans__card-parts { position: absolute; left: 2.679cqi; top: 10.864cqi; width: auto; height: 11.310cqi; margin: 0; display: flex; align-items: center; justify-content: center; gap: 0.893cqi; white-space: nowrap; } #price .plans__card-parts-num { position: relative; top: 0.446cqi; font-family: "Anton", sans-serif; font-weight: 400; font-size: 8.036cqi; line-height: 140%; letter-spacing: -0.04em; color: #FFFFFF; } #price .plans__card-parts-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 7.440cqi; line-height: 140%; letter-spacing: -0.04em; color: #FFFFFF; white-space: nowrap; } /* 蓄熱式バッジ */ #price .plans__card-type { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 1.786cqi; height: 7.366cqi; padding: 2.232cqi 2.976cqi; box-sizing: border-box; border: 0.297cqi solid #FFFFFF; border-radius: 14.882cqi; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 3.868cqi; line-height: 100%; color: #FFFFFF; white-space: nowrap; } /* 施術回数（白正方形） */ #price .plans__card-count { position: absolute; left: 70.313cqi; top: 10.007cqi; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 18.155cqi; height: 18.155cqi; padding: 2.232cqi; background: #FFFFFF; box-sizing: border-box; text-align: center; color: #D52D2D; } #price .plans__card-count-label { flex: 0 0 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.464cqi; line-height: 1.2; color: #811211; } #price .plans__card-count-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 7.440cqi; line-height: 1; color: #811211; } #price .plans__card-count-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 6.846cqi; line-height: 1; color: #811211; } /* 区切り線 */ #price .plans__card-divider { position: absolute; top: 31.362cqi; left: 8.929cqi; width: 80.357cqi; height: 0.223cqi; margin: 0; background: #FFFFFF; border: 0; opacity: 0.6; } /* 顔ビジュアル */ #price .plans__card-visual { position: absolute; top: 58.668cqi; left: 13.393cqi; width: 71.503cqi; height: 61.011cqi; display: flex; justify-content: center; align-items: center; } #price .plans__card-visual-img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; } #price .plans__card--b .plans__card-visual { top: 51.473cqi; left: 32.857cqi; width: 34.286cqi; height: 56.281cqi; } /* 部位チップリスト（2行・絶対配置） */ #price .plans__card-parts-list { position: absolute; left: 0; top: 0; width: 100%; padding: 0; margin: 0; } #price .plans__card-parts-list-row { position: absolute; display: flex; gap: 1.489cqi; list-style: none; padding: 0; margin: 0; } #price .plans__card-parts-list-row>span { display: flex; align-items: center; justify-content: center; height: 6.846cqi; padding: 0 3.721cqi; background: rgba(255, 255, 255, 0.3); font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 4.167cqi; line-height: 1; letter-spacing: -0.04em; color: #FFFFFF; box-sizing: border-box; white-space: nowrap; } #price .plans__card-parts-list-row:nth-child(1) { left: 13.244cqi; top: 35.826cqi; width: 72.395cqi; } #price .plans__card-parts-list-row:nth-child(1)>span:nth-child(1) { width: 11.681cqi; } #price .plans__card-parts-list-row:nth-child(1)>span:nth-child(2) { width: 15.922cqi; } #price .plans__card-parts-list-row:nth-child(1)>span:nth-child(3) { width: 20.163cqi; } #price .plans__card-parts-list-row:nth-child(1)>span:nth-child(4) { width: 20.163cqi; } #price .plans__card-parts-list-row:nth-child(2) { left: 11.161cqi; top: 43.788cqi; width: 76.413cqi; } #price .plans__card-parts-list-row:nth-child(2)>span:nth-child(1) { width: 20.163cqi; } #price .plans__card-parts-list-row:nth-child(2)>span:nth-child(2) { width: 15.922cqi; } #price .plans__card-parts-list-row:nth-child(2)>span:nth-child(3) { width: 24.181cqi; } #price .plans__card-parts-list-row:nth-child(2)>span:nth-child(4) { width: 11.681cqi; } /* 料金（カードA：一括のみ・絶対配置） */ #price .plans__card-price { position: absolute; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 2.976cqi; } #price .plans__card--a .plans__card-price { left: 8.929cqi; bottom: 17.857cqi; width: 80.357cqi; height: 33.482cqi; } #price .plans__card-price-label { width: 6.027cqi; height: 19.420cqi; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 5.953cqi; line-height: 110%; text-align: center; color: #FFFFFF; } #price .plans__card--b .plans__card-price-label { width: 8.929cqi; height: 19.643cqi; font-size: 8.929cqi; } #price .plans__card-price-main { display: flex; flex-direction: row; align-items: center; gap: 1.489cqi; width: 69.792cqi; height: 33.482cqi; } #price .plans__card-price-num { width: 54.911cqi; height: 33.482cqi; font-family: "Anton", sans-serif; font-weight: 400; font-size: 21.8cqi; line-height: 150%; letter-spacing: 0.06em; color: #FFFFFF; } #price .plans__card-price-unit { position: relative; width: 13.393cqi; height: 22.619cqi; } #price .plans__card-price-tax { position: absolute; left: 1.339cqi; top: 0; width: 10.714cqi; height: 7.589cqi; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 5.357cqi; line-height: 140%; text-align: center; color: #FFFFFF; } #price .plans__card-price-yen { position: absolute; left: 0; top: 3.868cqi; width: 13.393cqi; height: 18.750cqi; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 13.393cqi; line-height: 140%; text-align: center; color: #FFFFFF; } /* 料金ラッパー（カードB／全顔：一括＋月々） */ #price .plans__card-price-wrap { position: absolute; top: 104.853cqi; left: 6.250cqi; display: flex; flex-direction: column; align-items: stretch; gap: 3.571cqi; width: 87.5cqi; height: 33.080cqi; z-index: 2; } #price .plans__card--b .plans__card-price-wrap .plans__card-price { position: relative; left: auto; bottom: auto; align-self: center; gap: 1.786cqi; width: auto; height: auto; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-label { width: auto; height: auto; font-size: 5.714cqi; line-height: 110%; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-main { width: auto; height: auto; gap: 0.893cqi; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-num { width: auto; height: auto; font-size: 19.286cqi; letter-spacing: 0.02em; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-unit { width: 12.277cqi; height: 14.732cqi; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-tax { left: 1.071cqi; top: -2.232cqi; width: 10.045cqi; height: 3.571cqi; font-size: 5cqi; line-height: 140%; } #price .plans__card--b .plans__card-price-wrap .plans__card-price-yen { left: 0; top: 0.893cqi; width: 12.277cqi; height: 8.929cqi; font-size: 12.143cqi; line-height: 140%; } #price .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: 1.786cqi; padding: 0 1.786cqi; width: auto; height: auto; margin-top: -5.580cqi; background: rgba(0, 0, 0, 0.3); box-sizing: border-box; } #price .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-label { width: 4.286cqw; height: auto; font-size: 3.929cqw; line-height: 110%; writing-mode: vertical-rl; text-orientation: upright; } #price .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-num { width: auto; height: auto; font-size: 10cqi; letter-spacing: 0.02em; } #price .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-unit { width: 11.607cqi; height: 7.634cqi; } #price .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-tax { left: 0.491cqi; top: -1.786cqi; width: 10.938cqi; height: 2.232cqi; font-size: 3.036cqi; line-height: 140%; } #price .plans__card--b .plans__card-price-wrap .plans__card-price--monthly .plans__card-price-yen { left: 0; top: 0.670cqi; width: 11.607cqi; height: 4.241cqi; font-size: 5.714cqi; line-height: 140%; } /* 注釈 */ #price .plans__card-note { position: absolute; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.857cqi; line-height: 120%; letter-spacing: -0.03em; text-align: justify; color: #FFFFFF; } #price .plans__card--a .plans__card-note { left: 5.357cqi; bottom: 8.482cqi; width: 89.286cqi; } #price .plans__card--b .plans__card-note { top: 149.554cqi; bottom: auto; left: 6.250cqi; width: 87.5cqi; font-size: 2.857cqi; line-height: 130%; letter-spacing: -0.02em; } /* 出現アニメ（カード：TOPと同じ回転起き上がり／オプションは右からスライド回転） */ #price .plans__card[data-scroll-fade] { opacity: 0; transform: rotate(8.75deg); transform-origin: 0% 100%; transition: opacity 0.72s cubic-bezier(.25, .46, .45, .94), transform 0.72s cubic-bezier(.25, .46, .45, .94); will-change: opacity, transform; } #price .plans__card[data-scroll-fade].is-visible { opacity: 1; transform: rotate(0); } #option-menu .option-menu__card[data-scroll-fade] { transform-origin: 0% 100%; transform: translateX(80px) rotate(12deg); transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1), transform 1.4s cubic-bezier(.2, .7, .2, 1); } #option-menu .option-menu__card[data-scroll-fade].is-visible { transform: translateX(0) rotate(0); } /* ======================================== 5. オプションメニュー / Figma 190:51919 + 190:51925 独立セクション ======================================== */ #option-menu { position: relative; width: 100%; padding: 30px 0 180px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #option-menu .option-menu__inner { display: flex; flex-direction: column; align-items: center; width: 1120px; max-width: 100%; padding: 0 40px; box-sizing: border-box; } /* 見出し（白枠なし・1行テキスト） */ #option-menu .option-menu__head { display: flex; justify-content: center; align-items: center; width: 1120px; max-width: 100%; padding: 0 0 50px; box-sizing: border-box; } #option-menu .option-menu__title { display: inline-flex; align-items: flex-end; gap: 0; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.3; color: #FFFFFF; } #option-menu .option-menu__title .option-menu__jp { font-size: 48px; } #option-menu .option-menu__title .option-menu__no { font-size: 36px; } #option-menu .option-menu__title .option-menu__main { font-size: 48px; } /* オプションカード：2×2 grid */ #option-menu .option-menu__cards { display: grid; grid-template-columns: repeat(2, 448px); justify-content: center; gap: 50px; width: 100%; } /* ====== オプションメニューカード（Figma 268:75758〜75761 / 448×370 / 横並び：左に顔・右にテキスト） ====== */ #option-menu .option-menu__card { container-type: inline-size; position: relative; margin: 0; width: 100%; max-width: 448px; aspect-ratio: 448 / 370; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); background: radial-gradient(ellipse 70% 55% at 80% 18%, rgba(186, 0, 1, 0.95) 0%, rgba(186, 0, 1, 0) 65%), radial-gradient(ellipse 95% 70% at 20% 85%, rgba(174, 0, 1, 0.95) 0%, rgba(174, 0, 1, 0) 65%), radial-gradient(ellipse 100% 100% at 50% 50%, #8a0e10 0%, #4a0808 100%); color: #FFFFFF; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px 0; /* 内容を収めるため詰めた */ } /* 上段：顔（左）+ コンテンツ（右）の横並び */ #option-menu .option-menu__card-row { width: 87.5cqi; /* 392 */ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /* 顔ビジュアル */ #option-menu .option-menu__card-face { flex: 0 0 auto; width: 33.393cqi; /* 149.6 */ height: 37.857cqi; /* 169.6 */ display: flex; justify-content: center; align-items: center; } /* カード3,4 は顔画像が縦長（136×224）のため container を縦長にして表示を一回り大きく */ #option-menu .option-menu__card:nth-child(3) .option-menu__card-face, #option-menu .option-menu__card:nth-child(4) .option-menu__card-face { width: 30cqi; /* 134 */ height: 45cqi; /* 約201 */ } #option-menu .option-menu__card-face-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; } /* 右側コンテンツ */ #option-menu .option-menu__card-content { width: 51.25cqi; /* 229.6 */ display: flex; flex-direction: column; align-items: center; gap: 3.571cqi; /* 16 */ } /* ヘッダ：タイトル＋蓄熱式バッジ ／ 右端に施術回数 */ #option-menu .option-menu__card-head { width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; } #option-menu .option-menu__card-title-block { display: flex; flex-direction: column; align-items: flex-start; gap: 0.536cqi; /* 2.4 */ } #option-menu .option-menu__card-title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 7.5cqi; /* 33.6 */ line-height: 1.2; color: #FFFFFF; } /* カード4（身だしなみセット）はタイトルが「身だしなみ」+「セット+熱破壊式」の2段構成 / 折り返さないようサイズ＆字間調整 */ #option-menu .option-menu__card:nth-child(4) .option-menu__card-title { font-size: 6.4cqi; /* ≈28.7 */ line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; } #option-menu .option-menu__card-title-row2 { display: flex; flex-direction: row; align-items: center; gap: 0.6cqi; white-space: nowrap; } #option-menu .option-menu__card-title-second { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 6.4cqi; /* ≈28.7 */ line-height: 1.1; letter-spacing: -0.03em; color: #FFFFFF; } /* カード4の蓄熱式バッジを縮小して横並びを確保 */ #option-menu .option-menu__card:nth-child(4) .option-menu__card-badge { font-size: 2.8cqi; /* ≈12.5 */ padding: 0.9cqi 1.6cqi; } #option-menu .option-menu__card-badge { display: inline-flex; align-items: center; justify-content: center; padding: 1.5cqi 1.964cqi; border: 0.304cqi solid #FFFFFF; /* 1.36 */ border-radius: 999px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 3.214cqi; /* 14.4 */ line-height: 1; color: #FFFFFF; white-space: nowrap; } /* 施術X回 バッジ（白の正方形） */ #option-menu .option-menu__card-count { width: 14.821cqi; /* 66.4 */ height: 14.821cqi; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; } #option-menu .option-menu__card-count-label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 3.929cqi; /* 17.6 */ line-height: 1.2; color: #811211; } #option-menu .option-menu__card-count-times { display: inline-flex; align-items: baseline; color: #811211; line-height: 1; } #option-menu .option-menu__card-count-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 6.071cqi; /* 27.2 */ line-height: 1.2; color: #811211; } #option-menu .option-menu__card-count-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 4.643cqi; /* 20.8 */ line-height: 1.2; color: #811211; } /* 区切り線 */ #option-menu .option-menu__card-divider { display: block; width: 100%; height: 0; border-top: 0.304cqi solid #FFFFFF; } /* 部位チップ + 料金 */ #option-menu .option-menu__card-info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5cqi; } #option-menu .option-menu__card-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; gap: 1.071cqi; flex-wrap: wrap; } #option-menu .option-menu__card-chip { display: inline-flex; align-items: center; justify-content: center; padding: 1.071cqi 1.429cqi; /* 4.8 / 6.4 */ background: rgba(255, 255, 255, 0.3); font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 3.571cqi; /* 16 */ line-height: 1; color: #FFFFFF; white-space: nowrap; } /* 料金 */ #option-menu .option-menu__card-price { display: flex; flex-direction: row; align-items: center; gap: 0.893cqi; } #option-menu .option-menu__card-price-label { display: inline-flex; flex-direction: column; align-items: center; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 3.571cqi; /* 16 */ line-height: 1.1; color: #FFFFFF; } #option-menu .option-menu__card-price-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 13.929cqi; /* 62.4 */ line-height: 1.1; letter-spacing: 0.02em; color: #FFFFFF; } #option-menu .option-menu__card-price-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3cqi; line-height: 1; } #option-menu .option-menu__card-price-tax { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 3.571cqi; /* 16 */ line-height: 1; color: #FFFFFF; } #option-menu .option-menu__card-price-yen { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 7.143cqi; /* 32 */ line-height: 1; color: #FFFFFF; } /* 注釈 */ #option-menu .option-menu__card-note { width: 87.5cqi; /* 392 */ margin: 0; padding: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 2.679cqi; /* ≈12 */ line-height: 1.25; letter-spacing: -0.02em; color: #FFFFFF; text-align: left; } /* ======================================== 5.5. 8つの部位から自由に選べる / Figma 190:53880 ======================================== */ #parts-choice { position: relative; width: 100%; padding: 0 0 180px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #parts-choice .parts-choice__inner { display: flex; flex-direction: column; align-items: center; width: 1120px; max-width: 100%; padding: 0 40px; box-sizing: border-box; } /* 見出し：8つの部位から自由に選べる！（PCは1行・全テキスト白 / 狭幅は自動折返し） */ #parts-choice .parts-choice__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0; padding: 0 0 40px; } #parts-choice .parts-choice__lead { display: inline-flex; align-items: flex-end; gap: 0; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #FFFFFF; line-height: 1.2; } #parts-choice .parts-choice__lead-num { font-size: 56px; line-height: 1.2; } #parts-choice .parts-choice__lead-suffix { font-size: 36px; line-height: 1.4; } #parts-choice .parts-choice__title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 56px; line-height: 1.2; color: #FFFFFF; } #parts-choice .parts-choice__title-ts { letter-spacing: -0.02em; } .parts-choice__char, .discount__char { display: inline-block; } /* 部位チップ（2段×4列） */ #parts-choice .parts-choice__chips { display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; gap: 10px; padding: 0 0 50px; margin: 0; list-style: none; } #parts-choice .parts-choice__chip { display: flex; align-items: center; justify-content: center; min-width: 124px; padding: 20px; background: rgba(255, 255, 255, 0.3); font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 32px; line-height: 1; color: #FFFFFF; box-sizing: border-box; } /* 部位数バッジ（3部位 or 6部位 or 8部位） */ #parts-choice .parts-choice__badges { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 20px; padding: 0 0 60px; } #parts-choice .parts-choice__badge { display: inline-flex; align-items: flex-end; flex-shrink: 0; gap: 10px; padding: 20px 30px; white-space: nowrap; } #parts-choice .parts-choice__badge--3 { background: rgba(217, 0, 1, 0.5); } #parts-choice .parts-choice__badge--6 { background: rgba(217, 0, 1, 0.7); } #parts-choice .parts-choice__badge--8 { background: rgba(217, 0, 1, 1); } #parts-choice .parts-choice__badge-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 48px; line-height: 1; color: #FFFFFF; } #parts-choice .parts-choice__badge-label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.3; color: #FFFFFF; } #parts-choice .parts-choice__or { font-family: "Anton", sans-serif; font-weight: 400; font-size: 33.71px; line-height: 1; color: #FFFFFF; } /* ヒゲデザイン例（5カード：前/次ボタンで4枚を巡回・カード自体が隣の位置から滑り込む） */ #parts-choice .parts-choice__styles { position: relative; width: 1040px; max-width: 100%; aspect-ratio: 1040 / 394; margin: 0 auto; } #parts-choice .parts-choice__style { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 3.2px 43.2px rgba(0, 0, 0, 0.3); background: #000; transform-origin: top left; transition: transform 0.6s cubic-bezier(.2, .7, .2, 1); will-change: transform; } #parts-choice .parts-choice__style-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; } #parts-choice .parts-choice__style-img.is-active { opacity: 1; } /* 奥のカードほど暗くする（中央=明るい / mid=やや暗い / side=最も暗い） */ #parts-choice .parts-choice__style::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s cubic-bezier(.2, .7, .2, 1); z-index: 5; } #parts-choice .parts-choice__style--mid-left::after, #parts-choice .parts-choice__style--mid-right::after { opacity: 0.5; } #parts-choice .parts-choice__style--side-left::after, #parts-choice .parts-choice__style--side-right::after { opacity: 0.7; } /* スロット位置（5箇所） */ #parts-choice .parts-choice__style--side-left { left: 0; top: 9.9%; width: 28.46%; height: 80.46%; z-index: 1; } #parts-choice .parts-choice__style--mid-left { left: 14.62%; top: 5.58%; width: 31.54%; height: 89.09%; z-index: 2; } #parts-choice .parts-choice__style--center { left: 32.31%; top: 0; width: 35.38%; height: 100%; z-index: 3; } #parts-choice .parts-choice__style--mid-right { left: 53.85%; top: 5.58%; width: 31.54%; height: 89.09%; z-index: 2; } #parts-choice .parts-choice__style--side-right { left: 71.54%; top: 9.9%; width: 28.46%; height: 80.46%; z-index: 1; } /* カルーセル前/次ナビゲーションボタン */ #parts-choice .parts-choice__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; } #parts-choice .parts-choice__nav:hover { background: rgba(0, 0, 0, 0.75); } #parts-choice .parts-choice__nav:active { transform: translateY(-50%) scale(0.92); } #parts-choice .parts-choice__nav:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } #parts-choice .parts-choice__nav--prev { left: -28px; } #parts-choice .parts-choice__nav--next { right: -28px; } #parts-choice .parts-choice__nav-icon { width: 26px; height: 26px; display: block; } /* ページネーションドット（4枚分のインジケーター） */ #parts-choice .parts-choice__dots { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 32px 0 0; margin: 0; list-style: none; } #parts-choice .parts-choice__dots>li { display: inline-flex; } #parts-choice .parts-choice__dot { width: 6px; height: 6px; padding: 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } #parts-choice .parts-choice__dot:hover { background: rgba(255, 255, 255, 0.7); } #parts-choice .parts-choice__dot.is-active { background: #FFFFFF; transform: scale(1.3); } #parts-choice .parts-choice__dot:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; } /* キャプション */ #parts-choice .parts-choice__captions { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0 0; } #parts-choice .parts-choice__caption-note { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #FFFFFF; } #parts-choice .parts-choice__caption-desc { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #FFFFFF; text-align: center; } /* タイトル レスポンシブ：1050px以下で2段組み・左寄せ */ @media (max-width: 1050px) { #price .price__head { align-items: flex-start; } #price .price__subtitle { text-align: left; } #price .price__title { flex-direction: column; gap: 16px; align-items: flex-start; justify-content: flex-start; } #price .price__title-jp { font-size: 48px; } #price .price__title-box { padding: 22px 16px; } #price .price__title-no { font-size: 36px; } #price .price__title-main { font-size: 36px; } /* カード：横スクロール（CSS scroll-snap） / 1カード表示 + 次カードを少しのぞき見せる PC の grid を flex で上書き */ #price .price__cards { display: flex; grid-template-columns: none; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 8px; /* セクションのinnerパディングを外して画面端まで使う */ margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; box-sizing: border-box; /* ネイティブのスクロールバーは隠す（下に常時表示の自作バー .cards-scrollbar を出す / JSで生成・連動） */ scrollbar-width: none; } #price .price__cards::-webkit-scrollbar { display: none; } #price .plans__card { flex: 0 0 85%; max-width: 448px; width: auto; scroll-snap-align: center; scroll-snap-stop: always; } /* PCの grid 設定（3枚目を中央寄せ）をリセット */ #price .plans__card:nth-child(3) { grid-column: auto; justify-self: auto; } /* 一番右（最後）のカードの右側にだけ余白を付ける（スクロール末尾の余白） */ #price .plans__card:last-child { margin-right: 5.128vw; } } /* オプションメニュー レスポンシブ（独立セクション） */ @media (max-width: 1050px) { /* 見出し：左寄せ・「ヒゲ・顔脱毛の」と「オプションメニュー」を改行 / Figma SP値 60/50/60 */ #option-menu .option-menu__head { justify-content: flex-start; padding: 0 0 50px; width: 100%; } #option-menu .option-menu__title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 0; } #option-menu .option-menu__title .option-menu__jp { font-size: 60px; } #option-menu .option-menu__title .option-menu__no { font-size: 50px; } #option-menu .option-menu__title .option-menu__main { font-size: 60px; flex-basis: 100%; } /* カード：横スクロール（料金カードと同パターン） */ #option-menu .option-menu__cards { display: flex; grid-template-columns: none; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 20px; padding-bottom: 8px; margin-left: -40px; margin-right: -40px; padding-left: 0; padding-right: 40px; box-sizing: border-box; /* ネイティブのスクロールバーは隠す（下に常時表示の自作バー .cards-scrollbar を出す / JSで生成・連動） */ scrollbar-width: none; scroll-padding-left: 0; /* 先頭カードをスクローラー左端に合わせる */ } #option-menu .option-menu__cards::-webkit-scrollbar { display: none; } #option-menu .option-menu__card { flex: 0 0 85%; max-width: 448px; scroll-snap-align: start; scroll-snap-stop: always; } /* 一番右（最後）のカードの右側にだけ余白を付ける（料金メニューと同仕様） */ #option-menu .option-menu__card:last-child { margin-right: 5.128vw; } } /* SP（780px以下） */ @media (max-width: 780px) { /* inner左右余白を before-after と同じ(0.641vw=5px)に */ #price .price__inner { padding: 0 0.641vw; } /* タイトルを before-after と同仕様に */ #price .price__subtitle { font-size: 4.103vw; /* 32px */ white-space: nowrap; } #price .price__title { gap: 2.051vw; } #price .price__title-jp { font-size: 10.256vw; /* 80px */ } #price .price__title-box { padding: 2.821vw 2.051vw; } #price .price__title-no { font-size: 7.692vw; /* 60px */ } #price .price__title-main { font-size: 7.692vw; /* 60px */ } /* カード横スクロールのbleedも 5px に合わせる（inner余白縮小に追従） */ #price .price__cards { gap: 3.846vw; margin-left: -0.641vw; margin-right: -0.641vw; padding-left: 0.641vw; padding-right: 0; } /* 右端は余白なし＝赤カードがギリギリまで見えるように */ #price .plans__card { flex: 0 0 80%; } /* オプションメニュー SP 値（Figma 780設計の vw 比例：60/50/60） */ #option-menu .option-menu__title .option-menu__jp { font-size: 7.692vw; /* 60 */ } #option-menu .option-menu__title .option-menu__no { font-size: 6.410vw; /* 50 */ } #option-menu .option-menu__title .option-menu__main { font-size: 7.692vw; /* 60 */ } /* 料金メニューと左右余白を揃える：inner を 40px(初期値) → 0.641vw に、カードのはみ出しも料金側と同値に */ #option-menu .option-menu__inner { padding: 0 0.641vw; } #option-menu .option-menu__cards { gap: 3.846vw; margin-left: -0.641vw; margin-right: -0.641vw; padding-left: 0.641vw; padding-right: 0; scroll-padding-left: 0; } /* 上の料金カードと横幅を揃える（80vw / 上限448px）。inner余白が広い分%だと小さくなるため絶対vw指定 */ #option-menu .option-menu__card { flex: 0 0 69vw; } /* 料金メニューに合わせて左余白5.128vw・上8vw。右paddingは料金メニュー同様0に。下は次セクションとの間隔で10vw */ #option-menu { padding: 8vw 0 10vw 5.128vw; } /* 8つの部位から自由に選べる SP 値（Figma 780設計の vw 比例） */ #parts-choice .parts-choice__inner { padding: 0 5.128vw; /* 40 */ } #parts-choice .parts-choice__head { padding: 0 0 6.410vw; /* 50 */ } #parts-choice .parts-choice__lead-num { font-size: 8.974vw; /* 70 */ } #parts-choice .parts-choice__lead-suffix { font-size: 6.410vw; /* 50 */ } #parts-choice .parts-choice__title { font-size: 8.974vw; /* 70 */ } /* チップ：2段×4列 / 各列は max-content（文字数に応じて可変） */ #parts-choice .parts-choice__chips { gap: 1.282vw; /* 10 */ padding: 0 0 6.410vw; /* 50 */ } #parts-choice .parts-choice__chip { min-width: 0; padding: 2.564vw; /* 20 */ font-size: 5.128vw; /* 40 */ } /* バッジ */ #parts-choice .parts-choice__badges { gap: 2.564vw; /* 20 */ padding: 0 0 7.692vw; /* 60 */ } #parts-choice .parts-choice__badge { gap: 1.282vw; /* 10 */ padding: 2.564vw 3.846vw; /* 20, 30 */ } #parts-choice .parts-choice__badge-num { font-size: 7.692vw; /* 60 */ } #parts-choice .parts-choice__badge-label { font-size: 5.128vw; /* 40 */ } #parts-choice .parts-choice__or { font-size: 4.322vw; /* 33.71 */ } /* 5カード（SP は 884×493 の Figma 構成 / inner padding を打ち消して画面端ギリギリまで使う） */ #parts-choice .parts-choice__styles { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* カード幅:高さ比(≈0.614)に画像比(≈0.934)を合わせ、上下とも切れないコンテナ比に */ aspect-ratio: 61 / 40; } /* カード上端（赤いタイトル帯）が cover で切れないよう上基準でトリミング */ #parts-choice .parts-choice__style-img { object-position: top center; } #parts-choice .parts-choice__style--side-left { left: -9%; top: 9.94%; width: 49.4%; height: 80.32%; } #parts-choice .parts-choice__style--mid-left { left: 3.3%; top: 5.48%; width: 54.7%; height: 89.05%; } #parts-choice .parts-choice__style--center { left: 19.3%; top: 0; width: 61.4%; height: 100%; } #parts-choice .parts-choice__style--mid-right { left: 42%; top: 5.48%; width: 54.7%; height: 89.05%; } #parts-choice .parts-choice__style--side-right { left: 59.6%; top: 9.94%; width: 49.4%; height: 80.32%; } /* ナビゲーションボタン（SP）：画面端ギリギリ寄りに */ #parts-choice .parts-choice__nav { width: 11.282vw; /* ~88 */ height: 11.282vw; border-width: 1.5px; } #parts-choice .parts-choice__nav--prev { left: 1.282vw; /* 10 */ } #parts-choice .parts-choice__nav--next { right: 1.282vw; } #parts-choice .parts-choice__nav-icon { width: 5.128vw; height: 5.128vw; } /* ページネーションドット（SP） */ #parts-choice .parts-choice__dots { gap: 1.282vw; /* 10 */ padding: 5.128vw 0 0; /* 40 */ } #parts-choice .parts-choice__dot { width: 1.026vw; /* 8 */ height: 1.026vw; } /* キャプション */ #parts-choice .parts-choice__captions { gap: 2.051vw; /* 16 */ padding: 5.128vw 0 0; /* 40 */ } #parts-choice .parts-choice__caption-note { font-size: 2.308vw; /* 18 */ } #parts-choice .parts-choice__caption-desc { font-size: 2.308vw; /* 18 */ } } /* 5. お得な各種優待プラン（Figma 190:53940） */ #discount { position: relative; width: 100%; padding: 0 60px 180px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #discount .discount__inner { max-width: 1120px; margin: 0 auto; } #discount .discount__head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 80px; } #discount .discount__lead { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.4; color: #FFFFFF; } #discount .discount__title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 48px; line-height: 1.4; color: #FFFFFF; text-align: center; } /* 4枚カード（学生 / のりかえ / お友だち紹介 / ペア） */ #discount .discount__cards { display: flex; justify-content: center; gap: 20px; padding: 0 0 80px; } #discount .discount__card { position: relative; flex: 0 1 240px; aspect-ratio: 240 / 216; margin: 0; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); background: #1a1a1a; } #discount .discount__card-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5) brightness(0.75); transform: scale(1); transition: filter 0.5s ease, transform 0.5s ease; } #discount .discount__card:hover .discount__card-img, #discount .discount__card:active .discount__card-img { filter: saturate(1.2) brightness(1); transform: scale(1.1); } #discount .discount__card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; background: #FFFFFF; clip-path: polygon(100% 0, 100% 100%, 0 100%); z-index: 1; pointer-events: none; } #discount .discount__card-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 26px; line-height: 1.3; color: #FFFFFF; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); z-index: 2; } /* カード全面オーバーレイリンク（クリックで遷移） */ #discount .discount__card-link { position: absolute; inset: 0; z-index: 3; cursor: pointer; } /* お友だち紹介プラン */ #discount .discount__card--accent .discount__card-label { color: #FFFFFF; } /* CTA（赤の予約ボタン） */ #discount .discount__cta-wrap, #menu .discount__cta-wrap { display: flex; justify-content: center; } #discount .discount__cta, #menu .discount__cta, #popular .discount__cta, .sp-cta .discount__cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 15px; width: 525px; height: 114px; box-sizing: border-box; border-radius: 999px; background: linear-gradient(0deg, #BB0001 0%, #FF0001 100%); color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 31.5px; line-height: 1.2; 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); transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.3s ease; } #discount .discount__cta:hover, #menu .discount__cta:hover, #popular .discount__cta:hover, #discount .discount__cta:focus-visible, #menu .discount__cta:focus-visible, #popular .discount__cta:focus-visible, #discount .discount__cta:active, #menu .discount__cta:active, #popular .discount__cta:active, .sp-cta .discount__cta:hover, .sp-cta .discount__cta:focus-visible, .sp-cta .discount__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); } /* キラッと光るスイープ（TOPページのCTAと揃える） */ #discount .discount__cta::before, #menu .discount__cta::before, #popular .discount__cta::before, .sp-cta .discount__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(.4, 0, .2, 1); pointer-events: none; } #discount .discount__cta:hover::before, #menu .discount__cta:hover::before, #popular .discount__cta:hover::before, #discount .discount__cta:focus-visible::before, #menu .discount__cta:focus-visible::before, #popular .discount__cta:focus-visible::before, #discount .discount__cta:active::before, #menu .discount__cta:active::before, #popular .discount__cta:active::before, .sp-cta .discount__cta:hover::before, .sp-cta .discount__cta:focus-visible::before, .sp-cta .discount__cta:active::before { left: 125%; } #discount .discount__cta-text, #menu .discount__cta-text, #popular .discount__cta-text, .sp-cta .discount__cta-text { letter-spacing: -0.06em; } #discount .discount__cta-icon, #menu .discount__cta-icon, #popular .discount__cta-icon, .sp-cta .discount__cta-icon { display: inline-block; flex: none; width: 0; height: 0; border-top: 13px solid transparent; border-bottom: 13px solid transparent; border-left: 14px solid #FFFFFF; } /* タブレット～狭PC（1050px以下） */ @media (max-width: 1050px) { #discount { padding: 90px 40px 120px; } #discount .discount__head { padding: 0 0 56px; } #discount .discount__lead { font-size: 28px; } #discount .discount__title { font-size: 40px; } #discount .discount__cards { gap: 14px; padding: 0 0 56px; flex-wrap: wrap; } #discount .discount__card { flex: 0 1 calc(50% - 7px); aspect-ratio: 240 / 216; } #discount .discount__card-label { font-size: 22px; } #discount .discount__cta, #menu .discount__cta, #popular .discount__cta, .sp-cta .discount__cta { min-width: 0; width: 100%; max-width: 360px; height: auto; font-size: 20px; padding: 20px 32px; } } /* SP（780px以下 / 780設計幅基準で vw 比例） */ @media (max-width: 780px) { #discount { padding: 11.538vw 5.128vw 0; /* 90 / 40 / 下:CTA〜黒帯の間隔 */ } #discount .discount__head { padding: 0 0 7.692vw; /* 60 */ gap: 1.026vw; } #discount .discount__lead { font-size: 4.615vw; /* 36 */ } #discount .discount__title { font-size: 6.154vw; /* 48 */ } #discount .discount__cards { gap: 2.564vw; /* 20 */ padding: 0 0 7.692vw; /* 60 */ } #discount .discount__card { flex: 0 1 calc(50% - 1.282vw); } #discount .discount__card::after { width: 3.59vw; height: 3.59vw; /* 28 */ } #discount .discount__card-label { font-size: 5.128vw; text-shadow: none; } /* サイト内の赤CTAボタン SP共通仕様：白いガウス部分のCTAボタンと同デザインに統一。 ※フッター上バナー(#popular .popular__banner-cta)は専用ルールで上書きされるため対象外 */ #discount .discount__cta, #menu .discount__cta, #popular .discount__cta, .sp-cta .discount__cta { min-width: 0; width: 66vw; max-width: none; height: 13.818vw; padding: 0; font-size: 3.818vw; /* 22.91 */ gap: 2vw; box-sizing: border-box; } #discount .discount__cta-icon, #menu .discount__cta-icon, #popular .discount__cta-icon, .sp-cta .discount__cta-icon { width: 0; height: 0; border-top: 1.167vw solid transparent; border-bottom: 1.167vw solid transparent; border-left: 1.667vw solid #FFFFFF; } /* 字間も白いガウスCTAに合わせる（バナーは専用ルールで -0.06em のまま保護） */ #discount .discount__cta-text, #menu .discount__cta-text, #popular .discount__cta-text { letter-spacing: -0.03em; } } /* セクション間ディバイダー（スクロール帯）— 帯.png のデザイン */ /* 外側：セクション背景と一体化（fixed背景） */ .brand-divider { position: relative; width: 100%; height: 350px; margin: 0; overflow: hidden; pointer-events: none; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; } /* 内側：回転した黒い帯（画面端から端まで流す / 白線は帯の内側、黒が白線よりはみ出す） */ .brand-divider__band { position: absolute; left: 0%; top: 50%; width: 100%; padding: 24px 0; box-sizing: border-box; background: #000000; transform: translateY(-50%) rotate(-6deg); transform-origin: center center; } .brand-divider__band::before, .brand-divider__band::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #FFFFFF; } .brand-divider__band::before { top: 6px; } .brand-divider__band::after { bottom: 6px; } .brand-divider__track { display: inline-block; white-space: nowrap; } .brand-divider__text { display: inline-block; 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); } @keyframes brandDividerScroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .brand-divider__track { animation: none; } } /* 6. REASON（選ばれる理由）/ Figma 268:75852 縦長セクションのため、縦長比率の background_sp.jpg を背景に使用 */ #reason { position: relative; width: 100%; margin-top: -50px; padding: 0 40px 140px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; overflow: hidden; } /* 装飾：煙2.png をセクション右上付近に配置 */ #reason .reason__smoke { position: absolute; top: 0; right: 10%; width: auto; height: auto; max-width: 85%; max-height: 130%; object-fit: contain; pointer-events: none; z-index: 0; } #reason .reason__inner { position: relative; z-index: 1; max-width: 1120px; } /* 見出し（REASON / エミナルクリニックメンズの / [ヒゲ・顔脱毛]が選ばれる理由） */ #reason .reason__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 0 0 100px; } #reason .reason__h2 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #FFFFFF; } #reason .reason__sub { margin-top: -12px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; color: #A4A4A4; } #reason .reason__title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.4; color: #FFFFFF; } #reason .reason__title-box { display: inline-flex; align-items: center; justify-content: center; border: none; padding: 0; box-sizing: border-box; } #reason .reason__title-jp { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 52px; line-height: 1; color: #FFFFFF; } #reason .reason__title-jp .reason__ts51 { letter-spacing: -0.02em; } #reason .reason__title-jp .reason__ts52 { letter-spacing: -0.18em; } #reason .reason__title-suffix { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 40px; line-height: 1.4; color: #FFFFFF; } /* h2 タイトルアニメーション delay（6文字分） */ #reason .reason__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #reason .reason__h2.is-animated span:nth-child(2) { transition-delay: 60ms; } #reason .reason__h2.is-animated span:nth-child(3) { transition-delay: 120ms; } #reason .reason__h2.is-animated span:nth-child(4) { transition-delay: 180ms; } #reason .reason__h2.is-animated span:nth-child(5) { transition-delay: 240ms; } #reason .reason__h2.is-animated span:nth-child(6) { transition-delay: 300ms; } /* 理由カード（01〜04 を縦に並べ、左右レイアウトは modifier で反転） */ #reason .reason__cards { display: flex; flex-direction: column; gap: 80px; max-width: 1120px; margin: 0 auto; } #reason .reason__card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; position: relative; } /* 装飾：02カード下に煙を配置 */ #reason .reason__card-smoke { position: absolute; left: 0; bottom: -280px; width: auto; height: auto; max-width: 50%; max-height: 360px; object-fit: contain; pointer-events: none; z-index: 0; } #reason .reason__card--text-left .reason__card-content { order: 0; } #reason .reason__card--text-left .reason__card-visual { order: 1; } #reason .reason__card--image-left .reason__card-visual { order: 0; } #reason .reason__card--image-left .reason__card-content { order: 1; } /* カード左右共通 */ #reason .reason__card-content { display: flex; flex-direction: column; gap: 0; } #reason .reason__card-head { display: flex; align-items: flex-end; gap: 16px; } #reason .reason__card-num { width: auto; height: 112px; flex-shrink: 0; filter: saturate(2) brightness(0.72); } #reason .reason__card-h3 { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.3; color: #FFFFFF; margin: 0; } #reason .reason__card-p { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.9; color: #FFFFFF; margin-top: 50px; } #reason .reason__card-link { display: inline-flex; align-self: center; color: #FFFFFF; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; transition: opacity .2s ease; margin-top: 40px; } #reason .reason__card-link:hover { opacity: .7; } /* カードビジュアル（PNGに装飾済みなのでラッパーは枠なし） */ #reason .reason__card-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; padding: 0; } #reason .reason__card-visual-img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 8px; } #reason .reason__card-visual--stat { background: rgba(255, 255, 255, 0.10); padding: 32px 24px; border-radius: 12px; } #reason .reason__card-visual--stat .reason__card-visual-img { border-radius: 0; } #reason .reason__card-note { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 12.7px; line-height: 1.7; color: #FFFFFF; text-align: left; margin: 0; align-self: stretch; text-align: center; } /* 施術回数・期間 比較チャート（画像→HTML/CSS化 / Frame-628573・ダーク版） */ #reason .reason-chart { width: 100%; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 26px 24px 30px; box-sizing: border-box; } #reason .reason-chart__heads { display: grid; grid-template-columns: 14% 0.85fr 1.15fr; column-gap: 3%; align-items: end; margin: 0 0 12px; } #reason .reason-chart__head { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 16px; line-height: 1.3; text-align: center; } #reason .reason-chart__head--general { color: #FFFFFF; } #reason .reason-chart__head--eminal { color: #E60012; } #reason .reason-chart__body { display: grid; grid-template-columns: 14% 0.85fr 1.15fr; column-gap: 3%; aspect-ratio: 478 / 600; } /* 月スケール（左） */ #reason .reason-chart__months { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } #reason .reason-chart__months li { flex: 1; display: flex; align-items: center; justify-content: center; border-top: 2px solid transparent; background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.45) 0 3px, transparent 3px 6px); background-size: 100% 2px; background-position: top; background-repeat: no-repeat; color: #8a8a8a; font-family: "Noto Sans JP", sans-serif; } #reason .reason-chart__months li:first-child { background-image: none; } #reason .reason-chart__month-label { display: inline-flex; align-items: baseline; gap: 2px; } #reason .reason-chart__month-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 22px; line-height: 1; } #reason .reason-chart__month-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 13px; line-height: 1; } /* 共通バー */ #reason .reason-chart__bar { display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-family: "Anton", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 28px; border-radius: 2px; } #reason .reason-chart__bar-num { margin-right: 0.15em; } #reason .reason-chart__bar-unit { display: inline-block; transform: translateY(-1px); } /* 一般的には（2ヵ月=1回 / 黒→グレーの濃淡 ×5） */ #reason .reason-chart__general { display: flex; flex-direction: column; gap: 8px; } #reason .reason-chart__general .reason-chart__bar { flex: 1; } #reason .reason-chart__bar--g1 { background: #1c1c1c; } #reason .reason-chart__bar--g2 { background: #282828; } #reason .reason-chart__bar--g3 { background: #363636; } #reason .reason-chart__bar--g4 { background: #474747; } #reason .reason-chart__bar--g5 { background: #585858; } /* エミナル（1ヵ月=1回 / 暗赤→鮮赤 ×5 + 結果） */ #reason .reason-chart__eminal { display: flex; flex-direction: column; } #reason .reason-chart__eminal-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; } #reason .reason-chart__eminal-bars .reason-chart__bar { flex: 1; font-size: 28px; font-weight: 900; } #reason .reason-chart__bar--e1 { background: #401619; } #reason .reason-chart__bar--e2 { background: #5e1819; } #reason .reason-chart__bar--e3 { background: #9c1e1e; } #reason .reason-chart__bar--e4 { background: #c11f1f; } #reason .reason-chart__bar--e5 { background: #E60012; } /* 結果（最短1ヵ月に1回通える！） */ #reason .reason-chart__result { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } #reason .reason-chart__chevron { width: 75px; height: 31px; margin: -75px 0 8px; display: block; } #reason .reason-chart__badge { padding: 2px 12px; border: 1.5px solid #FFFFFF; border-radius: 3px; background: transparent; color: #FFFFFF; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 23px; line-height: 1.4; } #reason .reason-chart__highlight { margin: 0; display: flex; align-items: baseline; color: #E60012; font-family: "Noto Sans JP", sans-serif; font-weight: 900; border-bottom: 2.5px solid #E60012; padding-bottom: 3px; } #reason .reason-chart__hl-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 46px; line-height: 1; margin-right: 0.06em; } #reason .reason-chart__hl-unit { font-family: "Noto Sans JP", sans-serif; font-size: 37px; line-height: 1; transform: translateY(-1px); } #reason .reason-chart__hl-ni { font-family: "Noto Sans JP", sans-serif; font-size: 27px; line-height: 1; color: #E60012; transform: translateY(-1px); } #reason .reason-chart__result-text { margin: 0; color: #FFFFFF; font-family: "Noto Sans JP", sans-serif; font-weight: 800; font-size: 29px; line-height: 1.2; } /* 比較チャートカード - タブレット（781〜1050px: 表を縮めず、タイトルの下に縦積み・幅は維持して中央寄せ） */ @media (min-width: 781px) and (max-width: 1050px) { #reason .reason__card--chart { grid-template-columns: 1fr; gap: 36px; } #reason .reason__card--chart .reason-chart { max-width: 528px; } } /* 「選ばれる理由を見る」CTA / Figma 350×80px / 角丸100px / 白枠2px / 右側に二重シェブロン */ #reason .reason__cta-wrap { display: flex; justify-content: center; padding: 100px 0 0; } #reason .reason__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 350px; height: 80px; padding: 0 24px; border: 2px solid #FFFFFF; border-radius: 100px; background: transparent; color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; } /* ホバー時の色変化アニメーションをオフ（TOPページに合わせる。再度有効にする場合はコメントを外す） */ /* #reason .reason__cta:hover { background: #FFFFFF; color: #000000; transform: translateY(-2px); } */ /* #reason .reason__cta:active { transform: translateY(0); } */ #reason .reason__cta-text { letter-spacing: 0; } #reason .reason__cta-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } #reason .reason__cta-icon svg { width: 100%; height: 100%; display: block; } /* 8. 契約料金以外追加費用なし / Figma 268:76038 */ #no-extra { position: relative; width: 100%; padding: 0 40px 140px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: visible; } #no-extra .no-extra__inner { display: flex; flex-direction: column; align-items: center; } /* 上段：タイトル(左) + 9項目グリッド画像(右) の2列、上端揃え */ #no-extra .no-extra__top { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 60px; width: 100%; max-width: 1200px; padding: 0 0 40px; } /* 見出し（エミナルクリニックメンズは / 契約料金以外 / 追加費用なし） */ #no-extra .no-extra__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } /* 装飾：煙2.png をテキスト下に配置 */ #no-extra .no-extra__smoke { position: absolute; left: 0; bottom: -260px; width: auto; height: auto; max-width: 70%; max-height: 360px; object-fit: contain; pointer-events: none; z-index: 0; } #no-extra .no-extra__sub { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; color: #A4A4A4; } #no-extra .no-extra__title { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.2; } #no-extra .no-extra__title-line { display: inline-block; font-size: 40px; line-height: 1.2; color: #FFFFFF; } #no-extra .no-extra__title-line--accent { font-size: 60px; background: var(--gradation-red, linear-gradient(0deg, #BB0001 0%, #FF0001 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #no-extra .no-extra__lead { margin: 18px 0 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.9; color: #FFFFFF; text-align: left; align-self: flex-start; } /* 右列：画像 + 注釈 */ #no-extra .no-extra__media { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; } /* 学生プランバナー */ #no-extra .no-extra__banner { display: block; width: 100%; max-width: 500px; margin: 60px 0 0; transition: transform 0.25s ease, box-shadow 0.25s ease; } #no-extra .no-extra__banner:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); } #no-extra .no-extra__banner-img { width: 100%; height: auto; display: block; border-radius: 10px; } /* のりかえプラン カード / Figma 268:76362 */ #no-extra .switch-plan { position: relative; display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 1120px; margin: 80px auto 0; padding: 50px 60px; background: rgba(0, 0, 0, 0.30); border: 2px solid #FFFFFF; border-radius: 10px; box-sizing: border-box; } /* 装飾：のりかえプランカード右下に煙を配置 */ #no-extra .switch-plan__smoke { position: absolute; right: -110px; bottom: -330px; width: auto; height: auto; max-width: 54%; max-height: 500px; object-fit: contain; pointer-events: none; z-index: 2; } #no-extra .switch-plan__head { display: flex; flex-direction: column; align-items: center; gap: 18px; } #no-extra .switch-plan__title { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.2; } #no-extra .switch-plan__title-accent { font-size: 56px; background: linear-gradient(180deg, #FF3333 0%, #BB0001 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #no-extra .switch-plan__title-sub { font-size: 40px; color: #FFFFFF; } #no-extra .switch-plan__divider { display: block; width: 100%; max-width: 880px; height: 2px; background: #A4A4A4; } #no-extra .switch-plan__lead { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22px; line-height: 1.6; color: #FFFFFF; text-align: center; } #no-extra .switch-plan__lead-em { color: #FFFFFF; } #no-extra .switch-plan__lead-br-sp { display: none; } /* 4特徴グリッド（2列×2段、横長カード） */ #no-extra .switch-plan__features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; } #no-extra .switch-plan__feature { display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 22px 32px 22px 60px; background: rgba(255, 255, 255, 0.10); border-radius: 8px; box-sizing: border-box; } #no-extra .switch-plan__feature-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; } #no-extra .switch-plan__feature-text { flex: 1; } #no-extra .switch-plan__feature-icon-img { width: 100%; height: 100%; object-fit: contain; } #no-extra .switch-plan__feature-text { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 17px; line-height: 1.6; color: #FFFFFF; text-align: left; } #no-extra .switch-plan__feature-strong { display: inline; font-weight: 700; font-size: 17px; color: #FFFFFF; } #no-extra .switch-plan__feature-underline { text-decoration: underline; text-decoration-color: #FF0001; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-skip-ink: none; } /* 「その他の各種優待プランはこちら」CTA（reason CTA と同仕様：350×80 / 角丸100 / 白枠2 / 右三角） */ #no-extra .no-extra__cta-wrap { display: flex; justify-content: center; width: 100%; margin: 60px 0 0; } #no-extra .no-extra__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 380px; height: 80px; padding: 0 32px; border: 2px solid #FFFFFF; border-radius: 100px; background: transparent; color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.5; } /* ホバー時の色変化アニメーションをオフ（TOPページに合わせる。再度有効にする場合はコメントを外す） */ /* #no-extra .no-extra__cta:hover { background: #FFFFFF; color: #000000; transform: translateY(-2px); } */ /* #no-extra .no-extra__cta:active { transform: translateY(0); } */ #no-extra .no-extra__cta-text { letter-spacing: 0; } #no-extra .no-extra__cta-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } #no-extra .no-extra__cta-icon svg { width: 100%; height: 100%; display: block; } /* 9. 結果にこだわるクリスタルプロ / Figma 268:76455 */ #machine { position: relative; width: 100%; padding: 0px 40px 40px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: visible; } /* 装飾：黒帯画像 - 帯の太さ（高さ）は固定 / 横幅は viewport いっぱい（はみ出しOK） */ #machine .machine__bg-band { position: absolute; top: -160px; left: 0; width: 100vw; height: 1060px; display: block; object-fit: fill; pointer-events: none; z-index: 0; } #machine .machine__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0; } /* イントロ（見出し + 機器写真：中央寄せで隣接） */ #machine .machine__intro { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto; width: 100%; } #machine .machine__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } #machine .machine__sub { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.5; color: #FFFFFF; text-align: center; } #machine .machine__lead { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.4; background: linear-gradient(180deg, #FF3333 0%, #BB0001 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-align: center; } #machine .machine__brand { margin: 12px 0 0; } #machine .machine__brand-box { display: inline-flex; align-items: center; justify-content: center; padding: 18px 36px; border: 2px solid #FFFFFF; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 64px; line-height: 1; color: #FFFFFF; } #machine .machine__photo { margin: 0; display: flex; justify-content: center; transform: translateY(40px); } #machine .machine__photo-img { width: 100%; max-width: 360px; height: auto; display: block; } /* POINT カード（中央列レイアウト：ラベル → タイトル → 説明 → 画像 → 補足カード） */ #machine .machine__point { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 0 100px; box-sizing: border-box; } /* POINT1 を上にずらして機械画像に被せる */ #machine .machine__point:first-of-type { margin-top: -150px; position: relative; z-index: 1; } /* 最後のPOINT（動画）の下余白を詰める（次セクション「はじめての方へ」との間隔短縮） */ #machine .machine__point:last-child { padding-bottom: 40px; } /* POINT1タイトルのSP専用改行（PCでは非表示） */ #machine .machine__point-title-br-sp { display: none; } /* POINT ラベル（Anton, "POIN T" 48px + 数字 80px, 白, 背景なし） */ #machine .machine__point-head { display: flex; flex-direction: column; align-items: center; gap: 0; } #machine .machine__point-label, #machine .machine__point-label2 { display: inline-flex; align-items: flex-end; gap: 4px; margin: 0; font-family: "Anton", sans-serif; font-style: italic; font-weight: 400; font-size: 60px; line-height: 1; letter-spacing: 0.04em; color: #FFFFFF; } #machine .machine__point-label2 { margin-bottom: 24px; } #machine .machine__point-label-num { font-size: 100px; line-height: 1; } /* POINT タイトル：56px Bold、数字「3」だけ 80px グラデ、強調部分のみグラデ */ #machine .machine__point-title { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 56px; line-height: 1.4; color: #FFFFFF; text-align: center; text-shadow: 0 -8px 40px rgba(0, 0, 0, 0.8); } #machine .machine__point-title-num { font-size: 80px; line-height: 1; background: linear-gradient(0deg, #BB0001 0%, #FF0001 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #machine .machine__point-title-accent { background: linear-gradient(0deg, #BB0001 0%, #FF0001 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #machine .machine__point-title-particle { color: #FFFFFF; } #machine .machine__point-title-rest { color: #FFFFFF; } /* 説明文（POINT1: 約715px、POINT2: 約894px） */ #machine .machine__point-desc { margin: 0; max-width: 894px; width: 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.9; color: #FFFFFF; text-align: center; } /* 画像 */ #machine .machine__point-visual { margin: 50px 0 0; display: flex; align-items: center; justify-content: center; max-width: 500px; width: 100%; } #machine .machine__point-visual-img { width: 100%; height: auto; display: block; border-radius: 7px; } /* POINT1 用：画像 + 波長3種カードの2列レイアウト（高さ揃え） */ #machine .machine__point-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 40px; width: 100%; max-width: 1040px; margin: 12px 0 0; } #machine .machine__point-grid .machine__point-visual { margin: 0; max-width: 100%; position: relative; } #machine .machine__point-grid .machine__point-visual-img { width: 100%; height: 100%; object-fit: contain; } #machine .machine__point-visual--wavelengths .machine__point-visual-smoke { position: absolute; left: -180px; bottom: -180px; width: 460px; height: auto; max-width: none; object-fit: contain; pointer-events: none; z-index: 0; } /* 波長3種カード（POINT1 グリッド右列で縦積み・3カード等分割で画像高さに揃える） */ #machine .machine__wavelengths { display: flex; flex-direction: column; gap: 10px; height: 100%; margin: 0; padding: 0; list-style: none; } #machine .machine__wavelength { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 100%; max-width: 460px; padding: 17px 40px; color: #FFFFFF; box-sizing: border-box; } #machine .machine__wavelength--alex { background: #e75c54; } #machine .machine__wavelength--diode { background: #e23935; } #machine .machine__wavelength--yag { background: #e00d0d; } #machine .machine__wavelength-name { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.6; color: #FFFFFF; } #machine .machine__wavelength-nm { display: inline-block; font-weight: 700; font-size: 16px; } #machine .machine__wavelength-text { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 13px; line-height: 1.6; color: #FFFFFF; } /* 10. ヒゲ医療脱毛がはじめての方へ / Figma 268:76572 */ #beginner { position: relative; width: 100%; padding: 60px 40px 140px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #beginner .beginner__inner { display: flex; flex-direction: column; align-items: center; } /* 見出し（ヒゲ医療脱毛が / はじめての方へ）+ 黒帯のサブ */ #beginner .beginner__head { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 0 0 60px; } #beginner .beginner__title { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px; margin: 0; color: #FFFFFF; } #beginner .beginner__title-row { display: inline-flex; align-items: baseline; gap: 4px; } #beginner .beginner__title-main { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 56px; line-height: 1.3; color: #FFFFFF; } #beginner .beginner__title-sub { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.3; color: #FFFFFF; } #beginner .beginner__banner { margin: 0; padding: 18px 48px; background: #000000; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.4; color: #FFFFFF; text-align: center; width: 100vw; max-width: 100vw; box-sizing: border-box; } /* 3カード（取り組み）：1列3段、各カード内は画像左 + テキスト右の2列 */ #beginner .beginner__cards { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: 1120px; margin: 0; padding: 0; list-style: none; } #beginner .beginner__card { display: grid; grid-template-columns: 420px 1fr; align-items: start; gap: 48px; padding: 0; background: transparent; box-sizing: border-box; } #beginner .beginner__card-visual { margin: 0; width: 420px; height: 260px; overflow: hidden; flex-shrink: 0; } #beginner .beginner__card-img { width: 100%; height: 100%; display: block; object-fit: cover; } #beginner .beginner__card-body { display: flex; flex-direction: column; gap: 14px; padding: 0; } #beginner .beginner__card-head { display: flex; align-items: flex-end; gap: 20px; } #beginner .beginner__card-num { width: auto; height: 88px; flex-shrink: 0; filter: saturate(2) brightness(0.72); } #beginner .beginner__card-title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4; color: #FFFFFF; } #beginner .beginner__card-mark { color: #A4A4A4; font-size: 16px; } #beginner .beginner__card-divider { display: block; width: 100%; height: 2px; background: #A4A4A4; } #beginner .beginner__card-text { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.8; color: #FFFFFF; } #beginner .beginner__card-note { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; color: #A4A4A4; } /* お支払い方法のご案内 */ #beginner .beginner__payment { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 1120px; margin: 100px 0 0; } #beginner .beginner__payment-title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 32px; line-height: 1.4; color: #FFFFFF; text-align: center; } #beginner .beginner__payment-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; max-width: 1108px; margin: 0; padding: 0; list-style: none; } /* お支払いカード（画像→HTML/CSS化）：ダークグレーの正方形カード */ #beginner .beginner__payment-item { display: flex; flex-direction: column; align-items: center; aspect-ratio: 1 / 1; margin: 0; background: #646464; border-radius: 10px; box-sizing: border-box; text-align: center; transition: transform .25s ease; padding-block: 30px; max-width: 262px; width: 100%; } #beginner .beginner__payment-item:hover { transform: none; } /* ホバーの浮き上がりを無効化 */ #beginner .beginner__payment-name { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.3; color: #FFFFFF; } #beginner .beginner__payment-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin-top: 10px; gap: 14px; } /* アイコン（白線PNG） */ #beginner .beginner__payment-icon { display: block; width: auto; } #beginner .beginner__payment-icon--cash { width: 100%; max-width: 170px; height: auto; } #beginner .beginner__payment-icon--card { width: 42%; max-width: 92px; height: auto; } /* ブランドロゴ群（色付きPNG） */ #beginner .beginner__payment-brands { display: block; height: auto; } #beginner .beginner__payment-brands--debit { width: 54%; max-width: 120px; } #beginner .beginner__payment-brands--credit { width: 64%; max-width: 150px; } /* 医療ローン：テキストカード */ #beginner .beginner__payment-desc { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 16px; line-height: 1.7; color: #FFFFFF; } #beginner .beginner__payment-notes { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.6; color: #FFFFFF; } /* 旧 differences-2 placeholder（残置のため空） */ #differences-2 { display: none; } /* 11. section（装飾区切り：はじめての方へカードと同色のグレー線） */ .section-divider { display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; padding: 0 40px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; } .section-divider::before { content: ''; display: block; width: 100%; max-width: 1120px; height: 2px; background: #A4A4A4; } /* 12. Q&A / Figma 268:76678 */ #qa { position: relative; width: 100%; padding: 0 40px 140px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #qa .qa__smoke { position: absolute; top: 0; right: 0; width: auto; height: auto; max-width: 40%; max-height: 60%; object-fit: contain; pointer-events: none; z-index: 0; } #qa .qa__inner { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; max-width: 1120px; align-items: center; } /* 見出し（Q&A 白 + よくある質問 グレー / 左揃え） */ #qa .qa__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; padding-bottom: 60px; } #qa .qa__h2 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #FFFFFF; } #qa .qa__sub { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 24px; line-height: 1.4; color: #A4A4A4; } /* Q&A タイトル文字別アニメーション delay（"Q&A" 3文字） */ #qa .qa__h2.is-animated span:nth-child(1) { transition-delay: 0ms; } #qa .qa__h2.is-animated span:nth-child(2) { transition-delay: 80ms; } #qa .qa__h2.is-animated span:nth-child(3) { transition-delay: 160ms; } /* Q&A ボックス（黒60%+ブラー、padding 40px） */ #qa .qa__box { display: flex; flex-direction: column; width: 100%; max-width: 1040px; padding: 0 40px; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-sizing: border-box; } /* 各 Q&A アイテム（Q + A） — アイテム下に中央寄せの短い白線 */ #qa .qa__item { position: relative; } #qa .qa__item::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 100%; height: 1px; background: rgba(255, 255, 255, 0.30); } #qa .qa__item:last-of-type::after { display: none; } /* Q 行（button） mens-wp-top/style-wp.css と完全一致 */ #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; } /* +/− アイコン（縦バーが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); } /* A 行（アコーディオン） mens-wp-top/style-wp.css と完全一致 */ #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; } /* mens-wp-top/style-wp.css と完全一致 */ #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; } /* 開閉は mens-wp-top と同じく JS（[data-accordion] → .is-open）+ max-height で制御。 旧
/[open] ベースの display:none・スライド/フェードアニメは div 化に伴い削除。 */ /* 「全ての質問を見る」CTA（reason CTA と同仕様） */ #qa .qa__cta-wrap { display: flex; justify-content: center; width: 100%; margin: 60px 0 0; } #qa .qa__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 320px; height: 80px; padding: 0 32px; border: 2px solid #FFFFFF; border-radius: 100px; background: transparent; color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; } /* ホバー時の色変化アニメーションをオフ（TOPページに合わせる。再度有効にする場合はコメントを外す） */ /* #qa .qa__cta:hover { background: #FFFFFF; color: #000000; transform: translateY(-2px); } */ /* #qa .qa__cta:active { transform: translateY(0); } */ #qa .qa__cta-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } #qa .qa__cta-icon svg { width: 100%; height: 100%; display: block; } /* 14. CLINIC / Figma 177:39907 — TOP と同一 */ #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 .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .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(.4, 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(.4, 0, .2, 1), padding-top 0.5s cubic-bezier(.4, 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; } /* ======================================== CLINIC: タブレット・縮小PC（max-width: 1050px）でSPレイアウトに切替 — TOP と同一 ※ サイズは 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.410vw, 50px) min(2.564vw, 20px); font-size: min(3.590vw, 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(.4, 0, .2, 1), padding 0.5s cubic-bezier(.4, 0, .2, 1); } #clinic .clinic__area.is-open .clinic__area-body { max-height: 100vh; padding: 0 0 min(6.410vw, 50px); } #clinic .clinic__sublink { width: 100%; height: auto; padding: min(3.846vw, 30px) min(1.282vw, 10px); font-size: min(3.590vw, 28px); } } /* ======================================== CLINIC: 780以下は Figma実値（vw比例）で 1050 MQ の cap を上書き — TOP と同一 ======================================== */ @media (max-width: 780px) { #clinic .clinic__h2 { font-size: 17.949vw; } #clinic .clinic__h3 { font-size: 4.615vw; } } /* ======================================== clinic: 780以下は sublink を 2列グリッドに切替 — TOP と同一 ======================================== */ @media (max-width: 780px) { #clinic .clinic__area-body { grid-template-columns: repeat(2, 1fr); } } /* 15. 総院長挨拶 / Figma 268:76842 */ #greeting { position: relative; width: 100%; padding: 100px 40px 180px; box-sizing: border-box; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } #greeting .greeting__inner { display: flex; flex-direction: column; align-items: center; max-width: 1120px; } /* 見出し */ #greeting .greeting__title { margin: 0 0 50px; align-self: center; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.4; color: #FFFFFF; text-align: center; } /* 写真 + 挨拶文（横並び）/ Figma 268:76846 layout_95LBXZ */ #greeting .greeting__row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1120px; gap: 42px; margin: 0 0 100px; } /* 写真 + キャプション（名前・役職オーバーレイ）/ Figma 268:76847 Mask group 490x280 */ #greeting .greeting__photo { position: relative; margin: 0; width: 490px; height: 280px; flex-shrink: 0; } #greeting .greeting__photo-img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 8px; } #greeting .greeting__photo-caption { position: absolute; right: 49px; bottom: 41px; display: flex; flex-direction: column; align-items: flex-end; color: #FFFFFF; text-align: right; } #greeting .greeting__photo-group { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 11.2px; line-height: 1.5; } #greeting .greeting__photo-role { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 21px; line-height: 1.5; } #greeting .greeting__photo-name { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 35px; line-height: 1.5; margin-top: 6px; } /* 挨拶文 / Figma 268:76863 layout_GBJ8AV width 588 gap 20 */ #greeting .greeting__body { display: flex; flex-direction: column; gap: 20px; width: 588px; flex-shrink: 0; margin: 0; } #greeting .greeting__p { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #FFFFFF; } /* 経歴ボックス / Figma 268:76867 layout_9DYXTP width 588 padding 60 0 */ #greeting .greeting__profile { width: 588px; max-width: 100%; padding: 60px 50px; background-color: #646464; background-image: url('assets/img/career.png'); background-repeat: no-repeat; background-position: center; background-size: cover; background-blend-mode: multiply; border-radius: 10px; box-sizing: border-box; } #greeting .greeting__profile-head { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0 0 50px; } #greeting .greeting__profile-group { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 22px; line-height: 1.5; letter-spacing: -0.02em; color: #A4A4A4; text-align: center; } #greeting .greeting__profile-name { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 38px; line-height: 1.5; letter-spacing: -0.02em; color: #FFFFFF; text-align: center; } /* 経歴セクション / Figma 268:76871 layout_OLYDSY column gap 20 padding 0 0 80 */ #greeting .greeting__profile-section { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0 0 80px; } #greeting .greeting__profile-section-head { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; width: 100%; } #greeting .greeting__profile-label { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.5; letter-spacing: -0.02em; color: #FFFFFF; text-align: center; } #greeting .greeting__profile-divider { display: block; width: 100%; max-width: 509px; height: 1px; background: rgba(255, 255, 255, 0.40); } /* 経歴リスト / Figma 268:76874・268:76883 layout_6FNO09 row gap 20 / 内部 layout_WA778G column gap 10 */ #greeting .greeting__career { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 10px; margin: 0; } #greeting .greeting__career-row { display: contents; } #greeting .greeting__career-date { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #FFFFFF; white-space: nowrap; } #greeting .greeting__career-text { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #FFFFFF; } /* CTA「医師の詳細を見る」/ Figma layout_EO520E width 350 height 80 */ #greeting .greeting__cta-wrap { display: flex; justify-content: center; margin: 0; } #greeting .greeting__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 350px; height: 80px; padding: 0 32px; border: 2px solid #FFFFFF; border-radius: 100px; background: transparent; color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; } /* ホバー時の色変化アニメーションをオフ（TOPページに合わせる。再度有効にする場合はコメントを外す） */ /* #greeting .greeting__cta:hover { background: #FFFFFF; color: #000000; transform: translateY(-2px); } */ /* #greeting .greeting__cta:active { transform: translateY(0); } */ #greeting .greeting__cta-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } #greeting .greeting__cta-icon svg { width: 100%; height: 100%; display: block; } /* 16. ヒゲ・顔以外の脱毛メニュー / Figma 268:76891 */ #menu { position: relative; width: 100%; padding: 0 0 120px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } /* セクションタイトル / Figma 268:76892 layout_2WMLOQ */ #menu .menu__title { display: inline-flex; justify-content: center; align-items: flex-end; gap: 5px; margin: 0 0 50px; padding: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; color: #FFFFFF; line-height: 1.3; } #menu .menu__title-br-sp { display: none; } #menu .menu__title-main { font-size: 48px; line-height: 1.3; } #menu .menu__title-sub { font-size: 36px; line-height: 1.3; } /* グループ全体（全身脱毛・医療脱毛） */ #menu .menu-group { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 0 80px; } #menu .menu-group__cta-wrap { margin-top: 40px; } /* 黒バーヘッダー / Figma 268:76899 layout_W6G8CH */ #menu .menu-group__bar { width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px 0; background: #000000; } #menu .menu-group__bar-title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 28px; line-height: 1.5; letter-spacing: -0.02em; color: #FFFFFF; text-align: center; } /* カード一覧 / Figma 268:76901 layout_ZE0O1X */ #menu .menu-group__cards { display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 40px 0 20px; width: 100%; } /* === 全身脱毛｜蓄熱式 カード / Figma 268:76902 layout_I7ZEGN === */ #menu .menu-card { position: relative; display: grid; grid-template-columns: 226px 496px; column-gap: 20px; row-gap: 32px; justify-content: center; align-items: center; grid-template-areas: "image content" "image note"; width: 906px; min-height: 543px; padding: 60px 40px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px; backdrop-filter: blur(8.48px); -webkit-backdrop-filter: blur(8.48px); } /* カード左：イメージ */ #menu .menu-card__image { grid-area: image; width: 226px; height: 423px; display: flex; align-items: center; justify-content: center; align-self: center; } #menu .menu-card__image img { width: 100%; height: 100%; object-fit: contain; display: block; } /* カード右：コンテンツ / layout_B4KEJY width 496 gap 32 */ #menu .menu-card__content { grid-area: content; display: flex; flex-direction: column; gap: 32px; width: 496px; align-self: end; } #menu .menu-card__note { grid-area: note; align-self: start; } /* タイトル行 / layout_1VA7YD width 480 gap 16 row align-end */ #menu .menu-card__head { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; gap: 16px; width: 100%; } /* タイトル＋バッジ縦組 / layout_MAJS71 column gap 2.4 width 214.4 */ #menu .menu-card__title-block { display: flex; flex-direction: column; align-items: center; gap: 2.4px; width: 214.4px; } #menu .menu-card__title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 53.6px; line-height: 1.4; color: #FFFFFF; text-align: center; } #menu .menu-card__badge { display: inline-flex; justify-content: center; align-items: center; padding: 12px 16px; border: 1.36px solid #FFFFFF; border-radius: 99.2px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 22.4px; line-height: 1; color: #FFFFFF; } /* 5回 施術 表示 */ #menu .menu-card__count { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 108px; height: 108px; background: #FFFFFF; } #menu .menu-card__count-label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 27.2px; line-height: 1; color: #000000; } #menu .menu-card__count-times { display: flex; flex-direction: row; align-items: baseline; gap: 2px; } #menu .menu-card__count-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: #000000; } #menu .menu-card__count-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 37.6px; line-height: 1; color: #000000; } /* 区切り線 / Vector 15 (width 496 horizontal) */ #menu .menu-card__divider { width: 100%; height: 0; margin: 0; border: 0; border-top: 1.36px solid #FFFFFF; } /* 料金ブロック / layout_NV33ED column align-center gap 24 */ #menu .menu-card__prices { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; } /* 一括払 / layout_Q1CUZW row gap 12 */ #menu .menu-card__price { display: flex; flex-direction: row; align-items: stretch; gap: 12px; min-height: 86.4px; } #menu .menu-card__price-label { display: flex; align-items: center; justify-content: center; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22.4px; line-height: 1.1; color: #FFFFFF; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; } #menu .menu-card__price-value { display: flex; flex-direction: row; align-items: center; gap: 8px; } #menu .menu-card__price-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 86.4px; line-height: 1; letter-spacing: 0.02em; color: #FFFFFF; display: flex; align-items: center; } #menu .menu-card__price-unit { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } #menu .menu-card__price-tax { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 22.4px; line-height: 1.2; color: #FFFFFF; } #menu .menu-card__price-yen { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 54.4px; line-height: 1; color: #FFFFFF; } /* 月々 / layout_XWF0YR row centered width 496 padding 10.4 8 gap 8, bg white/20% */ #menu .menu-card__price--monthly { width: 100%; box-sizing: border-box; justify-content: center; align-items: center; gap: 8px; padding: 10.4px 8px; min-height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 4px; } #menu .menu-card__price--monthly .menu-card__price-label { font-size: 17.6px; } #menu .menu-card__price--monthly .menu-card__price-value { gap: 4px; } #menu .menu-card__price-num--small { font-size: 44.8px; } #menu .menu-card__price-yen--small { font-size: 25.6px; } #menu .menu-card__price-tax--small { font-size: 13.6px; } #menu .menu-card__price-suffix { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 19.2px; line-height: 1.4; color: #FFFFFF; align-self: center; } /* 注釈テキスト */ #menu .menu-card__note { margin: 0; width: 100%; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: -0.02em; color: #FFFFFF; text-align: justify; } /* === カード2: セレクト全身脱毛｜10部位｜蓄熱式 / Figma 268:76903 layout_N075H7 (906x700) === */ #menu .menu-card--select { min-height: 700px; padding: 40px; grid-template-columns: 310px 496px; grid-template-areas: "image content" "image note"; row-gap: 8px; } /* 部位選択イラスト（左カラム） / Figma layout_QCL9LV column gap 12.8 padding-top 12.8 width 310 */ #menu .menu-card__image--select { width: 310px; height: auto; flex-direction: column; gap: 12.8px; padding-top: 12.8px; align-self: start; justify-self: start; align-items: center; } #menu .menu-card__image--select img { width: 100%; height: auto; } #menu .menu-card__image-caption { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 15.36px; line-height: 1.4; color: #FFFFFF; text-align: center; } #menu .menu-card__image-note { margin: 0 0 0 auto; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 10.24px; line-height: 1.5; color: #FFFFFF; text-align: right; } /* 右カラム コンテンツ：layout_T8Z80C width 496 gap 16 */ #menu .menu-card--select .menu-card__content { width: 496px; gap: 16px; align-self: end; } /* 推奨バッジ / layout_7GXF90 width 480 height 42.4 black bg rounded 88 */ #menu .menu-card__recommend { display: flex; justify-content: center; align-items: center; align-self: center; width: 480px; height: 42.4px; background: #000000; border-radius: 88px; box-sizing: border-box; } #menu .menu-card__recommend-text { font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 20.8px; line-height: 1; color: #FFFFFF; text-align: center; } /* タイトル: セレクト全身脱毛 (44px) */ #menu .menu-card__title--select { font-size: 44px; } /* サブタイトル行: 10部位脱毛 + 蓄熱式 / layout_VS43NG row gap 8 */ #menu .menu-card__subtitle-row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; } #menu .menu-card__subtitle { display: inline-flex; align-items: baseline; gap: 4px; } #menu .menu-card__subtitle-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 36px; line-height: 1.4; letter-spacing: 0.02em; color: #FFFFFF; } #menu .menu-card__subtitle-text { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 33.6px; line-height: 1.4; color: #FFFFFF; } /* タイトルブロック: width 352 / カード2用 */ #menu .menu-card--select .menu-card__title-block { width: 352px; gap: 0; } /* 月々の税込※1 / カード2用は line-height: 1.0 */ #menu .menu-card--select .menu-card__price-tax--small { font-size: 12.8px; line-height: 1; } #menu .menu-card--select .menu-card__price-yen--small { font-size: 25.6px; line-height: 1; } /* === 部分脱毛（医療脱毛）/ Figma 268:76905 === */ #menu .menu-group--parts { padding: 100px 0 0; } /* 2×3 カードグリッド / Figma layout_R7RENR (5回と一括を寄せたためカード幅を縮める) */ #menu .menu-group__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 60px; padding: 60px 0 20px; width: 100%; max-width: 1080px; box-sizing: border-box; } /* === 部分脱毛 カード / Figma layout_DTLMDT 500x360 (画像拡大で広げる) === */ #menu .parts-card { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 15px; padding: 28.57px 0; width: 100%; min-height: 360px; box-sizing: border-box; background: rgba(0, 0, 0, 0.3); border: 1.43px solid rgba(255, 255, 255, 0.3); border-radius: 7.14px; backdrop-filter: blur(6.06px); -webkit-backdrop-filter: blur(6.06px); } /* 内部 row / layout_09IJTX padding 0 21.43、画像幅に応じて可変 */ #menu .parts-card__row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 24px; padding: 0 21.43px; box-sizing: border-box; width: 100%; } /* 画像: 最も幅の広い「脚」(163px)に合わせた固定領域内で中央配置 */ #menu .parts-card__image { flex-shrink: 0; width: 163px; height: 180px; display: flex; align-items: center; justify-content: center; } #menu .parts-card__image img { height: 100%; width: auto; display: block; } /* 右コンテンツ：可変幅で残り領域を活用 */ #menu .parts-card__content { display: flex; flex-direction: column; align-items: stretch; gap: 14.29px; flex: 1; min-width: 0; max-width: 290px; } /* ヘッダー: タイトル + バッジ（左寄せ） */ #menu .parts-card__head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 7.14px; } #menu .parts-card__title { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 30px; line-height: 1.4; color: #FFFFFF; text-align: left; } #menu .parts-card__badge { display: inline-flex; justify-content: center; align-items: center; padding: 4px 14px; border: 1.21px solid #FFFFFF; border-radius: 88.57px; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 12.86px; line-height: 1; color: #FFFFFF; align-self: flex-start; } /* 胴脱毛: 前面/背面 と 蓄熱式バッジ を同じ行に */ #menu .parts-card__head--with-sub .parts-card__sub-row { display: flex; flex-direction: row; align-items: center; gap: 8px; } #menu .parts-card__sub { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 18px; line-height: 1; color: #FFFFFF; } /* 区切り線 / layout_TUPXJJ 278.57x0 */ #menu .parts-card__divider { width: 100%; height: 0; margin: 0; border: 0; border-top: 1.21px solid #FFFFFF; } /* 価格ブロック / layout_SHV2LX column align-center gap 21.43 */ #menu .parts-card__prices { display: flex; flex-direction: column; align-items: center; gap: 21.43px; } /* 価格行（5回ボックス + 一括）：寄せて配置 */ #menu .parts-card__price-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; width: 100%; } /* 5回 施術 白ボックス / layout_1I24K5 52.86 x 52.86 */ #menu .parts-card__count { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52.86px; height: 52.86px; background: #FFFFFF; flex-shrink: 0; } #menu .parts-card__count-label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14.68px; line-height: 1; color: #000000; } #menu .parts-card__count-times { display: flex; flex-direction: row; align-items: baseline; gap: 1px; } #menu .parts-card__count-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 21.14px; line-height: 1; color: #000000; } #menu .parts-card__count-unit { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 19.97px; line-height: 1; color: #000000; } /* 一括払 / layout_HR66XS row align-center gap 3.57 */ #menu .parts-card__price { display: flex; flex-direction: row; align-items: center; gap: 3.57px; } #menu .parts-card__price-label { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14.29px; line-height: 1.1; color: #FFFFFF; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; } #menu .parts-card__price-value { display: flex; flex-direction: row; align-items: center; gap: 4px; } #menu .parts-card__price-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 55.71px; line-height: 1; letter-spacing: 0.02em; color: #FFFFFF; } #menu .parts-card__price-unit { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } #menu .parts-card__price-yen { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 28.57px; line-height: 1; color: #FFFFFF; } #menu .parts-card__price-tax { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14.29px; line-height: 1.2; color: #FFFFFF; } /* 月々 / layout_8CKPZS row centered padding 3.57 0, fill width, bg white/20% */ #menu .parts-card__price--monthly { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 2.86px; padding: 3.57px 8px; width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.2); border-radius: 4px; } #menu .parts-card__price--monthly .parts-card__price-label { font-size: 13.57px; } #menu .parts-card__price--monthly .parts-card__price-value { gap: 4px; } #menu .parts-card__price-num--small { font-size: 31.43px; } #menu .parts-card__price-yen--small { font-size: 20.71px; } #menu .parts-card__price-tax--small { font-size: 11.43px; line-height: 1; } /* 注釈 / layout_3D9HMB width 442.86 → カード幅可変に対応 */ #menu .parts-card__note { margin: 0; padding: 0 21.43px; box-sizing: border-box; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: -0.02em; color: #FFFFFF; text-align: justify; } /* 17. 人気の部位/コラム */ /* 17. 人気の部位 / Figma 268:76917 */ #popular { position: relative; width: 100%; padding: 90px 0 100px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-image: url('assets/img/background_pc.png'); background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; } /* 人気の部位 ボックス / Figma layout_26JR1A width 1040 padding 100 60 60 */ #popular .popular__box { position: relative; width: 1040px; max-width: calc(100% - 80px); padding: 100px 60px 60px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; } /* 背景人物画像（ボックス外まではみ出して左上寄りに配置） */ #popular .popular__bg-image { position: absolute; top: -80px; left: 500px; width: 461px; height: 527px; object-fit: cover; z-index: 1; pointer-events: none; } #popular .popular__smoke { position: absolute; top: -80px; left: 820px; width: 320px; height: auto; object-fit: contain; z-index: 3; pointer-events: none; } #popular .popular__smoke--title { top: -120px; left: -100px; width: 360px; } /* タイトル / Figma layout_ABCEWX padding 0 30 80 */ #popular .popular__head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 0 30px 80px; } #popular .popular__title-anim { display: flex; flex-direction: column; align-items: flex-start; } #popular .popular__small { margin: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.1; color: #FFFFFF; } #popular .popular__title { margin: 0; font-family: "Anton", sans-serif; font-weight: 400; font-size: 160px; line-height: 1.1; color: #FFFFFF; } #popular .popular__jp { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.4; color: #A4A4A4; } /* タイトルアニメ：POPULAR と PARTS を同時にステージングで展開（FLOW と同じパターン） */ #popular .popular__title-anim.is-animated .popular__small span:nth-child(1), #popular .popular__title-anim.is-animated .popular__title span:nth-child(1) { transition-delay: 0ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(2), #popular .popular__title-anim.is-animated .popular__title span:nth-child(2) { transition-delay: 60ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(3), #popular .popular__title-anim.is-animated .popular__title span:nth-child(3) { transition-delay: 120ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(4), #popular .popular__title-anim.is-animated .popular__title span:nth-child(4) { transition-delay: 180ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(5), #popular .popular__title-anim.is-animated .popular__title span:nth-child(5) { transition-delay: 240ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(6) { transition-delay: 300ms; } #popular .popular__title-anim.is-animated .popular__small span:nth-child(7) { transition-delay: 360ms; } /* ランキングリスト */ #popular .popular__list { position: relative; z-index: 2; list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 864px; align-self: center; display: flex; flex-direction: column; } #popular .popular__item { width: 100%; border-top: 1px solid #FFFFFF; } #popular .popular__item:last-child { border-bottom: none; } #popular .popular__link { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 30px; text-decoration: none; color: #FFFFFF; transition: background 0.25s ease; } #popular .popular__link:hover { background: rgba(255, 255, 255, 0.05); } /* ランク表示 No.1 / Figma layout_MM6LVR + style_UC4X5J/YG2H0S */ #popular .popular__rank { display: inline-flex; align-items: flex-end; gap: 4px; min-width: 100px; } #popular .popular__rank-no { font-family: "Anton", sans-serif; font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: 0.05em; color: #FF0001; } #popular .popular__rank-num { font-family: "Anton", sans-serif; font-weight: 400; font-size: 64px; line-height: 1; letter-spacing: 0; color: #FF0001; display: inline-block; min-width: 0.62em; text-align: center; } #popular .popular__rank--2 .popular__rank-no, #popular .popular__rank--2 .popular__rank-num { color: rgba(255, 0, 1, 0.7); } #popular .popular__rank--3 .popular__rank-no, #popular .popular__rank--3 .popular__rank-num { color: rgba(255, 0, 1, 0.5); } /* 部位名 / style_KQY06F Bold 38px letter -2% white center */ #popular .popular__name { flex: 1; text-align: center; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 38px; line-height: 1.5; letter-spacing: -0.02em; color: #FFFFFF; } /* 矢印 / layout_NLCDBB 14x37 white stroke 2 */ #popular .popular__arrow { width: 14px; height: 37px; flex-shrink: 0; color: #FFFFFF; } /* === 人気のコラム / 新着コラム ボックス / Figma 268:76958 layout_5JU7Y4 1040x padding 60 === */ #popular .column__box { width: 1040px; max-width: calc(100% - 80px); margin-top: 60px; padding: 60px; box-sizing: border-box; background: rgba(255, 255, 255, 0.05); border-radius: 10px; display: flex; flex-direction: column; align-items: center; } /* タイトル「人気のコラム」/ Bold 36px (の: 30px) */ #popular .column__title { margin: 0 0 30px; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 36px; line-height: 1.4; color: #FFFFFF; text-align: center; } #popular .column__title-small { font-size: 30px; } #popular .column__title--sub { margin: 40px 0 30px; font-size: 30px; } /* 人気のコラムリスト */ #popular .column__popular-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 864px; display: flex; flex-direction: column; } #popular .column__item { width: 100%; border-top: 1px solid #FFFFFF; } /* リンク行 */ #popular .column__link { display: flex; flex-direction: row; align-items: center; padding: 20px 30px; gap: 24px; text-decoration: none; color: #FFFFFF; transition: background 0.25s ease; } #popular .column__link:hover { background: rgba(255, 255, 255, 0.05); } /* 番号（人気のコラム）/ Anton 64px, white stroke 2px (outline) */ #popular .column__num { flex-shrink: 0; width: 40px; font-family: "Anton", sans-serif; font-weight: 400; font-size: 64px; line-height: 1.2; letter-spacing: 0.05em; color: transparent; -webkit-text-stroke: 2px #FFFFFF; text-align: center; } /* テキスト */ #popular .column__text { flex: 1; font-family: "Noto Sans JP", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: #FFFFFF; } #popular .column__text-br-sp { display: none; } /* 矢印（コラム）/ layout_NLCDBB 14x37 */ #popular .column__arrow { width: 14px; height: 37px; flex-shrink: 0; color: #FFFFFF; } /* 新着コラムリスト */ #popular .column__new-list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 864px; display: flex; flex-direction: column; } #popular .column__link--simple { padding: 16px 30px; } /* コラム一覧へ CTA / 既存の reason/greeting と同じ 350x80 アウトラインボタン */ #popular .column__cta-wrap { display: flex; justify-content: center; margin: 30px 0 0; } #popular .column__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 350px; height: 80px; padding: 0 32px; border: 2px solid #FFFFFF; border-radius: 100px; background: transparent; color: #FFFFFF; text-decoration: none; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5; } /* ホバー時の色変化アニメーションをオフ（TOPページに合わせる。再度有効にする場合はコメントを外す） */ /* #popular .column__cta:hover { background: #FFFFFF; color: #000000; transform: translateY(-2px); } */ /* #popular .column__cta:active { transform: translateY(0); } */ #popular .column__cta-icon { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; } #popular .column__cta-icon svg { width: 100%; height: 100%; display: block; } /* === CTAバナー / Figma 268:76988 480x480 → ボタン収まりよう 560幅に拡大 === */ #popular .popular__banner { position: relative; display: block; width: 480px; max-width: calc(100% - 80px); margin: 100px auto 0; text-decoration: none; border-radius: 7.33px; overflow: hidden; } #popular .popular__banner-img { display: block; width: 100%; height: auto; border-radius: 7.33px; } #popular .popular__banner::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.3); opacity: 0; transition: opacity 0.4s cubic-bezier(.4, 0, .2, 1); pointer-events: none; z-index: 2; } #popular .popular__banner:hover::after, #popular .popular__banner:focus-visible::after, #popular .popular__banner:active::after { opacity: 1; } #popular .popular__banner-cta { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); white-space: nowrap; overflow: hidden; pointer-events: none; transition: transform 0.3s cubic-bezier(.4, 0, .2, 1), box-shadow 0.3s ease; z-index: 3; } #popular .popular__banner:hover .popular__banner-cta, #popular .popular__banner:focus-visible .popular__banner-cta, #popular .popular__banner:active .popular__banner-cta { transform: translateX(-50%) scale(0.96); box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); filter: none; } #popular .popular__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(.4, 0, .2, 1); pointer-events: none; z-index: 1; } #popular .popular__banner:hover .popular__banner-cta::before, #popular .popular__banner:focus-visible .popular__banner-cta::before, #popular .popular__banner:active .popular__banner-cta::before { left: 125%; } #popular .popular__banner-cta .discount__cta-text { white-space: nowrap; letter-spacing: -0.06em; } /* バナー画像(480×480)はTOPの cta セクションと同一。CTAボタン・テキスト・矢印をTOPの cta__button 寸法に揃える（デスクトップ） */ @media (min-width: 781px) { #popular .popular__banner-cta.discount__cta { width: 381.82px; height: 82.91px; gap: 15px; padding: 0; font-size: 22.91px; line-height: 1.2; box-sizing: border-box; bottom: 22px; } #popular .popular__banner-cta .discount__cta-icon { border-top-width: 7px; border-bottom-width: 7px; border-left-width: 10px; } } /* 18. Mask group（装飾） */ .mask-group { width: 100%; height: 0; } /* ======================================== Footer ======================================== */ #mens-hige #footer { width: 100%; margin: 0 auto; padding-top: 40px; box-sizing: border-box; } /* Footer - パンくずリスト */ #mens-hige #footer .footer__breadcrumb { width: 100%; padding: 14px 0; box-sizing: border-box; } #mens-hige #footer .footer__breadcrumb-list { display: flex; flex-direction: row; align-items: center; gap: 20px; max-width: 1120px; width: 100%; margin: 0 auto; padding: 0 120px; 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-hige #footer .footer__breadcrumb-item { display: flex; align-items: center; gap: 20px; } #mens-hige #footer .footer__breadcrumb-item:not(:last-child)::after { content: ""; display: block; width: 1px; height: 12px; background: #A4A4A4; transform: rotate(20deg); } #mens-hige #footer .footer__breadcrumb-link { color: #A4A4A4; text-decoration: none; transition: opacity 0.3s; } #mens-hige #footer .footer__breadcrumb-link:hover { opacity: 0.7; } /* Footer - メインメニュー */ #mens-hige #footer .footer__main { width: 100%; background: #000000; } #mens-hige #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 - ブランド */ #mens-hige #footer .footer__brand { display: flex; flex-direction: column; gap: 47px; width: 248px; flex: none; } #mens-hige #footer .footer__logo-link { display: block; } #mens-hige #footer .footer__logo-img { display: block; width: 248px; height: 53px; object-fit: contain; } #mens-hige #footer .footer__sns { display: flex; flex-direction: row; gap: 10px; margin: 0; padding: 0; list-style: none; } #mens-hige #footer .footer__sns-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; transition: opacity 0.3s; } #mens-hige #footer .footer__sns-link:hover { opacity: 0.7; } #mens-hige #footer .footer__sns-icon { display: block; width: 100%; height: 100%; object-fit: contain; } /* Footer - リンク列 */ #mens-hige #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-hige #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-hige #footer .footer__nav-link { color: #FFFFFF; text-decoration: none; transition: opacity 0.3s; } #mens-hige #footer .footer__nav-link:hover { opacity: 0.7; } #mens-hige #footer .footer__nav-item--sub { position: relative; padding-left: 36px; } #mens-hige #footer .footer__nav-item--sub::before { content: ""; position: absolute; left: 24px; top: 50%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #A4A4A4; transform: translateY(-50%); } /* Footer - コピーライト */ #mens-hige #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-hige #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-hige #footer .footer__copyright-link { color: #000000; text-decoration: none; transition: opacity 0.3s; } #mens-hige #footer .footer__copyright-link:hover { opacity: 0.7; } #mens-hige #footer .footer__copyright-sep { color: #000000; } #mens-hige #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; } /* Footer - レスポンシブ（1050px以下: padding短縮） */ @media (max-width: 1050px) { #mens-hige #footer .footer__breadcrumb-list { padding: 0 5.128vw; font-size: 14px; gap: 12px; } #mens-hige #footer .footer__breadcrumb-item { gap: 12px; } #mens-hige #footer .footer__main-inner { padding: 60px 5.128vw 100px; gap: 40px; flex-wrap: wrap; } #mens-hige #footer .footer__brand { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; } #mens-hige #footer .footer__nav-col { width: calc(33.333% - 28px); } #mens-hige #footer .footer__nav-item { font-size: 16px; } } /* 総院長よりご挨拶 - タブレット（1050px以下: 右側テキストを流動化） */ @media (max-width: 1050px) { #greeting .greeting__row { gap: 24px; max-width: 100%; } #greeting .greeting__photo { width: 44%; max-width: 490px; height: auto; aspect-ratio: 490 / 280; } #greeting .greeting__photo-caption { right: 5%; bottom: 8%; } #greeting .greeting__photo-group { font-size: clamp(8px, 1.2vw, 11.2px); } #greeting .greeting__photo-role { font-size: clamp(14px, 2.2vw, 21px); } #greeting .greeting__photo-name { font-size: clamp(20px, 3.5vw, 35px); } #greeting .greeting__body { width: auto; flex: 1; min-width: 0; gap: 14px; } #greeting .greeting__p { font-size: clamp(13px, 1.6vw, 18px); line-height: 1.7; } } /* 人気の部位 - タブレット（1050px以下: サイズはそのままで人物画像を少し左へ） */ @media (max-width: 1050px) { #popular .popular__bg-image { left: 44%; } #popular .popular__smoke { left: 60%; } } /* ヒゲ・顔以外の脱毛メニュー - タブレット（1050px以下: 全身脱毛カードに左右余白を確保しつつ中身が切れないよう可変化） */ @media (max-width: 1050px) { #menu .menu-card, #menu .menu-card--select { width: auto; max-width: calc(100% - 80px); } #menu .menu-card { grid-template-columns: 226px minmax(0, 496px); } #menu .menu-card__content, #menu .menu-card--select .menu-card__content { width: auto; } /* セレクト全身脱毛：画像列を狭めて右コンテンツの幅を確保し、内部の固定幅/大きな文字を可変化 */ #menu .menu-card--select { grid-template-columns: 240px minmax(0, 496px); column-gap: 16px; padding: 32px; } #menu .menu-card__image--select { width: 240px; } #menu .menu-card--select .menu-card__title-block { width: auto; } #menu .menu-card--select .menu-card__title--select { font-size: clamp(26px, 4.8vw, 44px); white-space: nowrap; } #menu .menu-card__recommend { width: 100%; max-width: 480px; box-sizing: border-box; padding: 0 16px; } #menu .menu-card--select .menu-card__recommend-text { font-size: clamp(15px, 2.2vw, 20.8px); white-space: nowrap; } #menu .menu-card--select .menu-card__price-num { font-size: clamp(52px, 9vw, 86.4px); } #menu .menu-card--select .menu-card__price-yen { font-size: clamp(34px, 5.6vw, 54.4px); } } /* 部分脱毛（医療脱毛）- タブレット（1050px以下: 左右余白を確保。セルが狭くなる幅ではカード幅を保ったまま自動で1列に切替えて中央寄せ） */ @media (max-width: 1050px) { #menu .menu-group__grid { grid-template-columns: repeat(auto-fit, minmax(470px, 520px)); justify-content: center; max-width: calc(100% - 64px); column-gap: 24px; row-gap: 48px; } #menu .parts-card__row { gap: 18px; padding: 0 16px; } #menu .parts-card__image { width: 150px; height: 165px; } #menu .parts-card__content { max-width: 360px; } } /* お支払いカード - タブレット（1050px以下: 2列2段に。カードが大きくなる分アイコン/文字も比率を保って拡大） */ @media (max-width: 1050px) { #beginner .beginner__payment-list { grid-template-columns: repeat(2, 1fr); max-width: 600px; gap: 20px; } #beginner .beginner__payment-item { padding: 28px 20px 26px; } #beginner .beginner__payment-name { font-size: 24px; } #beginner .beginner__payment-body { gap: 18px; } #beginner .beginner__payment-icon--card { max-width: 132px; } #beginner .beginner__payment-brands--debit { max-width: 170px; } #beginner .beginner__payment-brands--credit { max-width: 210px; } #beginner .beginner__payment-desc { font-size: 18px; } #beginner .beginner__payment-notes { font-size: 13px; } } /* 追加費用なし - タブレット（781〜1050px: 表を狭めず、タイトルの下に縦積み。表の幅は維持・中央寄せ） */ @media (min-width: 781px) and (max-width: 1050px) { #no-extra .no-extra__top { grid-template-columns: 1fr; gap: 48px; } #no-extra .no-extra__media { align-items: center; } } /* ============================================================= SP（780px設計 / max-width: 780px） Figma 780px設計を vw 単位で実装。1px = (1/780)*100vw ≒ 0.1282vw ============================================================= */ @media (max-width: 780px) { body { background-image: url('assets/img/background_sp_v2.jpg'); } /* ===== Header SP ===== */ #mens-hige #header { width: 100%; height: 14.103vw; /* 110px */ z-index: 201; } #mens-hige #header .header__inner { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; } /* ロゴ */ #mens-hige #header .header__logo { position: absolute; left: 5.128vw; top: 5.256vw; /* 40, 41 */ } #mens-hige #header .header__logo-img { width: 28.846vw; height: 6.164vw; /* 225, 48 */ } /* SP では outline pill 2つは非表示、CTA pill のみ右上に */ #mens-hige #header .header__actions { position: absolute; right: 5.128vw; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2.564vw; } #mens-hige #header .header__pill--outline { display: none; } #mens-hige #header .header__pill--cta { padding: 1.923vw 2.564vw; border-radius: 3.910vw; font-size: 2.564vw; } /* ハンバーガー（SP）：MENU + 二本線 */ #mens-hige #header .header__hamburger { margin-left: 0; width: 11.538vw; height: 8.846vw; gap: 0.641vw; z-index: 202; } #mens-hige #header .header__hamburger-text { font-size: 5.385vw; } #mens-hige #header .header__hamburger-bars { width: 11.026vw; gap: 0.641vw; } #mens-hige #header .header__hamburger-bar { width: 11.026vw; height: 0.385vw; } /* ===== FV SP ===== */ /* SPでは Figma SP値を vw 化（後でFigma 190:38503 確認して詳細化） */ #fv { height: 70vw; /* SPは少し高さを持たせる */ } /* bg-img は PC同様 inset:0 + cover で全幅対応（SP用オーバーライド不要） */ #fv .fv__content { padding: 25.128vw 5.128vw 0; gap: 2.821vw; } #fv .fv__sub { font-size: 1.795vw; } #fv .fv__h1 { padding: 0 1.026vw 0 0; } #fv .fv__h1 .fv__h1-ts11 { font-size: 7.179vw; } #fv .fv__h1 .fv__h1-ts62 { font-size: 7.179vw; } #fv .fv__h1 .fv__h1-ts63 { font-size: 5.641vw; } /* ブランド帯テキスト（SP） */ #fv .fv__brand-band { left: 0; right: 0; top: 60.74vw; width: 100%; height: auto; } #fv .fv__brand-band-text { font-size: 15.385vw; padding-right: 10.256vw; } /* スクロールボタンは PC専用デザイン（Figma準拠）。SPデザイン未定のため非表示 */ .fv__scroll { display: flex; } /* セクション余白の SP 値（暫定） */ #before-after, #price, #discount, #reason, #diff, #no-extra, #machine, #beginner, #menu, #popular, #parts-choice { padding: 8vw 5.128vw 15.385vw; /* 上を120→8vwに詰める / 左右40 / 下120 */ } /* 料金メニューだけ右paddingを0に（左の5.128vwはそのまま） */ #price { padding-right: 0; } /* セクション背景：SPでは background_sp.png に切替 */ #before-after, #price, #option-menu, #parts-choice, #discount, #reason, #diff, #no-extra, #machine, #beginner, #qa, #flow, #clinic, #greeting, #menu, #popular, .brand-divider, .section-divider { background-image: url('assets/img/background_sp_v2.jpg'); } /* SP背景の拡大ボケ対策：cover だと縦長セクションで横方向に拡大されてガビガビになるため、 横幅ぴったり(100% auto)で表示して縦は repeat-y でタイルする（背景は均一な黒テクスチャなので継ぎ目は出ない） */ #before-after, #price, #option-menu, #parts-choice, #discount, #reason, #diff, #no-extra, #machine, #beginner, #qa, #flow, #clinic, #greeting, #menu, #popular, .brand-divider, .section-divider { background-size: 100% auto; background-repeat: repeat-y; background-position: center top; } /* セクション h2/h3 の SP 値（暫定統一） */ #before-after .before-after__h2, #price .price__h2, #discount .discount__h2, #reason .reason__h2, #menu .menu__h2, #popular .popular__h2 { font-size: 17.949vw; /* 140 */ line-height: 1.1; } /* 総院長挨拶 SP */ #greeting { padding: 16vw 5.128vw; } #greeting .greeting__title { font-size: 5.6vw; margin-bottom: 5.128vw; align-self: center; text-align: center; } #greeting .greeting__row { flex-direction: column; gap: 0; margin-bottom: 8vw; width: 100%; } #greeting .greeting__photo { width: 100%; height: auto; aspect-ratio: 490 / 280; margin-bottom: 5.128vw; } #greeting .greeting__photo-img { height: 100%; } #greeting .greeting__photo-caption { right: 4%; bottom: 8%; } #greeting .greeting__photo-group { font-size: 2.564vw; } #greeting .greeting__photo-role { font-size: 2.821vw; } #greeting .greeting__photo-name { font-size: 5.128vw; margin-top: 1vw; } #greeting .greeting__body { width: 100%; gap: 2.564vw; margin: 0; } #greeting .greeting__p { font-size: 3.077vw; line-height: 1.85; } #greeting .greeting__profile { width: 100%; padding: 6.410vw 5.128vw; } #greeting .greeting__profile-head { margin-bottom: 5.128vw; } #greeting .greeting__profile-group { font-size: 2.821vw; } #greeting .greeting__profile-name { font-size: 5.128vw; } #greeting .greeting__profile-section { margin-bottom: 5.128vw; gap: 3.077vw; } #greeting .greeting__profile-section-head { gap: 3.077vw; } #greeting .greeting__profile-label { font-size: 3.590vw; } #greeting .greeting__career { column-gap: 3.077vw; row-gap: 2vw; } #greeting .greeting__career-date, #greeting .greeting__career-text { font-size: 3.077vw; } #greeting .greeting__cta { width: 100%; max-width: 70vw; height: auto; padding: 4.615vw 8vw 4.615vw 6.410vw; font-size: 3.590vw; border-radius: 100vw; } #greeting .greeting__cta-icon { right: 6.410vw; width: 3.077vw; height: 3.077vw; } /* MENU SP（ヒゲ・顔以外の脱毛メニュー）/ Figma 268:74177 SP_780px 準拠 */ #menu { padding: 0 0 16vw; } #menu .menu__title { display: flex; width: 100%; gap: 0.641vw; margin-bottom: 6.410vw; flex-wrap: wrap; } #menu .menu__title-main:last-child { flex-basis: 100%; text-align: center; } /* SP：「脱毛メニュー」を次の行へ */ #menu .menu__title-main { font-size: 6.154vw; } #menu .menu__title-sub { font-size: 4.615vw; } #menu .menu-group { padding: 0 0 10vw; } #menu .menu-group__bar { padding: 2.564vw 0; } #menu .menu-group__bar-title { font-size: 3.590vw; } #menu .menu-group__cards { gap: 7.692vw; padding: 5.128vw 5.128vw 3vw; max-width: 100%; } /* 部位脱毛カード(.menu-group__grid)と横幅・CTA間隔を揃える */ #menu .menu-group__cta-wrap { margin-top: 2vw; padding: 0 5.128vw; box-sizing: border-box; } /* カード: 1カラムに変更、エリア順 content → image → note */ #menu .menu-card { grid-template-columns: 1fr; grid-template-areas: "content" "image" "note"; column-gap: 0; row-gap: 5.128vw; width: 100%; max-width: 100%; min-height: auto; padding: 7.692vw 2.564vw; } /* 画像: カード中央 */ #menu .menu-card__image { width: 41.026vw; height: auto; aspect-ratio: 226 / 423; align-self: center; justify-self: center; } #menu .menu-card__content { width: 100%; gap: 4.103vw; align-self: stretch; } #menu .menu-card__note { align-self: stretch; font-size: 2.308vw; line-height: 1.6; } /* ヘッダー: タイトル左 / 施術5回ボックス右 */ #menu .menu-card__head { flex-direction: row; justify-content: center; align-items: center; gap: 5.128vw; } #menu .menu-card__title-block { width: auto; gap: 1.282vw; align-items: center; } #menu .menu-card__title { font-size: 7.692vw; } #menu .menu-card__badge { padding: 1.282vw 3.846vw; font-size: 2.821vw; border-width: 1px; } #menu .menu-card__count { width: 14.103vw; height: 14.103vw; padding: 0; gap: 0.641vw; } #menu .menu-card__count-label { font-size: 2.821vw; } #menu .menu-card__count-num { font-size: 4.615vw; } #menu .menu-card__count-unit { font-size: 3.590vw; } /* 価格 */ #menu .menu-card__prices { gap: 3.077vw; align-items: center; } #menu .menu-card__price { min-height: 11.282vw; gap: 2.051vw; justify-content: center; } #menu .menu-card__price-label { font-size: 2.821vw; } #menu .menu-card__price-value { gap: 1.282vw; } #menu .menu-card__price-num { font-size: 10.256vw; } #menu .menu-card__price-yen { font-size: 6.410vw; } #menu .menu-card__price-tax { font-size: 2.821vw; line-height: 1.2; } /* 月々 */ #menu .menu-card__price--monthly { padding: 2.051vw 2.051vw; min-height: 0; } #menu .menu-card__price--monthly .menu-card__price-label { font-size: 2.256vw; } #menu .menu-card__price-num--small { font-size: 5.385vw; } #menu .menu-card__price-yen--small { font-size: 3.282vw; } #menu .menu-card__price-tax--small { font-size: 1.744vw; } #menu .menu-card__price-suffix { font-size: 2.462vw; } /* === 部分脱毛 SP === */ #menu .menu-group--parts { padding: 12.821vw 0 0; } #menu .menu-group__grid { display: grid; grid-template-columns: 1fr; column-gap: 0; row-gap: 5.128vw; width: 100%; padding: 5.128vw 5.128vw 3vw; } #menu .parts-card { width: 100%; min-height: auto; padding: 3.846vw 0; gap: 1.282vw; } #menu .parts-card__row { width: 100%; padding-left: 4.103vw; padding-right: 4.103vw; } #menu .parts-card__image { width: 31.76vw; height: 35.128vw; } #menu .parts-card__content { width: 48.5vw; flex: 0 0 48.5vw; min-width: 0; max-width: 48.5vw; gap: 1.282vw; } #menu .parts-card__row { gap: 1.282vw; } #menu .parts-card__prices { gap: 1.282vw; } #menu .parts-card__price-row { gap: 0.385vw; justify-content: flex-start; } #menu .parts-card__head { gap: 1.282vw; } #menu .parts-card__title { font-size: 5.128vw; } #menu .parts-card__badge { padding: 0.769vw 2.564vw; font-size: 2.564vw; } #menu .parts-card__sub { font-size: 3.077vw; } #menu .parts-card__divider { width: 100%; } #menu .parts-card__prices { gap: 3.077vw; gap: 2.564vw; width: 100%; } #menu .parts-card__price-row { width: 100%; gap: 2.564vw; align-items: center; justify-content: flex-start; } #menu .parts-card__count { width: 10.256vw; height: 10.256vw; } #menu .parts-card__count-label { font-size: 2.564vw; line-height: 1.5; } #menu .parts-card__count-num { font-size: 3.590vw; } #menu .parts-card__count-unit { font-size: 3.282vw; } #menu .parts-card__price { gap: 0.641vw; } #menu .parts-card__price-label { font-size: 2.308vw; } #menu .parts-card__price-value { gap: 0.641vw; } #menu .parts-card__price-num { font-size: 7.692vw; } #menu .parts-card__price-yen { font-size: 4.103vw; } #menu .parts-card__price-tax { font-size: 2.051vw; } #menu .parts-card__price--monthly { width: 100%; padding: 0.641vw 1.282vw; gap: 0.641vw; } #menu .parts-card__price--monthly .parts-card__price-label { font-size: 2.397vw; } #menu .parts-card__price-num--small { font-size: 5.385vw; } #menu .parts-card__price-yen--small { font-size: 3.487vw; } #menu .parts-card__price-tax--small { font-size: 1.923vw; } #menu .parts-card__note { width: 100%; padding-left: 4.103vw; padding-right: 4.103vw; font-size: 2.051vw; line-height: 1.4; } /* カード2 SP: セレクト全身脱毛 */ #menu .menu-card--select { min-height: auto; max-width: 100%; padding: 7.692vw 2.564vw; grid-template-columns: 1fr; grid-template-areas: "content" "image" "note"; row-gap: 5.128vw; } #menu .menu-card--select .menu-card__content { width: 100%; gap: 3.077vw; } #menu .menu-card__recommend { width: 100%; height: auto; padding: 1.795vw 0; } #menu .menu-card__recommend-text { font-size: 2.667vw; } #menu .menu-card__title--select { font-size: 5.641vw; } #menu .menu-card--select .menu-card__title-block { width: auto; } #menu .menu-card--select .menu-card__count { flex-shrink: 0; } #menu .menu-card__subtitle-row { gap: 1.282vw; margin-top: 0.641vw; flex-wrap: wrap; } #menu .menu-card__subtitle-num { font-size: 4.615vw; } #menu .menu-card__subtitle-text { font-size: 4.308vw; } #menu .menu-card__image--select { width: 76%; padding-top: 1.641vw; gap: 1.641vw; } #menu .menu-card__image-caption { font-size: 1.969vw; } #menu .menu-card__image-note { font-size: 1.313vw; } #menu .menu-card--select .menu-card__price-num--small { font-size: 5.385vw; } #menu .menu-card--select .menu-card__price-tax--small { font-size: 1.641vw; } #menu .menu-card--select .menu-card__price-yen--small { font-size: 3.282vw; } #before-after .before-after__h3, #price .price__h3, #discount .discount__h3, #menu .menu__h3, #popular .popular__h3 { font-size: 4.615vw; /* 36 */ } /* POPULAR SP / 人気の部位 */ #popular { padding: 12.821vw 0 8vw; } /* バナー〜フッターの間隔を詰める：装飾の空ブロック(mask-group)をSPでは縮小 */ .mask-group { height: 6.410vw; } #popular .popular__box { width: 100%; max-width: calc(100% - 5.128vw); padding: 10.256vw 5.128vw 6.410vw; border-radius: 1.282vw; } #popular .popular__bg-image { top: -11.5vw; left: 45%; width: 54%; height: auto; } #popular .popular__smoke { top: -8vw; left: 65%; width: 35vw; } #popular .popular__smoke--title { top: -12vw; left: -8vw; width: 40vw; } #popular .popular__head { padding: 0 0 6.410vw; } #popular .popular__small { font-size: 3.846vw; } #popular .popular__title { font-size: 14.872vw; } #popular .popular__jp { font-size: 3.077vw; } #popular .popular__list { max-width: 100%; } #popular .popular__link { padding: 4.5vw 1.282vw; } #popular .popular__rank { min-width: 14vw; gap: 0; } #popular .popular__rank-num { margin-left: -0.6vw; } #popular .popular__rank-no { font-size: 5.6vw; } #popular .popular__rank-num { font-size: 9vw; } #popular .popular__name { font-size: 5.6vw; text-align: left; flex: 1; padding-left: 4vw; } #popular .popular__arrow { width: 1.795vw; height: 3.974vw; } /* 人気のコラム/新着コラム SP */ #popular .column__box { width: 100%; max-width: calc(100% - 5.128vw); margin-top: 7.692vw; padding: 7.692vw 5.128vw; border-radius: 1.282vw; } #popular .column__title { margin: 0 0 3.846vw; font-size: 4.615vw; } #popular .column__title-small { font-size: 3.846vw; } #popular .column__title--sub { margin: 5.128vw 0 3.846vw; font-size: 3.846vw; } #popular .column__popular-list, #popular .column__new-list { max-width: 100%; } #popular .column__link { padding: 4vw 1.282vw; gap: 2.564vw; } #popular .column__link--simple { padding: 3.4vw 1.282vw; } #popular .column__num { width: 6vw; font-size: 9vw; -webkit-text-stroke: 1px #FFFFFF; } #popular .column__text { font-size: 2.821vw; line-height: 1.6; } #popular .column__text-br-sp { display: inline; } #popular .column__arrow { width: 1.795vw; height: 3.974vw; } #popular .column__cta-wrap { margin-top: 5.128vw; align-self: stretch; } #popular .column__cta { width: 78%; max-width: 78%; height: auto; padding: 4.103vw 7.692vw 4.103vw 6.410vw; font-size: 3.590vw; } #popular .column__cta-icon { right: 5.128vw; width: 2.564vw; height: 2.564vw; } /* CTAバナー SP（TOPページ #cta と同寸法に統一：バナー80vw四方 / ボタンは cta__button と同サイズ） */ #popular .popular__banner { width: 80vw; max-width: 80vw; margin: 10.256vw auto 0; } #popular .popular__banner-cta { bottom: 3.637vw; } #popular .popular__banner-cta.discount__cta { width: 79.546%; height: 13.818vw; min-width: 0; max-width: none; padding: 0; gap: 2vw; font-size: 3.818vw; box-sizing: border-box; } #popular .popular__banner-cta .discount__cta-icon { border-top-width: 1.167vw; border-bottom-width: 1.167vw; border-left-width: 1.667vw; } /* 画面下固定CTA（白いガウス）のボタンを、フッター上バナーのCTAボタンと同寸法にそろえる */ .sp-cta .discount__cta { width: 86vw; height: 13.818vw; min-width: 0; max-width: none; padding: 0; gap: 2vw; font-size: 3.818vw; box-sizing: border-box; } .sp-cta .discount__cta-icon { border-top-width: 1.167vw; border-bottom-width: 1.167vw; border-left-width: 1.667vw; } .sp-cta .discount__cta-text { letter-spacing: -0.03em; } /* セクション間ディバイダー SP */ .section-divider { height: 10.256vw; padding: 0 5.128vw; } .section-divider::before { height: 2px; } /* Q&A SP */ #qa { padding: 0 5.128vw 16vw; } #qa .qa__head { align-items: flex-start; gap: 2.564vw; max-width: 100%; padding: 0 0 8vw; } #qa .qa__h2 { font-size: 17.949vw; } #qa .qa__sub { font-size: 3.590vw; } #qa .qa__box { max-width: 100%; padding: 0 20px; } /* SP：白線を灰色エリアと同じ全幅に */ #qa .qa__item::after { width: 100%; max-width: 100%; } /* SP：mens-wp-top/style-wp.css と完全一致 */ #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; } #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; } /* SP：mens-wp-top/style-wp.css と完全一致 */ #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-wrap { margin-top: 10.256vw; } #qa .qa__cta { width: 100%; max-width: 70vw; height: auto; padding: 4.615vw 8vw 4.615vw 6.410vw; font-size: 3.590vw; border-radius: 100vw; } #qa .qa__cta-icon { right: 6.410vw; width: 3.077vw; height: 3.077vw; } /* クリスタルプロ SP */ #machine { padding: 16vw 5.128vw 10vw; } /* 黒帯：SPは幅が狭く高さ1060px固定だと斜めが急になるため、高さを幅に比例(vw)させPC同等の緩やかな角度にする（数値を小さく=緩く / 大きく=急に） */ /* top は下げるほど大きく（-160px=高い / 0や正の値=下げる） */ #machine .machine__bg-band { height: 83vw; top: 27vw; transform: scale(2.7); } #machine .machine__inner { gap: 12.821vw; } #machine .machine__intro { grid-template-columns: 1fr; gap: 6.410vw; } #machine .machine__head { align-items: center; text-align: center; } #machine .machine__sub { font-size: 3.590vw; /* 28 */ } #machine .machine__lead { font-size: 5.641vw; /* 44 */ } #machine .machine__brand-box { padding: 2.821vw 4.615vw; font-size: 7.692vw; /* 60 */ } #machine .machine__photo { transform: none; } /* SPは縦積みのため下げない */ #machine .machine__photo-img { max-width: 60%; } #machine .machine__point { padding: 0 0 12.821vw; gap: 3.590vw; } #machine .machine__point:first-of-type { margin-top: -60vw; padding-bottom: 2vw; } /* SP：POINT1以下を上に寄せる（負の値を大きくするほど上へ）／下パディングはPOINT2との間隔 */ /* POINT1タイトルのみ block にして
を通常改行として効かせる（flex内では br が効かないため） */ #machine .machine__point:first-of-type .machine__point-title { display: block; } #machine .machine__point-title-br-sp { display: inline; } #machine .machine__point-label, #machine .machine__point-label2 { font-size: 7.692vw; /* 60px */ } #machine .machine__point-label-num { font-size: 12.821vw; /* 100px */ } #machine .machine__point-title { font-size: 8.974vw; /* 70px */ line-height: 1.4; } #machine .machine__point-title-num { font-size: 12.821vw; /* 100px */ } #machine .machine__point-desc { font-size: 3.077vw; /* 24 */ line-height: 1.9; text-align: left; } #machine .machine__point-visual { max-width: 100%; } #machine .machine__point-grid { grid-template-columns: 1fr; align-items: stretch; gap: 3.590vw; margin-top: 3.077vw; } #machine .machine__point-visual--wavelengths .machine__point-visual-smoke { left: -15vw; bottom: -20vw; width: 55vw; max-width: none; } #machine .machine__wavelengths { gap: 1.282vw; height: auto; margin-top: 0; } #machine .machine__wavelength { flex: none; width: 100%; max-width: none; padding: 3.077vw 4.615vw; gap: 0.641vw; } #machine .machine__wavelength-name { font-size: 3.077vw; } #machine .machine__wavelength-nm { font-size: 2.564vw; } #machine .machine__wavelength-text { font-size: 2.564vw; } /* 追加費用なし SP（2列を1列に戻す） */ #no-extra { padding: 6vw 5.128vw 16vw; } #no-extra .no-extra__top { grid-template-columns: 1fr; gap: 6.410vw; padding: 0 0 5.128vw; } #no-extra .no-extra__head { gap: 1.795vw; align-items: center; text-align: center; } #no-extra .no-extra__title { align-items: center; } #no-extra .no-extra__sub { font-size: 2.821vw; /* 22 */ } #no-extra .no-extra__title-line { font-size: 7.692vw; /* 60 */ } /* 「エミナルクリニックメンズは」は長く折り返すため、アクセント行以外を少し小さく */ #no-extra .no-extra__title-line:not(.no-extra__title-line--accent) { font-size: 6.4vw; white-space: nowrap; } #no-extra .no-extra__title-line--accent { font-size: 10.256vw; /* 80 */ } #no-extra .no-extra__lead { font-size: 3.077vw; line-height: 1.8; margin-top: 0; text-align: left; } /* SP：説明テキストを表の下へ移動（headを display:contents で分解し order で並べ替え） */ #no-extra .no-extra__top { position: relative; } #no-extra .no-extra__head { display: contents; } #no-extra .no-extra__title { order: 1; } #no-extra .no-extra__media { order: 2; } #no-extra .no-extra__lead { order: 3; } #no-extra .no-extra__banner { margin-top: 7.692vw; max-width: 100%; } #no-extra .no-extra__banner-img { border-radius: 1.282vw; } /* のりかえプラン SP（4列→2列） */ #no-extra .switch-plan { margin-top: 10.256vw; padding: 6.410vw 5.128vw; gap: 4.103vw; } #no-extra .switch-plan__title-accent { font-size: 8.974vw; /* 70 */ } #no-extra .switch-plan__title-sub { font-size: 6.410vw; /* 50 */ } #no-extra .switch-plan__divider { width: 100%; max-width: 100%; } #no-extra .switch-plan__lead { font-size: 3.590vw; } #no-extra .switch-plan__lead-br-sp { display: inline; } #no-extra .switch-plan__features { grid-template-columns: 1fr; gap: 2.564vw; } #no-extra .switch-plan__feature { flex-direction: row; justify-content: flex-start; padding: 3.077vw 3.077vw 3.077vw 5.128vw; gap: 3.077vw; border-radius: 1.282vw; } #no-extra .switch-plan__feature-icon { width: 8.974vw; height: 8.974vw; } #no-extra .switch-plan__feature-text { font-size: 2.564vw; text-align: left; } #no-extra .switch-plan__feature-strong { font-size: 2.821vw; } /* CTA SP */ #no-extra .no-extra__cta-wrap { margin-top: 10.256vw; } #no-extra .no-extra__cta { width: 100%; max-width: 73vw; height: auto; padding: 4.615vw 8vw 4.615vw 6.410vw; font-size: 3.590vw; border-radius: 100vw; } #no-extra .no-extra__cta-icon { right: 6.410vw; width: 3.077vw; height: 3.077vw; } /* はじめての方へ SP */ #beginner { padding: 2vw 5.128vw 16vw; } #beginner .beginner__head { gap: 4.103vw; padding: 0 0 7.692vw; } #beginner .beginner__title-main { font-size: 7.692vw; /* 60 */ } #beginner .beginner__title-sub { font-size: 5.128vw; /* 40 */ } #beginner .beginner__banner { padding: 2.564vw 5.128vw; font-size: 3.590vw; } #beginner .beginner__cards { gap: 8vw; max-width: 100%; } #beginner .beginner__card { grid-template-columns: 1fr; gap: 3.846vw; } #beginner .beginner__card-visual { width: 100%; height: auto; aspect-ratio: 420 / 260; } #beginner .beginner__card-num { height: 15vw; } #beginner .beginner__card-title { font-size: 5.2vw; } #beginner .beginner__card-mark { font-size: 3.077vw; } #beginner .beginner__card-text { font-size: 3.077vw; line-height: 1.8; } #beginner .beginner__card-note { font-size: 2.564vw; } #beginner .beginner__payment { margin-top: 12.821vw; gap: 5.128vw; } #beginner .beginner__payment-title { font-size: 4.615vw; /* 36 */ } #beginner .beginner__payment-list { grid-template-columns: repeat(2, 1fr); gap: 2.564vw; max-width: none; } #beginner .beginner__payment-item { padding: 3.077vw 2.564vw; } #beginner .beginner__payment-name { font-size: 3.846vw; } #beginner .beginner__payment-body { gap: 2.564vw; } #beginner .beginner__payment-desc { font-size: 3.077vw; } #beginner .beginner__payment-notes { font-size: 2.308vw; } /* REASON SP */ #reason { padding: 0 5.128vw 15vw; } #reason .reason__head { align-items: flex-start; gap: 3.077vw; padding: 0 0 12.821vw; } #reason .reason__sub { font-size: 4.103vw; /* 32px */ } #reason .reason__title { flex-direction: row; align-items: baseline; gap: 1.026vw; } #reason .reason__title-box { padding: 0; } #reason .reason__title-jp { font-size: 7.692vw; /* 60px */ } #reason .reason__title-suffix { font-size: 6.410vw; /* 50px */ } #reason .reason__cards { gap: 12.821vw; max-width: 100%; } #reason .reason__card { grid-template-columns: 1fr; gap: 6.410vw; } /* SPでは全カード「テキスト（番号）→画像」で統一 */ #reason .reason__card--text-left .reason__card-content, #reason .reason__card--image-left .reason__card-content { order: 0; } #reason .reason__card-content { gap: 3.077vw; } #reason .reason__card-head { gap: 2.564vw; align-items: flex-end; } /* 数字とテキストを下揃え */ #reason .reason__card-num { height: 18vw; /* 約140（約1.5倍） */ } #reason .reason__card-h3 { font-size: 6.41vw; /* 50px相当 */ } #reason .reason__card-p { font-size: 3.59vw; /* 28px相当 */ line-height: 1.8; font-weight: 500; margin: 0; } #reason .reason__card-link { font-size: 3.59vw; align-self: center; font-weight: 500; margin-top: 0; } /* 説明テキストと同仕様（28px相当・太さ500） */ #reason .reason__card-visual { padding: 3.846vw; border-radius: 2.051vw; gap: 2.051vw; } #reason .reason__card-note { font-size: 2.308vw; /* 18 */ } /* === card01のみ：SPで「01タイトル → 地図 → 本文 → リンク」の順に並べ替え（HTML変更不可のためCSSで） === */ #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-content { display: contents; } #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-head { order: 0; } #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-visual { order: 1; } #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-p { order: 2; } #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-link { order: 3; justify-self: center; } #reason .reason__card--text-left:not(.reason__card--chart) .reason__card-visual-img { transform: scale(1.1); } /* === card03のみ：SPで「03タイトル → 比較表 → 本文」の順に並べ替え === */ #reason .reason__card--chart .reason__card-content { display: contents; } #reason .reason__card--chart .reason__card-head { order: 0; } #reason .reason__card--chart .reason__card-visual { order: 1; } #reason .reason__card--chart .reason__card-p { order: 2; } #reason .reason__card--chart { row-gap: 3vw; } /* 比較表の上下を少し詰める */ /* === card04（写真）のみ：SPで「04タイトル → 画像 → 本文」の順に並べ替え === */ #reason .reason__card:has(.reason__card-visual--photo) .reason__card-content { display: contents; } #reason .reason__card:has(.reason__card-visual--photo) .reason__card-head { order: 0; } #reason .reason__card:has(.reason__card-visual--photo) .reason__card-visual { order: 1; } #reason .reason__card:has(.reason__card-visual--photo) .reason__card-p { order: 2; } #reason .reason__card:has(.reason__card-visual--photo) { row-gap: 4vw; } /* 院内画像の上下を少し詰める */ #reason .reason__card:has(.reason__card-visual--photo) .reason__card-visual-img { transform: scale(1.1); } /* 院内画像を少し拡大 */ /* 比較チャート SP */ /* card03の比較表を少し横に広げる（図枠の左右パディングを詰める） */ #reason .reason__card--chart .reason__card-visual { padding-left: 0; padding-right: 0; padding-bottom: 2vw; } #reason .reason-chart { padding: 3.846vw 3.846vw 4.615vw; border-radius: 2.051vw; } #reason .reason-chart__heads { margin-bottom: 2.051vw; } #reason .reason-chart__head { font-size: 2.821vw; } #reason .reason-chart__bar { font-size: 4.615vw; } #reason .reason-chart__eminal-bars .reason-chart__bar { font-size: 4.615vw; font-weight: 800; } #reason .reason-chart__month-num { font-size: 3.846vw; font-weight: 900; } #reason .reason-chart__month-unit { font-size: 2.564vw; font-weight: 700; } #reason .reason-chart__general { gap: 1.92vw; } #reason .reason-chart__eminal-bars { gap: 1.92vw; } #reason .reason-chart__badge { font-size: 2.692vw; font-weight: 800; } #reason .reason-chart__chevron { width: 13.2vw; height: 5.4vw; margin: -12vw 0 1.4vw; } #reason .reason-chart__hl-num { font-size: 7.179vw; } #reason .reason-chart__hl-unit { font-size: 4.103vw; } #reason .reason-chart__hl-ni { font-size: 3.333vw; } #reason .reason-chart__result-text { font-size: 4.872vw; } #reason .reason__cta-wrap { padding: 12.821vw 0 0; } #reason .reason__cta { width: 100%; max-width: 70vw; height: auto; padding: 4.615vw 8vw 4.615vw 6.410vw; font-size: 4.103vw; border-radius: 100vw; } #reason .reason__cta-icon { right: 6.410vw; width: 3.077vw; height: 3.077vw; } /* Footer SP */ #mens-hige #footer { padding-top: 8vw; /* 60〜 */ } #mens-hige #footer .footer__breadcrumb { padding: 2vw 0; } #mens-hige #footer .footer__breadcrumb-list { padding: 0 5.128vw; font-size: 2.821vw; gap: 2vw; } #mens-hige #footer .footer__breadcrumb-item { gap: 2vw; } #mens-hige #footer .footer__breadcrumb-item:not(:last-child)::after { height: 2vw; } #mens-hige #footer .footer__main-inner { flex-direction: column; padding: 10.256vw 5.128vw 12.821vw; gap: 8vw; } #mens-hige #footer .footer__brand { width: 100%; flex-direction: column; align-items: flex-start; gap: 5.128vw; } #mens-hige #footer .footer__logo-img { width: 38.462vw; height: auto; /* 300 */ } #mens-hige #footer .footer__sns { gap: 2.564vw; } #mens-hige #footer .footer__sns-link { width: 8.974vw; height: 8.974vw; /* 70 */ } #mens-hige #footer .footer__nav-col { width: 100%; gap: 3.077vw; } #mens-hige #footer .footer__nav-item { font-size: 3.590vw; } #mens-hige #footer .footer__nav-item--sub { padding-left: 8.205vw; /* 約64 */ } #mens-hige #footer .footer__nav-item--sub::before { left: 4.615vw; border-top-width: 0.769vw; border-bottom-width: 0.769vw; border-left-width: 0.769vw; } #mens-hige #footer .footer__copyright { height: auto; padding: 4.103vw 5.128vw; gap: 1.282vw; } #mens-hige #footer .footer__copyright-links { font-size: 2.821vw; gap: 2vw; flex-wrap: wrap; justify-content: center; } #mens-hige #footer .footer__copyright-text { font-size: 2.564vw; } } /* ============================================================= タブレットSP（780〜1050）の cap 値 各セクションの h2/h3 をサイト全体で統一 ============================================================= */ @media (max-width: 1050px) { /* h2 統一 cap: 120px */ #before-after .before-after__h2, #price .price__h2, #discount .discount__h2, #reason .reason__h2, #menu .menu__h2, #popular .popular__h2 { font-size: min(17.949vw, 120px); line-height: 1.1; } /* h3 統一 cap: 25px */ #before-after .before-after__h3, #price .price__h3, #discount .discount__h3, #menu .menu__h3, #popular .popular__h3 { font-size: min(4.615vw, 25px); } } /*2026-5-29追加*/ } /* 1437行目から続いているメディアクエリの閉じ忘れをここで強制遮断 */ /*さらに追加*/ /* ========================================================= MOBILE FORCE OVERRIDE 絶対上書き版 ========================================================= */ @media screen and (max-width:781px) { #fv { overflow: hidden !important; } #fv .fv__content { padding-top: 0 !important; } /* -------------------------- FV黒オーバーレイ全破壊 --------------------------- */ html body main #fv .fv__bg-overlay-black { opacity: 0.65 !important; } html body main #fv .fv__bg-overlay-grad { opacity: 0.45 !important; } /* -------------------------- リード文 --------------------------- */ html body main section#sv .sv__lead { width: 100% !important; margin: 0 auto !important; padding: 0 !important; font-size: 4.2vw !important; line-height: 1.6 !important; text-align: left !important; white-space: normal !important; /* SP：大きめにして自然に3行ほどで折り返す */ } /* リード文：3.15vwは1文目が画面幅ほぼ99%でギリギリのため、画面が狭くなるほど折り返しやすい。 そこで段階的に文字サイズを下げて、どの幅でも1文目を1行に保つ。 ※下の方が後に書いてあるほど優先（同じ詳細度＋!important＋後勝ち）なので、狭い帯域ほど後に置く */ @media screen and (min-width:782px) and (max-width:1100px) { html body main section#sv .sv__lead { font-size: 2.9vw !important; } } @media screen and (min-width:782px) and (max-width:900px) { html body main section#sv .sv__lead { font-size: 2.5vw !important; } } /* -------------------------- 症例写真エリア --------------------------- */ html body main section#before-after { background-color: transparent !important; background-image: url("assets/img/background_sp_v2.jpg") !important; background-repeat: repeat-y !important; background-position: center top !important; background-size: 100% auto !important; background-attachment: scroll !important; } /* -------------------------- 疑似要素による黒ベタも破壊 --------------------------- */ html body main section#before-after::before, html body main section#before-after::after { background: none !important; opacity: 0 !important; display: none !important; } } @media screen and (max-width:781px) { #fv .fv__brand-band { top: auto !important; /* topを解除し、bottom基準のみにする */ bottom: -8vw !important; /* 帯を下げてFV下端(黒の境界)をまたがせ、文字の下半分を黒に掛ける */ height: auto !important; /* 高さは内容に合わせる（下が切れない） */ } #fv .fv__brand-band-text { font-size: 16vw !important; } /* SPでは背景写真の下方向延長(-20px)を0にして、黒の境界を上げる（文字の下半分に黒がしっかり掛かるように） */ #fv .fv__bg { bottom: 0 !important; } } @media screen and (max-width:781px) { #sv { padding-top: 40px !important; padding-bottom: 40px !important; } } @media screen and (max-width:781px) { #before-after { padding-top: 60px !important; } } @media screen and (max-width:781px) { #before-after .before-after__subtitle { font-size: 5.5vw !important; line-height: 1.2 !important; } } @media screen and (max-width:781px) { #sv { padding-top: 80px !important; padding-bottom: 80px !important; /* 下方向に少し長く */ } #before-after { padding-top: 50px !important; } } @media screen and (max-width:781px) { #before-after .before-after__img, #before-after .before-after__image, #before-after img { width: 92% !important; max-width: none !important; margin: 0 auto !important; display: block !important; } } @media screen and (max-width:781px) { #before-after .before-after__head { margin-bottom: 20px !important; } } @media screen and (max-width:781px) { #before-after { padding-top: 40px !important; } } @media screen and (max-width:781px) { #before-after img { width: 100% !important; max-width: none !important; display: block !important; } #before-after .before-after__item, #before-after .before-after__image { width: 100% !important; } } @media screen and (max-width:781px) { #before-after img { width: 100% !important; max-width: none !important; } } @media screen and (max-width:781px) { #before-after .before-after__subtitle { font-size: 4.103vw !important; /* 32px */ white-space: nowrap !important; } #before-after .before-after__head { padding-bottom: 20px !important; } #before-after img { width: 100% !important; max-width: none !important; } } @media screen and (max-width:781px) { #before-after img { aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; } } @media screen and (max-width:781px) { #before-after .before-after__img { aspect-ratio: 1 / 1 !important; overflow: hidden !important; } #before-after .before-after__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } } @media screen and (max-width:781px) { #before-after .before-after__img, #before-after .before-after__image, #before-after .before-after__item { height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } #before-after img { width: 100% !important; height: 100% !important; object-fit: cover !important; } } @media screen and (max-width: 781px) { .fv__scroll { position: absolute !important; right: 36px !important; top: auto !important; bottom: -25px !important; width: 90px !important; height: 90px !important; z-index: 9999 !important; } .fv__scroll-text { font-size: 20px !important; } .fv__scroll-arrow { width: 15px !important; height: 27px !important; } /* ページトップボタン（.pagetop / SP）は wp-components-common.css へ一本化（重複定義を撤去） */ /* ← この最後に追加 */ #before-after .before-after__case-label { top: auto; bottom: 0; height: 40px; /* 60→40（約2/3） */ font-size: 24px; /* 32→24（少し小さく） */ } #before-after .before-after__case { height: 200px !important; } } @media screen and (max-width:781px) { #fv .fv__bg-img { object-position: left !important; } } @media screen and (max-width:781px) { /* SP：横長画像をちゃんと使う。+transform方式（右に隙間）をやめ、 fv__bg の background-image で右端まで敷き詰める（人物=左、壁=右）。 */ #fv .fv__bg-img { display: none !important; } #fv .fv__bg { background-image: url('assets/img/fv_bg_long2.png') !important; background-repeat: no-repeat !important; background-size: auto 140% !important; /* 高さ基準でやや拡大（人物を大きめに） */ background-position: 35% center !important; /* 横位置：人物を左寄りに、右に壁を残す */ } } #fv::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .15) 0.5px, transparent 0.5px); background-size: 2px 2px; opacity: .35; mix-blend-mode: soft-light; } @media screen and (max-width:781px) { #sv .sv__lead { width: auto !important; padding: 0 24px !important; font-size: 4.2vw !important; /* SP：大きめにして3行ほどで折り返す */ line-height: 1.7 !important; } /* SPでは
を無効化し、画面幅に応じて自然に折り返す（
はPCサイズのときだけ効かせる） */ html body main section#sv .sv__lead { white-space: normal !important; } #sv .sv__lead br { display: none !important; } } #fv::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .15) 0.5px, transparent 0.5px); background-size: 3px 3px; opacity: .18; mix-blend-mode: soft-light; }