@charset "UTF-8";
/* =========================================================
   Web Up リニューアル共通（全ページで読み込み）
   - ブランドカラーの変数
   - ヘッダー（グローバルメニュー）／フッター／スマホ固定メニュー
   ========================================================= */
:root {
  --wu-blue: #2968ec;
  --wu-lime: #dcfc61;
  --wu-coral: #f0806c;
  --wu-ink: #14213d;
  --wu-text: #3b4660;
  --wu-mute: #7a849b;
  --wu-pale: #eef4ff;
  --wu-gray: #f5f7fa;
  --wu-line: #dfe6f3;
  --wu-font-en: "Lato", "Noto Sans JP", sans-serif;
}

/* ---------- ヘッダー：グローバルメニュー ---------- */
/* ホバー時の下線を青に */
#body_wrap #header .c-gnav > .menu-item > a::after,
#body_wrap #fix_header .c-gnav > .menu-item > a::after { background: var(--wu-blue); }

/* 資料請求（紺）・お問い合わせ（青）のボタン色 ※丸ボタンの形は既存CSS「ヘッダー」を利用 */
#body_wrap #header .c-gnav .menu-item-8678 a, #body_wrap #fix_header .c-gnav .menu-item-8678 a { background-color: var(--wu-ink); }
#body_wrap #header .c-gnav .menu-item-8677 a, #body_wrap #fix_header .c-gnav .menu-item-8677 a { background-color: var(--wu-blue); }

