@charset 'UTF-8';

/**
 * Footer Styles
 */

/* ========================================
 * Footer Container
 * ======================================== */
.section.footer {
  margin-top: var(--spacing-2xl);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.footer .section_wrap {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.footer .section_inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

/* ========================================
 * Footer Upper Section
 * ======================================== */
.footer .footer-upper {
  padding-bottom: var(--spacing-md);
  border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.2);
}

/* ========================================
 * Navigation Menu
 * ======================================== */
.footer .menu {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--spacing-lg);
}

/* 親カテゴリ */
.footer .menu > li {
  margin: 0;
}

/* 親カテゴリ見出しリンク（白色・太字） */
.footer .menu > li > a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--transition-fast);
}

.footer .menu > li > a:hover {
  opacity: 0.7;
}

/* 子メニュー */
.footer .menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .menu .sub-menu li {
  margin: 0;
}

/* 子リンク（白色） */
.footer .menu .sub-menu li a {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-inverse);
  text-decoration: none;
  display: inline-block;
  padding: 0.4rem 0;
  line-height: var(--line-height-relaxed);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.footer .menu .sub-menu li a:hover {
  opacity: 1;
}

/* ========================================
 * Policy Links (Upper Section)
 * ======================================== */
.footer .policy_links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .policy_links li a {
  font-size: var(--font-size-xs);
  color: var(--color-text-inverse);
  text-decoration: none;
  display: inline-block;
  transition: opacity var(--transition-fast);
}

.footer .policy_links li a:hover {
  opacity: 1;
}

/* ========================================
 * Footer Lower Section
 * ======================================== */
.footer .footer-lower {
  padding-top: var(--spacing-md);
}

/* ========================================
 * Logo Row (Logo + SNS)
 * ======================================== */
.footer .footer_logo_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--spacing-md);
}

/* ========================================
 * Logo (Left-Aligned)
 * ======================================== */
.footer .logo {
  width: 15rem;
  margin: 0;
}

.footer .logo a {
  display: inline-block;
}

.footer .logo img {
  width: 100%;
  height: auto;
}

/* ========================================
 * Company Info (Horizontal Layout)
 * ======================================== */
.footer .company {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--spacing-md);
  margin: 0 0 var(--spacing-sm);
}

.footer .company_name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.footer .company_address,
.footer .company_tel,
.footer .company_fax {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.footer .company_access {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-inverse);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.footer .company_access:hover {
  opacity: 1;
}

.footer .company_access .material-symbols-outlined {
  font-size: 1.2rem;
  width: auto;
}

/* ========================================
 * Social Media Links
 * ======================================== */
.footer .social_links {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: 0;
}

.footer .social_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  transition: opacity var(--transition-fast);
}

.footer .social_icon:hover {
  opacity: 0.7;
}

.footer .social_icon svg {
  width: 3.2rem;
  height: 3.2rem;
}

/* ========================================
 * Copyright
 * ======================================== */
.footer .copyright {
  text-align: left;
  font-size: var(--font-size-xs);
  margin: 0;
  opacity: 0.7;
}

/* ========================================
 * Page Top Button
 * ======================================== */
.footer .page_top_btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-index-sticky);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.footer .page_top_btn.is-visible {
  opacity: 1;
  visibility: visible;
}

.footer .page_top_btn a {
  display: block;
  width: 4rem;
  height: 4rem;
  background: var(--color-accent);
  border-radius: 50%;
  position: relative;
  transition: background var(--transition-fast);
}

.footer .page_top_btn a:hover {
  background: var(--color-primary);
  opacity: 1;
}

.footer .page_top_btn a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%) rotate(45deg);
  width: 1rem;
  height: 1rem;
  border-top: 3px solid var(--color-text-inverse);
  border-left: 3px solid var(--color-text-inverse);
}

/* ========================================
 * Responsive
 * ======================================== */
@media screen and (max-width: 900px) {
  /* メニュー: 縦積み + リンクアイコン付き */
  .footer .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .footer .menu > li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer .menu > li:last-child {
    border-bottom: none;
  }

  .footer .menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .footer .menu > li > a::after {
    content: 'open_in_new';
    font-family: 'Material Symbols Outlined';
    font-size: 1.2rem;
    font-weight: normal;
    opacity: 0.6;
  }

  /* サブメニュー非表示（モバイル） */
  .footer .menu .sub-menu {
    display: none;
  }

  /* ポリシーリンク: 同じパターン */
  .footer .policy_links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer .policy_links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer .policy_links li:last-child {
    border-bottom: none;
  }

  .footer .policy_links li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
  }

  .footer .policy_links li a::after {
    content: 'open_in_new';
    font-family: 'Material Symbols Outlined';
    font-size: 1.2rem;
    font-weight: normal;
    opacity: 0.6;
  }

  .footer .footer_logo_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer .logo {
    width: 12rem;
  }

  .footer .company {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .footer .social_links {
    gap: var(--spacing-sm);
  }

  .footer .social_icon svg {
    width: 2.8rem;
    height: 2.8rem;
  }

  .footer .company_name {
    font-size: var(--font-size-sm);
  }

  .footer .company_address,
  .footer .company_tel,
  .footer .company_fax {
    font-size: var(--font-size-xs);
  }

  .footer .page_top_btn {
    bottom: 1rem;
    right: 1rem;
  }

  .footer .page_top_btn a {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ========================================
 * 小型スマートフォン向け調整
 * ======================================== */
@media screen and (max-width: 420px) {
  .footer .logo {
    width: 10rem;
  }
}