/*
 Theme Name: Lightning Child
 Template: lightning
*/

/* ==========================================
    ページロード中のトランジション誤発火防止
   ========================================== */
.preload * {
  transition: none !important;
}

/* ==========================================
    CSS変数
   ========================================== */
:root {
  --color-white: #fff;
  --color-black: #000;
  --color-gray: #dddddd;
  --color-blue: #185ba3;
  --color-light-blue: #edf6ff;
  --color-red: #d5071d;
  --color-pdf: #d04352;
  --color-ies: #2d80d3;

  --fw-700: 700;
  --fw-500: 500;
  --fw-400: 400;

  --open-sans: "Open Sans", sans-serif;

  /* ヘッダー高さ（JS がセットするまでの初期値） */
  --header-height: 4rem; /* SP: max-width 767.98px */
}

@media (min-width: 768px) {
  :root {
    --header-height: 5rem; /* タブレット〜PC */
  }
}

body {
  font-family: "Noto Sans JP", sans-serif !important;
  color: var(--color-black);
  font-weight: var(--fw-400);
}

/* ==========================================
    共通パーツ
   ========================================== */
@media (min-width: 768px) {
  .container,
  .wp-block-cover__inner-container {
    max-width: 1000px !important;
    padding-inline: 2rem !important;
  }
}

@media (min-width: 1200px) {
  .container,
  .wp-block-cover__inner-container {
    max-width: 1180px !important;
    padding-inline: 1.25rem !important;
  }
}

/* ---------- [spbr] ショートコード ---------- */
.spbr {
  display: none;
}

@media (max-width: 767.98px) {
  .spbr {
    display: block;
  }
}

/* ---------- [pcbr] ショートコード ---------- */
.pcbr {
  display: none;
}

@media (min-width: 768px) {
  .pcbr {
    display: block;
  }
}

/* [pcbr] 直後の <br>（エディター自動挿入分）を常に非表示 */
.pcbr + br {
  display: none;
}

.wp-singular:not(.post-name-privacy-policy, .single-post) .site-body {
  padding-bottom: 0;
}

.wp-singular .main-section {
  margin-bottom: 0;
}

/* プライバシーポリシー：page-header にヘッダー高さ分のマージン、site-body はリセット */
.post-name-privacy-policy .page-header {
  margin-top: var(--header-height, 4rem);
}

.post-name-privacy-policy .site-body {
  margin-top: 0;
}

/* single 系：パンくずにヘッダー高さ分のマージン、site-body はリセット */
.single .breadcrumb {
  margin-top: var(--header-height, 4rem);
}

.single .site-body {
  margin-top: 0;
}

.breadcrumb .breadcrumb-list__item span {
  line-height: 1.7;
}

/* ページトップへ戻るボタン */

/* ==========================================
    ヘッダー
   ========================================== */
#site-header {
  background-color: var(--color-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#site-header-container {
  max-width: initial !important;
  padding-inline: 1.5625rem 0 !important;
}

.header_scrolled #site-header .site-header-logo {
  display: block;
}

@media (max-width: 991.98px) {
  #site-header-container {
    overflow: visible;
  }
}

#site-header .site-header-logo {
  margin: 0;
  padding: 0;
}

#site-header .site-header-logo a {
  width: 7.125rem;
  display: block;
  padding: 0.625rem 0 1rem;
  transition: opacity 0.3s ease;
}

#site-header .site-header-logo a:hover {
  opacity: 0.8;
}

#site-header .site-header-logo a img {
  width: 100%;
  display: block;
  max-height: initial;
}

#site-header .global-nav-list > li {
  padding: 0;
  display: flex;
}

#site-header .global-nav-list > li:hover::before,
#site-header
  .global-nav-list
  > li[class*="current"]:where(:not(.menu-item-anchor))::before {
  width: 0;
}

#site-header .global-nav-list > li > a {
  color: var(--color-black);
  font-size: 0.875rem;
  font-weight: var(--fw-700);
  letter-spacing: 0;
  line-height: calc(20 / 14);
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
}

#site-header .global-nav-list > li > a strong {
  font-size: 0.875rem;
  font-weight: var(--fw-700);
  line-height: calc(20 / 14);
  position: relative;
}