/* 電話番号ボタン（メニュー項目のCSSクラス：wu-nav-tel） */
#body_wrap #header .wu-nav-tel, #body_wrap #fix_header .wu-nav-tel { display: grid; place-items: center; }
#body_wrap #header .c-gnav .wu-nav-tel a, #body_wrap #fix_header .c-gnav .wu-nav-tel a {
  display: inline-flex; flex-direction: row; align-items: center; gap: 7px; height: 45px; padding: 0 20px 0 16px; margin: 0 0 0 9px;
  border-radius: 30px; background: var(--wu-lime); color: var(--wu-ink); transition: opacity .3s;
}
#body_wrap #header .wu-nav-tel a::after, #body_wrap #fix_header .wu-nav-tel a::after { display: none; }
#body_wrap #header .wu-nav-tel a::before, #body_wrap #fix_header .wu-nav-tel a::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--wu-icon-tel) center / contain no-repeat; mask: var(--wu-icon-tel) center / contain no-repeat;
}
#body_wrap #header .wu-nav-tel a .ttl, #body_wrap #fix_header .wu-nav-tel a .ttl { font-family: var(--wu-font-en); font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; }
#body_wrap #header .wu-nav-tel a:hover, #body_wrap #fix_header .wu-nav-tel a:hover { opacity: .7; }
:root { --wu-icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.25c1.1.37 2.3.57 3.6.57a1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.25 1z'/%3E%3C/svg%3E"); }

/* ロゴがメニューに押されて縮まないようにする */
#body_wrap #header .l-header__logo, #body_wrap #fix_header .l-fixHeader__logo { flex-shrink: 0; }
#body_wrap #header .c-headLogo__img, #body_wrap #fix_header .c-headLogo__img { width: auto; max-width: none; }

/* ロゴ（社名入り）を読みやすい大きさに */
@media (min-width: 960px) {
  #body_wrap #header .c-headLogo { height: 46px; }
  #body_wrap #fix_header .c-headLogo { height: 40px; }
}

/* メニュー項目が増えたぶん、画面幅が狭いPCでは間隔を詰める */
@media (min-width: 960px) and (max-width: 1599px) {
  #body_wrap #header .c-gnav > .menu-item > a, #body_wrap #fix_header .c-gnav > .menu-item > a { margin: 0 3px; padding: 0 9px; }
  #body_wrap #header .c-gnav > .menu-item > a .ttl, #body_wrap #fix_header .c-gnav > .menu-item > a .ttl { font-size: .86rem; letter-spacing: .04em; }
  #body_wrap #header .c-gnav .menu-item-8677 a, #body_wrap #header .c-gnav .menu-item-8678 a, #body_wrap #fix_header .c-gnav .menu-item-8677 a, #body_wrap #fix_header .c-gnav .menu-item-8678 a { padding: 0 15px; height: 40px; }
  #body_wrap #header .c-gnav .wu-nav-tel a, #body_wrap #fix_header .c-gnav .wu-nav-tel a { margin-left: 3px; padding: 0 13px 0 11px; height: 40px; }
  #body_wrap #header .c-gnav .wu-nav-tel a .ttl, #body_wrap #fix_header .c-gnav .wu-nav-tel a .ttl { font-size: 1rem; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  #body_wrap #header .c-headLogo, #body_wrap #fix_header .c-headLogo { height: 32px; }
  #body_wrap #header .l-header__inner, #body_wrap #fix_header .l-fixHeader__inner { padding-inline: 16px; }
  #body_wrap #header .c-gnav > .menu-item > a, #body_wrap #fix_header .c-gnav > .menu-item > a { margin: 0 1px; padding: 0 6px; }
  #body_wrap #header .c-gnav > .menu-item > a .ttl, #body_wrap #fix_header .c-gnav > .menu-item > a .ttl { font-size: .78rem; letter-spacing: 0; }
  #body_wrap #header .c-gnav .menu-item-8677 a, #body_wrap #header .c-gnav .menu-item-8678 a, #body_wrap #fix_header .c-gnav .menu-item-8677 a, #body_wrap #fix_header .c-gnav .menu-item-8678 a { padding: 0 11px; height: 36px; }
  #body_wrap #header .c-gnav .wu-nav-tel a, #body_wrap #fix_header .c-gnav .wu-nav-tel a { padding: 0 10px 0 8px; height: 36px; gap: 4px; }
  #body_wrap #header .c-gnav .wu-nav-tel a .ttl, #body_wrap #fix_header .c-gnav .wu-nav-tel a .ttl { font-size: .88rem; }
  #body_wrap #header .c-gnav .wu-nav-tel a::before, #body_wrap #fix_header .c-gnav .wu-nav-tel a::before { width: 14px; height: 14px; }
}

/* ---------- フッター（ブログパーツ「フッター」内：追加CSSクラス wu-footer） ---------- */
#before_footer_widget .wu-footer { padding-block: 44px 20px !important; }
@media (max-width: 599px) { #before_footer_widget .wu-footer { padding-block: 36px 12px !important; } }
#before_footer_widget > .l-container { max-width: none; padding: 0; }
#before_footer_widget .wu-pkg-wrap { padding-block: clamp(40px, 5vw, 64px) !important; }
#before_footer_widget .wu-footer .wu-footer__inner { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px !important; margin: 0; }
#before_footer_widget .wu-footer .wu-footer__inner > .wp-block-column { flex: 0 1 auto; margin: 0; }
#before_footer_widget .wu-footer .wu-footer__logo { margin: 0; }
#before_footer_widget .wu-footer .wu-footer__logo a { transition: opacity .3s; }
#before_footer_widget .wu-footer .wu-footer__logo a:hover { opacity: .7; }
#before_footer_widget .wu-footer .wu-footer__addr { margin: 16px 0 0; font-size: 13px; line-height: 1.9; color: var(--wu-text); letter-spacing: .04em; }
#before_footer_widget .wu-footer .wu-footer__addr a { color: inherit; text-decoration: none; }
#before_footer_widget .wu-footer .wu-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 26px !important; max-width: 520px; margin: 0; padding: 0; list-style: none; }
#before_footer_widget .wu-footer .wu-footer__nav li { width: auto; margin: 0; padding: 0; }
#before_footer_widget .wu-footer .wu-footer__nav li::before { content: none; }
#before_footer_widget .wu-footer .wu-footer__nav a { position: relative; display: inline-block; padding-block: 4px; font-size: 14px; font-weight: 700; color: var(--wu-ink); text-decoration: none; letter-spacing: .04em; }
#before_footer_widget .wu-footer .wu-footer__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--wu-blue); scale: 0 1; transform-origin: left; transition: scale .3s;
}
#before_footer_widget .wu-footer .wu-footer__nav a:hover::after { scale: 1 1; }
@media (max-width: 599px) {
  #before_footer_widget .wu-footer .wu-footer__inner { flex-direction: column; }
  #before_footer_widget .wu-footer .wu-footer__logo img { width: 210px !important; }
  #before_footer_widget .wu-footer .wu-footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px !important; max-width: none; width: 100%; }
}

/* ---------- ページトップへ戻るボタンを小さめに ---------- */
/* 画像は「カスタム CSS & JS」の「ページトップへ戻る」で本番サイトのURLが指定されているため、このサイト内の青い画像に置き換えて表示 */
.p-fixBtnWrap #pagetop img { content: url("/wp-content/uploads/2025/08/icon-pagetop.webp"); width: 52px !important; border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 6px 16px -6px rgba(20, 33, 61, .45); }
@media (max-width: 599px) { .p-fixBtnWrap #pagetop img { width: 44px !important; } }

/* ---------- スマホ開閉メニュー（白ベース・ブランドカラー） ---------- */
html #sp_menu .p-spMenu__inner::before { background-image: none; background-color: #fff; opacity: 1; }
html[data-spmenu="opened"] .c-iconBtn__icon { color: var(--wu-ink); }
html #sp_menu .p-spMenu__body { padding-top: 84px; padding-bottom: 110px; }
html #sp_menu .p-spMenu__body .p-spMenu__nav { width: 84%; }
html #sp_menu .c-spnav { text-align: left; border-top: 1px solid var(--wu-line); }
html #sp_menu .c-spnav .menu-item:not(:first-of-type) { margin-top: 0; }
html #sp_menu .c-spnav > .menu-item { border-bottom: 1px solid var(--wu-line); }
html #sp_menu .c-spnav a { position: relative; padding: 16px 40px 16px 6px; color: var(--wu-ink); font-size: 16px; font-weight: 700; letter-spacing: .06em; }
html #sp_menu .c-spnav a::before { content: none; }
html #sp_menu .c-spnav > .menu-item:not(.menu-item-has-children) > a::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; translate: 0 -50%; rotate: 45deg;
  border-top: 2px solid var(--wu-blue); border-right: 2px solid var(--wu-blue);
}
html #sp_menu .c-spnav .sub-menu { margin: 0 0 14px; padding: 6px 0; background: var(--wu-pale); border-radius: 14px; }
html #sp_menu .c-spnav .sub-menu a { background: none; padding: 10px 18px; font-size: 14px; font-weight: 500; }
html #sp_menu .drawer-contact-nav { width: 84%; margin: 28px auto 0; padding: 0; list-style: none; }
html #sp_menu .drawer-contact-nav li::before { content: none; }
html #sp_menu .drawer-contact-nav li + li { margin-top: 12px; }
html #sp_menu .drawer-contact-nav li a { display: block; width: 100%; padding: 15px; border-radius: 30px; background-color: var(--wu-ink); color: #fff; text-align: center; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
html #sp_menu .drawer-contact-nav li:last-child a { background-color: var(--wu-blue); }

/* ---------- スマホ固定フッターメニュー（外観＞メニュー「固定フッター（SP）」） ---------- */
/* 白い台の上に、丸いボタン2つを並べる */
#fix_bottom_menu { padding: 8px 10px calc(8px + env(safe-area-inset-bottom) * .5); background: #fff; border-top: 1px solid var(--wu-line); box-shadow: 0 -8px 24px -12px rgba(20, 33, 61, .35); }
#fix_bottom_menu::before { display: none; }
#fix_bottom_menu .menu_list { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; height: auto; padding: 0; }
#fix_bottom_menu .menu-item { width: auto; padding: 0; }
#fix_bottom_menu .menu-item a {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; height: 50px;
  border: 2px solid var(--wu-blue); border-radius: 999px; background: #fff; color: var(--wu-blue); font-weight: 700;
}
#fix_bottom_menu .menu-item a i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wu-blue); color: #fff; font-size: 14px; line-height: 1; }
#fix_bottom_menu .menu-item a span { display: inline; width: auto; margin: 0; font-size: 14px; letter-spacing: .04em; }
#fix_bottom_menu .wu-fbm-contact a { border-color: var(--wu-blue); background: var(--wu-blue); color: #fff; box-shadow: 0 8px 18px -10px rgba(41, 104, 236, .8); }
#fix_bottom_menu .wu-fbm-contact a i { background: #fff; color: var(--wu-blue); }
#fix_bottom_menu + .p-fixBtnWrap { bottom: 84px; }