@charset "UTF-8"; /* ===================================================================== ポピンズ familycare リニューアル VIPケアサービス紹介ページ（/familycare/service-vipcare/）専用CSS Figma: SP 18:884 --------------------------------------------------------------------- - 固定ページ本文のHTMLに対応する。header.php で is_page('service-vipcare') のときだけ renewal/css/common.css の後に読み込む（後勝ちで上書き可能） - 変数（--rnw-*）は common.css の :root / [data-property="vipcare"] を利用する。 グリーン系への切り替えは body[data-property="vipcare"] が担うため、 このCSSでは色を直書きせず必ず変数を経由する - 旧CSS（/familycare/css/contents.css）と同居するため全クラスに rnw- を付与 - 値は全てFigmaの実測値。px・%・letter-spacing はデザイン値をそのまま記載し、 由来のnode-idをコメントに残す - 構成は service-nanny.css と同型（同じ役割のブロックは同じ書き方に揃えている） ===================================================================== */ /* ===================================================================== 0. ページ共通 ===================================================================== */ /* 旧CSSは box-sizing を全体に指定していない（reset.css にも無い）ため、 このページのスコープ内だけ border-box に揃える。 これをしないと padding を含むFigmaの幅指定が合わなくなる。 */ .rnw-vipcare, .rnw-vipcare *, .rnw-vipcare *::before, .rnw-vipcare *::after { box-sizing: border-box; } .rnw-vipcare { color: var(--rnw-text); font-family: var(--rnw-font-jp); } /* 絞り込みで hidden を付けた要素が、旧 reset.css の details{display:block} に 負けないようにする（ブラウザ既定の [hidden] はサイト側CSSより弱い）。 これが無いとFAQのカテゴリ絞り込みが効かない。 */ .rnw-vipcare [hidden] { display: none; } .rnw-vipcare img { display: block; max-width: 100%; height: auto; } /* 見出し・段落のブラウザ既定マージンを打ち消す。 本番では旧 reset.css が効くが、固定ページ本文は管理画面プレビューなど reset.css の無い文脈で描画されることがあるため、このCSS単体でも Figmaどおりの余白になるようにしておく。 ▼:where() で囲って詳細度を0にしている（service-nanny.css と同じ理由）。 */ :where(.rnw-vipcare) :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, table) { margin: 0; padding: 0; } :where(.rnw-vipcare) :where(ul, ol) { list-style: none; } /* --------------------------------------------------------------------- 画像プレースホルダー（重要） --------------------------------------------------------------------- 原稿・素材が未確定のため、写真・イメージ画像は画像ファイルを作らず グレー矩形で表示する。Figma上の幅・高さ・アスペクト比は各ブロック側の クラスで維持しているので、素材確定後はこのクラスを外して に 差し替えるだけでレイアウトは変わらない。 ※ ロゴ・アイコン等の確定アセットはプレースホルダーにせず実体を配置する。 ------------------------------------------------------------------- */ .rnw-vipcare__img-placeholder { background-color: #D9D9D9; } /* --- 見出し h2（Figma コンポーネント "title/h2"）--- 英字サブ＋日本語見出しの2段。Figma上、中央寄せの回と左寄せの回があるため 修飾子で分ける。英字が "dummydummy" の箇所は原稿未確定のためそのまま。 */ .rnw-vipcare-h2 { display: flex; flex-direction: column; gap: 8px; } /* Figma トークン SP/title/h2-sub / vipcare/accent #327666 */ .rnw-vipcare-h2__en { color: var(--rnw-accent); font-family: var(--rnw-font-en); font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: 1.2px; } /* Figma トークン SP/title/h2 / common/text/bk #444444 */ .rnw-vipcare-h2__jp { color: var(--rnw-text); font-family: var(--rnw-font-serif); font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-h2--center { text-align: center; } /* --- 本文テキスト（Figma トークン SP/text/defalut/medium）--- */ .rnw-vipcare-text { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* 細字版（Figma トークン SP/text/defalut/thin） */ .rnw-vipcare-text--thin { font-weight: 400; } /* --- 塗りボタンの色 --- 本文のCTAは common/accent/red #912344（Figma 694:23220・694:79316 ほか、 ページ内の塗りボタンはすべてこの色）。 ▼common.css の --rnw-cta-bg はVIPケアでは緑 #4FBAA1 で、こちらは ヘッダー／フッターのボタン用。本文だけこのページで上書きする。 */ .rnw-vipcare .rnw-btn--main { background-color: var(--rnw-link); /* common/accent/red #912344 */ } /* --- 下向き矢印アイコン --- common.css の .rnw-icon--arrow は icon_arrow_circle.svg を -90度回転して 「右向き」にしている。ページ内メニューは同じアセットの無回転（下向き） なので、回転だけ打ち消す修飾子を用意する。 */ .rnw-icon--arrow-down { -webkit-mask-image: url('../../img/icon_arrow_circle.svg'); mask-image: url('../../img/icon_arrow_circle.svg'); transform: none; } /* ===================================================================== 1. メインビジュアル＋リード（Figma 18:886） ===================================================================== */ .rnw-vipcare-mv { padding-bottom: 16px; /* section高さ558 − カード下端542 */ background-color: var(--rnw-bg3); /* Figma common/bg2 = #EEE8DE */ } /* --- 写真エリア（Figma 694:77521 "image 1" / 375.317 × 490）--- 高さを固定せず aspect-ratio で持たせ、内側の写真の拡大率・位置を Figmaと同じ「%」で指定する。 */ .rnw-vipcare-mv__media { position: relative; aspect-ratio: 375.317 / 490; overflow: hidden; } /* 写真はSP用・PC用の2枚を置き、幅で出し分ける（Figma 1258:13215 ほか）。 どちらもあらかじめ枠の比率に切ってある画像なので、拡大・位置の%指定は持たせず object-fit: cover で敷くだけにする。 ▼セレクタを2クラスにしているのは詳細度のため。上の `.rnw-vipcare img` （要素セレクタを含むため詳細度が高い）の max-width:100% / height:auto に負ける。 */ .rnw-vipcare-mv__media .rnw-vipcare-mv__img { position: static; width: 100%; height: auto; max-width: none; } @media only screen and (min-width: 768px) { .rnw-vipcare-mv__media .rnw-vipcare-mv__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; top: 68px; left: -2%; } .rnw-vipcare-mv__media .rnw-vipcare-mv__img--sp { display: none; } .rnw-vipcare-mv__media .rnw-vipcare-mv__img--pc { display: block; } .rnw-vipcare-mv__media::before { display: none; } } .rnw-vipcare-mv__img--pc { display: none; } /* 写真の上に黒10%（Figma: bg-[rgba(0,0,0,0.1)]） */ .rnw-vipcare-mv__media::before { position: absolute; z-index: 1; inset: 0; content: ''; background-color: rgba(0, 0, 0, 0.1); } /* さらに紙テクスチャを重ねる（Figma: mix-blend-darken / opacity 40% / タイル 245.76 × 163.86px）。ナニーと同一アセット。 */ .rnw-vipcare-mv__media::after { position: absolute; z-index: 1; inset: 0; content: ''; background-image: url('../../img/service-nanny/texture_paper.jpg'); background-repeat: repeat; background-position: left top; background-size: 245.76px 163.86px; opacity: 0.4; mix-blend-mode: darken; } /* --- テキストカード（Figma 18:888 / w343 top370 padding16 bg white 90%）--- 写真の下端に120pxかぶせる指定（top 370 − 写真高さ490 = −120px）。 */ .rnw-vipcare-mv__card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; width: calc(100% - 32px); /* 375 − 16 × 2 = 343 */ max-width: 343px; margin: -120px auto 0; padding: 16px; background-color: rgba(255, 255, 255, 0.9); } .rnw-vipcare-mv__head { display: flex; flex-direction: column; gap: 4px; } /* Figma 18:890 Lusitana Regular 14 / lh1.3 / tracking3.7 / vipcare/accent */ .rnw-vipcare-mv__en { color: var(--rnw-accent); font-family: var(--rnw-font-en); font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 3.7px; } /* Figma 18:891 Yu Mincho Pr6N D 26 / lh1.3 / tracking1.2 / common/text/bk */ .rnw-vipcare-mv__title { color: var(--rnw-text); font-family: var(--rnw-font-serif); font-size: 26px; font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; white-space: nowrap; /* Figma: whitespace-nowrap */ } /* Figma 18:892 Zen Kaku Gothic New Bold 10 / lh1.8 / tracking1.2 */ .rnw-vipcare-mv__lead { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 10px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; } /* ===================================================================== 2. VIPケアサービスとは？（Figma 18:893） ===================================================================== */ .rnw-vipcare-about { display: flex; flex-direction: column; align-items: center; padding: 56px 16px; background-color: #FFFFFF; /* common/white */ } /* ロゴロックアップ（Figma 694:77580 300×67.583）確定アセット。 ロゴ→見出しだけ56px（Figma 694:77580→694:77622）。body の gap は24pxなので 差分の32pxを margin で足す。 */ .rnw-vipcare-about__logo { order: 1; width: 300px; max-width: 100%; height: auto; margin-bottom: 32px; } .rnw-vipcare-about__body { display: flex; flex-direction: column; align-items: center; gap: 24px; /* Figma 694:77622 gap24 */ width: 100%; max-width: 343px; } /* SPでは白カードという箱は無く、見出し・本文・ボタンが縦に並ぶだけなので カードを display:contents にして body の直下に流し込む。 並び順は order で「ロゴ→見出し→写真→本文＋ボタン」に揃える。 */ .rnw-vipcare-about__card { display: contents; } .rnw-vipcare-about__card > .rnw-vipcare-h2 { order: 2; } /* 写真（Figma 694:77624 343×250） */ .rnw-vipcare-about__media { order: 3; aspect-ratio: 343 / 250; width: 100%; } .rnw-vipcare-about__media .rnw-vipcare-about__img { width: 100%; height: 100%; object-fit: cover; } .rnw-vipcare-about__inner { order: 4; display: flex; flex-direction: column; gap: 32px; /* Figma 694:77625 gap32 */ width: 100%; } /* ===================================================================== 3. ページ内メニュー（Figma SP 694:77527） --------------------------------------------------------------------- 8項目の2列グリッド。背景はお問い合わせセクションと同じグラデーション （common.css の --rnw-contact-gra ＝ Figma vipcare/gra2）。 ===================================================================== */ .rnw-vipcare-menu { padding: 56px 16px; background: var(--rnw-contact-gra); } .rnw-vipcare-menu__list { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; justify-content: center; } /* Figma 18:947 ほか：白 / r8 / p16 / 幅160 / drop shadow 0 4 56 #00000014 */ .rnw-vipcare-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 160px; padding: 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08); color: var(--rnw-text); /* common/text/bk #444444 */ font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-decoration: none; white-space: nowrap; } /* 「家事・家事プラスコース」は2行組みだが、他と同じ48px高に収める （Figma 694:77553 は h48 / 上下padding 8px）。 */ .rnw-vipcare-menu__item:has(br) { padding-block: 8px; } .rnw-vipcare-menu__icon { width: 14px; height: 14px; color: var(--rnw-text); } /* ===================================================================== 4. セクション見出し（共通パーツ / Figma 18:1021・18:1063・18:1091 ほか） --------------------------------------------------------------------- 「全幅の写真200px」＋「白90%のカードを40px重ねて中央に置く」型。 特徴・お悩み・サービスについて・活用事例・お客様の声・ご利用料金・ お問い合わせで繰り返し出てくるため共通化する。 写真はセクション左右パディング16pxを打ち消して全幅（375px）にする。 ===================================================================== */ .rnw-vipcare-shead { display: flex; flex-direction: column; align-items: center; } /* Figma 694:77634 ほか：375×200／カードを重ねるため下に −40px */ .rnw-vipcare-shead__media { position: relative; width: calc(100% + 32px); margin-inline: -16px; margin-bottom: -40px; aspect-ratio: 375 / 200; } /* ▼2クラスにしているのは詳細度のため（上の `.rnw-vipcare img` に負けないように）。 Figmaの塗りは cover なので object-fit で合わせる。 */ .rnw-vipcare-shead__media .rnw-vipcare-shead__img { width: 100%; height: 100%; object-fit: cover; } /* Figma 694:77635 ほか：幅300／白90%／上下パディング24 */ .rnw-vipcare-shead__card { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: 300px; max-width: 100%; padding-block: 24px; background-color: rgba(255, 255, 255, 0.9); } /* ===================================================================== 5. 横スライダー（共通パーツ） --------------------------------------------------------------------- Figma 18:1026（コントロール）＋ 18:1041（カード列）。 ナニー（13:3256 / 13:3271）と同一構造・同一寸法で、色だけが プロパティ変数（--rnw-accent）で切り替わる。 JSが無くても指でスワイプできるよう、素のスクロール＋scroll-snapで実装し、 前後ボタンと進捗バーだけを renewal/js/slider.js から制御する。 ===================================================================== */ .rnw-vipcare-slider { display: flex; flex-direction: column; gap: 32px; width: 100%; } /* --- コントロール（Figma 18:1026 幅239 / 高さ24） --- */ .rnw-vipcare-slider__ctrl { display: flex; align-items: center; justify-content: space-between; width: 239px; height: 24px; margin-inline: auto; } .rnw-vipcare-slider__btn { display: block; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; } .rnw-vipcare-slider__btn img { width: 24px; height: 24px; } /* 「前へ」は同じアセットを180度回転（Figma 18:1030 rotate180） */ .rnw-vipcare-slider__btn--prev img { transform: rotate(180deg); } /* 端に到達したボタンは半透明（Figma 18:1027 opacity 50%） */ .rnw-vipcare-slider__btn[disabled] { opacity: 0.5; cursor: default; } /* --- 進捗バー（Figma 18:1033 160×1px ＋ 18:1034 65.341×3px r10） --- */ .rnw-vipcare-slider__bar { position: relative; width: 160px; height: 1px; background-color: var(--rnw-accent); } .rnw-vipcare-slider__bar-thumb { position: absolute; top: -1px; left: 0; width: 40.8%; /* 65.341 ÷ 160。JS側で実際の割合に更新 */ height: 3px; border-radius: 10px; background-color: var(--rnw-accent); } /* --- カード列（Figma 18:1041 gap16 / カード幅300） --- セクションの左右パディング16pxを打ち消して全幅スクロールにし、 内側に同じ16pxを持たせて先頭カードの位置をFigmaと合わせる。 */ .rnw-vipcare-slider__track { display: flex; gap: 16px; align-items: stretch; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; overflow-x: auto; /* overflow-x を指定すると Y 方向もクリップされ、カードの drop-shadow が 上下で切れる（overflow-y: clip は auto と混ぜると hidden に矯正されるので使えない）。 内側に影のぶんの余白を作り、同じだけ外へ戻すので見た目の位置は変わらない。 */ padding-block: 40px; margin-block: -40px; scroll-snap-type: x mandatory; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .rnw-vipcare-slider__track::-webkit-scrollbar { display: none; } .rnw-vipcare-slider__item { flex: 0 0 300px; scroll-snap-align: start; } /* ===================================================================== 6. 特徴（Figma 18:1019） ===================================================================== */ .rnw-vipcare-features { display: flex; flex-direction: column; align-items: center; gap: 32px; /* 見出し→スライダー→動画 いずれも32px */ padding: 0 16px 80px; /* 下80px＝section高さ1230.82 − 動画下端1150.82 */ background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } /* --- 特徴カード（Figma 18:1042）--- */ .rnw-vipcare-fcard { display: flex; flex-direction: column; justify-content: center; box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08); /* Figmaトークン drop */ } /* 写真（Figma 18:1043 300×200）。Figma上もグレーのベタ塗りで支給待ち。 */ .rnw-vipcare-fcard__media { width: 100%; aspect-ratio: 300 / 200; } .rnw-vipcare-fcard__body { display: flex; flex: 1 0 0; flex-direction: column; gap: 12px; padding: 16px; background-color: #FFFFFF; } /* Figma トークン SP/title/h3 */ .rnw-vipcare-fcard__title { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; text-align: center; } /* Figma 18:1047 SP/text/defalut/medium ＋ 両端揃え */ .rnw-vipcare-fcard__text { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; text-align: justify; } /* 紹介動画の枠（Figma 18:1061 343×189.82） */ .rnw-vipcare-features__movie { width: 100%; max-width: 343px; aspect-ratio: 16 / 9; } .rnw-vipcare-features__movie iframe { display: block; width: 100%; height: 100%; border: 0; } /* ===================================================================== 7. このような悩みはありませんか？（Figma 18:1062） ===================================================================== */ .rnw-vipcare-worry { display: flex; flex-direction: column; align-items: center; gap: 40px; /* 見出し下端311 → リスト開始351 */ padding: 0 16px 72px; /* 下72px＝section高さ1381 − リスト下端1309 */ background-color: #FFFFFF; /* common/white */ } .rnw-vipcare-worry__list { display: flex; flex-direction: column; gap: 24px; /* Figma 18:1068 内の各Link間 */ width: 100%; max-width: 343px; } /* カード外枠（Figma 18:1069 白地＋vipcare/main 1px） */ .rnw-vipcare-worry__item { display: flex; flex-direction: column; border: 1px solid var(--rnw-main); background-color: #FFFFFF; } /* 見出し帯（Figma 18:1070 vipcare/bg 地／px27 py17／SP/text/large/bold） */ .rnw-vipcare-worry__head { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 17px 27px; border: 1px solid var(--rnw-main); margin: -1px; /* 外枠と二重に見えないよう内側で相殺する */ background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ color: var(--rnw-accent); /* vipcare/accent #327666 */ font-family: var(--rnw-font-jp); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.216px; /* Figma 18:1071 実測（他と異なるため注意） */ text-align: center; } .rnw-vipcare-worry__body { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 16px; } /* ===================================================================== 8. サービスについて（Figma 18:1090） --------------------------------------------------------------------- コースの比較表＋3コース。セクション地色は common/bg2（ベージュ）で、 その上に白の比較表カードとミント地のコースカードが乗る。 ===================================================================== */ .rnw-vipcare-service { display: flex; flex-direction: column; gap: 32px; /* 見出し下端275 → 中身開始307 */ padding: 0 16px 80px; background-color: var(--rnw-bg3); /* common/bg2 #EEE8DE */ } .rnw-vipcare-service__inner { display: flex; flex-direction: column; gap: 32px; /* 比較表→介護→看護→家事 の間隔 */ width: 100%; } /* --- タグ（Figma コンポーネント "tag"）--- コース見出しの上に載る「お悩み」タグと、コース内の「ご自宅で」等の 小タグで同じコンポーネントを使い分けている。 */ .rnw-vipcare-tag { display: flex; align-items: center; justify-content: center; padding: 12px; border: 0.745px solid var(--rnw-main); border-radius: 8px; background-color: #FFFFFF; color: var(--rnw-main); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-align: center; } /* コース見出し上の「お悩み」タグ（Figma 18:1163 / 18:1567）。 写真に重なるため白80%・角丸なし。 */ .rnw-vipcare-tag--worry { width: 100%; border-radius: 0; /* Figma（node 1258:13297）は枠線なし・塗り #ECF7F4・文字 vipcare/accent #327666。 枠線と文字色が --rnw-main（#4FBAA1）になっていたのを合わせる（2026-09-21）。 */ border: 0; background-color: #ECF7F4; color: var(--rnw-accent); } /* 家事コースだけ写真に重ならないため、白ベタ＋角丸のまま（Figma 18:1969） */ .rnw-vipcare-tag--boxed { border-radius: 8px; background-color: #FFFFFF; } .rnw-vipcare-taglist { display: flex; flex-wrap: wrap; gap: 3px; /* Figma 18:1169 */ } /* 看護コースだけ gap12（Figma 18:1573） */ .rnw-vipcare-taglist--loose { gap: 12px; } /* --------------------------------------------------------------------- 8-1. コースの比較表（Figma 1258:13215） --------------------------------------------------------------------- 4コース（介護／ナースケア／家事／家事プラス）×4行。 行の境目は「左のラベル列の下罫線」と「カード内セルの下破線」の2本で作る。 この2本を同じ高さに揃えるため、セルの高さを .rnw-vipcare-compare の --cmp-h-scene / --cmp-h-fee に持たせ、ラベル列とカードの両方から読ませる。 （高さを変えるときはこの変数だけを触ること） 1199px以下は4列が幅に収まらないため横スクロール。セクションの左右16pxを 打ち消して画面幅いっぱいでスクロールさせ、内側に同じ16pxを持たせる。 ------------------------------------------------------------------- */ .rnw-vipcare-compare { --cmp-line: #E2E2E2; /* 罫線・破線 common/border */ --cmp-head-h: 52.8px; /* 見出し帯：16px×1.8 ＋ py12 */ --cmp-h-scene: 202px; /* ご利用シーンの本文枠（14px×1.8＝25.2の8行） */ --cmp-h-fee: 40px; /* 料金・最低利用時間の枠（Figma 1258:13239） */ --cmp-gap: 16px; /* セル間。破線はこの中央に来る */ --cmp-card-w: 252px; /* 横スクロール時のカード1枚 */ display: flex; flex-direction: column; gap: 24px; padding: 24px 16px; background-color: #FFFFFF; } /* Figma 1258:13216 トークン SP/title/h3 */ .rnw-vipcare-compare__title { color: var(--rnw-accent); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; text-align: center; } .rnw-vipcare-compare__scroll { width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .rnw-vipcare-compare__scroll::-webkit-scrollbar { display: none; } .rnw-vipcare-compare__inner { display: flex; align-items: stretch; gap: 8px; width: max-content; } /* 行見出し列（Figma 1258:13218）。 上の余白はカード側の本文開始位置（見出し帯＋本文の上パディング24）に合わせる。 */ .rnw-vipcare-compare__labels { display: flex; flex-direction: column; flex-shrink: 0; width: 82px; padding-top: calc(var(--cmp-head-h) + 24px); background-color: #FFFFFF; } /* 「ご利用料金」「最低利用時間」の行（Figma 1258:13222 / 1258:13225）。 高さ＝セル本体＋その上下のgap。 */ .rnw-vipcare-compare__label { display: flex; flex-shrink: 0; align-items: center; height: calc(var(--cmp-h-fee) + var(--cmp-gap) * 2); padding-inline: 8px; border-bottom: 1px dashed var(--cmp-line); color: var(--rnw-text); /* common/text/bk #444444 */ font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; } /* 「ご利用シーン」の行（Figma 1258:13219）は本文枠ぶんだけ高い */ .rnw-vipcare-compare__label--scene { height: calc(var(--cmp-h-scene) + var(--cmp-gap)); } /* 「対応エリア」の行（Figma 1258:13228）は残りの高さいっぱい */ .rnw-vipcare-compare__label--grow { flex: 1 0 0; height: auto; min-height: 0; } .rnw-vipcare-compare__cards { display: flex; align-items: stretch; gap: 8px; } /* --- 比較表のコースカード（Figma 1258:13232） --- */ .rnw-vipcare-ccard { display: flex; flex-direction: column; flex-shrink: 0; width: var(--cmp-card-w); } /* Figma 1258:13233：vipcare/bg 地／上だけ角丸8／PC/text/dafalut/bold。 「ナースケア（看護）コース」が1行に収まる前提で高さを固定している （この高さがラベル列の上余白と対になっている）。 */ .rnw-vipcare-ccard__head { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--cmp-head-h); padding-inline: 8px; border-radius: 8px 8px 0 0; background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; text-align: center; white-space: nowrap; overflow: hidden; } /* Figma 1258:13235：白地／左右下に main の1px罫線／下だけ角丸8／px16 py24 */ .rnw-vipcare-ccard__body { display: flex; flex: 1 0 auto; flex-direction: column; gap: 36px; align-items: center; justify-content: space-between; width: 100%; padding: 24px 16px; border: 1px solid var(--rnw-main); border-top: 0; border-radius: 0 0 8px 8px; background-color: #FFFFFF; } .rnw-vipcare-ccard__info { display: flex; flex-direction: column; gap: var(--cmp-gap); align-items: flex-start; width: 100%; } /* Figma 1258:13239 ほか：SP/text/defalut/medium ／ common/text/gray。 セル下の破線は common.css の .rnw-dash-b（2-2破線）を色だけ変えて使う。 高さは本体ぶんだけを持たせたいので box-sizing は content-box。 */ .rnw-vipcare-ccard__cell { --rnw-dash-c: var(--cmp-line); box-sizing: content-box; display: flex; flex-direction: column; justify-content: center; width: 100%; height: var(--cmp-h-fee); padding-bottom: var(--cmp-gap); color: var(--rnw-caption); /* common/text/gray #626262 */ font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* ご利用シーン（Figma 1258:13237）だけ枠が高く、上から流す */ .rnw-vipcare-ccard__cell--scene { justify-content: flex-start; height: var(--cmp-h-scene); } /* Figma 1258:13244：中黒付きのリスト。折り返しは中黒の右に揃える */ .rnw-vipcare-ccard__area-list { width: 100%; color: var(--rnw-caption); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } .rnw-vipcare-ccard__area-list li { padding-left: 1.5em; text-indent: -1.5em; } .rnw-vipcare-ccard__area-list li::before { content: '・'; } .rnw-vipcare-ccard__btns { display: flex; flex-direction: column; gap: 24px; width: 100%; } /* 「◯◯コースの詳細」（Figma 1258:13246）：枠のないテキストリンク */ .rnw-vipcare-ccard__link { display: flex; align-items: center; justify-content: center; gap: 24px; color: var(--rnw-accent); /* vipcare/accent #327666 */ font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-decoration: none; } .rnw-vipcare-ccard__link-icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--rnw-accent); } /* 塗りボタンは左右24px（Figma 1258:13247。共通の32ではない） */ .rnw-vipcare-ccard__btns .rnw-btn { padding-inline: 24px; } /* --------------------------------------------------------------------- 8-2. コースカード（Figma 18:1158 / 18:1562 / 18:1966） ------------------------------------------------------------------- */ .rnw-vipcare-course { display: flex; flex-direction: column; } /* 上半分（Figma SP 694:77771 / PC 694:23389）：vipcare/bg 地／px16 py24／上だけ角丸8 ▼直下の並びは [お悩みタグ, 見出し, 写真, 本文ブロック] で固定している。 PC（694:23389）はお悩みタグが全幅の帯になり、その下が 「左＝見出し＋本文＋ボタン／右＝写真600px」の2列になるため、 タグと見出しを本文ブロックの外に出しておく必要がある。 SPの並び順はこの下の order で作る。 */ .rnw-vipcare-course__head { display: flex; flex-direction: column; gap: 24px; /* Figma 694:77775→694:77776→694:77777 */ padding: 24px 16px; border-radius: 8px 8px 0 0; background-color: var(--rnw-bg2); } /* 写真（Figma 694:77773 311×200） */ .rnw-vipcare-course__media { width: 100%; aspect-ratio: 311 / 200; } .rnw-vipcare-course__media .rnw-vipcare-course__img { width: 100%; height: 100%; object-fit: cover; } /* 介護・看護は写真が先頭で、下のタグに34px重なる（Figma 694:77772）。 head の gap 24px ぶんを足して −58px にしている。 */ .rnw-vipcare-course__head:not(.rnw-vipcare-course__head--media-inline) .rnw-vipcare-course__media { order: -1; margin-bottom: -58px; } .rnw-vipcare-course__inner { position: relative; /* 写真に重なるタグを前面に出す */ display: flex; flex-direction: column; gap: 24px; } /* 説明文とタグ列の間だけ12px（Figma 18:1166 / 18:1570） */ .rnw-vipcare-course__inner .rnw-vipcare-text + .rnw-vipcare-taglist { margin-top: -12px; } /* Figma 18:1164 トークン SP/title/h3 */ .rnw-vipcare-course__title { color: var(--rnw-accent); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; text-align: center; } .rnw-vipcare-course__btns { display: flex; flex-direction: column; gap: 10px; /* Figma 18:1173 */ margin-top: 8px; /* 18:1165 gap24 − 18:1166 内の12 との差 */ } /* コース内のCTAは2行組みになるため line-height を本文寄りにする （Figma 18:1175：18px / lh1.8 / tracking0.216） */ .rnw-vipcare-course__btns .rnw-btn--main { line-height: 1.8; letter-spacing: 0.216px; } /* --- 詳細（アコーディオン / Figma 18:1176） --- */ .rnw-vipcare-course__detail { display: flex; flex-direction: column; } /* Figma 18:1177：vipcare/accent 地／px8 py16／白文字18 */ .rnw-vipcare-course__toggle { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 16px 8px; border: 0; background-color: var(--rnw-accent); color: #FFFFFF; font-family: var(--rnw-font-jp); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; cursor: pointer; } /* Figma 18:1180：12×24の三角を90度回転して下向き。開いているときは上向き。 */ .rnw-vipcare-course__caret { display: block; width: 24px; height: 12px; background-color: currentColor; -webkit-mask-image: url('../../img/service-vipcare/icon_triangle.svg'); mask-image: url('../../img/service-vipcare/icon_triangle.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 12px 24px; mask-size: 12px 24px; transform: rotate(90deg); } .rnw-vipcare-course__toggle[aria-expanded="true"] .rnw-vipcare-course__caret { transform: rotate(-90deg); } .rnw-vipcare-course__panel { display: flex; flex-direction: column; gap: 24px; padding: 24px 0; background-color: #FFFFFF; } /* JSが閉じるときに hidden を付ける。ここで display を持っていると UAスタイルの [hidden]{display:none} に勝ってしまうので明示する。 */ .rnw-vipcare-course__panel[hidden] { display: none; } /* 詳細内のアンカーリンク（Figma 18:1183）：2列・幅149・gap12 */ .rnw-vipcare-anchors { display: flex; flex-wrap: wrap; gap: 12px; padding-inline: 16px; } .rnw-vipcare-anchor { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 149px; padding: 16px; border-radius: 8px; background-color: #FFFFFF; box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08); color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-decoration: none; white-space: nowrap; } .rnw-vipcare-anchor__icon { width: 14px; height: 14px; color: var(--rnw-text); } .rnw-vipcare-course__group { display: flex; flex-direction: column; gap: 10px; } /* Figma 18:1209 */ .rnw-vipcare-course__group-title { padding-inline: 16px; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; } /* ===================================================================== 9. 活用事例（Figma 18:2367） ===================================================================== */ .rnw-vipcare-case { display: flex; flex-direction: column; align-items: center; gap: 32px; /* 見出し下端286 → 本文開始318 */ padding: 0 16px 80px; /* Figma 1258:13373：上から #E6F0EE → #77D0BB（81.731%）。 共通の --rnw-contact-gra は白始まりで別物のため、ここで持つ。 */ background: linear-gradient(to bottom, #E6F0EE 0%, #77D0BB 81.731%); } /* 見出しの写真が2枚並び（Figma 18:2370）。1枚ずつ幅50%・高さ200。 */ .rnw-vipcare-shead__media--split { display: flex; align-items: flex-start; background: none; } .rnw-vipcare-shead__media--split > * { flex: 1 0 0; min-width: 0; aspect-ratio: 187.5 / 200; } .rnw-vipcare-shead__media--split .rnw-vipcare-shead__img { height: 100%; } .rnw-vipcare-case__body { display: flex; flex-direction: column; gap: 32px; align-items: center; width: 100%; max-width: 343px; } /* 絞り込み（Figma 1258:13382 / SP 1258:44750） サービスと解決したい課題の2軸。select で出し、UAの矢印は消して .rnw-vipcare-select__icon を重ねる。動作は service-vipcare-case.js。 */ .rnw-vipcare-case__filter { display: flex; flex-direction: column; gap: 12px; width: 100%; } .rnw-vipcare-select-wrap { position: relative; width: 100%; } .rnw-vipcare-select { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 52px 8px 12px; /* 右はアイコン32＋余白 */ border: 1px solid #FFFFFF; border-radius: 4px; background-color: #FFFFFF; color: var(--rnw-caption); /* common/text/gray #626262 */ font-family: var(--rnw-font-jp); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.216px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .rnw-vipcare-select__icon { position: absolute; top: 50%; right: 12px; width: 32px; height: 32px; color: var(--rnw-caption); pointer-events: none; transform: translateY(-50%); } /* 事例カード（Figma 18:2396 幅311）。特徴カードよりカードが広い。 */ .rnw-vipcare-slider__item--case { flex-basis: 311px; } /* カードは中身の量に関わらず等高にする。タグは下端で揃える。 */ .rnw-vipcare-slider__track--case { align-items: stretch; } .rnw-vipcare-casecard { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 16px; border-radius: 0 0 8px 8px; background-color: #FFFFFF; } /* 絞り込みで隠したカード（service-vipcare-case.js が hidden を付ける）。 display:flex が UA の [hidden] より強いため明示する。 */ .rnw-vipcare-casecard[hidden] { display: none; } /* カード全体をリンクにする。中身の積み方はカード側と同じ */ .rnw-vipcare-casecard__link { display: flex; flex: 1; flex-direction: column; gap: 16px; align-items: center; width: 100%; color: inherit; text-decoration: none; } /* Figma 18:2398：279×150（カード内寸） */ .rnw-vipcare-casecard__media { width: 100%; aspect-ratio: 279 / 150; overflow: hidden; } .rnw-vipcare-casecard__media img { width: 100%; height: 100%; object-fit: cover; } .rnw-vipcare-casecard__body { display: flex; flex: 1; flex-direction: column; gap: 20px; width: 100%; } /* 本文の量が違ってもタグの位置が揃うよう、余りを上に寄せる */ .rnw-vipcare-casecard__body .rnw-vipcare-taglist { margin-top: auto; } /* Figma 1258:13404：中黒はPHP側で付けるため list-style は使わない。 1項目1行で積むので span を縦並びにする */ .rnw-vipcare-casecard__points { display: flex; flex-direction: column; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* 「もっと見る」だけ枠線が vipcare/accent（Figma 18:2423）。 共通の .rnw-btn--sub は枠線・文字とも subcta（main色）のため、枠線だけ上書きする。 */ .rnw-vipcare-btn--accent { border-color: var(--rnw-accent); } /* ===================================================================== 10. お客様の声（Figma 18:2424） --------------------------------------------------------------------- カードは [display_voices] の出力（旧デザイン）。 ===================================================================== */ .rnw-vipcare-voice { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 0 16px 80px; background-color: #FFFFFF; } /* 写真は当面出さない。戻すときはこの1行を消す（2026-09-04） */ .rnw-vipcare-voice .rnw-voice-card__media { display: none; } .rnw-vipcare-voice__body { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; max-width: 343px; } /* 絞り込みタグ（Figma 18:2433）：角丸55.96のピル。現在選択のみ塗り。 */ .rnw-vipcare-ftags { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; } .rnw-vipcare-ftag { display: flex; align-items: center; justify-content: center; padding: 12px 19.926px; /* px8 ＋ 内側 Text Container の px11.926 */ border: 0.745px solid var(--rnw-main); border-radius: 55.96px; background-color: #FFFFFF; color: var(--rnw-main); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; white-space: nowrap; } .rnw-vipcare-ftag--current { border-color: #FFFFFF; background-color: var(--rnw-main); color: #FFFFFF; } /* ===================================================================== 11. ご利用料金（Figma 18:2455） ===================================================================== */ .rnw-vipcare-price { display: flex; flex-direction: column; align-items: center; gap: 56px; /* 見出し下端286 → 本文開始342 */ padding: 0 16px 56px; /* 下56＝3338.04 −（342＋2940.04） */ background-color: #FFFFFF; } .rnw-vipcare-price__body { display: flex; flex-direction: column; width: 100%; max-width: 343px; } /* --- 上段（Figma 18:2464）vipcare/bg 地・上だけ角丸8 --- */ .rnw-vipcare-price__head { display: flex; flex-direction: column; gap: 32px; justify-content: center; padding: 24px 16px; border-radius: 8px 8px 0 0; background-color: var(--rnw-bg2); } .rnw-vipcare-price__area { display: flex; flex-direction: column; gap: 24px; } /* Figma 18:2466 / 18:2478 トークン SP/title/h3（accent・中央） */ .rnw-vipcare-price__h3 { color: var(--rnw-accent); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; text-align: center; } .rnw-vipcare-price__fee { display: flex; flex-direction: column; gap: 25px; /* Figma 18:2476 */ } .rnw-vipcare-price__fee-head { display: flex; flex-direction: column; gap: 9px; align-items: center; } .rnw-vipcare-price__courses { display: flex; flex-direction: column; gap: 9px; width: 100%; } /* 入会金・会費のコース名タグ（Figma 18:2480）：地色なし・枠線と文字が accent */ .rnw-vipcare-tag--accent { border-color: var(--rnw-accent); background-color: transparent; color: var(--rnw-accent); width: 100%; } .rnw-vipcare-price__fee-body { display: flex; flex-direction: column; gap: 8.96px; /* Figma 18:2483 */ align-items: center; } /* Figma 18:2485：白／r8／px40 py20 */ .rnw-vipcare-price__fee-card { display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 40px; border-radius: 8px; background-color: #FFFFFF; } /* Figma 18:2488 Noto Sans JP Bold 18.1 / lh30.73 / accent */ .rnw-vipcare-price__fee-label { color: var(--rnw-accent); font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 18.1px; font-weight: 700; line-height: 30.73px; text-align: center; } /* Figma 18:2490 SP/text/large/bold（tracking0.216） */ .rnw-vipcare-price__fee-value { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.216px; text-align: center; } /* 入会金カードは「ラベル｜金額」の横並び。ラベル側に右30pxの余白（Figma Margin）。 */ .rnw-vipcare-price__fee-card:not(.rnw-vipcare-price__fee-card--split) .rnw-vipcare-price__fee-label { padding-right: 30px; } /* 「＋」（Figma 18:2492 19×3 ／ 18:2493 3×19） */ .rnw-vipcare-price__plus { position: relative; display: block; width: 19px; height: 19px; } .rnw-vipcare-price__plus::before, .rnw-vipcare-price__plus::after { position: absolute; content: ''; background-color: var(--rnw-accent); } .rnw-vipcare-price__plus::before { top: 8px; left: 0; width: 19px; height: 3px; } .rnw-vipcare-price__plus::after { top: 0; left: 8px; width: 3px; height: 19px; } /* 年会費／月会費カード（Figma 18:2495 px30 py20）。2列＋斜め線。 */ .rnw-vipcare-price__fee-card--split { gap: 0; padding: 20px 30px; } .rnw-vipcare-price__fee-col { display: flex; flex: 1 0 0; flex-direction: column; align-items: center; } /* Figma 18:2509：-60度に傾いた細線（「または」の意味の区切り） */ .rnw-vipcare-price__slash { display: block; width: 1px; height: 56px; background-color: var(--rnw-accent); transform: rotate(30deg); /* Figmaの-60度＝垂直から30度倒した状態 */ } /* 注記（Figma 18:2511 / 18:2656 / 18:2695） common/text/caption */ .rnw-vipcare-note { width: 100%; color: var(--rnw-caption); /* common/text/gray #626262 */ font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 1.2px; } /* --- 下段：各サービス利用料金（アコーディオン / Figma 18:2512） --- */ .rnw-vipcare-price__detail { display: flex; flex-direction: column; } /* Figma 1258:13676：入会金・会費のパネルと地続きで vipcare/bg。下だけ24空ける */ .rnw-vipcare-price__detail { padding-bottom: 24px; background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } .rnw-vipcare-price__panel { display: flex; flex-direction: column; gap: 18px; /* Figma 表群→体験利用→注記 の間隔 */ padding-top: 24px; /* ボタン下端55 → 中身開始79 */ } .rnw-vipcare-price__tables { display: flex; flex-direction: column; gap: 22.72px; /* Figma 18:2521→18:2550 の実測 */ padding-inline: 16px; } /* --- 料金表（Figma 18:2521） --- */ .rnw-vipcare-ptable { display: flex; flex-direction: column; } /* コース名（Figma 1258:13686）：vipcare/main 地／白／PC/text/large/bold 20px／p10 */ .rnw-vipcare-ptable__head { padding: 10px; border-radius: 8px 8px 0 0; background-color: var(--rnw-main); color: #FFFFFF; font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; text-align: center; } /* 表（Figma 1258:13688）：左右下に vipcare/bg の枠、左下だけ角丸10。 旧 contents.css の `table { margin: 0 0 32px }` を打ち消すため margin を明示。 */ .rnw-vipcare-ptable__table { width: 100%; margin: 0; border-right: 1px solid var(--rnw-bg2); border-bottom: 1px solid var(--rnw-bg2); border-left: 1px solid var(--rnw-bg2); border-collapse: collapse; border-bottom-left-radius: 10px; overflow: hidden; } /* セル共通（Figma 1258:13691 ほか）：common/bg 地／vipcare/bg の罫線／16px */ .rnw-vipcare-ptable__th, .rnw-vipcare-ptable__sub, .rnw-vipcare-ptable__td { border-top: 1px solid var(--rnw-bg2); background-color: var(--rnw-bg1); /* common/bg #FAF7F2 */ font-family: var(--rnw-font-jp); font-size: 16px; line-height: 1.8; letter-spacing: 1.2px; vertical-align: top; } /* 見出し列（Figma 1258:13691）：幅110／pt13 pr9 pb12 pl8 */ .rnw-vipcare-ptable__th { width: 110px; padding: 13px 9px 12px 8px; border-right: 1px solid var(--rnw-bg2); color: var(--rnw-accent); font-weight: 700; text-align: left; } /* 平日／土日祝日（Figma 1258:13693）：pt13 pr13 pb12 pl12 */ .rnw-vipcare-ptable__sub { padding: 13px 13px 12px 12px; border-right: 1px solid var(--rnw-bg2); color: var(--rnw-accent); font-weight: 700; text-align: left; } /* 金額（Figma 1258:13695）：px15.153 pt11.607 pb10.607／右寄せ／Medium */ .rnw-vipcare-ptable__td { padding: 11.607px 15.153px 10.607px; color: var(--rnw-text); font-weight: 500; text-align: right; } /* 土日祝日の行だけ地色が薄い（Figma 1258:13700 #FCFAF6） */ .rnw-vipcare-ptable__td--alt { background-color: #FCFAF6; } /* --- 体験利用コース（Figma 18:2608） --- */ .rnw-vipcare-visitor { display: flex; flex-direction: column; padding-inline: 16px; } /* Figma 1258:13802：見出しは common/text/bk。（ビジターコース）はMedium */ .rnw-vipcare-visitor__title { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; } .rnw-vipcare-visitor__title-sub { font-size: 14px; font-weight: 500; } /* Figma 18:2612：下が破線（#626262）／pt6.06 pb29 ／中身 gap10 */ .rnw-vipcare-visitor__block { display: flex; flex-direction: column; gap: 10px; padding-top: 6.06px; padding-bottom: 29px; border-bottom: 1px dashed var(--rnw-caption); } .rnw-vipcare-visitor__block--last { border-bottom: 0; } /* Figma 18:2613：白地／accentの1px枠／r5／px21 pt13 pb15 */ .rnw-vipcare-visitor__label { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 13px 21px 15px; border: 1px solid var(--rnw-accent); border-radius: 5px; background-color: #FFFFFF; } .rnw-vipcare-visitor__label-main { color: var(--rnw-accent); font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 20.1px; font-weight: 700; line-height: 30.11px; } .rnw-vipcare-visitor__label-sub { color: var(--rnw-accent); font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 14.1px; font-weight: 700; line-height: 23.93px; text-align: center; } .rnw-vipcare-visitor__list { display: flex; flex-direction: column; gap: 10px; } .rnw-vipcare-visitor__list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rnw-vipcare-visitor__list dt, .rnw-vipcare-visitor__list dd { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } .rnw-vipcare-visitor__list dd { text-align: right; } /* ===================================================================== 12. ご利用までの流れ（Figma 18:2657） ===================================================================== */ .rnw-vipcare-flow { padding: 56px 16px 80px; /* 上56＝694:79132 の y／下80＝1060 −（56＋924） */ background: var(--rnw-contact-gra); /* Figma vipcare/gra2（SP 694:79131 / PC 694:24073） */ } .rnw-vipcare-flow__inner { display: flex; flex-direction: column; gap: 32px; max-width: 343px; margin-inline: auto; } /* 番号の丸をつなぐ縦の破線（Figma 18:2662：left37 / top53 / 高さ588.5） */ .rnw-vipcare-flow__list { position: relative; display: flex; flex-direction: column; gap: 16px; } .rnw-vipcare-flow__list::before { position: absolute; top: 53px; left: 37px; width: 1px; height: 588.5px; content: ''; background-image: repeating-linear-gradient( to bottom, var(--rnw-accent) 0 2px, transparent 2px 4px ); } /* Figma 18:2663：白／r8／px12 py16／gap12 */ .rnw-vipcare-flow__item { position: relative; z-index: 1; display: flex; gap: 12px; align-items: center; padding: 16px 12px; border-radius: 8px; background-color: #FFFFFF; } /* Figma 18:2664：50×50／r31.737／common/bg 地／Lusitana 22 accent */ .rnw-vipcare-flow__num { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 31.737px; background-color: #FAF7F2; color: var(--rnw-accent); font-family: var(--rnw-font-en); font-size: 22px; line-height: 1; letter-spacing: 1.2px; } .rnw-vipcare-flow__body { flex: 1 0 0; min-width: 0; } /* Figma 18:2668 SP/text/large/bold（tracking0.216） */ .rnw-vipcare-flow__title { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.216px; } /* ===================================================================== 13. 重要事バナー（Figma 18:2696） ===================================================================== */ .rnw-vipcare-banners { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 24px 16px 56px; background-color: var(--rnw-bg3); /* common/bg2 #EEE8DE */ } /* Figma 18:2699：common/text/gray 地／px16 py24 */ .rnw-vipcare-banner { display: flex; flex-direction: column; width: 100%; padding: 24px 16px; background-color: var(--rnw-caption); color: #FFFFFF; text-decoration: none; } .rnw-vipcare-banner__title { font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; } .rnw-vipcare-banner__text { padding-bottom: 7.99px; font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* ===================================================================== 14. お知らせ（Figma 18:2716）／よくある質問（Figma 18:2755） --------------------------------------------------------------------- 中身はどちらもショートコード出力（旧デザイン）。 このCSSは見出し・絞り込みタグ・ボタンの箱だけを受け持つ。 ===================================================================== */ .rnw-vipcare-news { padding: 80px 16px; /* 上80＝18:2718 の y／section高さ763 − (80+603) */ background-color: #FFFFFF; } .rnw-vipcare-news__inner, .rnw-vipcare-faq__inner { display: flex; flex-direction: column; gap: 32px; max-width: 343px; margin-inline: auto; } .rnw-vipcare-faq { padding: 80px 24px; /* Figma 18:2757 の x=24 に合わせる */ background-color: var(--rnw-bg1); /* common/bg #FAF7F2 */ } .rnw-vipcare-faq__inner { max-width: 327.317px; } /* ===================================================================== 15. お問い合わせ（Figma 18:2806） --------------------------------------------------------------------- 背景は common.css のプロパティ可変グラデーション（--rnw-contact-gra）。 ===================================================================== */ .rnw-vipcare-contact { display: flex; flex-direction: column; gap: 24px; /* 見出し下端182 → カード開始206 */ align-items: center; padding: 56px 16px; background: var(--rnw-contact-gra); } /* Figma 18:2809：白90%・高さ126 */ .rnw-vipcare-contact__head { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 343px; height: 126px; background-color: rgba(255, 255, 255, 0.9); } /* Figma 18:2811：白／r8／px16 py24／gap32 */ .rnw-vipcare-contact__card { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 343px; padding: 24px 16px; border-radius: 8px; background-color: #FFFFFF; } .rnw-vipcare-contact__block { display: flex; flex-direction: column; gap: 16px; align-items: center; } /* Figma 18:2815 トークン SP/title/h3 */ .rnw-vipcare-contact__title { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; } /* 電話側の見出しだけ文字色がグレー（Figma 18:2824） */ .rnw-vipcare-contact__title--tel { color: var(--rnw-caption); } /* Figma 18:2819：区切り線 */ .rnw-vipcare-contact__line { width: 100%; height: 0; border: 0; border-top: 1px solid var(--rnw-caption); } /* Figma 18:2825 SP/text/defalut/bold（tracking0.168） */ .rnw-vipcare-contact__hours { width: 100%; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } /* Figma 18:2826 Lusitana Bold 45 / lh1.8 / tracking1.2 */ .rnw-vipcare-contact__tel { color: var(--rnw-text); font-family: var(--rnw-font-en); font-size: 45px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; white-space: nowrap; } .rnw-vipcare-contact__tel a { color: inherit; text-decoration: none; } /* ===================================================================== 9-4. 追従CTA（Figma 18:2828） --------------------------------------------------------------------- 画面下部に固定表示。ナニー（13:3636）と同じコンポーネントの色違いで、 Figma上0.962倍で配置されているため padding 等が端数になっている。 影は Figmaトークン dp-follow（0 -10px 24px #00000014）。 ===================================================================== */ .rnw-vipcare-cta { position: fixed; right: 0; bottom: 0; left: 0; /* ドロワー(11)より上。開いている間もバーを出す（2026-09-16）。 */ z-index: 13; display: flex; gap: 1.923px; background-color: #FFFFFF; box-shadow: 0 -6.779px 7.344px rgba(0, 0, 0, 0.08); } .rnw-vipcare-cta__btn { display: flex; flex: 1 0 0; align-items: center; justify-content: center; min-width: 0; padding: 16.346px 31.731px; font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-align: center; text-decoration: none; white-space: nowrap; } /* コース・料金（Figma 18:2831 / 18:2833）vipcare/bg 地に Fill/Default 文字 */ .rnw-vipcare-cta__btn--sub { background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ color: var(--rnw-heading); /* #333333 */ } /* お問合せ（Figma 694:79316）common/accent/red 地に白文字。左罫線 #A9A9A9 */ .rnw-vipcare-cta__btn--contact { border-left: 0.962px solid #A9A9A9; background-color: var(--rnw-link); /* common/accent/red #912344 */ color: #FFFFFF; } /* ===================================================================== 9. レスポンシブ（旧CSSと同じ 767/768 で分岐） ===================================================================== */ /* ---------- PC（Figma 694:23202）---------- 1440px幅・コンテンツ1280px・左右余白80pxで設計されている。 余白は狭い画面でも詰まるよう clamp で可変にする（service-nanny.css と同じ型）。 ------------------------------------------------------------------ */ @media only screen and (min-width: 768px) { .rnw-vipcare { --pc-pad: clamp(24px, 5.56vw, 80px); --pc-max: 1280px; } /* --- 見出し・本文（Figma PC/title/h2・PC/text/dafalut/medium） --- */ .rnw-vipcare-h2 { gap: 8px; } .rnw-vipcare-h2__en { font-size: 24px; } .rnw-vipcare-h2__jp { font-size: 42px; } .rnw-vipcare-text { font-size: 16px; } /* --- ボタン（Figma 694:23220 幅480） --- */ .rnw-vipcare .rnw-btn { width: 480px; max-width: 100%; } /* SPで折っている文言はPCでは1行に戻す */ .rnw-vipcare .rnw-btn br { display: none; } /* SPだけの要素（PCフレームに無い） */ .rnw-vipcare-menu, .rnw-vipcare-cta { display: none; } /* ---------- 1. メインビジュアル（Figma 694:23204） ---------- */ .rnw-vipcare-mv { position: relative; padding-bottom: 0; } .rnw-vipcare-mv__media { aspect-ratio: 1440 / 704.77; } /* 写真はPC用に差し替え（切り抜きは画像側で済んでいる） */ .rnw-vipcare-mv__img--sp { display: none; } .rnw-vipcare-mv__img--pc { display: block; } /* PCフレームには黒10%の重ねが無い（紙テクスチャは残る） */ .rnw-vipcare-mv__media::before { display: none; } /* Figma 694:23206：写真の上に絶対配置（left80 / top310.12 / w640 / p29.695） */ .rnw-vipcare-mv__card { position: absolute; top: 44.003%; /* 310.12 ÷ 704.77 */ left: var(--pc-pad); gap: 20.415px; width: 640px; max-width: calc(100% - var(--pc-pad) * 2); margin: 0; padding: 29.695px; } .rnw-vipcare-mv__head { gap: 7.424px; } .rnw-vipcare-mv__en { font-size: 26px; letter-spacing: 6.867px; } .rnw-vipcare-mv__title { font-size: 42px; } /* PCはBoldではなくMedium（Figma PC/text/dafalut/medium） */ .rnw-vipcare-mv__lead { font-size: 16px; font-weight: 500; } /* ---------- 3. VIPケアサービスとは？（Figma 694:23211） ---------- ロゴ左上／写真右／白カード左下の重ね。Figmaの箱（1280×632.986）を aspect-ratio で持たせ、中の3つを％で絶対配置する。 */ .rnw-vipcare-about { padding: 80px var(--pc-pad); } .rnw-vipcare-about__body { position: relative; display: block; width: 100%; max-width: var(--pc-max); aspect-ratio: 1280 / 632.986; } .rnw-vipcare-about__logo { position: absolute; top: 4.784%; /* 30.28 ÷ 632.986 */ left: 1.484%; /* 19 ÷ 1280 */ width: 23.4375%; /* 300 ÷ 1280 */ margin: 0; } .rnw-vipcare-about__media { position: absolute; top: 0; left: 21.875%; /* 280 ÷ 1280 */ width: 78.125%; /* 1000 ÷ 1280 */ aspect-ratio: 1000 / 560; } /* SPでは display:contents だったカードをPCで実体に戻す */ .rnw-vipcare-about__card { position: absolute; bottom: -1.108%; /* −7.01 ÷ 632.986 */ left: 0; display: flex; flex-direction: column; gap: 24px; align-items: center; width: 50%; /* 640 ÷ 1280 */ padding: 32px; background-color: rgba(255, 255, 255, 0.8); } .rnw-vipcare-about__inner { gap: 24px; align-items: center; } /* ---------- 4. セクション見出し（共通） ---------- PCは2種類ある。 A: 写真1000×560と白カード640を左右にずらして重ねる（特徴・お悩み・コース紹介） B: 全幅1440×400の写真に白カード640を中央で重ねる（活用事例・お客様の声・料金） SPマークアップのまま、セクション側の修飾で出し分ける。 */ .rnw-vipcare-shead { position: relative; width: 100%; max-width: var(--pc-max); margin-inline: auto; } .rnw-vipcare-shead__media { width: 100%; margin-inline: 0; margin-bottom: 0; aspect-ratio: 1000 / 560; } .rnw-vipcare-shead__card { position: absolute; width: 50%; /* 640 ÷ 1280 */ padding: 32px; background-color: rgba(255, 255, 255, 0.8); } /* A型は写真560pxに対して箱が600px。カードが写真より40px下にはみ出す分を セクション側に持たせる（Figma 694:23265 は 1280×600 / 写真は 1000×560）。 */ .rnw-vipcare-shead--left, .rnw-vipcare-shead--right { padding-bottom: 40px; } /* A型：写真は左寄せ1000px、カードは右下（Figma 694:23265 / 694:23323） */ .rnw-vipcare-shead--left .rnw-vipcare-shead__media { width: 78.125%; /* 1000 ÷ 1280 */ } .rnw-vipcare-shead--left .rnw-vipcare-shead__card { right: 0; bottom: 0; } /* A型（写真右）：お悩みだけ左右が逆（Figma 694:23294） */ .rnw-vipcare-shead--right .rnw-vipcare-shead__media { width: 97.5%; /* 1248 ÷ 1280 */ margin-left: auto; } .rnw-vipcare-shead--right .rnw-vipcare-shead__card { bottom: 0; left: 0; } /* B型：写真は画面全幅、カードは中央（Figma 694:23466・694:23548・694:23727） */ .rnw-vipcare-shead--wide { max-width: none; } /* 写真はセクションの左右余白を打ち消して画面全幅にする */ .rnw-vipcare-shead--wide .rnw-vipcare-shead__media { width: calc(100% + var(--pc-pad) * 2); margin-inline: calc(var(--pc-pad) * -1); aspect-ratio: 1440 / 400; } .rnw-vipcare-shead--wide .rnw-vipcare-shead__card { top: 50%; left: 50%; width: 640px; max-width: calc(100% - var(--pc-pad) * 2); transform: translate(-50%, -50%); } /* ---------- 5. 特徴（Figma 694:23263） ---------- SPは横スライダー、PCは3列。 */ .rnw-vipcare-features { gap: 56px; padding: 120px var(--pc-pad); } /* コントロールはPCに無い */ .rnw-vipcare-features .rnw-vipcare-slider__ctrl { display: none; } /* 紹介動画（Figma 694:23291 は 1280×600 の枠だが、 実際の動画は16:9なのでコンテンツ幅いっぱいの16:9で置く） */ .rnw-vipcare-features__movie { max-width: var(--pc-max); } .rnw-vipcare-features .rnw-vipcare-slider__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: var(--pc-max); margin-inline: auto; padding-inline: 0; overflow: visible; } .rnw-vipcare-features .rnw-vipcare-slider__item { flex: initial; min-width: 0; } /* ---------- 6. このような悩みはありませんか？（Figma 694:23292） ---------- */ .rnw-vipcare-worry { gap: 56px; padding: 120px var(--pc-pad); } .rnw-vipcare-worry__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; width: 100%; max-width: var(--pc-max); margin-inline: auto; } .rnw-vipcare-worry__item { display: flex; flex-direction: column; } /* Figma 694:23301：見出しは高さ142px固定・20px */ .rnw-vipcare-worry__head { min-height: 142px; padding: 17px 27px; font-size: 20px; } .rnw-vipcare-worry__body { flex: 1 0 auto; justify-content: space-between; padding: 24px; } .rnw-vipcare-worry__body .rnw-btn { width: 100%; } /* ---------- 7. コースのご紹介（Figma 694:23321） ---------- */ .rnw-vipcare-service { gap: 56px; padding: 120px var(--pc-pad); } .rnw-vipcare-service__inner { gap: 56px; max-width: var(--pc-max); margin-inline: auto; } /* --- 7-1. コースの比較表（Figma 1258:13215） --- 4列は1199px以下では幅に収まらないため、横スクロールのまま使う。 等幅で並べるのは ≥1200px（19章）。ここは外枠と見出しだけ。 */ .rnw-vipcare-compare { gap: 32px; padding: 40px; } .rnw-vipcare-compare__title { font-size: 24px; } /* --- 7-2. 各コース（Figma 694:23388 / 694:23414 / 694:23440） --- お悩みタグが全幅の帯、その下が「左＝見出し＋本文＋ボタン／右＝写真600px」。 3コースとも同じ組みなので、SPで違う家事コースもここでは分けない。 */ .rnw-vipcare-course__head { display: grid; grid-template-columns: minmax(0, 1fr) 600px; grid-template-areas: "tag tag" "title media" "inner media"; column-gap: 24px; row-gap: 16px; align-items: start; padding: 56px; border-radius: 12px; } /* お悩み見出し（Figma 1258:13297）：枠線なし・塗り #ECF7F4・文字 vipcare/accent。 タグ→見出しは56px。2026-09-21 にFigmaの実測値へ合わせた。 */ .rnw-vipcare-course__head > .rnw-vipcare-tag--worry { grid-area: tag; margin-bottom: 40px; /* 56 − row-gap 16 */ padding: 24px; border: 0; border-radius: 8px; background-color: #ECF7F4; color: var(--rnw-accent); font-size: 24px; line-height: 1.6; } .rnw-vipcare-course__title { grid-area: title; font-size: 24px; text-align: left; } /* 写真は右列。SPの重ね（order / 負のmargin / 縦横比）を解除する。 */ .rnw-vipcare-course__head .rnw-vipcare-course__media { grid-area: media; order: 0; align-self: stretch; width: 100%; aspect-ratio: auto; margin-bottom: 0; } .rnw-vipcare-course__inner { grid-area: inner; gap: 16px; /* Figma 694:23396 */ } /* SPで詰めていた分はPCでは不要 */ .rnw-vipcare-course__inner .rnw-vipcare-text + .rnw-vipcare-taglist { margin-top: 0; } .rnw-vipcare-course__btns { gap: 24px; margin-top: 8px; /* タグ列→ボタンは24px（16＋8） */ } /* Figma 694:23404 / 694:23405：どちらも幅480 */ .rnw-vipcare-course__btns .rnw-btn { width: 480px; } /* SPの2行組みはPCでは1行（Figma 694:23405） */ .rnw-vipcare-course__btns .rnw-btn--main { line-height: 1.3; } /* 詳細バー（Figma 694:23408）：20px */ .rnw-vipcare-course__toggle { font-size: 20px; } /* ---------- 8. 活用事例（Figma 694:23464） ---------- 絞り込みは横2列。カードはPCでも横スライダーのまま（幅400・gap16）。 */ .rnw-vipcare-case { gap: 56px; padding: 0 var(--pc-pad) 120px; } .rnw-vipcare-case__body { gap: 32px; max-width: var(--pc-max); } /* Figma 694:23474：gap24／幅1000で中央 */ .rnw-vipcare-case__filter { flex-direction: row; gap: 24px; width: 1000px; max-width: 100%; } .rnw-vipcare-select { font-size: 20px; } /* Figma 694:23477：コントロールは幅400（ボタン40／バー260） */ .rnw-vipcare-case .rnw-vipcare-slider__ctrl { width: 400px; height: 40px; } .rnw-vipcare-case .rnw-vipcare-slider__btn, .rnw-vipcare-case .rnw-vipcare-slider__btn img { width: 40px; height: 40px; } .rnw-vipcare-case .rnw-vipcare-slider__bar { width: 260px; } /* セクションの左右余白を打ち消して画面端までスクロールさせる */ .rnw-vipcare-case .rnw-vipcare-slider__track { width: calc(100% + var(--pc-pad) * 2); margin-inline: calc(var(--pc-pad) * -1); padding-inline: var(--pc-pad); } /* Figma 694:23493：カード幅400 */ .rnw-vipcare-slider__item--case { flex-basis: 400px; } /* Figma 1258:13401：padding16・gap16・下だけ角丸8。文字はSPと同じ14px */ .rnw-vipcare-casecard { gap: 16px; padding: 16px; } .rnw-vipcare-casecard__link { gap: 16px; } /* Figma 1258:13402：カード幅400−padding32＝368に対して高さ150 */ .rnw-vipcare-casecard__media { aspect-ratio: 368 / 150; } /* ---------- 9. お客様の声（Figma 694:23546） ---------- カードは [display_voices] の出力。ここはセクションの箱とタブだけ。 */ .rnw-vipcare-voice { gap: 56px; padding: 0 var(--pc-pad) 120px; } .rnw-vipcare-voice__body { gap: 32px; max-width: var(--pc-max); } /* ---------- 10. ご利用料金（Figma 694:23726） ---------- */ .rnw-vipcare-price { gap: 56px; padding: 120px var(--pc-pad); } .rnw-vipcare-price__body { max-width: var(--pc-max); } /* --- 上段（Figma 694:23736）：p40／gap40 --- */ .rnw-vipcare-price__head { gap: 40px; padding: 40px; } .rnw-vipcare-price__h3 { font-size: 24px; } .rnw-vipcare-price__area { gap: 24px; } .rnw-vipcare-price__area .rnw-vipcare-taglist { justify-content: center; } .rnw-vipcare-price__area .rnw-vipcare-text { text-align: center; } /* Figma 694:23747：見出しの下が「コース名の列｜入会金・会費のカード」の2列。 DOMは [見出し＋コース名] / [カード] の2ブロックなので、 見出し側を display:contents にしてグリッドに流し込む。 */ .rnw-vipcare-price__fee { display: grid; grid-template-columns: max-content max-content; grid-template-areas: "h3 h3" "courses body"; justify-content: center; column-gap: 40px; row-gap: 24px; width: 1000px; max-width: 100%; margin-inline: auto; } .rnw-vipcare-price__fee-head { display: contents; } .rnw-vipcare-price__fee-head .rnw-vipcare-price__h3 { grid-area: h3; } /* Figma 694:23750：3つのタグを高さ138pxのあいだに等間隔で置く */ .rnw-vipcare-price__courses { grid-area: courses; gap: 0; justify-content: space-between; width: auto; height: 138px; } /* Figma 694:23754：カード列は横並び（gap10）＋下に注記 */ .rnw-vipcare-price__fee-body { grid-area: body; display: grid; grid-template-columns: max-content max-content max-content; align-items: center; justify-content: center; column-gap: 10px; row-gap: 8.96px; } .rnw-vipcare-price__fee-body > .rnw-vipcare-note { grid-column: 1 / -1; text-align: center; } .rnw-vipcare-price__fee-card { width: auto; } .rnw-vipcare-price__fee-label, .rnw-vipcare-price__fee-value { font-family: var(--rnw-font-jp); font-size: 20px; line-height: 1.8; letter-spacing: 1.2px; } /* --- 下段：各サービス利用料金（Figma 694:23788） --- */ .rnw-vipcare-price__panel { padding-inline: 40px; } /* Figma 694:23790：384.67×3／gap23 */ .rnw-vipcare-price__tables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; align-items: start; padding-inline: 0; } /* --- 体験利用コース（Figma 694:23878）：3ブロックを横並び --- */ .rnw-vipcare-visitor { display: grid; /* Figma 1258:13805：482 / 482 / 200。等幅にすると左2つが狭く金額が折り返す */ grid-template-columns: 482fr 482fr 200fr; gap: 18px; align-items: start; padding-top: 21px; } .rnw-vipcare-visitor__title { grid-column: 1 / -1; font-size: 20px; } .rnw-vipcare-visitor__title-sub { font-size: 16px; } /* Figma 694:23883：ラベルの箱＋その下に明細（gap10） */ .rnw-vipcare-visitor__block { display: flex; flex-direction: column; gap: 10px; padding: 0; border-bottom: 0; } /* Figma 694:23884：白／accentの枠線／r5／pt13 pb15 px21 */ .rnw-vipcare-visitor__label { flex-direction: row; gap: 10px; align-items: center; justify-content: center; width: 100%; padding: 13px 21px 15px; border: 1px solid var(--rnw-accent); border-radius: 5px; background-color: #FFFFFF; } /* Figma 694:23885 / 694:23886：PCは Zen Kaku（SPは Noto Sans JP） */ .rnw-vipcare-visitor__label-main { font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; } .rnw-vipcare-visitor__label-sub { font-family: var(--rnw-font-jp); font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* Figma 694:23887：左右24px／行間10px */ .rnw-vipcare-visitor__list { gap: 10px; padding-inline: 24px; } /* Figma 694:23889 / 694:23891：見出し側はMedium、金額はBold */ .rnw-vipcare-visitor__list dt, .rnw-vipcare-visitor__list dd { font-size: 16px; letter-spacing: 1.2px; } .rnw-vipcare-visitor__list dt { font-weight: 500; } /* ---------- 11. ご利用までの流れ（Figma 694:24073） ---------- SPは番号が左の横組みを縦に4つ。PCは番号を上に置いた4列。 */ .rnw-vipcare-flow { padding: 80px var(--pc-pad); } .rnw-vipcare-flow__inner { gap: 56px; max-width: var(--pc-max); } .rnw-vipcare-flow__list { display: grid; grid-template-columns: repeat(4, 1fr); /* ▼ 2026-09-01 19章で上書き（768～1199は2列） */ gap: 16px; align-items: stretch; } /* 縦につなぐ破線はSPだけ（Figma 694:24078 に無い） */ .rnw-vipcare-flow__list::before { display: none; } /* Figma 694:24079：白／r8／p24／gap12／番号は上・中央 */ .rnw-vipcare-flow__item { flex-direction: column; gap: 12px; padding: 24px; } /* Figma 694:24080：64px／Lusitana 32 */ .rnw-vipcare-flow__num { width: 64px; height: 64px; border-radius: 40px; font-size: 32px; } .rnw-vipcare-flow__body { display: flex; flex-direction: column; gap: 8px; flex: initial; width: 100%; } /* Figma 694:24083：20px・中央寄せ */ .rnw-vipcare-flow__title { font-size: 20px; letter-spacing: 1.2px; text-align: center; } /* ---------- 12. 重要事バナー（Figma 694:24108） ---------- */ .rnw-vipcare-banners { display: grid; grid-template-columns: repeat(3, 1fr); /* ▼ 2026-09-01 19章で上書き（768～1199は2列） */ gap: 16px; align-items: stretch; max-width: calc(var(--pc-max) + var(--pc-pad) * 2); margin-inline: auto; padding: 56px var(--pc-pad); } /* ---------- 13. お知らせ（Figma 694:24128）／よくある質問（Figma 694:24167） ---------- 中身はショートコード出力のため、ここは箱の余白だけ。 */ .rnw-vipcare-news { padding: 80px var(--pc-pad); } .rnw-vipcare-faq { padding: 80px var(--pc-pad); } .rnw-vipcare-news__inner, .rnw-vipcare-faq__inner { gap: 56px; max-width: var(--pc-max); } /* ---------- 14. お問い合わせ ---------- PCフレーム（694:23202）にはこのセクションが無く、フッター （footer.php の .rnw-footer__contact）が同じ内容を持っている。 TODO: SPフレーム（694:79288）には残っていて重複するため、 SP側も落とすのかデザイン側に要確認。 */ .rnw-vipcare-contact { display: none; } } /* ---------- PC中間幅（1199px以下） ---------- Figmaの絶対配置は1280pxのカード幅が前提のため、狭いPCでは カードが箱に収まらない。重ねをやめて縦に積む。 */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .rnw-vipcare-mv__card { width: min(640px, 60%); padding: 24px; } .rnw-vipcare-mv__en { font-size: 20px; letter-spacing: 4px; } .rnw-vipcare-mv__title { font-size: 32px; } .rnw-vipcare-mv__lead { font-size: 14px; } /* サービス概要：重ねをやめて「ロゴ→写真→カード」の縦積みに戻す */ .rnw-vipcare-about__body { display: flex; flex-direction: column; align-items: center; gap: 0; aspect-ratio: auto; } .rnw-vipcare-about__logo { position: static; width: 300px; margin-bottom: 32px; } .rnw-vipcare-about__media { position: static; width: 100%; margin-bottom: -40px; } .rnw-vipcare-about__card { position: static; width: min(640px, calc(100% - 48px)); } /* セクション見出しも同じく重ねをやめる */ .rnw-vipcare-shead { display: flex; flex-direction: column; align-items: center; } .rnw-vipcare-shead__media, .rnw-vipcare-shead--left .rnw-vipcare-shead__media, .rnw-vipcare-shead--right .rnw-vipcare-shead__media { width: 100%; margin-left: 0; margin-bottom: -40px; } .rnw-vipcare-shead__card { position: static; width: min(640px, calc(100% - 48px)); transform: none; } /* 3列だと1枚が痩せすぎるので2列に落とす */ .rnw-vipcare-features .rnw-vipcare-slider__track, .rnw-vipcare-worry__list { grid-template-columns: repeat(2, 1fr); } /* 写真列の 600px 固定を外す */ .rnw-vipcare-course__head { grid-template-columns: minmax(0, 1fr) minmax(0, 45%); padding: 32px; } .rnw-vipcare-course__btns .rnw-btn { width: 100%; } /* 比較表は4列を横スクロールで見せるので、外枠の余白だけ落とす */ .rnw-vipcare-compare { padding: 24px; } /* 料金：1000px前提の2列は入らないので縦に積む */ .rnw-vipcare-price__head, .rnw-vipcare-price__panel { padding: 24px; } .rnw-vipcare-price__fee { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h3" "courses" "body"; width: 100%; row-gap: 16px; justify-items: center; } .rnw-vipcare-price__courses { flex-direction: row; flex-wrap: wrap; gap: 9px; justify-content: center; height: auto; } /* 料金表・体験利用コースは2列に落とす */ .rnw-vipcare-price__tables, .rnw-vipcare-visitor { grid-template-columns: repeat(2, 1fr); } } /* ===================================================================== 16. コース詳細パネルの中身（Figma SP 694:77841 ほか） --------------------------------------------------------------------- 介護・看護・家事の3コースで同じ型を使う。 ・ご利用いただけるもの（イラストのグリッド＋注記） ・1日のご利用例（時刻＋写真のカード） ・ご利用料金イメージ（エリアタブ＋金色見出しの表＋注記＋ボタン） ・ご利用者様の声カード ・ご利用案内（定義リスト）／対応エリア（表） ▼common/accent/gold #C9A96E は common.css に変数が無いため、 このファイル内でだけ --vip-gold として持つ。 ===================================================================== */ .rnw-vipcare-detail { --vip-gold: #C9A96E; /* Figma common/accent/gold */ display: flex; flex-direction: column; gap: 32px; padding-inline: 16px; } /* Figma 694:77844 ほか トークン SP/title/h3 */ .rnw-vipcare-detail__h3 { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 20px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; } /* --- 注記（※つき）Figma 694:77897 / 694:77983 --- */ .rnw-vipcare-notes { display: flex; /* Figmaは3つの注記が1行に並ぶ。入りきらないときだけ折り返す（2026-09-21）。 */ flex-direction: row; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; color: var(--rnw-caption); /* common/text/gray #626262 */ font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-notes li { padding-left: 21px; text-indent: -21px; } /* イラスト下の注記だけ罫線つき・行間が狭い（Figma 694:77896） */ .rnw-vipcare-notes--ruled { flex-direction: column; gap: 7.435px; padding-top: 17px; border-top: 1px solid var(--rnw-main); color: rgba(34, 34, 34, 0.7); } .rnw-vipcare-notes--ruled li { padding-left: 1em; text-indent: -1em; } /* --- 1. ご利用いただけるもの（Figma 694:77843） --- */ .rnw-vipcare-scene { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; } /* Figma 694:77845：132px幅を折り返し。行間24／列間15 */ .rnw-vipcare-scene__list { display: flex; flex-wrap: wrap; gap: 24px 15px; align-content: center; } .rnw-vipcare-scene__item { display: flex; flex-direction: column; gap: 7px; /* 375pxで132px。それより広い端末でも2列が幅いっぱいに広がるようにする */ width: calc((100% - 15px) / 2); } /* Figma 694:77848：147.61 × 142.98 ／ r10 */ .rnw-vipcare-scene__item .rnw-vipcare-scene__img { width: 100%; height: auto; max-width: none; aspect-ratio: 147.61 / 142.98; border-radius: 10px; object-fit: cover; } .rnw-vipcare-scene__cap { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-align: center; } /* 補足の丸括弧だけ12px（Figma 694:78264 / 694:78268） */ .rnw-vipcare-scene__cap small { display: block; font-size: 12px; } /* --- 2. 1日のご利用例（Figma 694:77903） --- */ .rnw-vipcare-daily { display: flex; flex-direction: column; gap: 16px; } /* カードの裏に敷く帯（Figma 694:77906：左16／上下5%／幅238.478） */ .rnw-vipcare-daily__list { position: relative; display: flex; flex-direction: column; gap: 16px; } .rnw-vipcare-daily__list::before { position: absolute; top: 5%; bottom: 5%; left: 16px; width: 238.478px; max-width: calc(100% - 32px); content: ''; background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } /* Figma 694:77907：白／main の1px枠／r10／p17 */ .rnw-vipcare-daily__item { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; padding: 17px; border: 1px solid var(--rnw-main); border-radius: 10px; background-color: #FFFFFF; } .rnw-vipcare-daily__body { display: flex; flex-direction: column; gap: 8px; width: 132.25px; padding-right: 16px; } /* Figma 694:77912：Lusitana 22 / lh33 / tracking0.9 / common/accent/gold */ .rnw-vipcare-daily__time { color: var(--vip-gold); font-family: var(--rnw-font-en); font-size: 22px; font-weight: 400; line-height: 33px; letter-spacing: 0.9px; } .rnw-vipcare-daily__label { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* Figma 694:77914：145×106 ／ r10 */ .rnw-vipcare-daily__item .rnw-vipcare-daily__img { flex: 1 0 0; width: 145px; min-width: 0; max-width: 145px; height: auto; aspect-ratio: 145 / 106; border-radius: 10px; object-fit: cover; } /* --- 3. ご利用料金イメージ（Figma 694:77931） --- */ .rnw-vipcare-fee { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; } /* エリアのタブ（Figma 694:77933）。下端に main の罫線を通す。 */ .rnw-vipcare-fee__tabs { position: relative; display: flex; align-items: flex-end; width: 100%; } .rnw-vipcare-fee__tabs::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ''; background-color: var(--rnw-main); } .rnw-vipcare-fee__tab { flex: 1 0 0; min-width: 0; padding: 7px 9px 8px; border: 1px solid var(--rnw-caption); border-bottom: 0; background-color: #FFFFFF; color: var(--rnw-caption); font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 14px; font-weight: 400; line-height: 21px; letter-spacing: 0.9px; text-align: center; } /* 選択中（Figma 694:77935）：vipcare/bg 地・main の枠・accent の文字 */ .rnw-vipcare-fee__tab--current { position: relative; z-index: 1; border-color: var(--rnw-main); background-color: var(--rnw-bg2); color: var(--rnw-accent); } /* タブとパネルのラッパー。JSが無いときは全パネルが縦に並ぶ。 */ .rnw-vipcare-fee__tabwrap { display: flex; flex-direction: column; gap: 24px; width: 100%; } .rnw-vipcare-fee__panel { display: flex; flex-direction: column; gap: 8px; } /* 上と同じ理由。選択されていないパネルは hidden で隠す。 */ .rnw-vipcare-fee__panel[hidden] { display: none; } /* タブはボタン要素で出すので、UAスタイルを消す */ .rnw-vipcare-fee__tab { appearance: none; margin: 0; cursor: pointer; } /* --- 料金表（Figma 694:77943） --- */ .rnw-vipcare-ttable { display: flex; flex-direction: column; gap: 12px; width: 100%; } .rnw-vipcare-ttable__group { display: flex; flex-direction: column; } /* 金色の見出し（Figma 694:77950） */ .rnw-vipcare-ttable__head { display: flex; flex-direction: column; align-items: center; padding: 16px 9px 18px 8px; border-bottom: 2px solid #FFFFFF; background-color: var(--vip-gold); color: #FFFFFF; font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; text-align: center; } /* 見出し内の小さい注記（Figma 694:77971） */ .rnw-vipcare-ttable__head-note { width: 100%; font-size: 12px; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-ttable__row { display: flex; align-items: stretch; width: 100%; } /* 見出しセル（Figma 694:77945）：幅110／vipcare/bg */ .rnw-vipcare-ttable__th { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; /* Figmaは「10:00～17:00」で1行＋「（平日）」で1行の2行。 幅110px固定だと時刻そのものが折れて3行になるため、 折り返しを止めて幅は内容に合わせる（2026-09-21）。 */ min-width: 110px; padding: 16px 9px 16px 8px; border-right: 1px solid #FFFFFF; background-color: var(--rnw-bg2); text-align: center; white-space: nowrap; } /* データセル（Figma 694:77947）：common/bg */ .rnw-vipcare-ttable__td { flex: 1 0 0; min-width: 0; padding: 16px 8px; background-color: var(--rnw-bg1); /* common/bg #FAF7F2 */ } .rnw-vipcare-ttable__th, .rnw-vipcare-ttable__td { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* 行間の白い区切り（Figma の border-b-2） */ .rnw-vipcare-ttable__row--ruled .rnw-vipcare-ttable__th, .rnw-vipcare-ttable__row--ruled .rnw-vipcare-ttable__td { padding-top: 16px; padding-bottom: 18px; border-bottom: 2px solid #FFFFFF; } /* --- 4. ご利用者様の声カード（Figma 694:77995） --- */ .rnw-vipcare-vcard { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 4px; background-color: var(--rnw-bg2); color: var(--rnw-text); text-decoration: none; } .rnw-vipcare-vcard .rnw-vipcare-vcard__img { flex-shrink: 0; width: 85px; max-width: none; height: 82px; border-radius: 4px; object-fit: cover; } .rnw-vipcare-vcard__body { display: flex; flex-direction: column; gap: 7.25px; } .rnw-vipcare-vcard__title { font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } .rnw-vipcare-vcard__text { font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* --- 5. エグゼクティブ向けケア（Figma 694:78005〜694:78099） --- */ .rnw-vipcare-exec { display: flex; flex-direction: column; gap: 16px; } /* Figma 694:78007：見出しの下に付く説明行 */ .rnw-vipcare-detail__sub { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* Figma 694:78009：311.23 × 196.36 ／ 上だけ角丸4 */ .rnw-vipcare-exec .rnw-vipcare-exec__img { width: 100%; height: auto; max-width: none; aspect-ratio: 311.23 / 196.36; border-radius: 4px 4px 0 0; object-fit: cover; } /* Figma 694:78013 / 694:78050：common/bg 地の小見出し */ .rnw-vipcare-detail__h4 { padding: 8px 16px; background-color: var(--rnw-bg1); /* common/bg #FAF7F2 */ color: var(--rnw-text); font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: 0.9px; } /* エグゼクティブ側のカードは枠線が accent、裏の帯が細い（Figma 694:78016） */ /* 2026-09-21 エグゼクティブ側も介護コースと同じ幅の帯を敷く。 24pxだとカードの陰に隠れて見えなかった。 */ .rnw-vipcare-daily--exec .rnw-vipcare-daily__list::before { width: 238.478px; } .rnw-vipcare-daily--exec .rnw-vipcare-daily__item { border-color: var(--rnw-accent); } /* エグゼクティブ側の表は左右が等幅で、文字が Noto Sans JP 15px （Figma 694:78062〜694:78099） */ .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th { flex: 1 0 0; width: auto; min-width: 0; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__td, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head { font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 15px; font-weight: 400; line-height: 21.9px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head { letter-spacing: -0.6px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__td { letter-spacing: 0.6px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head-note { font-size: 13px; line-height: 18.98px; letter-spacing: -0.6px; } /* 基本料金の行だけ区切りが太い（Figma 694:78081 border-b-8） */ .rnw-vipcare-ttable__row--gap .rnw-vipcare-ttable__th, .rnw-vipcare-ttable__row--gap .rnw-vipcare-ttable__td { border-bottom: 8px solid #FFFFFF; } .rnw-vipcare-fee--exec .rnw-vipcare-notes { font-family: 'Noto Sans JP', var(--rnw-font-jp); font-size: 13px; font-weight: 400; line-height: 19.89px; letter-spacing: 0.9px; } /* --- 6. ご利用案内（Figma 694:78110） --- */ .rnw-vipcare-guide { display: flex; flex-direction: column; gap: 16px; padding: 24px 16.87px; background-color: var(--rnw-bg1); /* common/bg #FAF7F2 */ } .rnw-vipcare-guide__list { display: flex; flex-direction: column; gap: 24px; } /* 区切りは地色と同じ #FAF7F2（Figma 694:78114 の border-b）＝実質見えない */ .rnw-vipcare-guide__group { display: flex; flex-direction: column; gap: 16px; padding-bottom: 25px; border-bottom: 1px solid var(--rnw-bg1); } .rnw-vipcare-guide__group:last-child { padding-bottom: 0; border-bottom: 0; } .rnw-vipcare-guide__term { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } .rnw-vipcare-guide__items { display: flex; flex-direction: column; gap: 16px; } /* 行頭の金色の短い横線（Figma 694:78118：8×1px／上から12px） */ .rnw-vipcare-guide__items li { position: relative; padding-left: 16px; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } .rnw-vipcare-guide__items li::before { position: absolute; top: 12px; left: 0; width: 8px; height: 1px; content: ''; background-color: var(--vip-gold); } /* --- 7. 対応エリア（Figma 694:78143） --- */ .rnw-vipcare-area { display: flex; flex-direction: column; padding: 8px 16.87px 0; } .rnw-vipcare-area__table { display: flex; flex-direction: column; padding-top: 16.6px; } .rnw-vipcare-area__row { display: flex; align-items: stretch; } .rnw-vipcare-area__th { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; width: 120px; padding: 12px 9px 14px 8px; border-right: 1px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; background-color: var(--rnw-bg2); text-align: center; } .rnw-vipcare-area__td { flex: 1 0 0; min-width: 0; padding: 12px 8px 14px; border-bottom: 2px solid #FFFFFF; background-color: var(--rnw-bg1); } .rnw-vipcare-area__th, .rnw-vipcare-area__td { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } .rnw-vipcare-area__row:last-child .rnw-vipcare-area__th, .rnw-vipcare-area__row:last-child .rnw-vipcare-area__td { border-bottom: 0; } /* 表の下の注記。「お問い合わせ」だけ main 色（Figma 694:78164） */ .rnw-vipcare-area__note { position: relative; padding-top: 8px; padding-left: 21px; color: var(--rnw-caption); font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-area__note::before { position: absolute; top: 8px; left: 0; content: '※'; } .rnw-vipcare-area__note a { color: var(--rnw-main); } /* --- 詳細パネル内のボタン列（Figma 694:78002） --- */ .rnw-vipcare-detail__btns { display: flex; flex-direction: column; gap: 16px; } /* ===================================================================== 17. よくある質問（[display_faq type="vip"] 出力） --------------------------------------------------------------------- ショートコード出力が .rnw-nanny-faq__* / .rnw-nanny-ftag* 共通のため、 service-nanny.css と同一のスタイルを当てる。色は変数経由でvipcareの緑になる。 ===================================================================== */ .rnw-nanny-ftags { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; } .rnw-nanny-ftag { display: flex; align-items: center; justify-content: center; padding: 12px 19.926px; border: 0.745px solid var(--rnw-main); border-radius: 55.96px; background-color: #FFFFFF; color: var(--rnw-accent); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; white-space: nowrap; } .rnw-nanny-ftag--current { border-color: #FFFFFF; background-color: var(--rnw-main); color: #FFFFFF; } .rnw-nanny-faq__tags { gap: 12px; } .rnw-nanny-faq__list { width: 100%; } .rnw-nanny-faq__q { display: flex; align-items: center; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--rnw-text); cursor: pointer; list-style: none; } .rnw-nanny-faq__q::-webkit-details-marker { display: none; } .rnw-nanny-faq__mark { flex: 0 0 auto; color: var(--rnw-text); font-family: var(--rnw-font-en); font-size: 24px; font-weight: 700; line-height: 36px; } .rnw-nanny-faq__qtext { flex: 1 0 0; min-width: 0; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } .rnw-nanny-faq__toggle { display: flex; flex: 0 0 13px; align-items: center; justify-content: center; width: 13px; height: 13px; } .rnw-nanny-faq__icon--minus { transform: rotate(90deg); } .rnw-nanny-faq__item[open] .rnw-nanny-faq__icon--plus { display: none; } .rnw-nanny-faq__item:not([open]) .rnw-nanny-faq__icon--minus { display: none; } .rnw-nanny-faq__a { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 0 0 20px 40px; border-bottom: 1px solid var(--rnw-text); } .rnw-nanny-faq__atext { flex: 1 0 0; min-width: 0; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } /* ===================================================================== 18. コース詳細パネルのPC（Figma 694:24261 / 694:24594 / 694:24838） --------------------------------------------------------------------- ▼このブロックだけファイル末尾に置いている。 詳細パネルのSP定義（16.）が上のレスポンシブブロックより後ろにあるため、 同じ詳細度だとSPが勝ってしまう。順序で解決している。 16. を動かすと崩れるので、ここより前に移動しないこと。 ===================================================================== */ @media only screen and (min-width: 768px) { /* ---------- パネルの箱（Figma 1258:14025 → 1258:14026 → 1258:14027） ---------- 外側40pxが vipcare/bg の帯、その内側が白の箱、さらに40px内側が中身（1120px）。 */ .rnw-vipcare-course__panel { padding: 40px; background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } .rnw-vipcare-detail { gap: 56px; width: 100%; max-width: 1200px; margin-inline: auto; padding: 40px; background-color: #FFFFFF; } /* PCフレームにはアンカーリンクが無い（SPだけの案内） */ .rnw-vipcare-course__panel > .rnw-vipcare-anchors, .rnw-vipcare-course__panel > .rnw-vipcare-course__group { display: none; } /* Figma 694:24273 ほか：小見出しは24px */ .rnw-vipcare-detail__h3 { font-size: 24px; } .rnw-vipcare-detail__h4 { font-size: 20px; /* 帯の上をFigmaに合わせて広げる（2026-09-21）。 親（.rnw-vipcare-exec）の row-gap 24px ＋ ここの32px ＝ 56px。 */ margin-top: 32px; } .rnw-vipcare-detail__sub { font-size: 16px; } /* --- ご利用いただけるもの（Figma 694:24274）：180px を中央寄せで折り返し --- */ .rnw-vipcare-scene__list { gap: 43px 15px; justify-content: center; } .rnw-vipcare-scene__item { width: 180px; } /* --- 1日のご利用例（Figma 694:24333）：268px の縦組みカードを横に並べる --- */ .rnw-vipcare-daily__list { flex-direction: row; flex-wrap: wrap; gap: 16px; } /* 裏の帯（Figma 694:24334：787×288 を左16px・上15.84pxに置く） エグゼクティブ側は .rnw-vipcare-daily--exec ... が詳細度で勝つため、 同じ値をそちらにも明示する（2026-09-21）。 */ .rnw-vipcare-daily__list::before, .rnw-vipcare-daily--exec .rnw-vipcare-daily__list::before { top: 15.84px; bottom: auto; left: 16px; width: 787px; max-width: calc(100% - 32px); height: 288px; } /* Figma 694:24335：写真が上、時刻と内容が下 */ .rnw-vipcare-daily__item { flex: 0 0 268px; flex-direction: column; align-items: stretch; justify-content: flex-start; /* 既定の space-between だと文字が下寄せになる */ gap: 16px; } .rnw-vipcare-daily__item .rnw-vipcare-daily__img { order: 1; flex: none; width: 100%; max-width: none; } .rnw-vipcare-daily__body { order: 2; width: 100%; padding-right: 0; /* SPの横並び用の余白。縦積みのPCでは邪魔で、 1文字ぶん足りずに変な位置で折り返していた */ } .rnw-vipcare-daily__label { font-size: 16px; } /* --- ご利用料金イメージ（Figma 694:24356） --- */ .rnw-vipcare-fee { gap: 24px; padding-bottom: 0; } .rnw-vipcare-fee__tabwrap { gap: 0; } .rnw-vipcare-fee__panel { gap: 8px; } /* Figma 694:24363：タブの文字は20px */ .rnw-vipcare-fee__tab { font-size: 20px; } /* Figma 694:24373 ほか：セルの文字は16px、見出しセルの幅は110pxのまま */ .rnw-vipcare-ttable__th, .rnw-vipcare-ttable__td { font-size: 16px; } /* Figma 694:24378：金色の見出しは20px */ .rnw-vipcare-ttable__head { font-size: 20px; } /* Figma 694:24419：3つのボタンを横並び（幅350・gap24） */ .rnw-vipcare-fee__btns { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 16px; } .rnw-vipcare-fee__btns .rnw-btn { width: 350px; } /* --- ご利用者様の声＋2ボタン（Figma 694:24423）：横並び --- */ .rnw-vipcare-detail__voice { display: flex; gap: 40px; align-items: flex-start; justify-content: center; } /* Figma 694:24424：500×126 */ .rnw-vipcare-vcard { flex: 0 0 500px; height: 126px; align-items: center; } .rnw-vipcare-vcard .rnw-vipcare-vcard__img { width: 101px; height: 98px; } .rnw-vipcare-vcard__title { font-size: 20px; } .rnw-vipcare-vcard__text { font-size: 16px; } /* Figma 694:24431：ボタンは350px */ .rnw-vipcare-detail__btns { gap: 16px; } .rnw-vipcare-detail__btns .rnw-btn { width: 350px; } /* --- エグゼクティブ向けケア／旅立ちに寄り添うケア --- Figma（node 1258:14017）は左にテキスト・右に写真。 グリッドで2カラムにすると行の高さが写真に引っ張られ、 見出しと説明文の間が大きく空くため、写真を右に回り込ませる（2026-09-21）。 */ .rnw-vipcare-exec { display: block; } .rnw-vipcare-exec .rnw-vipcare-exec__img { float: right; width: calc(50% - 20px); margin-left: 40px; margin-bottom: 24px; border-radius: 4px; } .rnw-vipcare-exec > div { margin-bottom: 24px; } .rnw-vipcare-exec > .rnw-vipcare-detail__sub { margin-bottom: 24px; } /* ご利用例から下は回り込みを解除して全幅 */ .rnw-vipcare-exec > section { clear: both; } /* --- ご利用案内・対応エリア --- */ .rnw-vipcare-guide { padding: 40px; } .rnw-vipcare-guide__term { font-size: 16px; } .rnw-vipcare-guide__items li { font-size: 16px; } .rnw-vipcare-area { padding: 8px 0 0; } .rnw-vipcare-area__th { width: 200px; } .rnw-vipcare-area__th, .rnw-vipcare-area__td { font-size: 16px; } } /* ---------- PC中間幅（1199px以下）：詳細パネル ---------- */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .rnw-vipcare-detail__voice { flex-direction: column; align-items: stretch; } .rnw-vipcare-vcard { flex: none; height: auto; } .rnw-vipcare-detail__btns .rnw-btn, .rnw-vipcare-fee__btns .rnw-btn { width: 100%; } .rnw-vipcare-daily__list::before { display: none; } } /* ===================================================================== 19. 調整ログ（2026-09-01～） 既存章の後に日付順で追記。SP/PCで値を分ける場合は @media で包む。 ===================================================================== */ /* --- 2026-09-01 タブレット列削減の抜けを補う：ご利用の流れ4列→2列、重要事バナー3列→2列（PC上書き） --- */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .rnw-vipcare-flow__list { grid-template-columns: repeat(2, 1fr); } .rnw-vipcare-banners { grid-template-columns: repeat(2, 1fr); } } /* --- 2026-09-07 比較表：4コースに更新（Figma 1258:13215）。1200px以上は1280pxに 収まるので横スクロールをやめ、Figmaどおり等幅4列で並べる（PC上書き） --- */ @media only screen and (min-width: 1200px) { .rnw-vipcare-compare { /* 1列269px＝本文14pxで約15字。ご利用シーンは最長でも7行（Figma実寸175） */ --cmp-h-scene: 177px; } .rnw-vipcare-compare__scroll { width: 100%; margin-inline: 0; padding-inline: 0; overflow: visible; } .rnw-vipcare-compare__inner { width: 100%; } /* Figma 1258:13218：幅90px。ラベルは
のまま2行で使う */ .rnw-vipcare-compare__labels { width: 90px; } .rnw-vipcare-compare__label { font-size: 16px; white-space: nowrap; } .rnw-vipcare-compare__cards { flex: 1 0 0; min-width: 0; } .rnw-vipcare-ccard { flex: 1 0 0; min-width: 0; width: auto; } } /* --- 2026-09-01 コースカード：①悩みタイトルの
をPC(≥1200px)で消して1行に（タブレットは幅が狭いので2行のまま） --- */ @media only screen and (min-width: 1200px) { .rnw-vipcare-course__head > .rnw-vipcare-tag--worry br { display: none; } } /* --- 2026-09-01 コースカード：②写真が「詳細」ボタンに接触。原因は中のの height:100% → 画像の自然高さが枚の内在高さになりグリッド行を押し広げること（左の内容が低いコースだけ伸びる）。画像を絶対配置にして枚の高さに寄与させず、枚を左の内容の高さに合わせる（PC上書き） --- */ @media only screen and (min-width: 768px) { /* 左の内容に高さを合わせる(align-self:stretch)と、内容が低いコースで画像の自然高さがはみ出しボタンに接触する。 写真は固定比率（高さ）にし、その中に cover でフィットさせる。 */ .rnw-vipcare-course__head .rnw-vipcare-course__media { align-self: start; aspect-ratio: 600 / 360; height: auto; overflow: hidden; } .rnw-vipcare-course__head .rnw-vipcare-course__media .rnw-vipcare-course__img { width: 100%; height: 100%; object-fit: cover; } } /* --- 2026-09-01 コースカードのボタン：家事コースの長い「お問い合わせ・申込」がPCで2行になるので、ボタン文字を少し小さく（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-course__btns .rnw-btn { font-size: 16px; } } /* --- 2026-09-01 VIPケアとは：about__logo(VIP)と about__media(写真)がどちらも absolute・z-index無しで、DOM順で後の写真が上になりロゴが下に潜る。ロゴを写真の上に出す（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-about__logo { z-index: 2; } } /* --- 2026-09-07 Features見出し帯（shead--left）：写真とカードの帯を、下に続く 中身（--pc-max で頭打ち）と左右の位置を合わせる。写真は帯の中で左寄せ。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-shead--left .rnw-vipcare-shead__media { align-self: flex-start; } } /* --- 2026-09-07 「このような悩み」見出し帯（shead--right）：--left と同様に 下に続く中身と左右を合わせる。写真は78%で右寄せ（margin-left:auto は既存）。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-shead--right .rnw-vipcare-shead__media { width: 78.125%; } } /* --- 2026-09-02 活用事例（shead--wide + media--split）：分割２枚に aspect-ratio:187.5/200(縦長) が付いて枚を縦に押し広げていた→PCでは比率指定を解除し、写真枠(1440/400)の高さにフィットさせる（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-shead--wide .rnw-vipcare-shead__media--split { align-items: stretch; } /* 分割、2枚の子は比率解除＋相対配置・クリップ。中の img は絶対配置にして枚の高さに寄与させない（imgの自然高さが枚を縦に押し広げるのを防ぐ）。 */ .rnw-vipcare-shead--wide .rnw-vipcare-shead__media--split > * { aspect-ratio: auto; position: relative; overflow: hidden; } .rnw-vipcare-shead--wide .rnw-vipcare-shead__media--split .rnw-vipcare-shead__img { position: absolute; inset: 0; height: 100%; } } /* --- 2026-09-02 お客様の声（voice / shead--wide 単一写真）：活用事例と同じく、中の img の自然高さで枚が縦に伸びる→imgを絶対配置にして枚(1440/400)にフィット（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-voice .rnw-vipcare-shead--wide .rnw-vipcare-shead__media { position: relative; overflow: hidden; } .rnw-vipcare-voice .rnw-vipcare-shead--wide .rnw-vipcare-shead__media > .rnw-vipcare-shead__img { position: absolute; inset: 0; height: 100%; } } /* --- 2026-09-02 お客様の声の絞り込みラベル（voice の ftags）：左寄せ→中央寄せ（voice限定・全幅共通） --- */ .rnw-vipcare-voice__body .rnw-vipcare-ftags { justify-content: center; } /* --- 2026-09-02 ご利用料金（price / shead--wide 単一写真）：お客様の声と同じく img の自然高さで枚が縦に伸びる→imgを絶対配置にして枚(1440/400)にフィット（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-price .rnw-vipcare-shead--wide .rnw-vipcare-shead__media { position: relative; overflow: hidden; } .rnw-vipcare-price .rnw-vipcare-shead--wide .rnw-vipcare-shead__media > .rnw-vipcare-shead__img { position: absolute; inset: 0; height: 100%; } } /* --- 2026-09-07 ご利用料金：確定版（Figma 1258:13612）に差し替え。 ・エリアのタブと「◯◯にお住まいの方」ブロックを廃止 ・入会金・会費は4コースの比較表（コース比較表の組みを2行で使う） ・各サービス利用料金は4コース（家事プラスを追加）--- */ /* Figma 1258:13621：入会金・会費と各サービス利用料金は隙間なしで1枚のミントに見せる */ .rnw-vipcare-price__body { gap: 0; } /* 入会金・会費。行の高さだけ差し替えて比較表を使い回す。 SP（Figma 1297:37495）は1枚121.5px幅で見出しが2行に折り返し、 会費セルも6行ぶん必要になるため、PCとは別の実測値を持たせる。 */ .rnw-vipcare-compare--fee { --cmp-pad-t: 16px; /* カード本文の上下余白（Figma 1297:37509） */ --cmp-pad-i: 8px; /* 同 左右 */ --cmp-head-h: 49px; /* 見出し1行（Figma 1297:37506） */ --cmp-h-scene: 25px; /* 入会金：1行ぶん */ --cmp-h-fee: 154px; /* 会費：ご選択2行＋年会費2行＋月会費2行 */ } /* 2段目は「ナースケア（看護）コース」が2行になるので見出しが高い（Figma 1297:37535） */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second { --cmp-head-h: 74px; } /* SPの見出しは14pxで折り返す。nowrap＋overflow:hidden だと横に切れる。 カード1枚121.5pxに対して「家事プラスコース」が113pxで、左右に余白を 持たせると入らない（Figma 1297:37506 も余白ぶんははみ出させている）。 */ .rnw-vipcare-compare--fee .rnw-vipcare-ccard__head { height: var(--cmp-head-h); padding-inline: 0; font-size: 14px; letter-spacing: 0.168px; white-space: normal; overflow: visible; } /* 768px以上はカードが広く、見出しは4枚とも1行に収まる */ @media only screen and (min-width: 768px) { .rnw-vipcare-compare--fee .rnw-vipcare-ccard__head { padding-inline: 8px; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second { --cmp-head-h: 49px; } } /* ラベル列の上余白は「見出し高＋本文の上余白」。基底は24px固定なので上書きする */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__labels { padding-top: calc(var(--cmp-head-h) + var(--cmp-pad-t)); } .rnw-vipcare-compare--fee .rnw-vipcare-ccard__body { padding: var(--cmp-pad-t) var(--cmp-pad-i); } @media only screen and (min-width: 1200px) { /* PC（Figma 1258:13625）：4枚とも見出しは1行に収まる */ .rnw-vipcare-compare--fee { --cmp-pad-t: 24px; --cmp-pad-i: 16px; --cmp-head-h: 52.8px; --cmp-h-scene: 40px; --cmp-h-fee: 112px; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second { --cmp-head-h: 52.8px; } .rnw-vipcare-compare--fee .rnw-vipcare-ccard__head { font-size: 16px; } } /* 会費のセルは上詰め（Figma 1258:13650） */ .rnw-vipcare-ccard__cell--dues { gap: 4px; justify-content: flex-start; } /* 「どちらかをご選択」（Figma 1258:13651）だけ vipcare/main。本文と同じMedium */ .rnw-vipcare-ccard__pick { color: var(--rnw-main); font-weight: 500; } @media only screen and (min-width: 1200px) { /* 入会金・会費の本文は PC/text/large/medium（20px）。 会費セルの112pxは 20px×1.8×3行＋gap4 でちょうど埋まる（Figma 1258:13641） */ .rnw-vipcare-compare--fee .rnw-vipcare-ccard__cell { font-size: 20px; } /* 各サービス利用料金は3コース→4コース */ .rnw-vipcare-price__tables { grid-template-columns: repeat(4, 1fr); } } /* --- 2026-09-07 重要事バナー：確定版（Figma 1258:13881）に差し替え。 グレー地のリンクバナー3枚 → 白カードの注意書き3枚（会員制／最低利用時間／ お受けできない業務）。見出しは vipcare/accent、本文・注記とも中央寄せ。 --- */ .rnw-vipcare-banner { gap: 16px; padding: 24px 16px; background-color: #FFFFFF; color: var(--rnw-caption); /* common/text/gray #626262 */ text-align: center; } .rnw-vipcare-banner__title { color: var(--rnw-accent); /* vipcare/accent #327666 */ } .rnw-vipcare-banner__body { display: flex; flex-direction: column; gap: 4px; } .rnw-vipcare-banner__text { padding-bottom: 0; font-size: 16px; } /* 補足の小さい行（Figma 1258:13887 / 1258:13892） */ .rnw-vipcare-banner__note { font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 1.2px; } /* --- 2026-09-07 よくある質問（Figma 1258:13936）：選択中のカテゴリタグの塗りを vipcare/main（ミント #4FBAA1）→ vipcare/accent（#327666）に。 枠線・文字色・その他のタグは確定版と一致しているため触らない。 --- */ .rnw-nanny-ftag--current { background-color: var(--rnw-accent); } /* --- 2026-09-07 特徴カードの写真：枠（300:200）に対して が自然な高さのまま 置かれ、下にすき間ができていた。枠いっぱいに敷く。 --- */ .rnw-vipcare-fcard__media .rnw-vipcare-fcard__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* --- 2026-09-07 ご利用料金の見出し写真：SP用・PC用の2枚が重なっていたので出し分ける --- */ .rnw-vipcare-shead__img--pc { display: none; } @media only screen and (min-width: 768px) { .rnw-vipcare-shead__img--sp { display: none; } .rnw-vipcare-shead__img--pc { display: block; } } /* --- 2026-09-07 ご利用料金イメージの表（Figma 1258:14117 / 1258:14228）： ・エグゼクティブ側だけ左右等幅にしていたのを、通常の表と同じ110pxに戻す ・金色の見出し帯は中央寄せ → 左寄せ --- */ .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th { flex: 0 0 110px; width: 110px; } .rnw-vipcare-ttable__head { align-items: flex-start; padding-inline: 8px; text-align: left; } /* --- 2026-09-07 ご利用いただけるもの（Figma 1258:14030）：5枚で折り返す枠を 中央に置き、中身は左寄せ。行が埋まらないとき（看護の11枚目など）に 最後の1枚が中央に浮かないようにする。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-scene__list { justify-content: flex-start; width: 960px; /* 180×5 ＋ 15×4 */ max-width: 100%; margin-inline: auto; } } /* --- 2026-09-07 1日のご利用例の裏の帯：787px固定だったため、カードが2〜3枚の コースで帯だけ右にはみ出していた。枠をカードの数に合わせて縮め、 帯はその内側16pxに収める。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-daily__list { width: max-content; max-width: 100%; } .rnw-vipcare-daily__list::before { left: 16px; width: calc(100% - 32px); max-width: none; } } /* --- 詳細パネルの見出し。2026-09-07 は中央寄せだったが、2026-09-21 に 左寄せへ変更（節見出しは下でベージュ帯にする）。 金色の表見出し（ttable__head）は元から左寄せで別もの。 --- */ .rnw-vipcare-detail__h3 { text-align: left; } /* --- 2026-09-21 エグゼクティブ向けケアだけは左寄せ（Figma node 1258:14017）。 写真が右に回り込む2カラムのため、見出し・説明文とも左に揃える。 --- */ .rnw-vipcare-exec .rnw-vipcare-detail__h3 { text-align: left; } /* --- 2026-09-07 MVのKen Burns：共通の指定（中心を軸に1.10→1.30、上下±2%移動）だと 寄るたびに上が切れて顔が外れる。VIPケアのMVだけ、上端を軸にして縦の移動を やめる。上端が動かないので、どこまで寄っても顔が切れない。 --- */ .rnw-vipcare-mv__media.rnw-kenburns > img { transform-origin: center top; animation-name: rnw-vipcare-mv-kenburns; } @keyframes rnw-vipcare-mv-kenburns { from { transform: scale(1.02) translateX(-1%); } to { transform: scale(1.08) translateX(1%); } } /* --- 2026-09-07 1日のご利用例の見出し：「ご出社準備・移動サポート・」が カード幅（268-17*2＝234px）にあと数px足りず「サポー／ト・」で折り返していた。 字間を詰めて1行に収める。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-daily__label { letter-spacing: 0.6px; } } /* --- 2026-09-07 エグゼクティブ側の料金表：確定版（Figma 1258:14228）では通常の 料金表と同じ組みになったので、Noto Sans JP 15px の独自指定を戻す。 金色の見出しだけ文字が小さく見えていたのはこれが原因。 --- */ .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__td { font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head { font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.8; letter-spacing: 0.168px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head-note { font-size: 12px; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-fee--exec .rnw-vipcare-notes { font-family: var(--rnw-font-jp); font-size: 12px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; } @media only screen and (min-width: 768px) { .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__td { font-size: 16px; } .rnw-vipcare-fee--exec .rnw-vipcare-ttable__head { font-size: 20px; } } /* --- 2026-09-07 お客様の声：確定版（Figma 1258:13453）に合わせる。 1本のスライダー＋カード絞り込み → コースごとに1本ずつスライダーを並べ、 タグでブロックを出し分ける形に変更。 --- */ .rnw-vipcare-shead__lead { color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; text-align: center; } .rnw-voice-tags[data-rnw-voice-course-filter] { justify-content: center; } .rnw-voice-course { display: flex; flex-direction: column; gap: 16px; width: 100%; } .rnw-voice-course[hidden] { display: none; } /* コース名の帯（Figma 1258:13483）：vipcare/bg 地に vipcare/main の枠線 */ .rnw-voice-course__name { padding: 17px 16px; border: 1px solid var(--rnw-main); background-color: var(--rnw-bg2); color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 16px; font-weight: 500; line-height: 1.8; letter-spacing: 1.2px; text-align: center; } @media only screen and (min-width: 768px) { .rnw-vipcare-shead__lead { font-size: 16px; } .rnw-voice-course { gap: 24px; } /* Figma 1258:13484：帯の文字は18px・左右27px */ .rnw-voice-course__name { padding: 17px 27px; font-size: 18px; } } /* コース別ブロックどうしの間隔（Figma 1258:13466 の 56px） */ .rnw-vipcare-voice__body { gap: 32px; } @media only screen and (min-width: 768px) { .rnw-vipcare-voice__body { gap: 56px; } } /* --- 2026-09-07 お客様の声：確定版（Figma 1258:13453）の見た目に合わせる。 ・セクションの地色を白 → vipcare/bg（#D8EEE9） ・カードはカテゴリ帯なし・枠線なしの白い角丸 ・タグは3つ（「すべて」は持たない） --- */ .rnw-vipcare-voice .rnw-voice-card__cat { display: none; } .rnw-vipcare-voice .rnw-voice-card { border: 0; border-radius: 8px; overflow: hidden; } @media only screen and (min-width: 768px) { /* Figma 1258:13486：カード幅400 */ .rnw-vipcare-voice .rnw-voice-card { flex: 0 0 400px; } } /* --- 2026-09-07 お客様の声のスライダー矢印：共通アセット（赤）ではなく 確定版のグリーンの丸ボタン（Figma 1258:13471 / 1258:13479）に差し替える。 出力は共通テンプレートの なので、画像を隠して背景で描く。 --- */ .rnw-vipcare-voice .rnw-voice-slider__btn img { display: none; } .rnw-vipcare-voice .rnw-voice-slider__btn { background-image: url('../../img/voice/icon_slider_next_vip.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } .rnw-vipcare-voice .rnw-voice-slider__btn--prev { transform: rotate(180deg); } /* --- 2026-09-07 お客様の声の絞り込みタグ（Figma 1258:13463〜13465）： 未選択は白地＋vipcare/main の枠と文字、選択中は vipcare/main 塗り＋白文字。 共通CSS（voice-cards.css）は文字と塗りが accent なのでここで上書きする。 --- */ .rnw-vipcare-voice .rnw-voice-tag { border-color: var(--rnw-main); color: var(--rnw-main); } .rnw-vipcare-voice .rnw-voice-tag--current { border-color: #FFFFFF; background-color: var(--rnw-main); color: #FFFFFF; } /* --- 2026-09-07 お客様の声の地色（Figma 1258:13453）：単色ではなく縦のグラデーション。 上 #CBE8E1 → 下 #77CFBB（下から2割は同じ色で止まる）。Figma実測値。 --- */ .rnw-vipcare-voice { background-color: #77CFBB; background-image: linear-gradient(180deg, #CBE8E1 0%, #77CFBB 80%); } /* --- 2026-09-07 ご利用にあたっての注意：地色が --pc-max で頭打ちになり、 ベージュの帯が画面幅いっぱいにならなかった。地色は全幅、中身だけ --pc-max で止める。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-banners { max-width: none; padding-inline: max(var(--pc-pad), calc((100% - var(--pc-max)) / 2)); } } /* --- 2026-09-07 入会金・会費（Figma 1258:13622）：白い表の外側に vipcare/bg のパネルが1枚ある。抜けていたので足す。 --- */ .rnw-vipcare-price__fee-panel { width: 100%; padding: 24px 16px; background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } @media only screen and (min-width: 768px) { .rnw-vipcare-price__fee-panel { padding: 40px; } } /* --- 2026-09-07 入会金・会費（Figma 1258:13623）：見出しはミントのパネルの上で、 白いカードは表だけを包む。見出しまで白に乗っていたので分ける。 --- */ .rnw-vipcare-compare--fee { padding: 0; background-color: transparent; } /* --- 2026-09-07 よくある質問のカテゴリタグ（Figma 1258:13944）： 文字は18px（PC）。色は白地＋vipcare/main の枠＋vipcare/accent の文字で一致。 --- */ @media only screen and (min-width: 768px) { .rnw-nanny-ftag { font-size: 18px; } } /* --- 2026-09-07 入会金・会費：SP（Figma 1297:37495）は 2列×2段、 PC（Figma 1258:13625）は 4列1段。同じHTMLで両方を出すため、 ラベル列＋カード2枚の組を2つ並べ、PCでは2つ目のラベル列を隠す。 --- */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__inner { flex-direction: column; gap: 20px; /* 2段の間（Figma 1297:37495） */ width: 100%; } .rnw-vipcare-compare__group { display: flex; align-items: stretch; gap: 8px; width: 100%; } /* SPはラベル60px、カードは残りを2等分（Figma 1297:37497 / 1297:37505） */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__labels { width: 60px; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__cards { flex: 1 0 0; min-width: 0; } .rnw-vipcare-compare--fee .rnw-vipcare-ccard { flex: 1 0 0; min-width: 0; width: auto; } /* SPは横スクロールさせない。白い表の枠はここが持つ。 Figma 1297:37495 は343px幅・p16で、ミントのパネルの左右16pxにはみ出して 画面の端まで届く。カード1枚121.5pxはこの幅が前提。 */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__scroll { width: calc(100% + 32px); margin-inline: -16px; padding: 16px; overflow: visible; background-color: #FFFFFF; } @media only screen and (min-width: 768px) { .rnw-vipcare-compare--fee .rnw-vipcare-compare__scroll { width: 100%; margin-inline: 0; padding: 40px; } } @media only screen and (min-width: 1200px) { /* PCは1段。2つ目のラベル列は要らない */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__inner { flex-direction: row; gap: 8px; } /* 1つ目だけラベル列90px＋gap8pxを抱えるので、その分を基準幅に持たせないと カード4枚の幅が揃わない（Figma 1258:13634 ほかは4枚とも249px） */ .rnw-vipcare-compare__group { flex: 1 0 98px; min-width: 0; } .rnw-vipcare-compare__group--second { flex: 1 0 0; } .rnw-vipcare-compare__group--second .rnw-vipcare-compare__labels { display: none; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__labels { width: 90px; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__scroll { padding: 40px; } } /* --- 2026-09-07 ご利用料金：セクションの地色は common/bg2（ベージュ） （Figma 1258:13612 実測 #EEE8DE）。白のままだった。 --- */ .rnw-vipcare-price { background-color: var(--rnw-bg3); } /* --- 2026-09-07 各サービス利用料金の4表： ・列幅が足りず「土日祝日」「+550円」が途中で折り返し、行数が変わって 4表の高さがバラバラになっていた。折り返しを止めて行の高さを揃える。 ・Figma 1258:13690 は1行81px。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-price__tables { align-items: stretch; } .rnw-vipcare-ptable__table { height: 100%; table-layout: fixed; } .rnw-vipcare-ptable__th { width: 100px; } .rnw-vipcare-ptable__sub, .rnw-vipcare-ptable__td { height: 81px; white-space: nowrap; } /* 体験利用コースのコース名・金額とも折り返さない（Figma 1258:13820 / 1258:13822） */ .rnw-vipcare-visitor__list dt, .rnw-vipcare-visitor__list dd { white-space: nowrap; } } /* --- 2026-09-08 各サービス利用料金のバー：Figma 1258:13679 は SP/button/big（18px）。 .rnw-vipcare-course__toggle はサービス側のコースアコーディオンと共用で 768px以上が20pxになるため、料金セクションだけ戻す。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-price__detail .rnw-vipcare-course__toggle { font-size: 18px; } } /* --- 2026-09-08 ご利用料金（SP / Figma 1297:37481）：SPだけの改行。 「ナースケア（看護）コース」「どちらかをご選択」「年会費 66,000円」は カード121.5pxに収まらず、送り仮名1文字だけが次行に落ちていた。 --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-br--sp { display: none; } } /* --- 2026-09-08 各サービス利用料金の4表（SP / Figma 1297:37568）： 列幅が自動で見出し列が潰れ、「夜間早朝料金」「19時～翌9時」が 途中で折り返していた。Figmaは見出し列102.61px・文字14pxなので、 固定幅にして折り返しを止める。 --- */ @media only screen and (max-width: 767px) { .rnw-vipcare-ptable__table { table-layout: fixed; } .rnw-vipcare-ptable__th, .rnw-vipcare-ptable__sub, .rnw-vipcare-ptable__td { font-size: 14px; letter-spacing: 0.168px; white-space: nowrap; } .rnw-vipcare-ptable__th { width: 103px; padding-inline: 8px; } } /* --- 2026-09-08 入会金・会費のラベル列（SP / Figma 1297:37499）： 60pxの列に「入会金」（14px×3字＋字間）が入りきらず2行に割れていた。 Figmaも枠からはみ出させているので折り返さない。 --- */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__label { white-space: nowrap; } /* --- 2026-09-08 見出し写真のSP／PC出し分け：2枚とも出て縦に重なっていた。 .rnw-vipcare-shead__media 側の指定に負けないよう詳細度を上げ、 枠からはみ出さないように overflow も止める。 --- */ .rnw-vipcare-shead__media { overflow: hidden; } .rnw-vipcare-shead__media > .rnw-vipcare-shead__img--pc { display: none; } @media only screen and (min-width: 768px) { .rnw-vipcare-shead__media > .rnw-vipcare-shead__img--sp { display: none; } .rnw-vipcare-shead__media > .rnw-vipcare-shead__img--pc { display: block; } } /* --- 2026-09-08 SPの本文幅：Figmaの375基準の343pxを max-width で固定していたため、 390〜430pxの実機では左右に48pxずつ地色が残り、表や本文が細く見えていた。 Figmaの意図は「画面幅 − 左右16px」なので、SPでは上限を外して可変にする。 左右の余白は各セクションの padding（16px／FAQのみ24px）が持つ。 --- */ @media only screen and (max-width: 767px) { .rnw-vipcare-mv__card, .rnw-vipcare-about__body, .rnw-vipcare-features__movie, .rnw-vipcare-worry__list, .rnw-vipcare-case__body, .rnw-vipcare-voice__body, .rnw-vipcare-price__body, .rnw-vipcare-flow__inner, .rnw-vipcare-news__inner, .rnw-vipcare-faq__inner, .rnw-vipcare-contact__head, .rnw-vipcare-contact__card { max-width: none; } .rnw-vipcare-flow__inner, .rnw-vipcare-news__inner, .rnw-vipcare-faq__inner { width: 100%; } } /* ===================================================================== ドロワーを開いている間も追従CTAを前面に出す（2026-09-16） --------------------------------------------------------------------- バーの z-index をドロワー（11）より上げたぶん、ドロワーの中身が バーに隠れないよう下余白をバーの高さぶん足す。 PC幅ではバーを出さないので元（pb-40）に戻す。 ===================================================================== */ .rnw-menu { padding-bottom: calc(40px + 48.51px); } @media only screen and (min-width: 768px) { .rnw-menu { padding-bottom: 40px; } } /* ===================================================================== リード文と※注記の間隔（2026-09-21 / Figma 1258:14506-14507, 1297:36966-36967） --------------------------------------------------------------------- 「詰まっている」原因は行間ではなく※注記がべた付きだったこと。 行間はFigmaも25px（SP 14px×1.8／PC 16px）で現状のままが近いので触らない。 注記の上だけ空ける。PCは24px、SPは8px。 ===================================================================== */ .rnw-vipcare-detail__sub + .rnw-vipcare-notes { margin-top: 8px; } @media only screen and (min-width: 768px) { .rnw-vipcare-detail__sub + .rnw-vipcare-notes { margin-top: 24px; } } /* ===================================================================== 1日のご利用例の裏の緑帯：家事コースだけ下にはみ出していた（2026-09-21） --------------------------------------------------------------------- PCでは高さが 288px 固定だったため、カードがそれより低いコース （家事コース）でだけ帯が下にはみ出して見えていた。 上下とも 15.84px の内側に収める指定に変え、カードの高さに追従させる。 これで全コースの見え方が揃う。 ===================================================================== */ @media only screen and (min-width: 768px) { .rnw-vipcare-daily__list::before, .rnw-vipcare-daily--exec .rnw-vipcare-daily__list::before { bottom: 15.84px; height: auto; } } /* ===================================================================== コースカードのお悩みタグ：SPで1行目が写真に隠れていた（2026-09-21） --------------------------------------------------------------------- SPは写真が下のタグに34px重なる組み（.rnw-vipcare-course__media の margin-bottom: -58px）。タグはDOM上で写真より前にあるため後から描かれる 写真が上に乗り、タグの上12pxのpadding＋1行目が隠れていた。 （以前は白80%の半透明だったので透けて読めていたが、塗りを #ECF7F4 の ベタに合わせた時点で完全に隠れるようになった。） タグを前面に出して2行とも読めるようにする。PC（≥768px）は重ねの無い グリッドなので対象外。 ===================================================================== */ @media only screen and (max-width: 767px) { .rnw-vipcare-course__head > .rnw-vipcare-tag--worry { position: relative; z-index: 1; /* SP（Figma 1297:36355）は写真の上に白80%の半透明帯。 #ECF7F4 のベタ塗りはPCの全幅帯（1258:13297）だけ。 */ background-color: rgba(255, 255, 255, 0.8); } } /* ===================================================================== ※注記：SPは1件ずつ改行（2026-09-21） --------------------------------------------------------------------- 3件を1行に並べるのはPCのFigmaだけ。SPでは「※交通費は実費を申し受けます。」と 「※消費税込」が同じ行に並んでしまうため、縦積みに戻す。 ===================================================================== */ @media only screen and (max-width: 767px) { .rnw-vipcare-notes { flex-direction: column; column-gap: 0; } } /* ===================================================================== ご利用案内／対応エリア／ご利用の流れのボタン：SPで隙間が無かった（2026-09-21） --------------------------------------------------------------------- .rnw-vipcare-fee__btns はPC（≥768px）にしか指定が無く、SPでは素の div の ままボタンが縦に詰まって並んでいた。詳細パネルの他のボタン群 （.rnw-vipcare-detail__btns）と同じ16px空けに揃える。 ===================================================================== */ @media only screen and (max-width: 767px) { .rnw-vipcare-fee__btns { display: flex; flex-direction: column; gap: 24px; /* Figma SP 1297:36567〜36569 */ } } /* ===================================================================== 料金表の金色の見出し：SPは中央寄せ（2026-09-21） --------------------------------------------------------------------- Figma SP（1297:36526 / 1297:36544）は「介護コース(身体介護・外出同行)」 「介護ビジターコース」とその※注記が中央寄せ。 PC（1258:14125 ほか）は x=8 の左寄せなので、SPだけ中央にする。 ===================================================================== */ @media only screen and (max-width: 1199px) { .rnw-vipcare-ttable__head, .rnw-vipcare-ttable__head-note { display: block; text-align: center; } } /* ===================================================================== ご利用案内：グループ間が空きすぎ（2026-09-21 / Figma 1258:14281-14287, 1297:36680-36686） --------------------------------------------------------------------- Figmaは予約手数料／キャンセル料／その他の間隔が SP・PC とも24px。 実装は list の gap 24px に加えて group に padding-bottom:25px があり、 合計49px空いていた。下線も色が背景（--rnw-bg1）と同じで見えないうえ Figmaにも無いので、両方外す。 ===================================================================== */ .rnw-vipcare-guide__group { padding-bottom: 0; border-bottom: 0; } /* ===================================================================== ご利用案内のPCの内側余白（2026-09-21 / Figma 1258:14278-14280） --------------------------------------------------------------------- Figmaは見出しが x=16.88 / y=24 で、SPと同じ余白。実装のPCだけ 40px だったのでSPと揃える。 ===================================================================== */ @media only screen and (min-width: 768px) { .rnw-vipcare-guide { padding: 24px 16.87px; } } /* ===================================================================== ご利用者様の声カードと「よくあるご質問」ボタンがくっついていた（2026-09-21） --------------------------------------------------------------------- .rnw-vipcare-detail__voice の指定が @media(min-width:768px) の中にしか 無く、SPでは素の div のまま隙間ゼロで縦に並んでいた。 Figma SP（1297:36570 / 1297:36577）の間隔は32px。 ===================================================================== */ @media only screen and (max-width: 767px) { .rnw-vipcare-detail__voice { display: flex; flex-direction: column; gap: 32px; } } /* ===================================================================== エグゼクティブ側の緑帯は細い（2026-09-21 / Figma 1297:36591, 1258:14195） --------------------------------------------------------------------- SPは幅24pxの細い帯（左16px）。238.478px はエグゼクティブ以外の値だった。 PCは逆に幅いっぱい（1120のうち1087＝左右16px強）なので、787pxではなく calc(100% - 33px) にする。 ===================================================================== */ .rnw-vipcare-daily--exec .rnw-vipcare-daily__list::before { width: 24px; } @media only screen and (min-width: 768px) { .rnw-vipcare-daily--exec .rnw-vipcare-daily__list::before { width: calc(100% - 33px); max-width: none; } } /* ===================================================================== 料金表：左右のセルを半々に（2026-09-21） --------------------------------------------------------------------- 見出しセル110px固定＋データセル可変だったため、SP〜中間幅で左が狭く 右が広い不揃いな表になっていた。1199px以下は左右とも50%にする。 1200px以上（FigmaのPCカンプ幅）は従来どおり。 ===================================================================== */ @media only screen and (max-width: 1199px) { .rnw-vipcare-ttable__th, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__th { flex: 0 0 50%; width: 50%; min-width: 0; white-space: normal; } .rnw-vipcare-ttable__td, .rnw-vipcare-fee--exec .rnw-vipcare-ttable__td { flex: 1 1 0; min-width: 0; } } /* ===================================================================== SPの展開パネル：緑地の中に白ボックス（2026-09-21 / Figma 1297:36425-36427） --------------------------------------------------------------------- Figmaは、パネル全体が vipcare/bg の緑で、その中に左右16px内側の白い箱が あり、「ご利用いただけるもの」以下のコンテンツがその中に入る。 実装はパネル自体が白で、白箱が無かった。 白箱：x=16 / 幅311（343のうち）／内側の余白16px。 PC（≥768px）は既に同じ作りなので触らない。 ===================================================================== */ @media only screen and (max-width: 767px) { .rnw-vipcare-course__panel { background-color: var(--rnw-bg2); /* vipcare/bg #D8EEE9 */ } .rnw-vipcare-detail { margin-inline: 16px; padding: 16px; background-color: #FFFFFF; } } /* ===================================================================== 展開エリア上部のページ内リンク（2026-09-21 / Figma 1297:36379 / 36410 / 36756 / 37046 / 37067 / 37088） --------------------------------------------------------------------- SPだけに出す案内。白いボタン149×48／間隔12px／左右16px／文字14pxは 左16px、右に丸いシェブロン。グループ見出し（エグゼクティブ向けケア／ 家事コース／家事プラスコース）は14px太字で、下のボタンとは10px。 PC（≥768px）はカンプに無いので非表示のまま。 ===================================================================== */ .rnw-vipcare-anchors { display: none; } @media only screen and (max-width: 767px) { .rnw-vipcare-anchors { display: flex; flex-direction: column; gap: 24px; padding-inline: 16px; } .rnw-vipcare-anchors__group { display: flex; flex-direction: column; gap: 10px; } .rnw-vipcare-anchors__title { color: var(--rnw-accent); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; } .rnw-vipcare-anchors__list { display: flex; flex-wrap: wrap; gap: 12px; } .rnw-vipcare-anchors__list > li { width: calc((100% - 12px) / 2); } .rnw-vipcare-anchors__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 16px; border-radius: 8px; background-color: #FFFFFF; color: var(--rnw-text); font-family: var(--rnw-font-jp); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 1.2px; text-decoration: none; } /* 丸に下向きシェブロン */ .rnw-vipcare-anchors__icon { position: relative; flex: none; width: 14px; height: 14px; border: 1px solid var(--rnw-main); border-radius: 50%; } .rnw-vipcare-anchors__icon::before { position: absolute; top: 3px; left: 4px; width: 4px; height: 4px; content: ''; /* 矢印だけ黒。丸の線は vipcare/main のまま（2026-09-21） */ border-right: 1px solid var(--rnw-text); border-bottom: 1px solid var(--rnw-text); transform: rotate(45deg); } } /* ===================================================================== 家事コースの展開は白ボックスが3つに分かれる（2026-09-21 / Figma SP 1297:37102 / 37208 / 37343、PC 1258:14573 / 14680 / 14822） --------------------------------------------------------------------- 家事コース／家事プラスコース／ご利用案内＋対応エリア でボックスが切れる。 介護・看護は1ボックスのまま（PC 1258:14025 / 14338）。 間隔は SP が24px（緑地が見える）、PCは0（白が続いて見える）。 ===================================================================== */ @media only screen and (min-width: 768px) { .rnw-vipcare-course__panel { gap: 0; } } /* ===================================================================== 家事コースと家事プラスコースの並び替え（比較表・各サービス利用料金） HTMLは 介護→ナースケア→家事→家事プラス の順のまま、 表示だけ 介護→ナースケア→家事プラス→家事 にする（ボックスごと入れ替え）。 ===================================================================== */ .rnw-vipcare-compare:not(.rnw-vipcare-compare--fee) .rnw-vipcare-compare__cards > .rnw-vipcare-ccard:nth-child(3), .rnw-vipcare-price__tables > .rnw-vipcare-ptable:nth-child(3) { order: 2; } .rnw-vipcare-compare:not(.rnw-vipcare-compare--fee) .rnw-vipcare-compare__cards > .rnw-vipcare-ccard:nth-child(4), .rnw-vipcare-price__tables > .rnw-vipcare-ptable:nth-child(4) { order: 1; } /* 入会金・会費：HTMLは［家事・家事プラス］［介護・ナースケア］の2組。 SP/タブレット（2列×2段）は段を入れ替え、1段目の中で家事プラス→家事にする。 */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second { order: -1; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__group:not(.rnw-vipcare-compare__group--second) .rnw-vipcare-ccard:nth-child(1) { order: 2; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__group:not(.rnw-vipcare-compare__group--second) .rnw-vipcare-ccard:nth-child(2) { order: 1; } /* PC（4列1段）は組を解いてカード4枚を1列に並べ直す。 ラベル列は1組目のものを先頭に置く（2組目のラベル列は非表示のまま）。 */ @media only screen and (min-width: 1200px) { .rnw-vipcare-compare--fee .rnw-vipcare-compare__group, .rnw-vipcare-compare--fee .rnw-vipcare-compare__cards { display: contents; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__labels { order: 0; } .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second .rnw-vipcare-ccard:nth-child(1) { order: 1; } /* 介護 */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__group--second .rnw-vipcare-ccard:nth-child(2) { order: 2; } /* ナースケア */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__group:not(.rnw-vipcare-compare__group--second) .rnw-vipcare-ccard:nth-child(2) { order: 3; } /* 家事プラス */ .rnw-vipcare-compare--fee .rnw-vipcare-compare__group:not(.rnw-vipcare-compare__group--second) .rnw-vipcare-ccard:nth-child(1) { order: 4; } /* 家事 */ } /* 活用事例カードの写真は一時的に非表示（2026-09-23 指示）。戻すときはこのブロックを消す */ .rnw-vipcare-casecard__media { display: none; } /* ページ内メニュー：「家事・家事プラスコース」→「家事プラス・家事コース」（2026-09-23 指示）。 文言は固定ページ本文にあるため、貼り替えずに済むよう CSS で差し替える。 本文を直して貼り替えたら、このブロックは消すこと。 */ .rnw-vipcare-menu__item[href="#vipcare-course-housework"] > span:first-child { font-size: 0; } .rnw-vipcare-menu__item[href="#vipcare-course-housework"] > span:first-child::before { content: "家事プラス・\A家事コース"; font-size: 12px; /* .rnw-vipcare-menu__item と同じ */ white-space: pre; } /* VIPケアとは（PC）：3つを absolute で重ねていたため、1200〜1400px前後で 白カードが写真の枠（aspect-ratio）より高くなると、上にはみ出してロゴと重なっていた。 1マスのグリッドに重ねる形に変え、カードが高いときは枠の方を下へ伸ばす。 カードの上端はロゴの下端＋16pxより上に来ない。1280幅（Figma）の見た目は元のまま。 ％の margin は幅基準なので、元の top 4.784%（30.28÷632.986）は 30.28÷1280＝2.366% に置き換え。 */ @media only screen and (min-width: 1200px) { .rnw-vipcare-about__body { display: grid; grid-template: 1fr / 1fr; } .rnw-vipcare-about__logo, .rnw-vipcare-about__media, .rnw-vipcare-about__card { grid-area: 1 / 1; position: relative; inset: auto; } /* 重なり順：SP用の order（ロゴ1・写真3）が残っていると写真がカードの上に来るので付け直す */ .rnw-vipcare-about__media { order: 1; } .rnw-vipcare-about__card { order: 2; } .rnw-vipcare-about__logo { order: 3; } .rnw-vipcare-about__logo { align-self: start; justify-self: start; margin: 2.366% 0 0 -1%; /* 左は先の指示で 1.484% → -1% */ } .rnw-vipcare-about__media { align-self: start; justify-self: end; } .rnw-vipcare-about__card { align-self: end; justify-self: start; /* ロゴ下端＝2.366%＋高さ5.3125%（23.4375%×68/300） */ margin: calc(7.679% + 16px) 0 -0.548%; /* 下は元の -1.108%（−7.01÷632.986）を幅基準に：7.01÷1280 */ } } /* --- 2026-09-27 MVの高さ：デザイン比率（1440×704.77）のままだと、横長の画面ではヘッダー＋MVだけで1画面を超える → 高さの上限を「画面の高さ − ヘッダー」にして、MVの下端まで1画面に入れる。 縦に余裕がある画面はこれまでどおり比率の高さ。写真は上基準（object-position: center top）なので切れるのは下側。 カードは上から44%に置いているので、画面が極端に低いときにはみ出さないよう下限520px（PC上書き） --- */ @media only screen and (min-width: 768px) { .rnw-vipcare-mv__media { aspect-ratio: auto; height: min(calc(100vw * 704.77 / 1440), max(520px, calc(100vh - var(--rnw-header-h-pc)))); height: min(calc(100vw * 704.77 / 1440), max(520px, calc(100svh - var(--rnw-header-h-pc)))); } } /* --- 2026-09-27 見出しカード（--wide：活用事例・お客様の声・ご利用料金／768～1199）：写真の下に重ねる形に切り替えたが、 PC用の translate(-50%,-50%) が詳細度で勝って残り、カードが左上にずれていた→ この幅では transform を消して中央に置く（PC上書き） --- */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .rnw-vipcare-shead--wide .rnw-vipcare-shead__card { transform: none; } }