#site-header
  .global-nav-list
  > li:not(:has(.sub-menu)):not(.menu-contact)
  > a
  strong::after {
  content: "";
  position: absolute;
  bottom: -3px;
  bottom: -0.1875rem;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

#site-header
  .global-nav-list
  > li:not(:has(.sub-menu)):not(.menu-contact)
  > a:hover
  strong::after {
  transform: scaleX(1);
}

#site-header .global-nav-list > li.menu-product > a {
  padding-right: 2.25rem;
}

#site-header .global-nav-list > li .acc-btn {
  background-image: url(./images/arrow-blue-icon.svg);
  display: block;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 0.75rem;
  border: none;
}

#site-header .global-nav-list li.menu-contact {
  margin-left: 1.5rem;
}

#site-header .global-nav-list li.menu-contact > a {
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: var(--fw-700);
  padding: 1.375rem 2.25rem 1.1875rem;
  background-color: var(--color-blue);
  display: flex;
  justify-content: center;
  height: 5rem;
  position: relative;
  transition:
    background-color 0.3s,
    color 0.3s;
}

#site-header .global-nav-list li.menu-contact > a:hover {
  background-color: var(--color-white);
  color: var(--color-blue);
  box-shadow: inset 0 0 0 2px var(--color-blue);
}

#site-header .global-nav-list li.menu-contact > a::before {
  position: absolute;
  content: "";
  top: 1.375rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: currentColor;
  -webkit-mask-image: url(./images/mail-icon.svg);
  mask-image: url(./images/mail-icon.svg);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 1.325rem;
  height: 1.0375rem;
  transition: background-color 0.3s;
}

#site-header .global-nav-list li.menu-contact > a strong {
  display: block;
  margin-top: auto;
  font-size: 0.75rem;
}

#site-header .global-nav-list > li.menu-item-has-children::after {
  display: none;
}

#site-header .global-nav-list > li > ul.sub-menu {
  top: 4.25rem;
  left: 2.8125rem;
  width: 10.4375rem;
  height: 5rem;
  border-radius: 0.5rem;
  background: var(--color-white);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
}

#site-header .global-nav-list > li > ul.sub-menu a {
  font-size: 0.75rem;
  font-weight: var(--fw-500);
  line-height: calc(17 / 12);
  color: var(--color-black);
  padding: 0.625rem 0.75rem 0.75rem;
  border-bottom: 0.0625rem solid var(--color-gray);
  transition:
    background-color 0.3s,
    color 0.3s,
    border 0.3s;
  position: relative;
}

#site-header .global-nav-list > li > ul.sub-menu a:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

#site-header .global-nav-list > li > ul.sub-menu li:last-child a:hover {
  border-bottom: 0.0625rem solid var(--color-blue);
}

@media (max-width: 991.98px) {
  #site-header {
    height: 5rem;
  }
  #site-header-container {
    height: inherit;
    display: flex;
    justify-content: space-between;
  }
  #site-header .site-header-logo {
    padding: 0;
    height: inherit;
  }
  #site-header .site-header-logo a {
    padding: 0.63125rem 0 0.9375rem;
  }
  #site-header .site-header-logo a img {
    max-height: initial;
  }
  #site-header .global-nav {
    display: block;
  }
}

@media (max-width: 767.98px) {
  #site-header {
    height: 4rem;
  }
  #site-header-container {
    align-items: center;
  }
  #site-header .site-header-logo a {
    width: 7.125rem;
    padding: 0.125rem 0 0.5125rem 0;
  }
  #site-header .site-header-logo a img {
    max-height: initial;
  }
  #site-header .global-nav {
    display: none;
  }
}

/* ==========================================
    フッター
   ========================================== */
.site-footer {
  padding-top: 3.1875rem;
  background-color: var(--color-blue) !important;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .site-footer {
    padding-top: 2.1875rem;
  }
  footer.site-footer .container {
    max-width: 1000px !important;
    padding-inline: 2rem !important;
  }
}

@media (min-width: 1200px) {
  footer.site-footer .container {
    max-width: 1180px !important;
    padding-inline: 1.25rem !important;
  }
}

