/* partners/partners.css - extends css/style.css for the /partners/ sponsorship page only.
   Reuses the site's existing fonts/colors (Raleway/Barlow Condensed/Oswald,
   #5f5f5f text, #ff264a accent, white background) rather than introducing a new palette. */
/* On the homepage, .page sections are visually separated by a tall dark hero / background
   photo immediately above each heading, so the -7px (etc.) negative top margin baked into
   h2.sections never shows. This page's sections stack directly on plain white background
   with none of that built-in whitespace, so without extra spacing here, a heading's negative
   margin pulls it up into the end of the previous section's content (visible text overlap,
   e.g. FAQ list bottom vs. the next heading). Fix: give every section its own top/bottom
   padding, and neutralize the negative margin on the heading itself. Scoped to this page only. */
.partners-page .page {
  padding-top: 50px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 640px) {
  .partners-page .page {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.partners-page h2.sections {
  margin-top: 0;
}

/* The homepage's nav relies on "main-navigation-bg" only being switched on by JS once a
   dark fullscreen hero has been scrolled past (desktop keeps the roomy default padding/
   white logo until then). This page has no dark hero, so main-navigation-bg was forced on
   at all times in the markup - but on desktop that only compresses the nav link padding
   and shrinks the logo, making it look visually different (cramped) from the homepage's
   nav. Removed from the markup so desktop matches the homepage's default (uncompressed)
   nav look. On mobile, though, main-navigation-bg is what swaps the white logo/hamburger
   icon for dark ones and adds the white bar background - without it, white-on-white would
   make the menu invisible here (unlike the homepage, which has a dark hero behind it at
   the top). So mobile reproduces that same swap here, scoped to this page only. */
@media only screen and (max-width: 768px) {
  .partners-page #header {
    background: #fff;
  }

  .partners-page .navbar.navbar-fixed-top {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 5px rgba(0, 0, 0, .35);
  }

  .partners-page .logo .logo-light {
    opacity: 0;
    visibility: hidden;
    display: none;
  }

  .partners-page .logo .logo-dark {
    opacity: 1;
    visibility: visible;
    display: block;
    height: auto;
  }

  .partners-page .navbar-toggle .icon-bar {
    background: #111;
    margin-right: -10px;
  }

  .partners-page .navbar-toggle {
    margin-top: -44px;
    margin-right: 4px;
  }

  .partners-page .navbar-collapse {
    margin-top: 3px;
  }
}

.partners-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff264a;
  margin-bottom: 10px;
}

.partners-hero-copy {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.25;
  color: #5f5f5f;
  margin: 0 0 20px 0;
}

@media only screen and (max-width: 640px) {
  .partners-hero-copy { font-size: 30px; }
}

.partners-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* feature / figure photo with a caption, used for the facility photos on
   this page (separate from the homepage's lightbox gallery markup). */
.partners-figure {
  margin: 0 0 20px 0;
}

.partners-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.partners-figure figcaption {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #a0a0a8;
  margin-top: 8px;
  text-align: center;
}

/* banner size diagram - a simple proportioned box (3,000mm : 1,600mm),
   not a photo, so no real installation is misrepresented. */
.banner-size-diagram {
  max-width: 420px;
  margin: 0 auto 10px auto;
}

.banner-size-box {
  position: relative;
  width: 100%;
  aspect-ratio: 3000 / 1600;
  border: 2px dashed #ff264a;
  background: #fdeef0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.banner-size-box span {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 22px);
  color: #ff264a;
  text-align: center;
  padding: 0 10px;
}

.partners-stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  margin: 10px 0 0 0;
  list-style: none;
  padding: 0;
}

.partners-stat-row li {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  color: #5f5f5f;
}

.partners-stat-row strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #ff264a;
}

/* feature grid (親子が一緒に訪れる / 3〜5時間 / 地域とカルチャー) */
.partners-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  margin: 0 auto;
  max-width: 980px;
}

