/* assets/styles.css */
@import url("./css/variables.css");
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');

:root {
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.08);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --font-sans: "BIZ UDGothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-rounded: "Zen Maru Gothic", sans-serif;
  --max-width: 1120px;
}

.text-highlight {
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255, 235, 59, 0.4) 60%);
  padding: 0 4px;
  /* Optional spacing */
}

* {
  box-sizing: border-box;
}

html {

  font-size: 18px;

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: var(--font-sans);

  color: var(--text-color);

  background:

    radial-gradient(circle at top left, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent 48%),

    radial-gradient(circle at 35% 20%, color-mix(in srgb, var(--accent-color) 25%, transparent), transparent 45%),

    var(--bg-color);

  min-height: 100vh;

  line-height: 1.7;

  letter-spacing: 0.01em;

}



img {

  max-width: 100%;

  display: block;

}



a {

  color: var(--link-color);

}



a:focus-visible,

button:focus-visible {

  outline: 2px solid var(--primary-color);

  outline-offset: 3px;

}



.skip-link {

  position: absolute;

  left: -9999px;

  top: auto;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



.skip-link:focus {

  left: 1rem;

  top: 1rem;

  width: auto;

  height: auto;

  padding: 0.5rem 1rem;

  background: var(--primary-color);

  color: #fff;

  z-index: 1000;

}



.container {

  width: min(100% - 2.5rem, var(--max-width));

  margin: 0 auto;

}



.site-header {
  position: fixed;
  top: 0;
  left: 0;
  /* Ensure left placement */
  width: 100%;
  /* Ensure full width */
  z-index: 50;

  background: color-mix(in srgb, var(--bg-color) 92%, transparent);

  backdrop-filter: blur(8px);

  border-bottom: 1px solid var(--border-color);

}



.header-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.25rem 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  text-decoration: none;

  color: var(--text-color);

}



.brand-mark {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--muted-bg);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);

  border: 1px solid var(--border-color);

  display: grid;

  place-items: center;

  font-size: 0.75rem;

  color: var(--text-color);

}



.brand-name {

  font-family: var(--font-display);

  font-size: 1.125rem;

  font-weight: 700;

}



.site-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem 1.25rem;

  font-size: 0.95rem;

}



.site-nav a {

  text-decoration: none;

  color: var(--text-color);

}



.site-nav a[aria-current="page"] {

  color: var(--primary-color);

  font-weight: 700;

}



.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  color: var(--primary-color);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 100;
}

.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-color);
  position: relative;
  transition: background-color 0.3s;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-color);
  transition: transform 0.3s;
}

.hamburger-icon::before {
  top: -8px;
}

.hamburger-icon::after {
  top: 8px;
}

/* Open State for Icon */
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon {
  background-color: transparent;
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::before {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon::after {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 900px) {
  .mobile-menu-toggle {
    display: block;
  }

  .site-nav,
  .nav-cta {
    display: none;
    /* Hide by default on mobile */
  }

  /* Mobile Menu Container when Open */
  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-color);
    padding: 2rem;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    gap: 1.5rem;
  }

  .site-header.is-open .nav-cta {
    display: inline-flex;
    position: absolute;
    top: calc(100% + 250px);
    /* Position after nav, rough estimate or append to nav in JS */
    /* Better approach: CSS only might be tricky if they are siblings. 
       Let's use a simpler approach: 
       We will append .nav-cta to .site-nav in JS or just style them to appear.
       
       Actually, to keep it simple without moving DOM elements too much:
       Let's render .nav-cta inside .site-nav for mobile or just position them.
       
       Refined approach for CSS:
       Target .site-header.is-open .nav-cta as well.
    */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    z-index: 49;
  }

  /* Alternative: Allow flex wrap to handle it if we change parent containers? 
     No, .header-inner is flex. 
     on mobile: 
     .header-inner { flex-wrap: wrap; }
     But we want absolute positioning to overlay content.
  */

  .site-header.is-open .header-inner {
    padding-bottom: 1rem;
  }

  /* 
    Revised Mobile Menu Strategy:
    When open, we make .site-nav and .nav-cta visible.
    We position them absolutely or fixed.
  */

  .site-header.is-open .site-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    /* Header height approx */
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 2rem;
    align-items: center;
    justify-content: flex-start;
    padding-top: 3rem;
    padding-bottom: 15rem;
    /* Ensure content clears fixed CTA */
    overflow-y: auto;
  }

  .site-header.is-open .nav-cta {
    display: inline-flex;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    justify-content: center;
    padding: 1rem;
    font-size: 1.1rem;
    background-color: #fff;
    /* Opaque background to prevent text mixing */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Shadow for separation */
    z-index: 101;
    /* Ensure on top */
  }

  /* Lock body scroll */
  body.menu-open {
    overflow: hidden;
  }

  /* Mobile Spacing Optimizations */
  .section {
    padding: 2rem 0;
  }

  .hero {
    padding: 2rem 0 1.5rem;
  }

  .hero-card {
    padding: 1.5rem;
    gap: 1.5rem;
  }

  .policy-group-spacing {
    margin-bottom: 2.5rem !important;
  }
}