@media (min-width: 768px) {
  .site-footer .col-lg-4.col-md-6 {
    width: 25rem;
    flex: initial;
    max-width: initial;
    text-align: left;
  }
}

.site-footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5rem 1.25rem 1.625rem !important;
}

.site-footer-copyright p {
  margin: 0 !important;
  color: var(--color-white);
}

.site-footer-copyright a {
  font-size: 0.75rem;
  transition: opacity 0.3s;
  color: var(--color-white);
}

.site-footer-copyright a:hover {
  opacity: 0.8;
  color: var(--color-white);
}

.site-footer-content {
  padding-top: 0 !important;
}

.footer-inner-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.site-footer .widget:first-of-type {
  margin-bottom: 0;
}

.site-footer .widget:first-of-type p {
  font-size: 1.25rem;
  font-weight: var(--fw-700);
  margin-bottom: 0;
  line-height: calc(29 / 24);
  text-align: left;
}

.site-footer .widget:last-of-type {
  margin-top: 0.25rem;
}

.site-footer .widget:last-of-type p {
  font-size: 0.875rem;
  font-weight: var(--fw-700);
  line-height: calc(20 / 14);
  margin-bottom: 0;
  text-align: left;
}

.site-footer .footer-nav-list li > a,
.site-footer .footer-nav .sub-menu li a {
  position: relative;
  color: var(--color-white);
  display: block;
}