@media only screen and (max-width: 880px) {
  .partners-feature-grid { grid-template-columns: 1fr; }
}

.partners-feature-card {
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.partners-feature-card h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #5f5f5f;
  margin: 0 0 10px 0;
}

.partners-feature-card p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #5f5f5f;
  margin: 0;
}

/* plan cards */
.partners-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  margin: 0 auto;
  max-width: 1040px;
}

@media only screen and (max-width: 880px) {
  .partners-plan-grid { grid-template-columns: 1fr; max-width: 420px; }
}

.partners-plan-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.partners-plan-card.is-premium {
  border-color: #ff264a;
  box-shadow: 0 0 0 1px #ff264a;
}

.partners-plan-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #5f5f5f;
  margin: 0 0 12px 0;
}

.partners-plan-price {
  margin-bottom: 16px;
}

.partners-plan-price .monthly {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #ff264a;
}

.partners-plan-price .annual {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  color: #a0a0a8;
  margin-top: 4px;
}

.partners-plan-card ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  flex-grow: 1;
}

.partners-plan-card ul li {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  line-height: 1.9;
  color: #5f5f5f;
  padding-left: 14px;
  position: relative;
}

.partners-plan-card ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #ff264a;
}

.partners-plan-note {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  line-height: 1.8;
  color: #a0a0a8;
  max-width: 640px;
  margin: 24px auto 0 auto;
  text-align: left;
}

/* industries / tags */
.partners-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.partners-tag-list li {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #5f5f5f;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 8px 16px;
}

/* collaboration bullet list */
.partners-collab-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  text-align: left;
}

.partners-collab-list li {
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  line-height: 2;
  color: #5f5f5f;
  padding-left: 18px;
  position: relative;
}

.partners-collab-list li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #ff264a;
}

/* steps */
.partners-steps {
  list-style: none;
  counter-reset: partners-step;
  margin: 0 auto;
  padding: 0;
  max-width: 640px;
  text-align: left;
}

.partners-steps li {
  counter-increment: partners-step;
  position: relative;
  padding: 0 0 24px 52px;
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #5f5f5f;
}

.partners-steps li::before {
  content: counter(partners-step);
  position: absolute;
  left: 0;
  top: -4px;
  width: 34px;
  height: 34px;
  border: 1px solid #ff264a;
  color: #ff264a;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partners-steps strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  color: #5f5f5f;
  margin-bottom: 4px;
}

/* FAQ accordion - native <details>, no JS required */
.partners-faq {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.partners-faq details {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 16px 0;
}

.partners-faq summary {
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  color: #5f5f5f;
  list-style: none;
}

.partners-faq summary::-webkit-details-marker { display: none; }

.partners-faq summary::before {
  content: 'Q. ';
  color: #ff264a;
  font-weight: 700;
}

.partners-faq summary::after {
  content: '+';
  float: right;
  color: #ff264a;
  font-weight: 700;
}

.partners-faq details[open] summary::after { content: '−'; }

.partners-faq p {
  font-family: 'Raleway', sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: #5f5f5f;
  margin: 12px 0 0 0;
  padding-left: 22px;
}

/* homepage teaser section (inserted into index.php) */
.partners-teaser-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* contact form select - css/style.css only styles .contact-form-row input/textarea,
   so <select> was falling back to the browser's native/OS dropdown look (plain,
   inconsistent with the rest of the form). Match the same box/font treatment and
   swap the native arrow for a flat chevron consistent with this site's square,
   no-border-radius form fields. */
.partners-contact-form select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  color: #2b2b2b;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 10px 36px 10px 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%235f5f5f' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
}

.partners-contact-form select:focus {
  outline: none;
  border-color: #ff264a;
}

/* mobile nav collapse toggle markup reuses .collapse/.in from plugins.css -
   no extra CSS needed. Only the aria-driven icon state below, scoped to this
   page's own body class so the homepage's existing toggle is untouched. */
.partners-page .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .partners-page * {
    animation: none !important;
    transition: none !important;
  }
}