/*
 * 坂本案のページ（/solutions/…）に、トップと同じヘッダー・フッター（lp/layout/header.html・footer.html）を出すための見た目。
 * 元＝cases/static/cases/css/lp_chrome.css（南條案）をそのまま写した物。南條案とは独立させるため、読み込まずに写している。
 * トップは Bootstrap と lp_bundle.css をページ全体に読み込んでいるが、本文（<slug>/lp.css）とぶつかるため、
 * ヘッダー・フッターに要る分だけを body.lpc の下に限っている。
 * 元の元＝ensupex/templates/lp/layout/critical.html・ensupex/static/css/lp_bundle.css・Bootstrap 5.3 の該当ユーティリティ。
 * トップのヘッダー・フッターの見た目を変えるときは、ここと cases/static/cases/css/lp_chrome.css も合わせる。
 */

/* ---- Bootstrap のユーティリティ（ヘッダー・フッターの中だけ） ---- */
.lpc .navbar, .lpc .footer { font-family: "Noto Sans JP", sans-serif; color: #202020; line-height: 1; }
.lpc .navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; }
.lpc .navbar.sticky-top { position: sticky; top: 0; z-index: 1020; }
.lpc .navbar.bg-white { background: #fff; }
.lpc .navbar.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.lpc .navbar.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.lpc .navbar.py-0 { padding-top: 0; padding-bottom: 0; }
.lpc .navbar-brand { padding: .3125rem 0; margin-right: 1rem; }
.lpc .navbar a, .lpc .footer a, .lpc .header-menu-modal a { text-decoration: none; }
.lpc .navbar .d-flex, .lpc .footer .d-flex { display: flex; }
.lpc .navbar .d-none { display: none; }
.lpc .navbar .align-items-center, .lpc .footer .align-items-center { align-items: center; }
.lpc .navbar .flex-column { flex-direction: column; }
.lpc .navbar .me-3 { margin-right: 1rem; }
.lpc .navbar .mb-2 { margin-bottom: .5rem; }
.lpc .navbar .fs-3 { font-size: calc(1.3rem + .6vw); }
.lpc .navbar .fs-6 { font-size: 1rem; }
.lpc .footer .px-5 { padding-left: 3rem; padding-right: 3rem; }
.lpc .footer .p-3 { padding: 1rem; }
.lpc .footer .pb-3 { padding-bottom: 1rem; }
.lpc .footer .justify-content-between { justify-content: space-between; }
.lpc .footer .align-items-end { align-items: flex-end; }
.lpc .footer .text-center { text-align: center; }
.lpc .header-menu-modal .mt-auto { margin-top: auto; }
@media (min-width: 768px) { .lpc .navbar .d-md-flex { display: flex; } }
@media (min-width: 992px) { .lpc .navbar .d-lg-block { display: block; } }
@media (min-width: 1200px) { .lpc .navbar .fs-3 { font-size: 1.75rem; } }

/* ---- ヘッダー（critical.html・lp_bundle.css） ---- */
.lpc .header-logo { height: 70px; width: auto; }
.lpc .header-btn-consult { background-color: #ff7007; color: #fff !important; font-size: 1.25rem; border-radius: 50px; padding: .5rem 1rem; min-height: 3.5rem; margin-right: 1rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; text-align: center; transition: all .3s ease; }
.lpc .header-btn-consult.d-none { display: none; }
@media (min-width: 992px) { .lpc .header-btn-consult.d-lg-block { display: inline-flex; } }
.lpc .header-btn-consult:hover { background-color: #D15300; transform: scale(1.025); }
.lpc .header-btn-line1 { display: block; }
.lpc .header-btn-line2 { display: block; font-size: .85em; font-weight: 400; text-align: center; }
.lpc .header-btn-login { font-size: 1.25rem; padding: .75rem; height: 3rem; margin-right: 3rem; color: #0057b8 !important; border-radius: 4px; border: #0057b8 2px solid; box-sizing: border-box; transition: all .3s ease; }
.lpc .header-btn-login:hover { background-color: #0057b8; color: #fff !important; }
.lpc .header-hum { display: none; }
.lpc input[type=checkbox]#hum { display: none; }
.lpc .header-menu-modal { position: fixed; top: 0; right: 0; background: #333; z-index: 9999; transform: translateX(100%); width: 210px; height: 50vh; transition: transform .6s; font-family: "Noto Sans JP", sans-serif; }
.lpc input[type=checkbox]#hum:checked + .header-menu-modal { transform: translateX(0); }
.lpc .header-menu-inner { display: flex; flex-direction: column; height: 100%; }
.lpc .header-menu-header { position: relative; text-align: center; padding: 2em 1em 1em; color: #fff; font-size: clamp(1.25rem, 6vw, 2rem); }
.lpc .header-menu-header p { margin: 0; }
.lpc .header-menu-close { position: absolute; top: 10px; right: 10px; font-size: 1.5rem; color: #fff; cursor: pointer; }
.lpc .header-menu-body { display: flex; flex-direction: column; padding: 1em; }
.lpc .header-menu-inner a { color: #fff; padding: 1em .5em; text-align: left; font-size: .875rem; border-top: solid 1px #727272; }
.lpc .header-menu-body a:last-child { border-bottom: solid 1px #727272; }
.lpc .header-menu-bottom { display: flex; flex-direction: column; padding: 1em; }
.lpc .header-menu-bottom a { border-bottom: solid 1px #727272; }
@media (max-width: 768px) {
  .lpc .header-logo { height: 50px; width: auto; }
  .lpc .header-btn-login { display: none; }
  .lpc .header-hum { display: block; }
  .lpc .header-hum img { height: 30px; width: auto; }
}

/* ---- フッター（lp_bundle.css） ---- */
.lpc .footer { background-color: #eff8fa; }
.lpc .footer img { mix-blend-mode: multiply; width: clamp(200px, 25vw, 300px); }
.lpc .footer-links { flex-wrap: wrap; }
.lpc .footer-links a { font-size: 1rem; display: inline-block; white-space: nowrap; height: min-content; margin: auto; padding-left: 10px; padding-right: 10px; color: inherit; }
.lpc .scroll-btn button { background-color: #fff; color: #0057b8; width: 40px; height: 40px; border: none; border-radius: 10px; }
.lpc .scroll-btn button:hover { background-color: #0057b8; color: #fff; box-shadow: 0 0 8px rgba(0, 87, 184, .4); transition: all .3s ease; }
.lpc .footer .copyright { font-size: clamp(12px, 1.09375vw, 14px); padding: clamp(7px, .703125vw, 9px) 0; margin: 0; text-align: center; color: #fff; background-color: #1d2b6d; border-top: 1px solid #727272; }
@media (max-width: 768px) {
  .lpc .footer-inner, .lpc .footer-links { flex-flow: column; }
  .lpc .footer img { width: 60vw; }
  .lpc .footer-links a { padding: .25rem 0; }
  .lpc .scroll-btn { justify-content: end; }
}