.site-footer .footer-nav-list li > a::after,
.site-footer .footer-nav .sub-menu li a::after {
  content: "";
  position: absolute;
  bottom: -0.1875rem;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-footer .footer-nav-list li > a:hover::after,
.site-footer .footer-nav .sub-menu li a:hover::after {
  transform: scaleX(1);
}

.site-footer .footer-nav-list li > a {
  font-size: 0.875rem;
  font-weight: var(--fw-700);
  line-height: calc(20 / 14);
}

.site-footer .footer-nav .container {
  padding-inline: 0 !important;
}

.site-footer .footer-nav {
  padding: 0;
}

.site-footer .footer-nav-list {
  display: flex;
  column-gap: 2rem;
}

.site-footer .footer-nav .footer-nav-list > li {
  padding-inline: 0;
  border: none;
}

.footer-nav .menu-item-has-children {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-nav .sub-menu {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0;
  margin: 1.3rem 0 0;
  min-width: auto;
}

.footer-nav .sub-menu li,
.footer-nav .sub-menu li:first-child {
  display: flex;
  padding: 0;
  border: none;
}

.site-footer .footer-nav .sub-menu li a {
  font-size: 0.75rem;
  font-weight: var(--fw-500);
  line-height: calc(17 / 12);
  padding: 0;
}

.footer-nav .sub-menu li + li {
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .site-footer .footer-nav .footer-nav-list li:first-child {
    border: none;
    padding-left: 0;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  /* 全体 */
  .site-footer {
    padding-inline: 1.5rem;
  }
  .site-footer .footer-nav .container {
    max-width: 550px !important;
  }
  .site-footer-copyright {
    flex-direction: column-reverse;
    gap: 1rem;
    padding: 2rem 1rem 1rem !important;
  }
  .site-footer-copyright a {
    font-size: 0.875rem;
  }
  .footer-inner-wrap {
    flex-direction: column-reverse;
    gap: 2rem;
    max-width: 40.625rem !important;
  }

  /* ウィジェット */
  .site-footer .widget:first-of-type p {
    font-size: 1.25rem;
    text-align: center;
  }
  .site-footer .widget:last-of-type p {
    font-size: 0.875rem;
    text-align: center;
  }

  /* フッターナビ */
  .site-footer .footer-nav-list li > a {
    font-size: 1.125rem;
  }
  .site-footer .footer-nav-list {
    display: block;
    column-count: 2;
    column-gap: 2rem;
    max-width: 300px;
    margin-inline: auto;
  }
  .site-footer .footer-nav-list > li {
    break-inside: avoid;
    margin-bottom: 0;
  }
  .site-footer .footer-nav-list > li + li {
    margin-top: 2rem;
  }
  .site-footer .footer-nav .footer-nav-list > li > a {
    border: none;
    padding: 0;
    width: fit-content;
    display: block;
  }

  /* サブメニュー */
  .footer-nav .sub-menu {
    margin-top: 0.5rem;
  }
  .footer-nav .sub-menu li + li {
    margin-top: 0.25rem;
  }
  .site-footer .footer-nav .sub-menu li {
    padding-left: 1rem;
    position: relative;
  }
  .site-footer .footer-nav .sub-menu li::before {
    content: "-";
    position: absolute;
    top: 0;
    left: 0.35rem;
    font-size: 1rem;
    line-height: calc(17 / 12);
  }
  .site-footer .footer-nav .sub-menu li a {
    font-size: 1rem;
  }
}

@media (max-width: 524px) {
  .site-footer {
    padding-inline: 0.5rem;
  }
}

/* ==========================================
    お問い合わせセクション
   ========================================== */

/* ---------- サイドバーの検索ブロックを非表示 ---------- */
/* サイドバー内にあるブロック検索ウィジェット（汎用） */
.sub-section aside.widget.widget_block.widget_search,
.sub-section .wp-block-search,
.sub-section .widget_search {
  display: none !important;
}

/* 追加の保険：ページ内に直接出る検索ウィジェット */
aside.widget.widget_block.widget_search,
.wp-block-search,
.widget_search {
  display: none !important;
}

/* 特定のインスタンスを狙う場合（IDが変わる可能性あり） */
#block-8,
#block-20 {
  display: none !important;
}

/* ---------- フッターの SNS シェアアイコンを非表示 ---------- */
/* フッターのウィジェット内に追加された social links ブロックを狙う */
/* 特定インスタンス（ID が block-12 の場合） */
#block-12,
aside#block-12 {
  display: none !important;
}

/* フッター領域にある social links を汎用的に非表示にする（クラス名が異なる場合も広くカバー） */
footer .wp-block-social-links,
.site-footer .wp-block-social-links,
.site-footer .widget_block .wp-block-social-links,
footer .widget_block .wp-block-social-links {
  display: none !important;
}

.page-id-5438 .veu_socialSet {
  display: none !important;
}

@media (min-width: 992px) {
  .page-id-5438 .main-section--col--two {
    width: 100% !important;
  }
}

.custom-padding-top {
  padding-top: 3rem;
}

/* ============================================================
   archive-fv：アーカイブページ FV
============================================================ */

.archive-fv {
  position: relative;
  margin-top: var(--header-height, 4rem);
  background-image: url(./images/au-fv.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(200 / 16 * 1rem);
}

.archive-fv--case {
  background-image: url(./images/case-fv.jpg);
}

.archive-fv--post {
  background-image: url(./images/post-fv.jpg);
}

.archive-fv--contact,
.archive-fv--thanks {
  background-image: url(./images/contact-fv.jpg);
}

.archive-fv--company {
  background-image: url(./images/company-fv.jpg);
}

.archive-fv--product {
  background-image: url(./images/au-fv.jpg); /* TODO: product-fv.jpg に差し替え */
}

.archive-fv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.archive-fv__inner {
  text-align: center;
  padding: 2rem 1.25rem;
  position: relative;
  z-index: 2;
}

@keyframes fv-fade-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.archive-fv__title {
  font-size: calc(30 / 16 * 1rem);
  font-weight: 900;
  line-height: calc(58 / 40);
  color: var(--color-white);
  margin: 0;
  animation: fv-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.archive-fv__sub {
  font-family: var(--open-sans);
  font-size: calc(16 / 16 * 1rem);
  font-weight: 400;
  line-height: calc(22 / 16 * 1rem);
  color: var(--color-white);
  margin: calc(4 / 16 * 1rem) 0 0;
  animation: fv-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@media (min-width: 768px) {
  .archive-fv {
    min-height: calc(379 / 16 * 1rem);
  }
  .archive-fv__title {
    font-size: calc(40 / 16 * 1rem);
  }
  .archive-fv__sub {
    font-size: calc(16 / 16 * 1rem);
  }
}

/* ============================================================
   lineup-brands：取扱製品
============================================================ */
.lineup-brands {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: #f5f5f5;
  padding: 3.25rem 0 3.5rem;
}

.lineup-brands__inner {
  max-width: 1176px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.lineup-brands h2.lineup-section-title {
  font-size: 1.625rem;
  font-weight: 900;
  line-height: 1.68;
  color: var(--color-blue);
  text-align: center;
  margin: 0;
}

.lineup-brands__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(20 / 16 * 1rem);
  margin-top: calc(30 / 16 * 1rem);
}

.lineup-brands__item {
  display: flex;
}

.lineup-brands__item > img {
  display: block;
}

.lineup-brands__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: calc(20 / 16 * 1rem) 1rem;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); /* 16px */
  text-decoration: none;
  transition: background-color 0.3s;
}

.lineup-brands__link:hover {
  background-color: #185ba310;
}

.lineup-brands__logo-img {
  height: 2.725rem;
  width: auto;
}

.lineup-brands__external-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1rem; /* 16px */
}

@media (min-width: 768px) {
  .lineup-brands {
    padding: 3.25rem 0 5.625rem;
  }
  .lineup-brands h2.lineup-section-title {
    font-size: 1.75rem;
  }
  .lineup-brands__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: calc(28 / 16 * 1rem);
    margin-top: calc(48 / 16 * 1rem);
  }
  .lineup-brands__link {
    padding: calc(56 / 16 * 1rem) 1rem;
  }
  .lineup-brands__logo-img {
    height: 3.75rem;
  }
}

