/* 英語サイト（poppins_en）の renewal/css/common.css をそのまま持ってきて、 クラス名と変数名の接頭辞を rnw- から hwc- に置換したもの。 educare の common.css も .rnw-header / .rnw-menu / .rnw-footer を持っていて 衝突するため、こちらだけ名前を変えて共存させている。中身は無編集。 */ @charset "UTF-8"; /* ===================================================================== ポピンズ English リニューアル 共通CSS --------------------------------------------------------------------- - 旧 style.css と同居するため、全クラスに `hwc-` を付与 （旧テーマ・旧CSS・旧JSに rnw 接頭辞は1件も無いことを確認済み） - 旧 style.css は編集しない。要素セレクタ（header / section / h1 / ul）を 持つため、下の「旧CSSの打ち消し」ブロックで .hwc-* 側から潰している - 色は全てCSS変数経由。値はFigma登録バリアブルを正としている ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD） PCヘッダー 373:37194 "type=English, page=TOP" PC展開 Visitors 373:38926 PC展開 Residents 373:38956 SPヘッダー 363:34281 SP追従CTA 363:34579 ===================================================================== */ /* Lusitana … FVの英字見出し（Figma 453:35891 / 453:35892）専用 Noto Serif JP … フッターのサイトマップ（Figma 453:36198） Prata … フッターの区切り「|」（Figma 453:36198）。旧 header.php も 同じフォントを読み込んでいるが、プレビュー単体でも出るよう ここでも指定しておく。 */ @import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400&family=Lusitana:wght@400;700&family=Prata&display=swap'); /* ===================================================================== 1. 変数 ===================================================================== */ :root { /* ------------------------------------------------------------- カラー：全プロパティ共通（Figma登録バリアブル） ------------------------------------------------------------- */ --hwc-text: #444444; /* 本文 common/text/bk */ --hwc-caption: #626262; /* キャプション・プレースホルダ common/text/gray */ --hwc-white: #FFFFFF; /* common/white */ --hwc-accent: #912344; /* アクセント common/accent/red（PC CTA・SP CTA右） */ --hwc-gold: #C9A96E; /* common/accent/gold */ --hwc-bg2: #EEE8DE; /* common/bg2（実績バーの地色 Figma 453:35894） */ /* ------------------------------------------------------------- タイポグラフィ --------------------------------------------------------------- ▼MOBO（実績バーの数字 Figma 453:35909 など）はフォントワークスの 商用フォントで、Google Fonts等のWebフォント配信が無い。 ライセンス・配信方法が未確定のため、指定だけ入れて実表示は --hwc-font-jp にフォールバックさせている（educareと同じ扱い）。 ▼見出し（PC/title/h2）は Yu Mincho Pr6N。Webフォント配信が無いため OS搭載の明朝でフォールバックする。英字はTimes系に落ちる。 ------------------------------------------------------------- */ --hwc-font-jp: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif; --hwc-font-mincho: 'Noto Serif JP', 'Yu Mincho', YuMincho, serif; /* フッターのサイトマップ */ --hwc-font-prata: 'Prata', 'Times New Roman', serif; /* フッターの区切り「|」 */ --hwc-font-display: 'Lusitana', 'Times New Roman', serif; --hwc-font-serif: 'Yu Mincho Pr6N', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Times New Roman', serif; --hwc-font-mobo: 'MOBO', 'MOBO-SemiBold', var(--hwc-font-jp); /* ------------------------------------------------------------- レイアウト --------------------------------------------------------------- ヘッダー高はFigma実測（PC 88px / SP 59px）。 ヘッダーは position:fixed のため、body 側に同じ分の余白を取る。 ------------------------------------------------------------- */ --hwc-header-h-pc: 88px; --hwc-header-h-sp: 59px; /* ▼2026-09-09 追加：ページCSS（pages/hawaii.css / hawaii-en.css）は 本文の上余白とアンカーの停止位置を --rnw-header-h-* から取っているが、 その値は educare のヘッダー（70px / 90px）のもの。このページに載って いるのは .hwc-header（59px / 88px）なので、実寸に上書きして揃える。 揃えないとヘッダーの下に SPで11px・タブレットで31px の隙間が空き、 ドロワーから飛ぶページ内リンクの停止位置も同じぶんズレる。 */ --rnw-header-h-sp: var(--hwc-header-h-sp); --rnw-header-h-pc: var(--hwc-header-h-pc); --hwc-content-max: 1440px; /* Figmaのアートボード幅 */ --hwc-z-header: 200; /* 旧 header の z-index:150 より上 */ --hwc-z-menu: 210; /* ドロワーは自前のヘッダー行を持つのでヘッダーより上 */ --hwc-z-spcta: 180; --hwc-z-pagenav: 170; /* ページ内ナビ帯。ヘッダーより下、本文より上 */ /* ページ内ナビ帯の高さ。header.php が body に data-pagenav を出す。 帯は position:fixed で本文を押し下げないため、この値は 「本文の上余白」と「フッター下の逃げ」の計算にだけ使う。 */ --hwc-pagenav-h: 0px; /* SP追従CTAの高さ（Figma 363:34579 実測 55.7px）。 本文下端にこの分の余白を確保するために使う。 */ --hwc-spcta-h: 56px; } /* ------------------------------------------------------------- カラー：コーポレート英語版の配色（nanny/*） --------------------------------------------------------------- ▼2026-09-09 修正：もとは [data-property="english"] に入れていたが、 ハワイの2ページは を出すため （hawaii/css/common.css の educare 変数を効かせるのに必要）、 この一式がまるごと未定義になっていた。結果、ヘッダーCTAの赤・ ドロワーの地色・点線の色が全部落ちていた。 chrome.css は page-hawaii.php / page-hawaii-en.php しか読まないので、 プロパティで出し分ける必要はない。:root に置いて常に効かせる。 ------------------------------------------------------------- */ :root { --hwc-main: #F6BECA; /* メイン nanny/main（SP CTA左・タグ枠線） */ --hwc-bg-main: #FAEEF1; /* 背景 nanny/bg（見出し帯・展開中ナビ） */ --hwc-main-text: #BC326C; /* メイン文字 nanny/text/accent（見出し・タグ文字） */ /* ハワイ（Figma hawaii/*）。ドロワーの地色と、日本語ドロワーの点線。 Figma SPドロワー 日本語 1144:16700 ／ 英語 1144:15871。 */ --hwc-hawaii-main: #20BDAE; /* hawaii/main（日本語ドロワーのカード点線） */ --hwc-hawaii-bg: #EDFAF8; /* hawaii/bg（ドロワーの地色・日英共通） */ --hwc-cta-bg: #912344; /* CTA背景 common/accent/red */ --hwc-cta-text: #FFFFFF; /* お問い合わせセクションの背景グラデーション（Figma 453:36187 / nanny/gra2）。 停止位置52.404%は familycare / educare のお問い合わせ背景と同一。 */ --hwc-contact-gra: linear-gradient(to bottom, #FCF7F8 0%, #F6BECA 52.404%); /* ▼要確認：PCナビ展開パネルの上罫線。 Figmaの English 列にある展開バリアント（373:38926 / 373:38956）は コンポーネント名が "type=educare" のままで、罫線色も educare/main #00429A が入っている。エデュケアのバリアントを複製した名残の可能性が 高いが、デザイン値どおり実装している。英語サイトの配色に寄せるなら var(--hwc-main-text) に変えるだけでよい。 */ --hwc-panel-border: #00429A; } /* ===================================================================== 2. 旧 style.css の打ち消し --------------------------------------------------------------------- 旧CSSは要素セレクタを持つため、リニューアル範囲だけ個別に無効化する。 header { border-top:3px #fcdeec / box-shadow / z-index:150 } section { width:1000px; margin:0 auto } ← 新デザインの
を潰す ul { list-style:none } ← カード内の箇条書きが消える body { font-family:'Prata'; font-size:14px; line-height:24px } ===================================================================== */ /* ページ内リンク（#アンカー）をなめらかに送る。 停止位置は各ページCSSの scroll-margin-top で固定ヘッダーぶんを逃がしている。 JSは使わない（旧 js/smooth-scroll.js は読み込んでいない）。 */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.hwc-body { font-family: var(--hwc-font-jp); font-size: 16px; line-height: 1.8; color: var(--hwc-text); /* ヘッダーが position:fixed のぶんを本文で確保する */ padding-top: var(--hwc-header-h-sp); } /* box-sizing はリニューアル範囲の全ルートに掛ける。 旧 style.css は box-sizing を一切指定していないため、指定を漏らすと その要素だけ content-box のままになり、Figma実測の height に padding が 外側から加算されて高さが狂う（実際にページ内ナビ帯で発生した）。 ルートを増やしたらここにも足すこと。 */ .hwc-header, .hwc-header *, .hwc-menu, .hwc-menu *, .hwc-spcta, .hwc-spcta *, .hwc-pagenav, .hwc-pagenav *, .hwc-footer, .hwc-footer * { box-sizing: border-box; } /* 旧 style.css の `section h3` は羽の画像を背景に敷く指定 （PC: img/h3_left.jpg / h3_right.jpg、SP: img/sp_h3.jpg）。 リニューアル本文の

はすべて
の中にあるため当たってしまう。 旧ページには影響させたくないので、旧CSSは触らずここで打ち消す。 */ .hwc-page section h3, .hwc-page section h3 > div, .hwc-page section h3 div div { height: auto; padding: 0; background: none; } /* 旧 header{} の装飾を打ち消す */ .hwc-header { border-top: 0; box-shadow: none; } /* リニューアルページ本文（renewal/pages/*.html を貼った固定ページ本文）。 旧 section{width:1000px} を無効化し、幅の制御は各セクション側に持たせる。 */ .hwc-page, .hwc-page * { box-sizing: border-box; } /* ▼:where() で包んでいる理由 `.hwc-page section` のように要素セレクタを足すと詳細度が (0,1,1) になり、 あとから書く `.hwc-svc__list { margin:0 auto }` のようなクラス指定 (0,1,0) を打ち負かしてしまう（要素リセットが常に勝つ）。 :where() は詳細度に加算されないため (0,1,0) に揃い、後勝ちで上書きできる。 */ .hwc-page :where(section) { width: auto; margin: 0; } .hwc-page :where(ul, ol) { list-style: none; } .hwc-page img { max-width: 100%; } .hwc-page a { text-decoration: none; } /* ===================================================================== 3. 共通ユーティリティ ===================================================================== */ /* --- アイコン（単色SVGを mask で描画し、色は currentColor から供給）--- 色未確定でも変数の差し替えだけでアイコン色が追従する。 */ .hwc-icon { display: block; flex-shrink: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .hwc-icon--hamburger { -webkit-mask-image: url('../img/en-common/icon_hamburger.svg'); mask-image: url('../img/en-common/icon_hamburger.svg'); } .hwc-icon--close { -webkit-mask-image: url('../img/en-common/icon_close.svg'); mask-image: url('../img/en-common/icon_close.svg'); } .hwc-icon--chevron { -webkit-mask-image: url('../img/en-common/icon_chevron.svg'); mask-image: url('../img/en-common/icon_chevron.svg'); } .hwc-icon--instagram { -webkit-mask-image: url('../img/en-common/icon_instagram.svg'); mask-image: url('../img/en-common/icon_instagram.svg'); } .hwc-icon--facebook { -webkit-mask-image: url('../img/en-common/icon_facebook.svg'); mask-image: url('../img/en-common/icon_facebook.svg'); } /* ▼--chevron と --caret は別アセット。混ぜないこと。 --chevron … 横長（13.339×7.669）。PCヘッダーのナビ（Figma 1106:34731） --caret … 縦長（10.607×14.607）。日本語ドロワーのアコーディオン （Figma 1144:16730）。アセットは上向きなので180度回して使う。 */ .hwc-icon--caret { -webkit-mask-image: url('../img/icon_chevron.svg'); mask-image: url('../img/icon_chevron.svg'); transform: rotate(180deg); transition: transform .2s ease-out; } /* 別窓リンクのアイコン（ポピンズシッター／ペットケア） */ .hwc-icon--link-share { -webkit-mask-image: url('../img/icon_link_share.svg'); mask-image: url('../img/icon_link_share.svg'); } /* ▼アセットは「下向き」シェブロン付きの丸で書き出されているが、Figmaの ボタンでは Down コンポーネントに scaleY(-1)+rotate(90deg) が掛かって おり見た目は「右向き」。CSS側で -90度回転させて向きを合わせる。 */ .hwc-icon--arrow { -webkit-mask-image: url('../img/en-common/icon_arrow_circle.svg'); mask-image: url('../img/en-common/icon_arrow_circle.svg'); transform: rotate(-90deg); } /* 下向きのまま使う版（SPのページ内ナビ Figma 545:48908）。 アセットは上と同じ「丸＋下向きシェブロン」なので回転させないだけ。 */ .hwc-icon--arrow-down { -webkit-mask-image: url('../img/en-common/icon_arrow_circle.svg'); mask-image: url('../img/en-common/icon_arrow_circle.svg'); } /* --- ホバー／フォーカスの共通ルール --------------------------------- Figmaにはヘッダーの展開（hover-Visitors / hover-Residents）以外の ホバー指定が無いため、他プロパティと同じ「薄くする」を既定にしている。 個別に色が変わるものだけ各セクション側で上書きする。 ▼タッチ端末では :hover が張り付くので hover: hover のときだけ効かせる。 ▼キーボード操作用に :focus-visible も同じ扱いにする。 -------------------------------------------------------------------- */ .hwc-header a, .hwc-header button, .hwc-menu a, .hwc-menu button, .hwc-spcta a, .hwc-pagenav a, .hwc-footer a, .hwc-page a, .hwc-slider__btn { transition: opacity .2s, background-color .2s, color .2s; } @media (hover: hover) { .hwc-header a:hover, .hwc-menu a:hover, .hwc-spcta a:hover, .hwc-footer a:hover, .hwc-page a:hover, .hwc-slider__btn:not(:disabled):hover { opacity: .7; } } .hwc-header a:focus-visible, .hwc-header button:focus-visible, .hwc-menu a:focus-visible, .hwc-menu button:focus-visible, .hwc-spcta a:focus-visible, .hwc-pagenav a:focus-visible, .hwc-footer a:focus-visible, .hwc-page a:focus-visible, .hwc-slider__btn:focus-visible { outline: 2px solid var(--hwc-main-text); outline-offset: 2px; } /* 遷移先未確定（ で出している項目）はホバーさせない */ .hwc-header__nav-link--pending, .hwc-header__nav-sublink--pending, .hwc-menu__link--pending, .hwc-pagenav__link--pending { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hwc-header a, .hwc-header button, .hwc-menu a, .hwc-menu button, .hwc-spcta a, .hwc-pagenav a, .hwc-footer a, .hwc-page a, .hwc-slider__btn { transition: none; } } /* --- 画面読み上げ用の非表示 --- */ .hwc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===================================================================== 4. ボタン（Figma 453:35984 / 453:35985 ほか） --------------------------------------------------------------------- px32 / py16、角丸65.96px（＝ピル）、左右振り分け、18px Bold、 右に22pxの丸矢印アイコン。塗り・線の2種類。 ===================================================================== */ .hwc-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 32px; /* Figma実測 */ border-radius: 65.96px; /* Figma実測 */ font-family: var(--hwc-font-jp); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; text-decoration: none; box-sizing: border-box; transition: opacity .2s; } .hwc-btn:hover { opacity: .8; } .hwc-btn__icon { width: 22px; /* Figma実測 */ height: 22px; } /* 塗り：common/accent/red（Figma 453:35984） */ .hwc-btn--accent { background-color: var(--hwc-cta-bg); border: 0.745px solid var(--hwc-white); /* Figma実測 */ color: var(--hwc-cta-text); } /* 塗り：nanny/text/accent（Figma 453:36029 カードのCTA） */ .hwc-btn--main { background-color: var(--hwc-main-text); border: 0.745px solid var(--hwc-white); color: var(--hwc-white); } /* 線：common/accent/red（Figma 453:36062 "more"） */ .hwc-btn--outline-accent { background-color: var(--hwc-white); border: 2px solid var(--hwc-accent); color: var(--hwc-accent); } /* 線：nanny/text/accent（Figma 453:35985 "FAQ"） */ .hwc-btn--outline-main { background-color: var(--hwc-white); border: 2px solid var(--hwc-main-text); color: var(--hwc-main-text); } /* ===================================================================== 5. タグ（Figma 453:36050 / 453:36058 ほか） --------------------------------------------------------------------- 白地・nanny/main の細枠・角丸8px・18px Bold・文字は nanny/text/accent。 ===================================================================== */ .hwc-tag { display: inline-flex; align-items: center; justify-content: center; padding: 12px; /* Figma実測 */ border: 0.745px solid var(--hwc-main); /* Figma実測 */ border-radius: 8px; background-color: var(--hwc-white); color: var(--hwc-main-text); font-family: var(--hwc-font-jp); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; white-space: nowrap; } /* お客様の声カード内の小タグ（Figma 453:36149）。ピル形・14px。 */ /* SPカンプ（694:91737 ほか）はタグだけ14px。PCカンプ（694:36039）は18px。 */ @media only screen and (max-width: 767px) { .hwc-tag { font-size: 14px; } } .hwc-tag--pill { padding: 12px 20px; border-radius: 55.96px; font-size: 14px; } /* ===================================================================== 5-2. 見出し（title/h2 コンポーネント） --------------------------------------------------------------------- Figma の "title/h2"（2623:7973）。上に英字のサブ（Lusitana 24px / nanny/text/accent）、下に本見出し（Yu Mincho Pr6N 42px）。 サブが無いバリアントもあるため、.hwc-h2__sub は任意。 複数ページで使うため common.css に置く。 ===================================================================== */ .hwc-h2 { font-family: var(--hwc-font-serif); font-size: 28px; /* Figma SP実測 */ font-weight: 600; line-height: 1.3; letter-spacing: 1.2px; text-align: center; color: var(--hwc-text); } .hwc-h2__sub { display: block; margin-bottom: 8px; /* Figma実測 */ font-family: var(--hwc-font-display); font-size: 18px; /* Figma SP実測 */ font-weight: 400; line-height: 1.3; letter-spacing: 1.2px; color: var(--hwc-main-text); } /* ===================================================================== 5-3. 横スライダー（前後ボタン＋進捗バー） --------------------------------------------------------------------- Figma PC 453:36125 ／ SP 363:34414。制御は renewal/js/front.js。 トップ・ナニーサービスの両ページで使うため common.css に置く。 ===================================================================== */ .hwc-slider__nav { display: flex; align-items: center; justify-content: center; gap: 15.5px; /* Figma SP実測（24 + 15.5 + 160 + 15.5 + 24 = 239） */ width: 239px; margin: 0 auto 32px; } .hwc-slider__btn { width: 24px; /* Figma SP実測 */ height: 24px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: url('../img/en-common/icon_swiper.svg') center / contain no-repeat; cursor: pointer; } /* アセットは「次へ」（右向き）。前へは反転させる。 */ .hwc-slider__btn--prev { transform: scaleX(-1); } /* 端まで来たボタンは薄くする（Figma 453:36126 の opacity 50%） */ .hwc-slider__btn:disabled { opacity: .5; cursor: default; } .hwc-slider__bar { position: relative; display: block; width: 160px; /* Figma SP実測 */ height: 1px; background-color: var(--hwc-main-text); } .hwc-slider__thumb { position: absolute; top: -1.67px; /* Figma実測（バーより上に1.67pxはみ出す） */ left: 0; height: 4px; /* Figma実測 */ border-radius: 16.736px; background-color: var(--hwc-main-text); } /* ===================================================================== 5-4. お客様の声カード（Figma 453:36141） --------------------------------------------------------------------- トップ（Trusted Worldwide.）とナニーサービス（Guest Testimonials）で 同じカードを使うため common.css に置く。 ===================================================================== */ .hwc-voice__cards { display: flex; gap: 16px; margin: 0; padding: 0 16px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hwc-voice__cards::-webkit-scrollbar { display: none; } .hwc-voice__card { display: flex; flex: 0 0 311px; /* Figma実測 */ flex-direction: column; scroll-snap-align: start; } .hwc-voice__card-head { padding: 17px 27px; /* Figma実測 */ border: 1px solid var(--hwc-main); border-bottom: 0; border-radius: 8px 8px 0 0; background-color: var(--hwc-bg-main); font-family: var(--hwc-font-jp); font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: .216px; /* Figma実測 */ text-align: center; color: var(--hwc-text); } .hwc-voice__card-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 16px; /* Figma実測 */ padding: 16px; border-radius: 0 0 8px 8px; background-color: var(--hwc-white); } /* 見出し行（.hwc-voice__card-head）が無いカードは、本体だけで角丸を閉じる。 ナニーページはFigma改訂（694:36311 / 694:90482）で見出し行が削除されたため 本体が先頭になる。トップは見出し行が残っているので当たらない。 */ .hwc-voice__card-body:first-child { border-radius: 8px; } /* ---------- SPのカード（Figma 694:91829） ---------- SPカンプでは見出し行（Nanny Service）が無く、並びは 写真 → ★ → タグ → 引用。タグも左寄せ。 PCカンプ（694:36131）は見出し行が残り、タグは引用の下・中央寄せなので ここは767px以下だけに掛けている。 */ @media only screen and (max-width: 767px) { .hwc-voice__card-head { display: none; } .hwc-voice__card-body { border-radius: 8px; } .hwc-voice__tag { order: 1; justify-content: flex-start; } .hwc-voice__quote { order: 2; } } .hwc-voice__photo { width: 100%; height: 150px; /* Figma実測 */ } /* 写真はFigma未指定（グレーの塗りのみ）。枠だけ確保する。 */ .hwc-voice__photo--empty { background-color: var(--hwc-caption); } .hwc-voice__stars { width: 100%; font-size: 16px; line-height: 1.8; color: #000; } .hwc-voice__quote { width: 100%; font-family: var(--hwc-font-jp); font-size: 14px; font-weight: 400; line-height: 1.8; letter-spacing: 1.2px; color: var(--hwc-text); } .hwc-voice__tag { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; /* Figma実測 */ width: 100%; } @media only screen and (min-width: 768px) { .hwc-h2 { font-size: 42px; } /* Figma PC実測 */ .hwc-h2__sub { font-size: 24px; } /* Figma PC実測 */ .hwc-voice__cards { padding: 0; } } /* ===================================================================== 5-5. お問い合わせ（Figma PC 453:36187 / 453:35747） --------------------------------------------------------------------- トップとナニーサービスで同じ見た目のため common.css に置く。 ===================================================================== */ .hwc-contact { padding: 40px 16px; background: var(--hwc-contact-gra); } .hwc-contact__box { margin-top: 32px; padding: 24px 16px; /* Figma実測 */ border-radius: 8px; background-color: var(--hwc-white); text-align: center; } .hwc-contact__text { font-family: var(--hwc-font-jp); font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: 1.2px; color: var(--hwc-text); text-align: left; } .hwc-contact__btn { margin-top: 24px; } @media only screen and (min-width: 768px) { /* ---------------- Contact ---------------- */ /* 左右paddingはFigma実測80px。1440pxを超えたぶんはpaddingに足して 内容の最大幅（1280px）を保ったまま中央に寄せる。 */ .hwc-contact { display: flex; flex-direction: column; align-items: center; gap: 56px; /* Figma実測 */ padding: 56px max(80px, calc((100% - 1280px) / 2)); } .hwc-contact__box { display: flex; flex-direction: column; align-items: center; gap: 16px; /* Figma実測 */ width: 100%; max-width: 1280px; margin-top: 0; padding: 24px 16px; /* Figma実測 */ } .hwc-contact__text { font-size: 24px; /* Figma実測 */ text-align: center; } .hwc-contact__btn { width: 480px; /* Figma実測 */ max-width: 100%; margin-top: 0; } } /* ===================================================================== 6. ヘッダー（Figma 373:37194） ===================================================================== */ .hwc-header { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--hwc-z-header); background-color: var(--hwc-white); } .hwc-header a { text-decoration: none; } /* ---------- SP（Figma 363:34281） ---------- */ .hwc-header__sp { display: flex; align-items: center; width: 100%; min-height: var(--hwc-header-h-sp); background-color: var(--hwc-white); } .hwc-header__sp-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; /* Figma実測 */ } .hwc-header__logo { display: block; width: 127px; /* Figma実測 127.453px */ flex-shrink: 0; } .hwc-header__logo img { display: block; width: 100%; height: auto; } .hwc-header__toggle { display: flex; align-items: center; justify-content: center; width: 35px; /* Figma実測 */ height: 35px; padding: 0; border: 0; background: none; color: var(--hwc-text); cursor: pointer; } .hwc-header__toggle .hwc-icon { width: 100%; height: 100%; } .hwc-header__toggle .hwc-icon--close { display: none; } .hwc-header__toggle[aria-expanded="true"] .hwc-icon--hamburger { display: none; } .hwc-header__toggle[aria-expanded="true"] .hwc-icon--close { display: block; } /* ---------- PC（Figma 373:37194） ---------- */ .hwc-header__pc { display: none; width: 100%; min-height: var(--hwc-header-h-pc); background-color: var(--hwc-white); } .hwc-header__pc-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--hwc-content-max); min-height: var(--hwc-header-h-pc); margin: 0 auto; padding: 20px 40px; /* Figma実測 */ } .hwc-header__pc-logo { display: block; width: 161px; /* Figma実測 161.152px */ flex-shrink: 0; } .hwc-header__pc-logo img { display: block; width: 100%; height: auto; } .hwc-header__pc-right { display: flex; align-items: center; gap: 24px; /* Figma実測 */ } .hwc-header__nav { display: flex; align-items: center; gap: 32px; /* Figma実測 */ margin: 0; padding: 0; list-style: none; } /* 展開パネルをヘッダー幅いっぱいに置くため、絶対配置の基準は .hwc-header 側。 .hwc-header__nav-item は静的配置のままにしておく。 */ .hwc-header__nav-item { display: flex; align-items: center; } .hwc-header__nav-link { display: flex; align-items: center; gap: 12px; /* Figma実測 */ padding: 4px 6px; border: 0; background: none; color: var(--hwc-text); font-family: var(--hwc-font-jp); font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; white-space: nowrap; cursor: pointer; } .hwc-header__nav-link--pending { cursor: default; } /* 展開中は項目の地色が nanny/bg（Figma 373:38933 / 373:38966）。 */ .hwc-header__nav-item.is-open > .hwc-header__nav-link { background-color: var(--hwc-bg-main); } .hwc-header__nav-caret { width: 13.339px; /* Figma実測 */ height: 7.669px; transition: transform .2s; } .hwc-header__nav-item.is-open .hwc-header__nav-caret { transform: rotate(180deg); } /* 展開パネル（Figma 373:38950 / 373:38980）。 ヘッダー下いっぱいの帯に、項目を横1列で中央寄せ。 */ .hwc-header__nav-panel { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 20px; /* Figma実測 */ border-top: 1px solid var(--hwc-panel-border); /* ※上の要確認コメント参照 */ background-color: var(--hwc-white); } .hwc-header__nav-item.is-open > .hwc-header__nav-panel { display: block; } .hwc-header__nav-sublist { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; /* Figma実測 */ margin: 0; padding: 0; list-style: none; } .hwc-header__nav-sublink { display: flex; align-items: center; gap: 16px; /* Figma実測 */ color: var(--hwc-text); font-family: var(--hwc-font-jp); font-size: 16px; font-weight: 700; line-height: 1.8; letter-spacing: 1.2px; } .hwc-header__nav-sublink--pending { cursor: default; } .hwc-header__nav-dot { width: 16px; /* Figma実測 */ height: 16px; border-radius: 90px; background-color: var(--hwc-accent); flex-shrink: 0; } /* CTA（Figma 373:37212）。塗り common/accent/red・角丸8px・高さ48px。 */ .hwc-header__cta { display: flex; align-items: center; justify-content: center; height: 48px; /* Figma実測 */ padding: 16px 28px; /* Figma実測 py16/px12 ＋ 内側 px16 */ border-radius: 8px; background-color: var(--hwc-cta-bg); color: var(--hwc-cta-text); font-family: var(--hwc-font-jp); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: 1.2px; white-space: nowrap; transition: opacity .2s; } .hwc-header__cta:hover { opacity: .8; } /* ===================================================================== 7. SPドロワー（Figma 日本語 1144:16700 ／ 英語 1144:15871） --------------------------------------------------------------------- 画面全体を覆い、上部に自前のヘッダー行（ロゴ＋閉じる）を持つため、 固定ヘッダーより上（--hwc-z-menu）に重ねる。地色は日英とも hawaii/bg。 日英で中身が違う。ページ側で .hwc-menu--jp を足して出し分ける。 英語（1144:15871） … ページ内ナビのカードだけ。点線は nanny/text/accent 日本語（1144:16700）… カード（点線 hawaii/main）＋サイト全体のナビ （個人向け／法人向け／会社情報／採用情報） ===================================================================== */ .hwc-menu { position: fixed; inset: 0; z-index: var(--hwc-z-menu); display: flex; flex-direction: column; align-items: center; padding-bottom: 40px; /* Figma実測 */ background-color: var(--hwc-hawaii-bg); /* Figma実測 hawaii/bg #EDFAF8 */ overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; } .hwc-menu-open .hwc-menu { visibility: visible; opacity: 1; } .hwc-menu-open { overflow: hidden; } .hwc-menu a { text-decoration: none; } /* ---------- ドロワー上部のヘッダー行（Figma 英語 1144:15872 ／ 日本語 1144:16702） ---------- */ .hwc-menu__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 20px; /* Figma実測 */ border-bottom: 1px solid var(--hwc-caption); /* Figma実測 common/text/gray */ background-color: var(--hwc-white); } /* 日本語（1144:16702）は上下パディングが12pxで、下罫線が無い。 */ .hwc-menu--jp .hwc-menu__head { padding: 12px 20px; /* Figma実測 */ border-bottom: 0; } /* ▼Figmaのロゴ（363:34789 / 241.744×35）はファミリーケア版が入ったまま。 英語サイトなのでヘッダーと同じ Poppins ロゴを同じ幅で置く。 */ .hwc-menu__logo { display: block; width: 127px; flex-shrink: 0; } .hwc-menu__logo img { display: block; width: 100%; height: auto; } .hwc-menu__close { display: flex; align-items: center; justify-content: center; width: 43px; /* Figma実測 */ height: 43px; padding: 0; border: 0; background: none; color: var(--hwc-text); cursor: pointer; } .hwc-menu__close .hwc-icon { width: 100%; height: 100%; } /* 日本語（1144:16705）の閉じるボタンは30px。 */ .hwc-menu--jp .hwc-menu__close { width: 30px; height: 30px; } /* ---------- 中身 ---------- */ .hwc-menu__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; /* Figma実測 */ width: 330px; /* Figma実測 */ max-width: calc(100% - 32px); padding-top: 30px; /* Figma実測 */ } /* 白いカード（Figma 363:34794） */ .hwc-menu__card { display: flex; flex-direction: column; align-items: center; gap: 24px; /* Figma実測 */ width: 100%; padding: 16px; /* Figma実測 */ border-radius: 8px; background-color: var(--hwc-white); } .hwc-menu__card-title { margin: 0; font-family: var(--hwc-font-jp); font-size: 18px; /* Figma実測 SP/text/large/bold */ font-weight: 700; line-height: 1.8; letter-spacing: .216px; /* Figma実測 */ text-align: center; color: var(--hwc-caption); /* Figma実測 common/text/gray */ } /* 2列。行間の隙間は無し（点線が上下で接する）。 */ .hwc-menu__list { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 12px; /* Figma実測 */ row-gap: 0; width: 298px; /* Figma実測 */ max-width: 100%; margin: 0; padding: 0; list-style: none; } .hwc-menu__item { width: 143px; } /* Figma実測 */ .hwc-menu__link { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; /* Figma実測 */ border-bottom: 1px dashed var(--hwc-main-text); /* Figma実測 nanny/text/accent */ font-family: var(--hwc-font-jp); font-size: 14px; /* Figma実測 SP/text/defalut/bold */ font-weight: 700; line-height: 1.8; letter-spacing: .168px; /* Figma実測 */ text-align: center; color: var(--hwc-text); } /* 1行目の2項目だけ上にも点線が入る（Figma 1144:15885 / 1144:15887） */ .hwc-menu__item:nth-child(1) .hwc-menu__link, .hwc-menu__item:nth-child(2) .hwc-menu__link { border-top: 1px dashed var(--hwc-main-text); } /* 遷移先未確定（ で出している項目） */ .hwc-menu__link--pending { cursor: default; } /* ---------- 日本語版のカード（Figma 1144:16709） ---------- 英語版と違うのは書体・文字色・点線の色、そして全項目に上下の点線が 入ること（1144:16715 / 16717 / 16719 はいずれも上下に点線を持つ）。 */ /* 英語版（1144:15884）は justify-center だが、日本語版（1144:16714）は 指定が無い＝左寄せ。3つ目の「お問い合わせ」が1列目の下に来る。 */ .hwc-menu--jp .hwc-menu__list { justify-content: flex-start; } .hwc-menu--jp .hwc-menu__card-title { font-family: var(--hwc-font-mobo); /* Figma SP/title/educare/text/large */ letter-spacing: 1.2px; /* Figma実測 */ color: var(--hwc-text); /* Figma実測 common/text/bk */ } /* 詳細度は上の :nth-child ルール（0-3-0）に合わせる。下回ると1・2番目の 点線だけ英語版の色（nanny/text/accent）が残ってしまう。 */ .hwc-menu--jp .hwc-menu__item .hwc-menu__link { border-bottom-color: var(--hwc-hawaii-main); /* Figma実測 hawaii/main */ border-top: 1px dashed var(--hwc-hawaii-main); font-family: var(--hwc-font-mobo); /* Figma SP/title/educare/text */ letter-spacing: 1.2px; /* Figma実測 */ color: var(--hwc-caption); /* Figma実測 common/text/gray */ } /* ---------- 日本語版のサイト全体ナビ（Figma 1144:16726） ---------- カードの下に「個人向けサービス／法人向けサービス／会社情報／採用情報」。 カンプ 1144:16700 は閉じた状態なので、開いたあとの2階層目・3階層目は 総合トップ（テーマ poppins/top/poppins-top）の renewal/nav.php と Figma 1291:19157（1階層）／1291:19255（2階層）に合わせている。 このページは1ファイル完結なので、項目は page-hawaii.php に直書きしてある。 ▼英語版（1144:15871）にこのナビは無い。.hwc-menu--jp の中だけで効かせる。 ------------------------------------------------------------------ */ /* 点線罫線（Figma の stroke-dasharray="2 2"）。 border-style:dashed は破線長を指定できないため背景で描く。 */ .hwc-dash-b { background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; background-image: repeating-linear-gradient( to right, var(--hwc-caption) 0 2px, transparent 2px 4px ); } .hwc-nav { width: 100%; } .hwc-nav a, .hwc-nav button { text-decoration: none; } .hwc-nav__list, .hwc-nav__sublist, .hwc-nav__leaflist { margin: 0; padding: 0; list-style: none; } .hwc-nav__list { padding-top: 20px; } /* Figma実測 1144:16726 */ /* 項目間24px＋各項目の下に点線、という並びを上下パディングで作る。 */ .hwc-nav__item { padding-bottom: 24px; } .hwc-nav__item + .hwc-nav__item { padding-top: 24px; } /* 見出し（