/* Default spacing for policy groups (desktop) */
.policy-group-spacing {
  margin-bottom: 4rem;
}



.hero {

  padding: 4rem 0 2.5rem;

}



.hero-card {

  display: grid;

  gap: 2rem;

  background: var(--muted-bg);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);

  border-radius: var(--radius-lg);

  padding: 2.5rem;

  border: 1px solid var(--border-color);

  box-shadow: var(--shadow-soft);

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(2.1rem, 4.2vw, 3.3rem);

  line-height: 1.15;

  margin: 0;

}



.hero-subtitle {

  margin: 1.2rem 0 0;

  color: var(--text-color);

  font-size: 1.1rem;

}



.hero-actions {

  margin-top: 1.7rem;

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0.8rem 1.4rem;

  border-radius: 999px;

  border: 1px solid transparent;

  font-weight: 600;

  text-decoration: none;

  background: var(--primary-color);

  color: #fff;

}



.btn.secondary {

  background: transparent;

  border-color: var(--primary-color);

  color: var(--primary-color);

}



.section {

  padding: 3rem 0;

}



.section-title {

  font-family: var(--font-display);

  font-size: 1.7rem;

  margin: 0 0 1rem;

  display: inline-block;

  padding-bottom: 0.4rem;

  border-bottom: 2px solid var(--accent-color);

}

.section-subtitle {

  font-size: 1.6rem;

  margin: 0;

  color: var(--text-color);

  font-weight: 700;

}



.grid {

  display: grid;

  gap: 1.8rem;

}



.grid.cards {

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}



.card {

  background: var(--muted-bg);

  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);

  border-radius: var(--radius-md);

  border: 1px solid var(--border-color);

  padding: 1.6rem;

}



.card h3 {

  margin-top: 0;

}



.meta {

  color: color-mix(in srgb, var(--text-color) 70%, transparent);

  font-size: 0.9rem;

}



.breadcrumb {

  font-size: 0.9rem;

  color: var(--text-color);

  margin-bottom: 1rem;

}



.breadcrumb a {

  text-decoration: none;

  color: inherit;

}



.split {

  display: grid;

  gap: 2rem;

}



.placeholder-media {

  border-radius: var(--radius-md);

  background: var(--bg-color);

  border: 1px dashed var(--border-color);

  min-height: 180px;

  display: grid;

  place-items: center;

  color: color-mix(in srgb, var(--text-color) 70%, transparent);

  font-size: 0.9rem;

}



.site-footer {

  background: var(--text-color);

  color: #fff;

  padding: 3rem 0;

  margin-top: 3rem;

}

.site-footer .section-title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.site-footer .meta {
  color: rgba(255, 255, 255, 0.8);
}

.footer-right-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer {
  height: auto;
  min-height: auto;
  overflow: visible;
}



.footer-grid {

  display: grid;

  gap: 2rem;

}



.footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 0.75rem 1.5rem;

  font-size: 0.9rem;

}



.footer-links a,
.footer-links a:visited {

  color: #fff;

  text-decoration: none;

}



.reveal {

  opacity: 0;

  transform: translateY(12px);

  transition: opacity 600ms ease, transform 600ms ease;

}



.reveal.is-visible {

  opacity: 1;

  transform: translateY(0);

}



@media (min-width: 768px) {

  .hero-card {

    grid-template-columns: 1.1fr 0.9fr;

    align-items: center;

  }



  .split {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .footer-grid {

    grid-template-columns: 1.2fr 1fr;

  }


}

/* Footer SNS Link Styles */
.footer-sns-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
}

.footer-sns-link:visited {
  color: #fff;
}


.footer-sns-link:hover {
  opacity: 0.8;
}

/* New Isolated SNS Class */
.footer-sns-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff !important;
  text-decoration: none;
}

.footer-sns-item:visited {
  color: #fff !important;
}

.footer-sns-item:hover {
  opacity: 0.8;
}

/* Policy Detailed Items */
.policy-intro {
  margin-bottom: 2rem;
}

.policy-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.policy-item {
  /* No specific styles needed for container yet */
}

.policy-item-header {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  /* Reduced gap to keep number close */
  margin-bottom: 0.3rem;
}

.policy-item-number {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary-color);
  /* Match title color (Red) */
  font-size: 1.5rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.policy-item-title {
  font-size: 1.4rem;
  /* Larger than description and previous title */
  font-weight: 700;
  color: var(--primary-color);
  /* Red */
  margin: 0;
  line-height: 1.4;
}

.policy-item-desc {
  margin: 0;
  padding-left: 2rem;
  /* Indent to align with title approximately */
  font-size: 0.95rem;
  color: var(--text-color);
}

@media (max-width: 768px) {
  .policy-item-desc {
    padding-left: 0;
    /* Removing indent on mobile for more space */
  }
}