/* ==========================================
   固定ヘッダー
   ========================================== */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  animation: none !important;
}

.site-body {
  margin-top: var(--header-height, 4rem);
}

/* ==========================================
   管理バー：下部固定（ログイン時のみ適用）
   ========================================== */
html {
  margin-top: 0 !important;
}

body.admin-bar {
  padding-bottom: 46px; /* スマホ時のバー高さ */
}

@media screen and (min-width: 783px) {
  body.admin-bar {
    padding-bottom: 32px; /* PC時のバー高さ */
  }
}

#wpadminbar {
  position: fixed !important;
  top: auto !important;
  bottom: 0;
}

/* Lightningのadmin-bar用top offsetをリセット */
.admin-bar .site-header,
.admin-bar .vk-mobile-nav:not(.vk-mobile-nav-drop-in) {
  top: 0 !important;
}

.admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-drop-in,
.admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-left-in,
.admin-bar .vk-mobile-nav.vk-mobile-nav-open.vk-mobile-nav-right-in {
  top: 0 !important;
}

/* ==========================================
    ハンバーガーメニュー
   ========================================== */
.vk-mobile-nav-menu-btn {
  border: none !important;
  top: 0.95rem !important;
}

.vk-mobile-nav {
  padding: 0 1rem 3.5rem !important;
}

@media (min-width: 768px) {
  .vk-mobile-nav-menu-btn {
    display: none;
  }
}

/* モバイルナビ：ロゴ */
.vk-mobile-nav-logo {
  padding: 0.125rem 0.5625rem 1.25rem;
}
.vk-mobile-nav-logo a {
  display: block;
  width: 7.125rem;
}
.vk-mobile-nav-logo img {
  display: block;
}

.vk-mobile-nav .acc-btn {
  border: none !important;
}

/* モバイルナビ：開閉アニメーションを個別に制御 */
.vk-mobile-nav.vk-mobile-nav-drop-in {
  transition: all 1.5s ease-out; /* 閉じるとき */
}
.vk-mobile-nav.vk-mobile-nav-drop-in.vk-mobile-nav-open {
  transition: all 0.5s ease-out; /* 開くとき（親テーマと同じ速さ） */
}

/* ============================================================
   スクロールアニメーション：プライバシーポリシーページ
   （privacy-policy.js + Intersection Observer 連動）
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.js .post-name-privacy-policy .page-header,
  html.js .post-name-privacy-policy .site-body {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.65s ease,
      transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  html.js .post-name-privacy-policy .page-header.is-in-view,
  html.js .post-name-privacy-policy .site-body.is-in-view {
    opacity: 1;
    transform: none;
  }
}