/* ======================================== MENS専用CSS（ページID：4866） 共通の menu-detail.css より後に読み込む 共通レイアウトは変更せず配色を上書き ======================================== */ /* ======================================== 01. MENS：H1文字色 ======================================== */ #body_wrap.page-id-4866 .c-pageTitle__inner { color: #526A7A !important; } /* ======================================== MENS：料金表のH3見出し ======================================== */ #body_wrap.page-id-4866 h3.mens-price-heading { position: relative; margin-bottom: 12px !important; padding: 0 0 0 16px !important; border: none !important; background: none !important; color: #526A7A; font-size: 22px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* 左側のブルーグレーの縦線 */ #body_wrap.page-id-4866 h3.mens-price-heading::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 24px; background: #A7BAC8; border-radius: 2px; transform: translateY(-50%); } /* ======================================== MENS：料金表のH3見出し（スマホ） ======================================== */ @media (max-width: 767px) { #body_wrap.page-id-4866 h3.mens-price-heading { margin-bottom: 10px !important; padding-left: 14px !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.6 !important; } #body_wrap.page-id-4866 h3.mens-price-heading::before { height: 21px; } } /* ======================================== MENS（4866）：ページ全体の背景色 ======================================== */ #body_wrap.page-id-4866 { background-color: #F9FCFC; } /* ======================================== MENS（4866）：導入部分 ======================================== */ /* 英字タイトル */ #body_wrap.page-id-4866 .menu-detail-intro .wp-block-group__inner-container > p:first-child { color: #526A7A; } /* H2：キャッチコピー */ #body_wrap.page-id-4866 .menu-detail-intro h2 { color: #526A7A; } /* H2下のアクセントライン */ #body_wrap.page-id-4866 .menu-detail-intro h2::after { background: #A7BAC8; } /* 説明文 */ #body_wrap.page-id-4866 .menu-detail-intro p:not(:first-child) { color: #526A7A; } /* ======================================== MENS（4866）：FEATURE ======================================== */ #body_wrap.page-id-4866 .menu-detail-feature-label { color: #526A7A; } /* 日本語見出し */ #body_wrap.page-id-4866 .menu-detail-feature .wp-block-column:last-child h3 { color: #526A7A; } /* 見出し下のアクセントライン */ #body_wrap.page-id-4866 .menu-detail-feature .wp-block-column:last-child h3::after { background: #A7BAC8; } /* 説明文 */ #body_wrap.page-id-4866 .menu-detail-feature .wp-block-column:last-child p:not(.menu-detail-feature-label) { color: #526A7A; } /* ======================================== MENS（4866）：FEATURE 星の色変更 ======================================== */ #body_wrap.page-id-4866 .menu-detail-feature .wp-block-column:first-child::before, #body_wrap.page-id-4866 .menu-detail-feature .wp-block-column:first-child::after, #body_wrap.page-id-4866 .menu-detail-feature .wp-block-image::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23A7BAC8'%3E%3Cpath d='M50 0 V100 M0 50 H100' fill='none' stroke='%23A7BAC8' stroke-width='0.45'/%3E%3Cpath d='M50 24 C52 42 58 48 76 50 C58 52 52 58 50 76 C48 58 42 52 24 50 C42 48 48 42 50 24Z'/%3E%3C/g%3E%3C/svg%3E"); } /* ======================================== MENS（4866）：RECOMMEND ======================================== */ /* リスト全体 */ #body_wrap.page-id-4866 .menu-detail-recommend { border-color: #D6E2E9; } /* リストの文字色 */ #body_wrap.page-id-4866 .menu-detail-recommend li { color: #526A7A; } /* チェックマーク */ #body_wrap.page-id-4866 .menu-detail-recommend li::before { background: #EDF3F6; color: #526A7A; } /* ======================================== MENS：MENU（デザインカード） ======================================== */ /* 英語の施術名 */ #body_wrap.page-id-4866 .menu-detail-design .swell-block-column > p:first-of-type { color: #A7BAC8; } /* 英語名の下のアクセントライン */ #body_wrap.page-id-4866 .menu-detail-design .swell-block-column > p:first-of-type::after { background-color: #A7BAC8; } /* 日本語の施術名 */ #body_wrap.page-id-4866 .menu-detail-design .swell-block-column h3 { color: #526A7A; } /* 説明文 */ #body_wrap.page-id-4866 .menu-detail-design .swell-block-column > p:not(:first-of-type) { color: #526A7A; } /* カードの影 */ #body_wrap.page-id-4866 .menu-detail-design .swell-block-column { box-shadow: 0 4px 18px rgba(82, 106, 122, 0.06); } /* PC：ホバー時の影 */ @media (hover: hover) { #body_wrap.page-id-4866 .menu-detail-design .swell-block-column:hover { box-shadow: 0 8px 24px rgba(82, 106, 122, 0.1); } } /* ======================================== MENS：PRICE（料金テーブル） ======================================== */ /* テーブルの枠線 */ #body_wrap.page-id-4866 .menu-detail-price-table table { border-color: #DCE6EC; } /* テーブル内の文字・区切り線 */ #body_wrap.page-id-4866 .menu-detail-price-table td, #body_wrap.page-id-4866 .menu-detail-price-table th { color: #526A7A; border-bottom-color: #DCE6EC; } /* テーブル内の見出し */ #body_wrap.page-id-4866 .menu-detail-price-table tr:first-child td[colspan="3"] { color: #526A7A; } /* 料金表の補足説明 */ #body_wrap.page-id-4866 .menu-detail-price-note { color: #526A7A; } /* ======================================== MENS：PRICE・FAQ案内バナー ======================================== */ /* ======================================== 共通：バナーデザイン ======================================== */ /* バナー背景色 */ #body_wrap.page-id-4866 .menu-price-guide { background-color: #EDF3F6; } /* 見出し */ #body_wrap.page-id-4866 .menu-price-guide h2 { color: #526A7A; } /* 見出し下のアクセントライン */ #body_wrap.page-id-4866 .menu-price-guide h2::after { background-color: #A7BAC8; } /* 説明文 */ #body_wrap.page-id-4866 .menu-price-guide p { color: #526A7A; } /* ======================================== PC・共通：背景画像切り替え ======================================== */ /* PRICE下 */ #body_wrap.page-id-4866 .menu-price-guide.guide-price { background-image: linear-gradient( 90deg, #EDF3F6 0%, rgba(237, 243, 246, 0.98) 30%, rgba(237, 243, 246, 0.85) 55%, rgba(237, 243, 246, 0.15) 100% ), url("https://lulu-artmake.com/wp-content/uploads/common_banner-bg_01.png"); } /* FAQ下 */ #body_wrap.page-id-4866 .menu-price-guide.guide-faq { background-image: linear-gradient( 90deg, #EDF3F6 0%, rgba(237, 243, 246, 0.98) 30%, rgba(237, 243, 246, 0.85) 55%, rgba(237, 243, 246, 0.15) 100% ), url("https://lulu-artmake.com/wp-content/uploads/common_banner-bg_02.png"); } /* ======================================== スマホ：背景画像切り替え ======================================== */ @media (max-width: 767px) { /* PRICE下 */ #body_wrap.page-id-4866 .menu-price-guide.guide-price { background-image: linear-gradient( 90deg, rgba(237, 243, 246, 0.98) 0%, rgba(237, 243, 246, 0.90) 55%, rgba(237, 243, 246, 0.45) 100% ), url("https://lulu-artmake.com/wp-content/uploads/common_banner-bg_01.png"); } /* FAQ下 */ #body_wrap.page-id-4866 .menu-price-guide.guide-faq { background-image: linear-gradient( 90deg, rgba(237, 243, 246, 0.98) 0%, rgba(237, 243, 246, 0.90) 55%, rgba(237, 243, 246, 0.45) 100% ), url("https://lulu-artmake.com/wp-content/uploads/common_banner-bg_02.png"); } } /* ======================================== PC：ボタン ======================================== */ @media (min-width: 768px) { #body_wrap.page-id-4866 .menu-price-guide .menu-more-btn a { color: #FFFFFF; background-color: #A7BAC8; border-color: #A7BAC8; } } /* ======================================== PC：ホバー ======================================== */ @media (hover: hover) and (min-width: 768px) { #body_wrap.page-id-4866 .menu-price-guide .menu-more-btn a:hover { color: #526A7A !important; background-color: #FFFFFF !important; border-color: #A7BAC8 !important; } } /* ---------------------------------------- MENS：料金案内バナー（スマホボタン） ---------------------------------------- */ @media (max-width: 767px) { #body_wrap.page-id-4866 .menu-price-guide .menu-more-btn a { color: #FFFFFF; background-color: #A7BAC8; border-color: #A7BAC8; } } /* ======================================== MENS：FAQ（アコーディオン） ======================================== */ /* 各FAQの枠線 */ #body_wrap.page-id-4866 .lulu-faq .swell-block-faq__item { border-color: #DCE6EC; } /* 質問エリア */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_q { background-color: #F9FCFC; color: #526A7A; } /* ホバー */ @media (hover: hover) { #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_q:hover { background-color: #EDF3F6; } } /* 開いた状態 */ #body_wrap.page-id-4866 .lulu-faq .swell-block-faq__item.is-open .faq_q { background-color: #EDF3F6; } /* Qアイコン */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_q::before { color: #A7BAC8; } /* 開閉アイコン：プラス */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_q::after { background: linear-gradient(#A7BAC8, #A7BAC8) center / 14px 1px no-repeat, linear-gradient(#A7BAC8, #A7BAC8) center / 1px 14px no-repeat; } /* 開閉アイコン：マイナス */ #body_wrap.page-id-4866 .lulu-faq .swell-block-faq__item.is-open .faq_q::after { background: linear-gradient(#A7BAC8, #A7BAC8) center / 14px 1px no-repeat; } /* キーボード操作時 */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_q:focus-visible { outline-color: #A7BAC8; } /* 回答エリア */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_a { color: #526A7A; } /* Aアイコン */ #body_wrap.page-id-4866 .lulu-faq.swell-block-faq .faq_a::before { color: #A7BAC8; } /* ======================================== MENS：RESERVATION（予約CTA） ======================================== */ /* RESERVATION：英字見出し */ #body_wrap.page-id-4866 .menu-detail-cta h2 { color: #A7BAC8; } /* キャッチコピー */ #body_wrap.page-id-4866 .menu-detail-cta h3 { color: #526A7A; } /* 説明文 */ #body_wrap.page-id-4866 .menu-detail-cta p { color: #526A7A; } /* ======================================== MENS：RESERVATION（予約ボタン） ======================================== */ /* 通常時 */ #body_wrap.page-id-4866 .menu-detail-cta .menu-more-btn a { color: #FFFFFF; background-color: #A7BAC8; border-color: #A7BAC8; } /* PC：ホバー時 */ @media (hover: hover) { #body_wrap.page-id-4866 .menu-detail-cta .menu-more-btn a:hover { color: #526A7A !important; background-color: #FFFFFF !important; border-color: #A7BAC8 !important; } } /* ======================================== MENS：NOTES（アコーディオン） ======================================== */ /* 各アコーディオンの枠線 */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__item { border-color: #DCE6EC; } /* 見出し：通常時 */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__title { background-color: #F9FCFC; color: #526A7A; } /* PC：ホバー時 */ @media (hover: hover) { #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__title:hover { background-color: #EDF3F6; } } /* 開いた状態 */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__item[open] .swell-block-accordion__title { background-color: #EDF3F6; } /* 開閉アイコン：プラス */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__icon { background: linear-gradient(#A7BAC8, #A7BAC8) center / 14px 1px no-repeat, linear-gradient(#A7BAC8, #A7BAC8) center / 1px 14px no-repeat; } /* 開閉アイコン：マイナス */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__item[open] .swell-block-accordion__icon { background: linear-gradient(#A7BAC8, #A7BAC8) center / 14px 1px no-repeat; } /* 開閉後の本文 */ #body_wrap.page-id-4866 .lulu-notes .swell-block-accordion__body { color: #526A7A; } /* ======================================== MENS専用CSS（ページID：4866） ヘッダー・ナビゲーション関連 ※ブルーグレー配色への変更 ======================================== */ /* ======================================== MENS：共通カラー・ホバー背景 ======================================== */ #body_wrap.page-id-4866 { --swl-color_hov_gray: #F0F6F9; } /* ======================================== MENS：PCヘッダー ======================================== */ /* ---------------------------------------- ヘッダー背景 ---------------------------------------- */ #body_wrap.page-id-4866 .l-header { background-color: #F9FCFC; } /* ---------------------------------------- グローバルメニュー文字 ---------------------------------------- */ /* メインタイトル */ #body_wrap.page-id-4866 #header .c-gnav .ttl { color: #526A7A !important; } /* サブタイトル */ #body_wrap.page-id-4866 #header .c-gnav .c-smallNavTitle.desc { color: #A7BAC8; } /* ---------------------------------------- PC：ホバー・ドロップダウン ---------------------------------------- */ @media (min-width: 960px) { /* グローバルメニューのホバー */ #body_wrap.page-id-4866 .c-gnav > li:hover > a, #body_wrap.page-id-4866 .c-gnav > .-current > a, #body_wrap.page-id-4866 #header .c-gnav .sub-menu li > a:hover { background-color: #F0F6F9; color: #526A7A; } /* ドロップダウンの文字 */ #body_wrap.page-id-4866 #header .c-gnav .sub-menu a { color: #526A7A; } /* ドロップダウンの補足説明 */ #body_wrap.page-id-4866 #header .c-gnav .sub-menu .c-smallNavTitle.desc { color: #A7BAC8; } /* ドロップダウンの矢印 */ #body_wrap.page-id-4866 #header .c-gnav .sub-menu a::before { color: #A7BAC8; } } /* ======================================== MENS：PC追従ヘッダー ======================================== */ @media (min-width: 960px) { /* ---------------------------------------- 背景色 ---------------------------------------- */ #body_wrap.page-id-4866 #fix_header, #body_wrap.page-id-4866 #fix_header .l-fixHeader__inner { background-color: #F9FCFC !important; } /* 背景レイヤー */ #body_wrap.page-id-4866 #fix_header::before { background-color: #F9FCFC; } /* ---------------------------------------- メインタイトル ---------------------------------------- */ #body_wrap.page-id-4866 #fix_header .c-gnav .ttl { color: #526A7A !important; } /* ---------------------------------------- サブタイトル ---------------------------------------- */ #body_wrap.page-id-4866 #fix_header .c-gnav .c-smallNavTitle.desc { color: #A7BAC8; } /* ---------------------------------------- ホバー背景 ---------------------------------------- */ #body_wrap.page-id-4866 #fix_header .c-gnav > li:hover > a, #body_wrap.page-id-4866 #fix_header .c-gnav > .-current > a { background-color: #F0F6F9; } /* ---------------------------------------- ドロップダウンメニュー ---------------------------------------- */ /* メニュー文字 */ #body_wrap.page-id-4866 #fix_header .c-gnav .sub-menu a { color: #526A7A; } /* サブタイトル */ #body_wrap.page-id-4866 #fix_header .c-gnav .sub-menu .c-smallNavTitle.desc { color: #A7BAC8; } /* 矢印 */ #body_wrap.page-id-4866 #fix_header .c-gnav .sub-menu a::before { color: #A7BAC8; } /* ホバー背景 */ #body_wrap.page-id-4866 #fix_header .c-gnav .sub-menu li > a:hover { background-color: #F0F6F9; } } /* ======================================== MENS：ヘッダーロゴ切り替え ======================================== */ /* 通常ヘッダー・PC追従ヘッダー */ #body_wrap.page-id-4866 #header .c-headLogo__img, #body_wrap.page-id-4866 #fix_header .c-headLogo__img { content: url("https://lulu-artmake.com/wp-content/uploads/common_header-mens-logo_01.png"); } /* ======================================== MENS：スマホヘッダーボタン ======================================== */ @media (max-width: 959px) { /* ---------------------------------------- MENUアイコン・文字 ---------------------------------------- */ #body_wrap.page-id-4866 .c-iconBtn.-menuBtn, #body_wrap.page-id-4866 .c-iconBtn.-menuBtn::before { color: #526A7A; } /* ---------------------------------------- SCHOOL・MENSボタン ---------------------------------------- */ /* 通常ヘッダー・ドロワーヘッダー共通 */ #body_wrap.page-id-4866 #header .lulu-header-link, #body_wrap.page-id-4866 #sp_menu .lulu-header-link { color: #526A7A; } } /* ======================================== MENS：スマホドロワーメニュー ======================================== */ @media (max-width: 959px) { /* ---------------------------------------- ドロワー背景 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .p-spMenu__inner, #body_wrap.page-id-4866 #sp_menu .p-spMenu__body { background-color: #F9FCFC !important; } /* SWELL標準の背景レイヤー */ #body_wrap.page-id-4866 #sp_menu .p-spMenu__inner::before { background-color: #F9FCFC; } /* ---------------------------------------- ドロワー上部背景 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .lulu-drawer-header, #body_wrap.page-id-4866 #sp_menu .lulu-drawer-reservation, #body_wrap.page-id-4866 #sp_menu .p-spMenu__closeBtn { background-color: #F9FCFC; } /* ---------------------------------------- CLOSEボタン ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .p-spMenu__closeBtn .c-iconBtn, #body_wrap.page-id-4866 #sp_menu .p-spMenu__closeBtn .c-iconBtn::after { color: #526A7A; } /* ---------------------------------------- メニュー文字 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .c-spnav a { color: #526A7A; } /* サブタイトル */ #body_wrap.page-id-4866 #sp_menu .c-smallNavTitle.desc { color: #A7BAC8; } /* ---------------------------------------- 予約ボタン ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .lulu-drawer-reservation__btn { background: #526A7A; color: #fff; } /* ---------------------------------------- ＋／−ボタン ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .lulu-submenu-toggle { color: #A7BAC8; } /* ---------------------------------------- 右矢印 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .c-spnav li:not(.menu-item-has-children) > a::after { border-top-color: #A7BAC8; border-right-color: #A7BAC8; } /* ---------------------------------------- 区切り線 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .c-spnav > li > a, #body_wrap.page-id-4866 #sp_menu .c-spnav .sub-menu > li > a { border-bottom-color: #DCE6EC; } /* ---------------------------------------- 下層メニュー背景 ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .c-spnav > li.is-open > .sub-menu { background-color: #F0F6F9; } /* ---------------------------------------- SNSエリア ---------------------------------------- */ #body_wrap.page-id-4866 #sp_menu .lulu-drawer-sns { background-color: #F0F6F9; } /* SNS見出し・コピーライト */ #body_wrap.page-id-4866 #sp_menu .lulu-sns-heading, #body_wrap.page-id-4866 #sp_menu .lulu-sns-copyright { color: #526A7A; } /* SNSアイコンの枠 */ #body_wrap.page-id-4866 #sp_menu .lulu-sns-icons a { border-color: #DCE6EC; color: #526A7A; } /* SNSアイコン */ #body_wrap.page-id-4866 #sp_menu .lulu-sns-icons i { color: #A7BAC8; } } /* ---------------------------------------- MENS：スマホ予約ボタンのホバー ---------------------------------------- */ @media (max-width: 959px) and (hover: hover) { #body_wrap.page-id-4866 #sp_menu .lulu-drawer-reservation__btn:hover { background: #405766; } } /* ======================================== MENS：パンくずリスト ======================================== */ /* ---------------------------------------- 背景色・影 ---------------------------------------- */ #body_wrap.page-id-4866 #breadcrumb.p-breadcrumb.-bg-on { background-color: #F9FCFC; box-shadow: none; } /* ---------------------------------------- テキスト・リンクカラー ---------------------------------------- */ #body_wrap.page-id-4866 #breadcrumb, #body_wrap.page-id-4866 #breadcrumb a { color: #526A7A; } /* ======================================== MENS：下部波背景カラー調整 ======================================== */ /* ---------------------------------------- 薄ピンク → 淡いブルー ---------------------------------------- */ #body_wrap.page-id-4866 .artmake-wave-bottom-lightpink::before { background-color: #F9FCFC; } /* ======================================== MENS：フッター直前 ブログパーツ ======================================== */ /* ======================================== MENS：CLINIC ======================================== */ /* ---------------------------------------- CLINIC：H2見出し ---------------------------------------- */ #body_wrap.page-id-4866 #before_footer_widget .title-wrap h2.anime-title { color: #A7BAC8; } /* ---------------------------------------- タブボタン ---------------------------------------- */ /* 通常時 */ #body_wrap.page-id-4866 .clinic-tabs [role="tab"] { background: #F9FCFC; color: #526A7A; } /* 選択中 */ #body_wrap.page-id-4866 .clinic-tabs [role="tab"][aria-selected="true"] { background: #A7BAC8; color: #fff; } /* ---------------------------------------- クリニックカード ---------------------------------------- */ /* カード外枠 */ #body_wrap.page-id-4866 .clinic-card { border-color: #DCE6EC; } /* カード情報エリア */ #body_wrap.page-id-4866 .clinic-card__info { background: #F9FCFC; color: #526A7A; } /* クリニック名 */ #body_wrap.page-id-4866 .clinic-card__name { color: #526A7A; } /* 公式HP・Google MAPボタン */ #body_wrap.page-id-4866 .clinic-card__info a { border-color: #A7BAC8; color: #526A7A; } /* ======================================== page.php functions.php ======================================== */ /* ======================================== MENS：メインビジュアル ======================================== */ #body_wrap.page-id-4866 .mens-mainvisual { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-bottom: 40px; } #body_wrap.page-id-4866 .mens-mainvisual picture { display: block; } #body_wrap.page-id-4866 .mens-mainvisual img { display: block; width: 100%; height: 800px; object-fit: cover; object-position: center 32%; } /* ======================================== MENS：メインビジュアル SP ======================================== */ @media (max-width: 767px) { #body_wrap.page-id-4866 .mens-mainvisual { margin-bottom: 30px; } #body_wrap.page-id-4866 .mens-mainvisual img { height: 400px; object-position: center; } } /* ======================================== MENS：メインビジュアル上部の余白調整 ======================================== */ #body_wrap.page-id-4866 #content { padding-top: 0; } #body_wrap.page-id-4866 .mens-mainvisual { margin-top: 0; } /* ======================================== ウェジェット（フッターPC1） 4866 => array('menu-detail.css', 'menu-mens.css'), ======================================== */ /* ======================================== MENSページ専用フッター Page ID：4866 ======================================== */ /* ---------------------------------------- 01. フッター背景・基本文字色 ---------------------------------------- */ #footer { background-color: #F9FCFC; } .lulu-footer { color: #526A7A; } /* ---------------------------------------- 02. ABOUT・SNSタイトル ---------------------------------------- */ .lulu-footer__heading, .lulu-footer__sns-title { color: #A7BAC8; } /* ---------------------------------------- 03. ナビゲーション・下部リンク ---------------------------------------- */ .lulu-footer__nav a, .lulu-footer__bottom a { color: #526A7A; } /* ---------------------------------------- 04. SNSアイコン ---------------------------------------- */ .lulu-footer__sns-links a { border-color: #A7BAC8; color: #A7BAC8; } @media (hover: hover) { .lulu-footer__sns-links a:hover { background-color: #A7BAC8; color: #FFFFFF; } } /* ---------------------------------------- 05. コピーライト ---------------------------------------- */ .lulu-footer__copyright { color: #526A7A; } /* ---------------------------------------- 06. 最下部ロゴ ---------------------------------------- */ .lulu-footer__logo { color: #DCE6EC; } /* ---------------------------------------- 07. 上部の波形 ---------------------------------------- */ #footer::before { background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M120,28.1H0V2.34C17.29-.57,30.82-.25,39.89.56c20.02,1.77,28.33,6.78,46.6,6.96,14.36.14,26.08-2.79,33.51-5.18v25.76Z' fill='%23F9FCFC'/%3E%3C/svg%3E"); } /* ======================================== スクロール最下部の背景色 URLバー周辺の色 ======================================== */ /* ======================================== MENS：ページ最下部の背景色 ======================================== */ html, body { background-color: #F9FCFC; }