/*
Theme Name: IEMOTO Block Theme
Author: BCJ
Description: Custom FSE block theme based on TT5 clone.
Version: 0.0.1
*/


/* === Root Tokens Mapping === */
:root {
  /* Header base */
  --iemoto-header-bg: var(--wp--custom--header--background);
  --iemoto-header-opacity: var(--wp--custom--header--opacity);
  --iemoto-header-blur: var(--wp--custom--header--blur);
  --iemoto-logo-pc: var(--wp--custom--header--logo-size-pc);
  --iemoto-logo-sp: var(--wp--custom--header--logo-size-sp);

  /* Header paddings / offsets */
  --iemoto-header-pad-left-pc: var(--wp--custom--header--padding-left-pc);
  --iemoto-header-pad-left-sp: var(--wp--custom--header--padding-left-sp);
  --iemoto-header-pad-top-pc: var(--wp--custom--header--padding-top-pc);
  --iemoto-header-pad-top-sp: var(--wp--custom--header--padding-top-sp);
  --iemoto-header-nav-offset-top: var(--wp--custom--header--nav-offset-top);

  /* Navigation */
  --iemoto-nav-font-size-pc: var(--wp--custom--nav--font-size-pc);
  --iemoto-nav-letter-spacing-pc: var(--wp--custom--nav--letter-spacing-pc);
  --iemoto-nav-font-size-sp: var(--wp--custom--nav--font-size-sp);
  --iemoto-nav-letter-spacing-sp: var(--wp--custom--nav--letter-spacing-sp);
  --iemoto-nav-gap-pc: var(--wp--custom--nav--gap-pc);

  /* CTA paddings */
  --iemoto-cta-pb-pc: var(--wp--custom--cta--pc-padding-block);
  --iemoto-cta-pis-pc: var(--wp--custom--cta--pc-padding-inline-start);
  --iemoto-cta-pie-pc: var(--wp--custom--cta--pc-padding-inline-end);
  --iemoto-cta-pb-sp: var(--wp--custom--cta--sp-overlay-padding-block);
  --iemoto-cta-pi-sp: var(--wp--custom--cta--sp-overlay-padding-inline);

  /* Burger (SP) */
  --iemoto-burger-top-sp: var(--wp--custom--burger--top-sp);
  --iemoto-burger-right-sp: var(--wp--custom--burger--right-sp);
  --iemoto-burger-thickness: var(--wp--custom--burger--bar-thickness);
  --iemoto-burger-length: var(--wp--custom--burger--bar-length);

  /* Layout */
  --iemoto-gutter: var(--wp--custom--layout--gutter);
  --iemoto-max-container: var(--wp--custom--layout--max-container);
}

/* ================================
   Typography System
   ================================
   - Shippori Mincho (ja-serif): Textos japoneses tradicionales, nombres, subtítulos
   - Hiragino Gothic (ja-sans): Títulos principales ゴシック体, menú
   - Adobe Jenson (en-serif): Textos latinos con serifa
   - Kumbh Sans (en-sans): Títulos latinos sin serifa
================================ */

/* Base: Shippori Mincho para textos japoneses tradicionales */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--wp--preset--font-family--ja-serif);
}

/* Títulos principales: Hiragino Gothic (ゴシック体) */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--wp--preset--font-family--ja-sans);
}

/* Navegación: Adobe Jenson (serifa latina) */
.iemoto-global-nav,
.iemoto-global-nav a {
  font-family: var(--wp--preset--font-family--en-serif);
}

/* Textos "一覧" y nombres: Shippori Mincho */
.archive-title,
.entry-title,
.post-title,
[lang="ja"] {
  font-family: var(--wp--preset--font-family--ja-serif);
}

/* === Section Title & Subtitle Spacing === */
/* H2 title followed by Japanese subtitle paragraph: total 5px spacing */
h2.wp-block-heading.has-text-align-center,
h2.has-text-align-center {
  margin-bottom: 3px;
}

/* Japanese subtitle paragraphs (after section titles) */
/* Using !important to override WordPress .has-ja-sans-font-family class with !important */
/* EXCEPT for catalog section which should use Shippori Mincho */
.wp-site-blocks h2 + p.has-text-align-center:not(.cta-rfi *),
.wp-site-blocks h2 + p[style*="text-align:center"]:not(.cta-rfi *),
.wp-site-blocks .wp-block-heading + p.has-text-align-center:not(.cta-rfi *),
body h2.wp-block-heading + p.has-text-align-center:not(.cta-rfi *),
body .wp-block-heading + p.has-text-align-center:not(.cta-rfi *) {
  font-family: var(--wp--preset--font-family--ja-sans) !important;
  font-size: 14px !important;
  margin-top: 2px;
}
/* Japanese subtitle paragraphs (after section titles) sp version */
@media (max-width: 768px) {
  .wp-site-blocks h2 + p.has-text-align-center:not(.cta-rfi *),
  .wp-site-blocks h2 + p[style*="text-align:center"]:not(.cta-rfi *),
  .wp-site-blocks .wp-block-heading + p.has-text-align-center:not(.cta-rfi *),
  body h2.wp-block-heading + p.has-text-align-center:not(.cta-rfi *),
  body .wp-block-heading + p.has-text-align-center:not(.cta-rfi *) {
    font-size: 11px !important;
  }
}

/* Catalog section: Force Shippori Mincho for all text */
.cta-rfi p,
.cta-rfi__body p {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif !important;
}

/* Utility: Force Shippori Mincho */
.u-font-shippori, .wp-site-blocks .wp-block-heading + .u-font-shippori.has-text-align-center:not(.cta-rfi *), body .wp-block-heading + p.has-text-align-center:not(.cta-rfi *) {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif !important;
}

/* === Global Spacing System === */
/* Spacer between content and buttons/links: 100px (Design specification) */
/* Templates updated to use height:100px inline, no override needed */

/* Section spacing: Total 210px between sections (bottom of link + top of next title) */
/* This means padding-bottom of section + padding-top of next section = 210px */
/* Typically: 105px bottom + 105px top = 210px total */
/* Templates updated to use padding:105px inline */

/* First section on page: No top padding */
.wp-site-blocks > .wp-block-group:first-child {
  padding-top: 0 !important;
}

/* === Alignfull bleed (Header only) === */
.iemoto-header.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

html, body { overflow-x: hidden; }

/* === Header Base (Fixed版) === */
.iemoto-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  color: var(--wp--preset--color--black);
  padding-top: env(safe-area-inset-top, 0);
}

/* WP管理バー補正 */
body.admin-bar .iemoto-header {
  top: 32px;
}

/* 本文の押し下げ */
body {
  /*padding-top: calc(var(--iemoto-logo-pc) + var(--iemoto-header-pad-top-pc));*/
  padding-top: 0;
}
@media (max-width: 768px) {
  body {
    /*padding-top: calc(var(--iemoto-logo-sp) + var(--iemoto-header-pad-top-sp) + 4px);*/
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Secciones de ancho completo escapan del padding del body */
  .alignfull,
  .iemoto-footer {
    margin-left: -10px;
    margin-right: -10px;
  }

  /* Restaurar padding para el contenido dentro de secciones alignfull */
  /* Excluir header que tiene su propio padding de 20px */
  .alignfull.wp-block-group:not(.iemoto-header__inner):not(.hero-dynamic-section):not(.hero-video-container) {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Projects shortcode wrappers: escapar del padding del body */
  .single-projects .story-timeline-wrapper,
  .single-projects .project-gallery-wrapper,
  .single-projects .project-faq-wrapper,
  .single-projects .project-related-wrapper,
  .single-projects .project-staff-intro-wrapper {
    margin-left: -10px;
    margin-right: -10px;
  }

  /* Restaurar padding lateral para wrappers de Projects */
  .single-projects .story-timeline-wrapper,
  .single-projects .project-gallery-wrapper,
  .single-projects .project-faq-wrapper,
  .single-projects .project-staff-intro-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (min-width: 769px) {
  body.post-type-archive-works, body.post-type-archive-stories, body.post-type-archive-projects {
    padding-top: calc(var(--iemoto-logo-pc) + var(--iemoto-header-pad-top-pc));
  }
}
/* Works Single: Hero画像が上端から始まるため padding-top を削除 */
body.single-works {
  padding-top: 0;
}

/* CSR Single: Hero画像が上端から始まるため padding-top を削除 */
body.single-csr {
  padding-top: 0;
}

/* Top Page: Hero動画が上端から始まるため padding-top を削除 */
body.page-template-page-top-page {
  padding-top: 0;
}

/* CSR Single: Hero con título alineado abajo-izquierda */
body.single-csr .csr-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-csr .csr-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

@media (max-width: 768px) {
  body.single-csr .csr-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }
}

/* Stories Single: Hero con título alineado abajo-izquierda */
body.single-stories .stories-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-stories .stories-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 0;
  right: auto;
  width: auto;
  padding-bottom: 32px;
}

/* Desktop - Align with content-section-container (860px width) */
@media (min-width: 769px) {
  body.single-stories .stories-hero .wp-block-cover__inner-container {
    left: calc((100vw - 910px) / 2 + 14px);
    padding-left: 20px;
  }
}

body.single-stories .stories-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  body.single-stories .stories-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  body.single-stories .stories-hero .wp-block-post-title {
    font-size: 18px;
  }
}

/* Single Stories - Lead Block styling */
body.single-stories .wp-block-group.alignwide {
  margin-bottom: 0 !important;
  /* background-color removido - cada sección tiene su propia clase */
}

/* Lead Section - Fondo gris */
body.single-stories .lead-container {
  background-color: #F7F7F7 !important;
}

/* Lead container - Desktop padding override */
@media (min-width: 769px) {
  body.single-stories .lead-container {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
}

/* Content Section - Fondo blanco */
body.single-stories .content-section-container {
  background-color: #ffffff !important;
  border-bottom: solid 1px #000;
}

/* Content Section - Desktop: border limited to content width (860px) */
@media (min-width: 769px) {
  body.single-stories .content-section-container {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Content Section - Mobile: border respects body padding (15px on each side) */
@media (max-width: 768px) {
  body.single-stories .content-section-container {
    margin-left: 15px;
    margin-right: 15px;
  }
}

/* Timeline Section - Fondo blanco */
body.single-stories .timeline-section {
  background-color: #ffffff !important;
}

/* Gallery Section - Fondo gris */
body.single-stories .gallery-section-container {
  background-color: #F7F7F7 !important;
}

/* FAQ Section - Fondo blanco */
body.single-stories .faq-section-container {
  background-color: #ffffff !important;
}

/* Staff Section - Fondo blanco */
body.single-stories .staff-section-container {
  background-color: #ffffff !important;
}

@media (max-width: 768px) {
  /* Lead container - specific padding for gray section */
  body.single-stories .lead-container.wp-block-group.alignwide {
    margin-left: -10px;
    margin-right: -10px;
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    padding-left: 35px;
    padding-right: 35px;
  }

  /* Other .alignwide sections - reduced horizontal padding */
  body.single-stories .wp-block-group.alignwide:not(.lead-container) {
    margin-left: 0;
    margin-right: 0;
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Story Content Editor - Mobile vertical padding (separate from .alignwide) */
  body.single-stories .entry-content.wp-block-post-content {
    padding-top: 90px !important;
    padding-bottom: 120px !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* CSR Content Editor - Mobile vertical padding (same as Stories) */
  body.single-csr .entry-content.wp-block-post-content {
    padding-top: 90px !important;
    padding-bottom: 120px !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Story Content Editor - Desktop vertical padding */
@media (min-width: 769px) {
  body.single-stories .entry-content.wp-block-post-content {
    padding-top: 120px !important;
    padding-bottom: 150px !important;
  }

  /* CSR Content Editor - Desktop vertical padding (same as Stories) */
  body.single-csr .entry-content.wp-block-post-content {
    padding-top: 120px !important;
    padding-bottom: 150px !important;
  }

  /* Section H2 Titles - Desktop: TIMELINE, GALLERY, FAQ, RELATED ARTICLE */
  body.single-stories .timeline-section h2,
  body.single-stories .gallery-section-container h2,
  body.single-stories .faq-section-container h2,
  body.single-stories .related-articles-title-en {
    font-size: 29px !important;
  }
}

/* Works Single: Hero con título alineado abajo-izquierda */
body.single-works .works-hero {
  margin-top: 0;
  margin-bottom: 0;
}

/* Works Single: Reducir padding-top del contenedor de hashtag/intro */
body.single-works main > .wp-block-group:first-of-type {
  padding-top: 30px !important;
}

/* Works Single: Intro section - override inline padding-top */
body.single-works .is-layout-constrained[style*="padding-top"] {
  padding-top: 30px !important;
}

body.single-works .works-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 35px;
  left: calc((100vw - 950px) / 2 + 20px);
  right: auto;
  width: auto;
}

body.single-works .works-hero .wp-block-post-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  body.single-works .works-hero .wp-block-cover__inner-container {
    bottom: 25px;
    left: 35px;
  }

  body.single-works .works-hero .wp-block-post-title {
    font-size: 18px;
  }

  /* Contact Section full width on mobile */
  body.single-works .contact-section {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* Open House, Consultation & Workshop Single: Hero con título alineado abajo-izquierda */
body.single-openhouse .openhouse-hero,
body.single-consultation .openhouse-hero,
body.single-lifestyle_workshop .openhouse-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-openhouse .openhouse-hero .wp-block-cover__inner-container,
body.single-consultation .openhouse-hero .wp-block-cover__inner-container,
body.single-lifestyle_workshop .openhouse-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

body.single-openhouse .openhouse-hero .wp-block-post-title,
body.single-consultation .openhouse-hero .wp-block-post-title,
body.single-lifestyle_workshop .openhouse-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 769px) {
  body.single-openhouse .openhouse-hero .wp-block-cover__inner-container, 
  body.single-consultation .openhouse-hero .wp-block-cover__inner-container, 
  body.single-lifestyle_workshop .openhouse-hero .wp-block-cover__inner-container {
    left: calc((100vw - 860px) / 2);
  }
}

@media (max-width: 768px) {
  body.single-openhouse .openhouse-hero .wp-block-cover__inner-container,
  body.single-consultation .openhouse-hero .wp-block-cover__inner-container,
  body.single-lifestyle_workshop .openhouse-hero .wp-block-cover__inner-container {
    bottom: 32px;
    left: 32px;
    right: 32px;
  }

  body.single-openhouse .openhouse-hero .wp-block-post-title,
  body.single-consultation .openhouse-hero .wp-block-post-title,
  body.single-lifestyle_workshop .openhouse-hero .wp-block-post-title {
    font-size: 18px;
  }
}

/* Consultation Single: Hero con título alineado abajo-izquierda */
body.single-consultation .consultation-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-consultation .consultation-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

body.single-consultation .consultation-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  body.single-consultation .consultation-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  body.single-consultation .consultation-hero .wp-block-post-title {
    font-size: 18px;
  }
}

/* Workshop Single: Hero con título alineado abajo-izquierda */
body.single-lifestyle_workshop .workshop-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-lifestyle_workshop .workshop-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

body.single-lifestyle_workshop .workshop-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  body.single-lifestyle_workshop .workshop-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  body.single-lifestyle_workshop .workshop-hero .wp-block-post-title {
    font-size: 18px;
  }
}


@media (max-width: 768px) {
  body.single-csr .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* CSR Single: Hero con título alineado igual que Stories */
body.single-csr .csr-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-csr .csr-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 0;
  right: auto;
  width: auto;
  padding-bottom: 32px;
}

/* Desktop - Align with content (same as Stories) */
@media (min-width: 769px) {
  body.single-csr .csr-hero .wp-block-cover__inner-container {
    left: calc((100vw - 910px) / 2 + 14px);
    padding-left: 20px;
  }
}

body.single-csr .csr-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  body.single-csr .csr-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  body.single-csr .csr-hero .wp-block-post-title {
    font-size: 18px;
  }
}

/* Projects Single: Hero con título alineado abajo-izquierda */
body.single-projects .projects-hero {
  margin-top: 0;
  margin-bottom: 0;
}

body.single-projects .projects-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

body.single-projects .projects-hero .wp-block-post-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  body.single-projects .projects-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  body.single-projects .projects-hero .wp-block-post-title {
    font-size: 18px;
  }
}

.iemoto-header__bleed {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.iemoto-header__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
  align-items: flex-start;
  gap: 2rem;
  -webkit-padding-start: var(--iemoto-header-pad-left-pc);
     -moz-padding-start: var(--iemoto-header-pad-left-pc);
  padding-inline-start: var(--iemoto-header-pad-left-pc);
  -webkit-padding-end: 0;
     -moz-padding-end: 0;
  padding-inline-end: 0;
  -webkit-padding-before: var(--iemoto-header-pad-top-pc);
  padding-block-start: var(--iemoto-header-pad-top-pc);
  -webkit-padding-after: 0;
  padding-block-end: 0;
}

.iemoto-header__logo img,
.iemoto-header__logo svg {
  display: block;
  height: var(--iemoto-logo-pc) !important;
  width: auto;
}

.iemoto-global-nav {
  font-size: var(--iemoto-nav-font-size-pc);
  letter-spacing: var(--iemoto-nav-letter-spacing-pc);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--iemoto-nav-gap-pc);
  margin-left: auto;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
.iemoto-global-nav li { list-style: none; }

@media (min-width: 769px) {
  .iemoto-global-nav {
    margin-top: var(--iemoto-header-nav-offset-top);
  }
}

.iemoto-global-nav li.iemoto-btn > a {
  position: relative;
  color: var(--wp--preset--color--white) !important;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  padding-block: var(--iemoto-cta-pb-pc);
  -webkit-padding-start: var(--iemoto-cta-pis-pc);
     -moz-padding-start: var(--iemoto-cta-pis-pc);
  padding-inline-start: var(--iemoto-cta-pis-pc);
  -webkit-padding-end: var(--iemoto-cta-pie-pc);
     -moz-padding-end: var(--iemoto-cta-pie-pc);
  padding-inline-end: var(--iemoto-cta-pie-pc);
  border-radius: 0;
}
.iemoto-global-nav li.iemoto-btn > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--black);
  z-index: -1;
  border-radius: 0;
  -webkit-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
}

/* Contact button - Light mode (white background, black text) */
.iemoto-global-nav li.iemoto-btn.btn-light-mode > a {
  color: #000000 !important;
}

.iemoto-global-nav li.iemoto-btn.btn-light-mode > a::before {
  background: #FFFFFF !important;
}

/* Contact button - Dark mode (black background, white text) */
.iemoto-global-nav li.iemoto-btn.btn-dark-mode > a {
  color: #FFFFFF !important;
}

.iemoto-global-nav li.iemoto-btn.btn-dark-mode > a::before {
  background: #000000 !important;
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .iemoto-header__inner {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: calc(var(--iemoto-header-pad-top-sp) + 4px);
  }

  .iemoto-header__logo {
    margin-left: 0;
    padding-left: 20px;
  }

  .iemoto-header__logo img,
  .iemoto-header__logo svg {
    height: var(--iemoto-logo-sp) !important;
  }

  .iemoto-global-nav {
    font-size: var(--iemoto-nav-font-size-sp);
    letter-spacing: var(--iemoto-nav-letter-spacing-sp);
  }
}

/* === Mobile Overlay CTA === */
@media (max-width: 768px) {
  .iemoto-nav--two-bars .wp-block-navigation__responsive-container .iemoto-btn > a {
    position: relative;
    display: inline-block;
    color: var(--wp--preset--color--white) !important;
    text-decoration: none;
    line-height: 1;
    padding-block: var(--iemoto-cta-pb-sp);
    padding-inline: var(--iemoto-cta-pi-sp);
    border-radius: 0;
  }
  .iemoto-nav--two-bars .wp-block-navigation__responsive-container .iemoto-btn > a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wp--preset--color--black);
    z-index: -1;
    border-radius: 0;
  }
}

/* === Mobile Burger: 2本線 (FSE core/navigation override) === */
@media (max-width: 768px) {
  .iemoto-nav--two-bars .wp-block-navigation__responsive-container-open svg {
    display: none;
  }

  .iemoto-nav--two-bars .wp-block-navigation__responsive-container-open {
    position: absolute;
    top: var(--iemoto-burger-top-sp);
    right: 20px;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
    width: var(--iemoto-burger-length);
    height: var(--iemoto-burger-length);
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--wp--preset--color--black);
    z-index: 1000;
  }

  .iemoto-nav--two-bars .wp-block-navigation__responsive-container-open::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: var(--iemoto-burger-length);
    height: 0;
    border-top: 1px solid currentColor;
  }

  .iemoto-nav--two-bars .wp-block-navigation__responsive-container-open::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: var(--iemoto-burger-length);
    height: 0;
    border-top: 1px solid currentColor;
  }
}



/* === Works Archive & Single === */

/* グリッド（PC3列/SP1列） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
  column-gap: 16px;  /* 一覧専用の横ギャップ */
  row-gap: 0;        /* 縦は本文ラッパーの固定高で制御 */
  max-width: var(--wp--custom--container-max);
  margin-inline: auto;
}
@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 0;
  }
}

/* ★ Post Template が注入する block-gap を一覧だけ無効化（縦の二重加算防止） */
.wp-block-post-template.works-grid{
  --wp--style--block-gap: 0 !important;
  gap: 0 !important;
  -webkit-column-gap: 16px !important;
     -moz-column-gap: 16px !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
}
@media (max-width: 768px){
  .wp-block-post-template.works-grid{
    -webkit-column-gap: 7px !important;
       -moz-column-gap: 7px !important;
            column-gap: 7px !important;
    row-gap: 0 !important;
  }
}

/* サムネイル比率（PC:377/275, SP:360/242） */
.works-grid img {
  aspect-ratio: 377 / 275;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .works-grid img {
    aspect-ratio: 360 / 242;
  }
}

/* 画像直下の本文ラッパー（Title + Tags）- padding-bottom para espaciado */
li .works-card__body {
  padding-bottom: 5px;
  padding-left: 12px;
}
@media (max-width: 768px) {
  li .works-card__body {
    min-height: 110px;
    padding-bottom: 5px;
  }
}

/* 画像とタイトルの間隔は見本どおりタイトル側でとる */
.works-grid .wp-block-post-featured-image { margin: 0; }

/* カードタイトル：トークン準拠（PC14px / SP13px、ja-serif、L/H1.6、LS0.23px） */
.works-grid .wp-block-post-title {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  font-size: var(--wp--custom--card--title-font-size-pc);
  font-weight: var(--wp--custom--card--title-font-weight);
  line-height: var(--wp--custom--card--title-line-height);
  letter-spacing: var(--wp--custom--card--title-letter-spacing);
  color: var(--wp--custom--card--title-color);
  margin-top: 16px; /* 画像→タイトル */
}
@media (max-width: 768px) {
  .works-grid .wp-block-post-title {
    font-size: var(--wp--custom--card--title-font-size-sp);
    margin-top: 15px; /* モバイルで15pxに調整 */
  }
}

/* ✅ カード自体の末尾余白：PC 80px、Mobile 60px */
.works-grid .wp-block-post {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .works-grid .wp-block-post {
    margin-bottom: 0;
  }
}

/* ページネーション余白調整 */
.works-pagination {
  text-align: center;
  margin-top: 0px;   /* PC: 上余白 */
  margin-bottom: 120px; /* PC: 下余白 */
}

@media (max-width: 768px) {
  .works-pagination {
    margin-top: 0px;    /* SP: 上余白 */
    margin-bottom: 120px; /* SP: 下余白（共通） */
  }
}
/* ページネーション数字調整 */
.works-pagination .page-numbers {
  display: inline-block;
  margin: 0 .65rem;
  text-decoration: none;
  color: var(--wp--preset--color--black);
}
.works-pagination .current {
  font-weight: bold;
}

/* カテゴリタブ */
.works-tabs {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  gap: 1rem;
  margin-block: 2rem;
}
.works-tabs a {
  padding: 0.5em 1em;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--black);
  text-decoration: none;
}
.works-tabs .is-active {
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
}

/* No results */
.wp-block-query-no-results {
  text-align: center;
  margin-block: 2rem;
  color: var(--wp--preset--color--muted);
}



/* Footer tokens */
:root {
  --iemoto-footer-logo-pc: var(--wp--custom--footer--logo-size-pc);
  --iemoto-footer-logo-sp: var(--wp--custom--footer--logo-size-sp);
  --iemoto-footer-pad-inline: var(--wp--custom--footer--padding-inline);
  --iemoto-footer-pad-bottom-pc: var(--wp--custom--footer--padding-bottom-pc);
  --iemoto-footer-pad-bottom-sp: var(--wp--custom--footer--padding-bottom-sp);
  --iemoto-footer-sns-gap: var(--wp--custom--footer--sns-gap);
  --iemoto-footer-link-fs-pc: var(--wp--custom--footer--link-font-size-pc);
  --iemoto-footer-link-fs-sp: var(--wp--custom--footer--link-font-size-sp);
  --iemoto-footer-link-ls: var(--wp--custom--footer--link-letter-spacing);
  --iemoto-footer-link-color: var(--wp--custom--footer--link-color);
  --iemoto-footer-bg: var(--wp--custom--footer--bg-color);
}

/* === Footer: Grid Layout === */
.iemoto-footer { width: 100%; }

@media (max-width: 768px) {
  .iemoto-footer {
    width: auto;
  }
}

/* 背景帯 */
.iemoto-footer__hero {
  background: url("assets/images/footer-pic_pc.png") center/cover no-repeat;
  height: 677px;
}
@media (max-width: 767px) {
  .iemoto-footer__hero {
    background-image: url("assets/images/footer-pic_sp.png");
    height: 425px;
  }
}

/* 白背景ベース */
.iemoto-footer__base {
  display: grid;
  grid-template-rows: 1fr auto;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  justify-items: center;
  height: 421px;
  background: var(--iemoto-footer-bg);
  padding-inline: var(--iemoto-footer-pad-inline);
  padding-bottom: var(--iemoto-footer-pad-bottom-pc);
  row-gap: var(--wp--custom--footer--gap-logo-meta-pc);
}
@media (max-width: 767px) {
  .iemoto-footer__base {
    height: 310px;
    padding-bottom: var(--iemoto-footer-pad-bottom-sp);
    row-gap: var(--wp--custom--footer--gap-logo-meta-sp);
  }
}

/* ロゴ（中央） */
.iemoto-footer__logo { place-self: center; }
.iemoto-footer__logo img {
  width: var(--iemoto-footer-logo-pc);
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .iemoto-footer__logo img { width: var(--iemoto-footer-logo-sp); }
}

/* 下段（SNS+リンクを左右に並べる） */
.iemoto-footer__meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
  align-items: flex-end;
  width: 100%;
}

/* SNS */
.iemoto-footer__sns {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--iemoto-footer-sns-gap);
}
.iemoto-footer__sns img {
  width: 21.5px;
  height: 21.5px;
  display: block;
}

/* リンク */
.iemoto-footer__links {
  font-size: var(--iemoto-footer-link-fs-pc);
  letter-spacing: var(--iemoto-footer-link-ls);
  color: var(--iemoto-footer-link-color);
  text-transform: uppercase;
  margin: 0;
}
.iemoto-footer__links a { color: inherit; text-decoration: none; }
@media (max-width: 767px) {
  .iemoto-footer__links { font-size: var(--iemoto-footer-link-fs-sp); }
}



/* works */
/* 絞り込みバー全体の背景帯 */
.filter-bar {
  background-color: #f5f5f5;
  padding: 17px 0;
}
/* 外側の全幅グレー帯 */
.filter-bar {
  background: var(--wp--preset--color--gray-100);
  padding-block: 16px;
}
/* 内側コンテナ */
.filter-bar__inner {
  max-width: var(--wp--custom--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter, 24px);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}



/* works_tag の見た目（taxonomy-works_tag と整合） */
.wp-block-post-terms-works_tag {
  margin-top: var(--wp--custom--tag--margin-top-pc);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--wp--custom--tag--gap-y) var(--wp--custom--tag--gap-x);
  font-family: var(--wp--custom--tag--font-family);
}
@media (max-width: 768px) {
  .wp-block-post-terms-works_tag { margin-top: var(--wp--custom--tag--margin-top-sp); }

  /* Works Detail: Reducir padding-top del hashtag en móvil */
  body.single-works .wp-block-post-terms-works_tag {
    margin-top: 15px;
  }
}
.wp-block-post-terms-works_tag a {
  text-decoration: none;
  color: #969696;
  display: inline-block;
  font-size: var(--wp--custom--tag--font-size-pc);
  line-height: var(--wp--custom--tag--line-height);
  letter-spacing: var(--wp--custom--tag--letter-spacing);
}
@media (max-width: 768px) {
  .wp-block-post-terms-works_tag a { font-size: var(--wp--custom--tag--font-size-sp); }
}
.wp-block-post-terms-works_tag a::before {
  content: "#";
  margin-right: 2px;
  color: #969696;
}

/* ラッパー：横並び＆折り返し */
.wp-block-post-terms.taxonomy-works_tag{
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  gap: var(--wp--custom--tag--gap-y) var(--wp--custom--tag--gap-x);
  margin-top: var(--wp--custom--tag--margin-top-pc);
  font-family: var(--wp--custom--tag--font-family);
}
@media (max-width: 768px){
  .wp-block-post-terms.taxonomy-works_tag{ margin-top: var(--wp--custom--tag--margin-top-sp); }
}
.wp-block-post-terms.taxonomy-works_tag a{
  display:inline-block;
  padding: 0;
  font-size: var(--wp--custom--tag--font-size-pc);
  line-height: var(--wp--custom--tag--line-height);
  color: #969696;
  text-decoration: none;
  letter-spacing: var(--wp--custom--tag--letter-spacing);
}
@media (max-width: 768px){
  .wp-block-post-terms.taxonomy-works_tag a{ font-size: var(--wp--custom--tag--font-size-sp); }
}
.wp-block-post-terms.taxonomy-works_tag a::before{
  content: "#";
  margin-right: 2px;
  color: #969696;
}
.wp-block-post-terms.taxonomy-works_tag .wp-block-post-terms__separator{ display:none; }
.wp-block-post-terms.taxonomy-works_tag a:hover{ -webkit-filter: brightness(.97); filter: brightness(.97); }



/* works 一覧（途中） */
.works-pagination .current { font-weight:700; border-bottom:1px solid currentColor; }
/* 行間は本文固定高で制御するため row-gap は 0（上で指定済み） */



/* ================================
 * WORKS アーカイブ：白帯（FV）をXD寸法で固定
 * ------------------------------- */
.post-type-archive-works .hero-wrap{
  position: relative;
  height: 365px;
  margin: 0;
  padding: 0;
}
.post-type-archive-works .hero-wrap > .wp-block-heading{
  position: absolute;
  top: 235px;
  left: 144px;
  margin: 0;
  font-family: adobe-jenson-pro, 'Adobe Jenson Pro', serif;
  font-weight: 400;
}
.post-type-archive-works .hero-wrap > .tate-label{
  position: absolute;
  top: 0;
  right: 138px;
  margin: 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
}
.post-type-archive-works .works-hero-slider{ margin-top: 0 !important; }
@media (max-width: 768px){
  .post-type-archive-works .hero-wrap{ height: 260px; }
  .post-type-archive-works .hero-wrap > .wp-block-heading{ top: 167px; left: 32px; }
  .post-type-archive-works .hero-wrap > .tate-label{ right: 22px; top: 0; }

  /* Full width para hero slider y filter bar en móvil */
  .works-hero-slider,
  .filter-bar {
    margin-left: -10px;
    margin-right: -10px;
  }

  /* Works Hero Slider: usar width initial en lugar de 100% */
  .works-hero-slider {
    width: initial;
  }
}
/*sans*/
.post-type-archive-works .hero-wrap .tate-label,
.post-type-archive-works .hero-wrap .wp-block-heading.tate-label {
  font-family: var(--wp--preset--font-family--ja-sans) !important;
}

/* ================================
   Archive Title Animation
   ================================ */
/* Apply font-family and font-weight to all archive H1 titles */
.hero-wrap > .wp-block-heading {
  font-family: adobe-jenson-pro, 'Adobe Jenson Pro', serif;
  font-weight: 400;
}

/* Animation for each character */
.hero-wrap > .wp-block-heading span,
.post-type-archive h1.wp-block-heading span {
  display: inline-block;
  opacity: 0;
  -webkit-animation: titleRevealFromTop 1.8s ease-out forwards;
  animation: titleRevealFromTop 1.8s ease-out forwards;
}

@-webkit-keyframes titleRevealFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes titleRevealFromTop {
  from {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ================================
   CTA 資料請求 (CATALOG)
================================ */
.cta-rfi {
  position: relative;
  text-align: center;
  background: #fff;
  color: #000;
  margin-bottom: 0;
  overflow: hidden;
  padding-bottom: 110px;
}
@media (max-width: 768px) {
  .cta-rfi {
    padding-bottom: 71px;
    margin-left: -10px;
    margin-right: -10px;
  }

  /* Contenido con padding lateral (siguiendo regla del body 10px) */
  .cta-rfi__body {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.cta-rfi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 367px;
  background: url('./assets/images/cta-rfi-bg_pc.png') no-repeat center/cover;
  z-index: 0;
}
@media (max-width: 768px) {
  .cta-rfi::before {
    height: 196px;
    background-image: url('./assets/images/cta-rfi-bg_sp.png');
  }
}
.cta-rfi > * { position: relative; z-index: 1; }
.cta-rfi__image img { display: none; }
.cta-rfi__image {
  margin: 127px auto 0;
  width: 448px;
  height: 408px;
  background: url('./assets/images/cta-rfi_pc.png') no-repeat center/contain;
}
@media (max-width: 768px) {
  .cta-rfi__image { margin: 82px auto 0; width: 269px; height: 245px; background-image: url('./assets/images/cta-rfi_sp.png'); }
}
.cta-rfi__title {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 29px;
  letter-spacing: 4.93px;
  font-weight: 400;
  margin-top: 55px;
}
@media (max-width: 768px) {
  .cta-rfi__title { font-size: 19px; margin-top: 24px; }
}
.cta-rfi__subtitle {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  letter-spacing: 1.54px;
  font-weight: 400;
  margin-top: 5px;
}
@media (max-width: 768px) {
  .cta-rfi__subtitle { font-size: 11px; }
}
.cta-rfi__body p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 17px;
  line-height: 1.8;
  margin-top: 32px;
}
@media (max-width: 768px) {
  .cta-rfi__body p { font-size: 14px; margin-top: 27px; }
}
.cta-rfi__btn .wp-block-button__link {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 18px;
  letter-spacing: 0.08em;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 28px 42px 25px 42px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  margin-top: 57px;
}
@media (max-width: 768px) {
  .cta-rfi__btn .wp-block-button__link { font-size: 14px; padding: 20px 20px; margin-top: 24px; }
}
.cta-rfi__btn .wp-block-button__link::after {
  content: "→";
  display: inline-block;
  margin-left: 39px;
  font-size: 1em;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.cta-rfi__btn .wp-block-button__link:hover { background: #000; color: #fff; }
.cta-rfi__btn .wp-block-button__link:hover::after { -webkit-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); }
@media (min-width: 769px) {
  .cta-rfi__btn .wp-block-button__link { width: 310px; height: 74px; }
}
@media (max-width: 768px) {
  .cta-rfi__btn .wp-block-button__link { width: 238px; height: 66px; }
}
.cta-rfi__title { margin-bottom: 5px !important; }
.cta-rfi__subtitle { margin-top: 0 !important; }



/* ================================
   Breadcrumb (Plugin simple-breadcrumbs)
================================ */
.simple-breadcrumbs {
  width: 100%;
  padding: 40px 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 10px !important;
  letter-spacing: 0.05em;
  text-align: left;
  line-height: 1;
}

.simple-breadcrumbs a {
  color: #000;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.simple-breadcrumbs a:hover {
  opacity: 0.6;
}

.simple-breadcrumbs .sep {
  margin: 0 8px;
  color: #000;
}

@media (min-width: 769px) {
  .simple-breadcrumbs {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px;
  }
  body.page-template-single-guides .simple-breadcrumbs {
    padding: 30px 24px;
  }
}

@media (max-width: 768px) {
  .simple-breadcrumbs {
    padding: 24px 18px;
  }
}

@supports (-webkit-touch-callout: none) {
  .simple-breadcrumbs {
    font-size: 10px !important;
  }
  .breadcrumb {
    font-size: 10px !important;
  }
}



/* ================================
   Construction Guide (家づくりガイド)
================================ */

/* Vertical Text - Hero Section */
.guide-vertical-text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* Flow Steps - Text Wrapper */
.flow-text-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
}

/* Flow Steps - Número horizontal (SIEMPRE horizontal en todas las pantallas) */
.flow-text-wrapper .flow-step-number,
p.flow-step-number {
  -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1;
  margin: 0;
  display: block;
}

/* Flow Steps - Texto vertical japonés */
.flow-step-text-vertical {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

/* Guide Hero Section */
.guide-hero {
  position: relative;
}

.guide-hero.wp-block-cover .wp-block-cover__inner-container {
    position: absolute;
    right: auto;
    width: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.guide-hero-title {
  font-family: var(--wp--preset--font-family--en-serif);
}

.guide-hero p.guide-hero-subtitle.has-ja-serif-font-family {
  margin-left: 20px;
}

/* Anchor Menu */
.guide-anchor-menu {
  background: transparent;
}

.anchor-menu-item {
  font-family: var(--wp--preset--font-family--ja-serif);
}

.anchor-menu-item a {
  color: #000;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.anchor-menu-item a:hover {
  opacity: 0.6;
}

.menu-arrow {
  margin-left: 8px;
  color: #000;
}

/* Guide Anchor Menu - Estilos similares a company-nav-links */
.guide-anchor-menu .wp-block-columns {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 860px;
  max-width: 100%;
  margin: 0 auto;
  padding: 65px 0 0;
  background: white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.guide-anchor-menu .anchor-menu-item {
  font-family: var(--wp--preset--font-family--ja-serif);
  margin: 0;
  padding: 0;
}

.guide-anchor-menu .anchor-menu-item a {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 195px;
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid #CCCCCC;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  text-align: left;
}

/* Reemplazar el span.menu-arrow con un ::after como en company-nav-links */
.guide-anchor-menu .anchor-menu-item .menu-arrow {
  display: none; /* Ocultar el span actual */
}

.guide-anchor-menu .anchor-menu-item a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-left: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.guide-anchor-menu .anchor-menu-item a:hover {
  opacity: 0.7;
}

/* Mobile adjustments */
@media (max-width: 782px) {
  .guide-anchor-menu .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 30px 20px;
  }

  .guide-anchor-menu .anchor-menu-item a {
    width: 100%;
  }
}

/* Tablet adjustments */
@media (max-width: 768px) {
  .guide-anchor-menu .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 34px;
    width: 100%;
    padding: 65px 0 0;
  }

  .guide-anchor-menu .anchor-menu-item a {
    width: 100%;
  }
}

/* Guide Sections */
.guide-section {
  scroll-margin-top: 100px; /* For anchor navigation with fixed header */
}

/* Concept Section */
.guide-concept {
  text-align: center;
  background: var(--wp--preset--color--white);
}

/* Concept Section */
.guide-concept {
  text-align: center;
  background: var(--wp--preset--color--white);
}

/* Concept Image Styling */
.guide-concept .concept-image,
figure.concept-image,
.wp-block-image.concept-image {
  max-width: 1160px;
  margin: 0 auto !important;
}

/* Asegurar que la imagen dentro del figure también respete el ancho */
.guide-concept .concept-image img,
figure.concept-image img,
.wp-block-image.concept-image img {
  max-width: 100%;
  height: auto;
}

/* Concept Image Styling */
.guide-concept .concept-image,
figure.concept-image,
.wp-block-image.concept-image {
  max-width: 1160px;
  margin: 0 auto !important;
}

/* Asegurar que la imagen dentro del figure también respete el ancho */
.guide-concept .concept-image img,
figure.concept-image img,
.wp-block-image.concept-image img {
  max-width: 100%;
  height: auto;
}

/* Mobile: Altura fija con overflow hidden para mostrar solo parte de la imagen */
@media (max-width: 768px) {
  .guide-concept .concept-image,
  figure.concept-image,
  .wp-block-image.concept-image {
    height: 300px; /* Ajusta esta altura según necesites */
    overflow: hidden;
  }

  .guide-concept .concept-image img,
  figure.concept-image img,
  .wp-block-image.concept-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center; /* Ajusta esto para cambiar qué parte de la imagen se muestra (center, top, bottom, etc.) */
  }
}

/* Design Section */
.guide-design {
  background: #FFF;
}

/* Design Section */
.guide-design {
  background: #FFF;
}

/* Design Image Styling - Similar a Concept */
.guide-design .wp-block-image,
.guide-design figure.wp-block-image {
  max-width: 1160px;
  margin: 0 auto !important;
}

/* Asegurar que la imagen dentro del figure también respete el ancho */
.guide-design .wp-block-image img,
.guide-design figure.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* Mobile: Altura fija con overflow hidden para mostrar solo parte de la imagen */
@media (max-width: 768px) {
  .guide-design .wp-block-image,
  .guide-design figure.wp-block-image {
    height: 300px; /* Ajusta esta altura según necesites (misma que concept o diferente) */
    overflow: hidden;
  }

  .guide-design .wp-block-image img,
  .guide-design figure.wp-block-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center; /* Ajusta esto para cambiar qué parte de la imagen se muestra */
  }
}

/* Flow Section */
.guide-flow {
  position: relative;
  background: transparent;
}

.guide-flow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #F5F5F5;
  z-index: -1;
}

.flow-step {
  margin-bottom: 60px;
}

.flow-step:last-child {
  margin-bottom: 0;
}

/* Supports Section */
.guide-supports {
  background: var(--wp--preset--color--gray-50);
}

@media (max-width: 768px) {
  .guide-supports.alignfull.wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .guide-supports figure.wp-block-image:has(img.wp-image-415) {
    height: 300px;
    overflow: hidden;
  }

  .guide-supports img.wp-image-415 {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
}

/* Support Icons */
.support-icon {
  margin-bottom: 10px;
  display: block;
}

.support-icon img {
  width: 48px;
  height: 48px;
  display: inline-block;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Contact Section */
.guide-contact {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Story Button */
.story-list-btn .wp-block-button__link {
  font-family: var(--wp--preset--font-family--en-serif);
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 20px 40px;
  font-size: 16px;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.story-list-btn .wp-block-button__link:hover {
  background: #fff;
  color: #000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .guide-section .guide-hero {
    min-height: 300px;
  }

  .guide-hero.wp-block-cover .wp-block-cover__inner-container{
    left: 35px;
    bottom: 75px;
  }

  .guide-section .guide-hero-title {
    font-size: 36px;
  }

  .guide-hero p.guide-hero-subtitle.has-ja-serif-font-family {
    margin-left: 15px;
    font-size: 12px !important;
  }

  .guide-section .guide-vertical-text {
    font-size: 12px;
  }

  .guide-section .flow-step {
    margin-bottom: 40px;
    padding-bottom: 40px;
  }

  /* FLOW pattern en móvil: Grupo de imagen + texto vertical */
  .flow-image-text-group {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    gap: 5px;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
  }

  /* La imagen ocupa el 80% del espacio */
  .flow-image-text-group .flow-image {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    margin: 0;
  }

  /* El texto wrapper ocupa el 20% */
  .flow-image-text-group .flow-text-wrapper {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    min-width: 0;
  }

  /* Números horizontales más pequeños en móvil */
  .flow-image-text-group .flow-step-number {
    font-size: 11px;
  }

  /* Texto vertical japonés más pequeño en móvil */
  .flow-image-text-group .flow-step-text-vertical {
    font-size: 11px;
  }

  /* Las columnas en móvil: apilar verticalmente */
  .flow-step .wp-block-columns {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
  }

  /* Cada columna ocupa el 100% */
  .flow-step .wp-block-column {
    -ms-flex-preferred-size: 100% !important;
    flex-basis: 100% !important;
    width: 100%;
  }

  /* Steps impares (01, 03, 05, 07): Imagen izquierda, texto derecha (por defecto) */
  /* Steps pares (02, 04, 06): Texto izquierda, imagen derecha */
  .flow-step-even .flow-image-text-group {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
       -moz-box-orient: horizontal;
       -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .guide-anchor-menu .wp-block-columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
  }

  .story-list-btn .wp-block-button__link {
    font-size: 14px;
    padding: 16px 32px;
  }

  
}
@media (min-width: 769px) {
  .guide-hero.wp-block-cover .wp-block-cover__inner-container {
    left: calc((100vw - 1160px) / 2 + 14px);
    bottom: 110px;
  }
}

/* ================================
   CEO Message Page (代表インタビュー)
================================ */

/* Hero Section */
.ceo-hero {
  position: relative;
  text-align: center;
}

.ceo-vertical-text {
  position: absolute;
  right: 138px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  font-family: var(--wp--preset--font-family--ja-serif);
}

@media (max-width: 768px) {
  .ceo-hero {
    padding-top: 0px !important;
    padding-bottom: 60px !important;
  }

  .ceo-vertical-text {
    right: 22px;
  }
}

/* Message Section */
.ceo-message-section {
  background: -o-linear-gradient(top, #FAFAFA 0%, #FFFFFF 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#FFFFFF));
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
}

.ceo-section-label {
  color: #999;
  margin-bottom: 20px !important;
}

.ceo-handwritten-image {
  margin-bottom: 30px;
}

.ceo-handwritten-image img {
  width: 100%;
  height: auto;
  display: block;
}

.ceo-body-text {
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #333;
}

.ceo-signature {
  font-family: var(--wp--preset--font-family--ja-serif);
  text-align: right;
  color: #000;
  margin-top: 40px !important;
}

.ceo-president-photo {
  margin: 0;
}

.ceo-president-photo img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .ceo-message-section {
    padding: 60px 24px !important;
  }

  .ceo-content-columns {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
       -moz-box-orient: vertical !important;
       -moz-box-direction: normal !important;
        -ms-flex-direction: column !important;
    flex-direction: column !important;
  }

  .ceo-text-column,
  .ceo-image-column {
    -ms-flex-preferred-size: 100% !important;
    flex-basis: 100% !important;
    width: 100%;
  }

  .ceo-handwritten-image {
    -webkit-box-ordinal-group: 3;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
    order: 2;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .ceo-president-photo {
    -webkit-box-ordinal-group: 4;
       -moz-box-ordinal-group: 4;
        -ms-flex-order: 3;
    order: 3;
  }

  .ceo-signature {
    text-align: left;
    margin-top: 30px !important;
  }
}
















/* ==============================
   WORKS 一覧：SP 余白バリエーション
   - 画面端→画像：左右 8px
   - 画像→タイトル/タグ：左 19px（＝画像の左端から 19px）
   ============================== */
   @media (max-width: 768px){

    /* 1) 一覧アイテムの左右 8px（対 画面）
       - li を 8px パディング → 0px に変更（横幅を最大限活用）
       - 画像は li の内側で横いっぱい（= 画面端から 8px 内側で揃う）
    */
    .js-works-list .works-grid > li {
      padding-inline: 0;
    }
    .js-works-list .works-grid > li img {
      display: block;
      width: 100%;
      height: auto;
    }
  
    /* 2) タイトル/タグの左は「画像から 19px」
       - 画像は li の内側いっぱい → 画像左端 = li の内側左端
       - そこで body に左 padding:19px を付与
       - 右側は 8px に揃えておくとバランスが崩れません
    */
    .js-works-list .works-card__body {
      padding-left: 19px;  /* 画像左端から 19px */
      padding-right: 8px;   /* 右端は画面の 8px と整合 */
      /* 上下はデザインに合わせて必要なら追加で */
      /* padding-top: 8px; padding-bottom: 12px; など */
    }
  
    /* （任意）タブ帯の上下 64px が未適用ならここでも担保しておけます
    .works-tabs { padding-block: 64px; }
    */
  }
  


















  /* =========================
   SP header: hamburger offset fix
   ========================= */
/* REMOVED: Conflicto con padding de 20px definido en línea 500-505 */


/* ================================
   Contact Form 7 - Estilos (Design-based)
================================ */

.contact-form-wrapper,
.catalog-form-wrapper,
.event-form-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* Fondo gris solo para páginas independientes (Contact, Catalog) */
.page .contact-form-wrapper,
.page .catalog-form-wrapper {
  padding: 60px 40px 80px;
  background: #F5F5F5;
}

/* Título del formulario en templates */
#reservation h2 {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
}

#reservation p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 12px;
  text-align: center;
  margin-bottom: 50px;
  color: #333;
}

.form-intro {
  text-align: center;
  margin-bottom: 40px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  line-height: 1.8;
  color: #333;
}

.form-row {
  margin-bottom: 30px;
  border-bottom: 1px solid #D9D9D9;
  padding-bottom: 20px;
}

.form-row:last-of-type {
  border-bottom: none;
}

.form-row label {
  display: block;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 12px;
  color: #000;
}

.required {
  color: #E74C3C;
  font-size: 11px;
  font-weight: 400;
  margin-left: 4px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--wp--preset--font-family--ja-serif);
  border: 1px solid #E0E0E0;
  border-radius: 0;
  background: #FFFFFF;
  -webkit-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #999;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

/* Radio buttons y checkboxes */
.wpcf7-list-item {
  margin: 0 16px 0 0;
  display: inline-block;
}

.wpcf7-list-item label {
  font-size: 13px;
  margin-bottom: 0;
  display: inline;
}

/* Privacy Policy Accordion */
.checkbox-row {
  margin-top: 40px;
  margin-bottom: 30px;
}

.checkbox-row label {
  font-size: 12px;
  font-family: var(--wp--preset--font-family--ja-serif);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.checkbox-row a {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
}

/* Submit button */
.form-submit {
  text-align: center;
  margin-top: 50px;
}

.submit-button {
  display: inline-block;
  width: 310px;
  height: 74px;
  padding: 0;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #000000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  gap: 12px;
}

.submit-button::after {
  content: "→";
  font-size: 18px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.submit-button:hover {
  background: #333;
}

.submit-button:hover::after {
  -webkit-transform: translateX(4px);
      -ms-transform: translateX(4px);
  transform: translateX(4px);
}

/* Date picker styling */
input[type="date"].form-control {
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Select dropdown */
select.form-control {
  -webkit-appearance: none;
     -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

/* Mensajes de éxito/error */
.wpcf7-response-output {
  margin: 24px 0;
  padding: 16px 20px;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  text-align: center;
  border: 1px solid;
}

.wpcf7-mail-sent-ok {
  background: #E8F5E9;
  border-color: #4CAF50;
  color: #2E7D32;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: #FFEBEE;
  border-color: #E74C3C;
  color: #C62828;
}

.wpcf7-not-valid-tip {
  font-size: 12px;
  color: #E74C3C;
  margin-top: 6px;
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-form-wrapper,
  .catalog-form-wrapper,
  .event-form-wrapper {
    padding: 40px 24px 60px;
  }

  #reservation h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  #reservation p {
    font-size: 11px;
    margin-bottom: 30px;
  }

  .form-row {
    margin-bottom: 24px;
    padding-bottom: 16px;
  }

  .form-control {
    font-size: 16px; /* Evita zoom en iOS */
    padding: 12px 14px;
  }

  .submit-button {
    width: 100%;
    max-width: 310px;
    height: 66px;
    font-size: 16px;
  }

  .form-submit {
    margin-top: 40px;
  }
}

/* ================================
   Company Info Page (会社情報)
================================ */

/* Company page styles are now in page-about.html template */

/* ===== Desktop Form Layout (Two Columns) ===== */
@media (min-width: 769px) {
  /* Force all form inputs to take full width of their container */
  .form-row input[type="text"],
  .form-row input[type="email"],
  .form-row input[type="tel"],
  .form-row input[type="date"],
  .form-row select,
  .form-row textarea {
    width: 100% !important;
    max-width: none !important;
  }

  .form-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    gap: 40px;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
            padding-bottom: 30px;
  }

  /* Hide empty <p> tags that break layout - Event templates only */
  body.single-openhouse .form-row > div > p:empty,
  body.single-openhouse .form-row > p:empty,
  body.single-lifestyle_workshop .form-row > div > p:empty,
  body.single-lifestyle_workshop .form-row > p:empty,
  body.single-consultation .form-row > div > p:empty,
  body.single-consultation .form-row > p:empty {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Label container - first <p> with label */
  .form-row > p:first-child {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 180px;
    margin: 0;
  }

  .form-row > p:first-child label {
    margin-bottom: 0;
    padding-top: 14px;
    padding-left: 20px;
  }

  /* Input container - can be <p> or <div> */
  .form-row > p:last-child,
  .form-row > div {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
    margin: 0;
  }

  /* Single <p> rows (label + input in same <p>) */
  .form-row > p:only-child {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
    margin: 0;
    gap: 40px;
  }

  .form-row > p:only-child label {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 180px;
    margin-bottom: 0;
    padding-top: 14px;
    padding-left: 20px;
  }

  .form-row > p:only-child .wpcf7-form-control-wrap {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
    max-width: 600px;
  }

  /* Name fields container (two inputs side by side) */
  .form-row > div[style*="display:flex"] {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    gap: 10px;
    max-width: 580px;
    width: 100%;
  }

  .form-row > div[style*="display:flex"] > p {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
    flex-direction: row;
    gap: 10px;
  }

  .form-row > div[style*="display:flex"] > p br {
    display: none;
  }

  .form-row > div[style*="display:flex"] .wpcf7-form-control-wrap {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
  }

  /* Postal code row */
  .form-row.postal-row > p:first-child {
    width: 180px;
  }

  .form-row.postal-row .postal-input-group {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    max-width: 580px;
    width: 100%;
  }

  .form-row.postal-row .postal-input-group > p {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
  }

  .form-row.postal-row .postal-input-group > p br {
    display: none;
  }

  .form-row.postal-row .postal-input-group .wpcf7-form-control-wrap {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 200px;
  }

  .form-row.postal-row .address-search-btn {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  /* Privacy row - checkbox centered */
  .form-row.privacy-row {
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
  }

  .form-row.privacy-row > p {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: auto;
  }

  .privacy-row.form-row > p:only-child label {
    width: 215px;
  }
  
  /* Submit button centered */
  .form-submit {
    text-align: center;
  }

  .form-submit > p {
    margin: 0;
  }

  /* Event template forms - Override flex properties for proper two-column layout */
  body.single-openhouse .form-row,
  body.single-lifestyle_workshop .form-row,
  body.single-consultation .form-row {
    -ms-flex-flow: row !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
           -moz-box-orient: horizontal !important;
           -moz-box-direction: normal !important;
            flex-flow: row !important;
    -webkit-box-pack: start !important;
       -moz-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  /* Limit width of input container (second element) to 72% */
  body.single-openhouse .form-row > :nth-child(2),
  body.single-lifestyle_workshop .form-row > :nth-child(2),
  body.single-consultation .form-row > :nth-child(2) {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 72%;
            flex: 0 1 72%;
  }

  /* Reset #reservation p styles that affect form <p> tags */
  body.single-openhouse #reservation .form-row p,
  body.single-lifestyle_workshop #reservation .form-row p,
  body.single-consultation #reservation .form-row p {
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
    text-align: left;
    font-size: inherit;
  }

  /* Center privacy checkbox row */
  body.single-openhouse .form-row.privacy-row,
  body.single-lifestyle_workshop .form-row.privacy-row,
  body.single-consultation .form-row.privacy-row {
    -webkit-box-pack: center !important;
       -moz-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

  /* Limit submit button width */
  body.single-openhouse .wpcf7-submit,
  body.single-lifestyle_workshop .wpcf7-submit,
  body.single-consultation .wpcf7-submit {
    max-width: 400px;
  }
}

/* Event template forms - Mobile styles (reset #reservation p) */
body.single-openhouse #reservation .form-row p,
body.single-lifestyle_workshop #reservation .form-row p,
body.single-consultation #reservation .form-row p {
  margin-bottom: 0;
}

/* About Page - CSR & Projects Section Subtitles */
.csr-activity-section h2 + p,
.company-projects-section-wrapper h2 + p {
  font-family: var(--wp--preset--font-family--ja-sans) !important;
}

/* CSR Gallery Wrapper - Remove max-width */
.csr-gallery-wrapper,
.csr-activity-section > div[style*="max-width"] {
  max-width: none !important;
}

/* ===== CSR Gallery Slider ===== */
.csr-gallery-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.csr-gallery-slides {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: -webkit-transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

/* Desktop: Multiple slides visible */
@media (min-width: 769px) {
  .csr-gallery-slide {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 548px;
  }
}

/* Mobile: One slide at a time */
@media (max-width: 768px) {
  .csr-gallery-slides {
    gap: 7px;
  }

  .csr-gallery-slide {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 332px;
  }
}

/* Image - 548:465 aspect ratio */
.csr-gallery-image {
  width: 100%;
  aspect-ratio: 548 / 465;
  overflow: hidden;
  margin-bottom: 16px;
}

.csr-gallery-image a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.csr-gallery-image a:hover {
  opacity: 0.9;
}

.csr-gallery-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Content (title + excerpt) */
.csr-gallery-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.3s ease, max-height 0.3s ease;
  -o-transition: opacity 0.3s ease, max-height 0.3s ease;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.csr-gallery-slide.is-center .csr-gallery-content {
  opacity: 1;
  max-height: 200px;
}

.csr-gallery-title {
  margin: 0 0 8px 0;
  padding-left: 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 400;
}

@media (max-width: 768px) {
  .csr-gallery-title {
    padding-left: 20px;
    font-size: 13px;
  }
}

.csr-gallery-title a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.csr-gallery-title a:hover {
  opacity: 0.7;
}

.csr-gallery-excerpt {
  margin: 0;
  padding-left: 12px;
  font-size: 13px;
  line-height: 1.8;
  color: #666;
  font-family: var(--wp--preset--font-family--ja-serif);
}

@media (max-width: 768px) {
  .csr-gallery-excerpt {
    padding-left: 20px;
    font-size: 12px;
  }
}

/* Line Indicators */
.csr-gallery-indicators {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .csr-gallery-indicators {
    margin-top: 30px;
  }
}

.csr-gallery-line {
  width: 40px;
  height: 2px;
  padding: 0;
  border: none;
  background: #ccc;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.csr-gallery-line:hover {
  background: #999;
}

.csr-gallery-line.is-active {
  background: #333;
}

@media (max-width: 768px) {
  .csr-gallery-line {
    width: 30px;
  }
}

/* Company/About Hero - Title */
@media (min-width: 769px) {
  .company-hero h1 {
    bottom: 87px !important;
    left: 127px !important;
  }
}

@media (max-width: 768px) {
  .company-hero h1 {
    bottom: 60px !important;
    left: 15px !important;
  }
}

/* Company/About Header - Tate Label */
.company-tate-label {
  height: 80px;
}

@media (min-width: 769px) {
  .company-tate-label {
    top: -233px !important;
    right: 116px !important;
  }
}

@media (max-width: 768px) {
  .company-tate-label {
    right: 5px !important;
    top: -300px !important;
  }
}

/* Anchor Menu */
.company-anchor-menu .anchor-btn .wp-block-button__link {
  background: transparent;
  color: #000;
  border: 1px solid #DEDEDE;
  border-radius: 0;
  padding: 12px 32px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.company-anchor-menu .anchor-btn .wp-block-button__link:hover {
  background: #F5F5F5;
  border-color: #000;
}

@media (max-width: 768px) {
  .company-anchor-menu .wp-block-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
    align-items: stretch;
  }

  .company-anchor-menu .anchor-btn {
    width: 100%;
  }

  .company-anchor-menu .anchor-btn .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* Profile Section - Company Table */
.company-profile-table {
  width: 100%;
  margin-top: 40px;
}

.company-profile-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wp--preset--font-family--ja-serif);
}

.company-profile-table th,
.company-profile-table td {
  padding: 24px 20px;
  border-bottom: 1px solid #E0E0E0;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}

.company-profile-table th {
  width: 180px;
  font-weight: 500;
  font-size: 14px;
  color: #000;
}

.company-profile-table td {
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

.company-profile-table tr:last-child th,
.company-profile-table tr:last-child td {
  border-bottom: none;
}

.company-profile-table td strong {
  font-weight: 600;
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
}

.company-profile-table td strong:first-child {
  margin-top: 0;
}

.company-profile-table .map-link {
  display: inline-block;
  padding: 2px 8px;
  background: #F5F5F5;
  border: 1px solid #DEDEDE;
  border-radius: 2px;
  font-size: 11px;
  text-decoration: none;
  color: #000;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.company-profile-table .map-link:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

@media (max-width: 768px) {
  .company-profile-table th,
  .company-profile-table td {
    display: block;
    width: 100%;
    padding: 16px 0;
  }

  .company-profile-table th {
    font-weight: 600;
    padding-bottom: 8px;
  }

  .company-profile-table td {
    padding-top: 0;
    padding-bottom: 24px;
  }
}

/* Circle Arrow Button */
.circle-arrow-btn .wp-block-button__link {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  font-size: 24px;
  font-family: var(--wp--preset--font-family--en-serif);
  padding: 0;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.circle-arrow-btn .wp-block-button__link:hover {
  background: #000;
  color: #fff;
  -webkit-transform: translateX(8px);
      -ms-transform: translateX(8px);
  transform: translateX(8px);
}

/* ========================================
   Circle Arrow Button with Animation
   (Top Page - Works & Story sections)
   ======================================== */

.circle-arrow-button-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.circle-arrow-button {
  position: relative;
  width: 60px;
  height: 60px;
}

.circle-arrow-button__link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  text-decoration: none;
  color: #000;
  overflow: hidden;
}

.circle-arrow-button__arrow {
  font-size: 20px;
  font-family: var(--wp--preset--font-family--en-serif);
  position: relative;
  z-index: 2;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  -o-transition: transform 0.6s ease, opacity 0.6s ease;
  transition: transform 0.6s ease, opacity 0.6s ease;
  transition: transform 0.6s ease, opacity 0.6s ease, -webkit-transform 0.6s ease;
}

.circle-arrow-button__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); /* Start from top */
}

.circle-arrow-button__svg circle {
  stroke-dasharray: 182; /* Circumference: 2 * π * r = 2 * 3.14159 * 29 ≈ 182 */
  stroke-dashoffset: 0; /* Initially visible (fully drawn) */
}

/* Hover animations */
.circle-arrow-button:hover .circle-arrow-button__arrow {
  -webkit-transform: translateX(40px);
      -ms-transform: translateX(40px);
  transform: translateX(40px); /* Move right and disappear */
  opacity: 0;
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  -o-transition: transform 0.6s ease, opacity 0.6s ease;
  transition: transform 0.6s ease, opacity 0.6s ease;
  transition: transform 0.6s ease, opacity 0.6s ease, -webkit-transform 0.6s ease;
}

.circle-arrow-button:hover .circle-arrow-button__svg circle {
  -webkit-animation: redrawCircle 0.6s ease forwards;
  animation: redrawCircle 0.6s ease forwards;
}

@-webkit-keyframes redrawCircle {
  0% {
    stroke-dashoffset: 182; /* Start from hidden */
  }
  100% {
    stroke-dashoffset: 0; /* Draw complete circle clockwise */
  }
}

@keyframes redrawCircle {
  0% {
    stroke-dashoffset: 182; /* Start from hidden */
  }
  100% {
    stroke-dashoffset: 0; /* Draw complete circle clockwise */
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .circle-arrow-button,
  .circle-arrow-button__link {
    width: 50px;
    height: 50px;
  }

  .circle-arrow-button__arrow {
    font-size: 18px;
  }

  @-webkit-keyframes redrawCircleMobile {
    0% {
      stroke-dasharray: 182;
      stroke-dashoffset: 182; /* Start from hidden */
    }
    100% {
      stroke-dasharray: 182;
      stroke-dashoffset: 0; /* Draw complete circle clockwise */
    }
  }

  @keyframes redrawCircleMobile {
    0% {
      stroke-dasharray: 182;
      stroke-dashoffset: 182; /* Start from hidden */
    }
    100% {
      stroke-dasharray: 182;
      stroke-dashoffset: 0; /* Draw complete circle clockwise */
    }
  }

  /* Hover, Active y clase JS para soportar touch en móvil */
  .circle-arrow-button:hover .circle-arrow-button__svg circle,
  .circle-arrow-button:active .circle-arrow-button__svg circle,
  .circle-arrow-button.is-animating .circle-arrow-button__svg circle {
    -webkit-animation: redrawCircleMobile 0.6s ease forwards;
    animation: redrawCircleMobile 0.6s ease forwards;
  }

  /* Arrow animation en active y animating */
  .circle-arrow-button:active .circle-arrow-button__arrow,
  .circle-arrow-button.is-animating .circle-arrow-button__arrow {
    -webkit-transform: translateX(40px);
        -ms-transform: translateX(40px);
            transform: translateX(40px);
    opacity: 0;
    -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
    transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
    -o-transition: transform 0.6s ease, opacity 0.6s ease;
    transition: transform 0.6s ease, opacity 0.6s ease;
    transition: transform 0.6s ease, opacity 0.6s ease, -webkit-transform 0.6s ease;
  }
}

/* ========================================
   Thumbnail Hover Zoom Effect
   (Top Page - All post sections)
   ======================================== */

/* Apply to Works, Story, Open House, Workshop sections */
.wp-block-post-template .wp-block-post-featured-image {
  overflow: hidden;
  position: relative;
}

.wp-block-post-template .wp-block-post-featured-image img {
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  display: block;
}

.wp-block-post-template .wp-block-post-featured-image:hover img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
  transform: scale(1.05);
}

/* ========================================
   Story Cards with Image Overlay
   (Top Page - Story section)
   ======================================== */

.story-card-with-overlay {
  position: relative;
  overflow: hidden;
}

.story-card-with-overlay .wp-block-post-featured-image {
  position: relative;
  margin: 0;
}

/* Dark gradient overlay - sutil pero visible */
.story-card-with-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 65%;
  background: -o-linear-gradient(bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.8)), color-stop(55%, rgba(0,0,0,0.5)), to(transparent));
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Content overlay positioning */
.story-overlay-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 20px;
  z-index: 2;
  margin: 0 !important;
}

.story-overlay-content h3,
.story-overlay-content .wp-block-post-title,
.story-overlay-content .wp-block-post-title a {
  color: #ffffff !important;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);

  /* Truncate title to 2 lines (approximately 30 characters per line) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.story-card-with-overlay .story-overlay-content time,
.story-card-with-overlay .story-overlay-content .wp-block-post-date,
.story-card-with-overlay .story-overlay-content .wp-block-post-date a {
  color: #ffffff;
  font-family: var(--wp--preset--font-family--en-serif);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Story Lead Text - Override block styles for overlay */
.story-card-with-overlay .story-overlay-content .story-lead-text {
  width: 100%;
  margin: 0;
}

.story-card-with-overlay .story-overlay-content .story-lead-text__content {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--wp--preset--font-family--ja-serif); /* Shippori Mincho */
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  text-align: left;
  margin: 0;

  /* Truncate to 3 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

/* Story Card Divider (horizontal line) - alignfull evita el centrado automático */
.story-card-with-overlay .story-overlay-content .story-card-divider.wp-block-separator.alignfull {
  width: 80%;
  max-width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: auto;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  opacity: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .story-overlay-content {
    padding: 20px 15px;
  }

  .story-card-with-overlay::after {
    height: 50%;
  }

  .story-card-with-overlay .story-overlay-content .story-lead-text__content {
    font-size: 13px;
    -webkit-line-clamp: 2; /* Reduce to 2 lines on mobile */
    line-clamp: 2;
  }

  .story-card-with-overlay .story-overlay-content .story-card-divider.wp-block-separator.alignfull {
    width: 75%;
    max-width: 75%;
  }
}

/* Fallback para story cards sin imagen en top page */
.story-card-with-overlay:not(:has(.wp-block-post-featured-image)) {
  background-color: #F7F7F7;
  aspect-ratio: 1;
  cursor: pointer;
}

/* Agregar el overlay oscuro como en archive */
.story-card-with-overlay:not(:has(.wp-block-post-featured-image))::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* ============================================
   OPEN HOUSE SECTION STYLES
   ============================================ */

/* Open House Section Background */
.openhouse-section {
  background-color: #ffffff !important;
}

/* Horizontal Separator Lines (Top and Bottom) */
.openhouse-top-line,
.openhouse-bottom-line {
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid #000000;
  opacity: 1;
}

/* Hide lines in single-works */
body.single-works .openhouse-top-line,
body.single-works .openhouse-bottom-line {
  display: none;
}

/* Related Article top line */
.related-article-top-line {
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid #000000;
  opacity: 1;
}

/* Open House Cards Grid */
.openhouse-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Individual Open House Card */
.openhouse-card {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  flex-direction: column;
}

/* Open House Card Image - Desktop */
.openhouse-card .wp-block-post-featured-image {
  margin-bottom: 0.5em;
}

/* Open House Card Title - Desktop */
.openhouse-card .wp-block-post-title {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Open House Card Title Link */
.openhouse-card .wp-block-post-title a {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  text-decoration: none;
  color: inherit;
}

/* Card Divider (between title and dates) */
.openhouse-card-divider {
  width: 100%;
  border: none;
  border-top: 1px solid #333333;
  margin: 0;
  opacity: 1;
}

/* Open House Card Content */
.openhouse-card-content {
  padding: 0 0 15px 0;
}

/* Ensure content container takes full width and aligns left in desktop */
.openhouse-card-content.wp-block-group {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Open House Location Block */
.openhouse-location {
  margin-bottom: 0;
}

/* Remove location margin-bottom in mobile */
@media (max-width: 768px) {
  .openhouse-location {
    margin-bottom: 0;
  }

  /* Single Works - Open House Section margin adjustments */
  body.single-works .openhouse-location {
    margin-bottom: 4px !important;
  }

  body.single-works .openhouse-title {
    margin-bottom: 4px !important;
  }
}

.openhouse-card-content .openhouse-location__content {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Meiryo, system-ui, -apple-system, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  color: #000000;
}

/* Open House Dates Block */
.openhouse-dates {
  margin-top: 5px;
}

.openhouse-card-content .openhouse-dates__content {
  font-size: 14px;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  margin: 0;
  color: #000000;
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
  /* Mobile: Horizontal card layout */
  .openhouse-cards-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .openhouse-card {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
    flex-direction: row;
    gap: 15px;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    max-width: 100%;
    overflow: hidden;
  }

  /* Image on left - 45% of container width, maintains 4:3 aspect ratio */
  .openhouse-card .wp-block-post-featured-image {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%;
    width: 45%;
    min-width: 45%;
  }

  /* Content on right - 55% of container width */
  .openhouse-card-content {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 55%;
            flex: 0 0 55%;
    width: 55%;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Alinear location con top de imagen */
  .openhouse-card .openhouse-card-content .openhouse-location {
    margin-top: 0;
    margin-bottom: 5px;
  }

  /* Ajustar título */
  .openhouse-card .openhouse-card-content .openhouse-title {
    margin-top: 0;
    margin-bottom: 5px;
  }

  /* Ajustar fechas */
  .openhouse-card .openhouse-card-content .openhouse-dates {
    margin-top: 8px;
    margin-bottom: 0;
  }

  /* Limit content height to match image height in mobile */
  .openhouse-card .openhouse-card-content.wp-block-group {
    max-height: 100%;
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  /* Add margin between location and title */
  .openhouse-card-content .wp-block-post-title {
    margin-top: 10px;
  }

  /* Adjust separator lines for mobile */
  .openhouse-top-line,
  .openhouse-bottom-line {
    width: 90%;
  }
}

/* ============================================
   EVENT/WORKSHOP SECTION STYLES (Top Page)
   ============================================ */

/* EVENT/WORKSHOP Title - Mobile specific font size */
@media (max-width: 768px) {
  h2.event-workshop-title.has-en-serif-font-family {
    font-size: 30px !important;
  }
}

/* Workshop Card Content Container */
.workshop-card-content {
  padding: 0;
  margin-top: 15px;
}

.workshop-card-content.wp-block-group {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Workshop Location Text */
.workshop-card-content .workshop-location__content {
  font-size: 13px;
  letter-spacing: 0.05em;
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Meiryo, system-ui, -apple-system, sans-serif;
  margin-top: 0;
  margin-bottom: 0;
  color: #000000;
}

/* Workshop Card Title (h3) */
.workshop-card-title {
  font-size: 14px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 10px;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
}

.workshop-card-title a {
  font-size: 14px;
  font-weight: 400;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  text-decoration: none;
  color: inherit;
}

/* Workshop Card Divider (horizontal line) */
.workshop-card-divider {
  width: 100%;
  border: none;
  border-top: 1px solid #333333;
  margin-top: 0;
  margin-bottom: 10px;
  opacity: 1;
}

@media (max-width: 768px) {
  .workshop-card-divider {
    margin-bottom: 3px;
  }
}

/* Workshop Dates Text */
.workshop-card-content .workshop-dates__content {
  font-size: 14px;
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
  margin-top: 0;
  margin-bottom: 0;
  color: #000000;
}

/* President Message - Handwritten Style */
.president-message .handwritten-style {
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
}

/* President Message Image */
.president-message-image {
  margin: 0;
  padding: 0;
}

.president-message-logo {
  width: 250px;
  height: 90px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .president-message .wp-block-columns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
  }

  .president-message .handwritten-style {
    font-size: 24px !important;
    text-align: center;
  }

  .president-message-logo {
    width: 165px;
    height: 60px;
  }
}

/* CSR Images */
.csr-image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Office Building Image */
.office-building {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.office-building img {
  width: 100%;
  height: auto;
  display: block;
}

/* Recruit Section Button */
.recruit-btn .wp-block-button__link {
  font-weight: 400;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.recruit-btn .wp-block-button__link:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* ================================
   Staff Carousel - Reutilizable
================================ */

.staff-carousel {
  width: 100%;
}

.staff-carousel .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Desktop: Dimensiones fijas 329px x 372px */
@media (min-width: 769px) {
  .staff-carousel .wp-block-post-template > li {
    width: 329px;
    height: 372px;
  }
}

.staff-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.staff-card:hover {
  -webkit-transform: translateY(-8px);
      -ms-transform: translateY(-8px);
  transform: translateY(-8px);
}

.staff-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.staff-card .wp-block-post-featured-image figure,
.staff-card .wp-block-post-featured-image a {
  width: 100%;
  height: 100%;
  display: block;
}

.staff-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.staff-card:hover .wp-block-post-featured-image img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
  transform: scale(1.05);
}

/* Staff info overlay */
.staff-card .staff-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.79);
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  text-align: center;
}

@media (min-width: 769px) {
  .staff-card:hover .staff-info {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}

/* Mobile: Staff info siempre visible */
@media (max-width: 768px) {
  .staff-card .staff-info {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
}

/* Arrow pseudo-element */
.staff-card .staff-info::before {
  content: '→';
  position: absolute;
  right: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 20px;
  color: #333;
}

.staff-card .wp-block-post-title {
  text-decoration: none;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.staff-card .wp-block-post-title a {
  text-decoration: none;
  color: inherit;
}

.staff-card .wp-block-post-title a:hover {
  color: #666;
}

/* Responsive: 4 columnas en tablets */
@media (max-width: 1024px) {
  .staff-carousel .wp-block-post-template {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

/* Responsive: 3 columnas en tablets pequeñas */
@media (max-width: 768px) {
  .staff-carousel .wp-block-post-template {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .staff-card .wp-block-post-title {
    font-size: 14px;
  }
}

/* Responsive: 2 columnas en móviles */
@media (max-width: 480px) {
  .staff-carousel .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .staff-card p {
    font-size: 10px;
  }

  .staff-card .wp-block-post-title {
    font-size: 12px;
  }
}

@media (min-width: 769px) {
  .csr-activity-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .profile-section,
  .staff-intro-section,
  .csr-activity-section,
  .project-section,
  .news-section,
  .president-message {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .company-projects-section-wrapper {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .company-anchor-menu {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  h2.has-en-serif-font-family {
    font-size: 25px !important;
  }

  h3.has-en-serif-font-family {
    font-size: 20px !important;
  }
}

/* ================================
   Staff Archive Page (スタッフ紹介)
================================ */

/* Vertical Text Label */
.vertical-text-label {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
}

/* Staff Grid Layout */
.staff-grid-wrapper {
  max-width: 1163px;
  margin: 0 auto;
  padding: 0 24px;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .staff-grid-wrapper {
    padding: 0;
  }

  .staff-grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
}

/* Staff Card */
.staff-card {
  position: relative;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  overflow: visible;
  background: transparent;
}

.staff-card:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

/* Staff Card Image */
.staff-card .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}

.staff-card .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.staff-card:hover .wp-block-post-featured-image img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
  transform: scale(1.05);
}

/* Staff Info Overlay */
.staff-card .staff-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px 20px 7px;
  opacity: 0;
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  pointer-events: none;
}

/* Desktop: Mostrar overlay en hover */
@media (min-width: 769px) {
  .staff-card:hover .staff-info {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Móvil: Overlay siempre visible */
@media (max-width: 768px) {
  .staff-info {
    padding: 4px !important;
  }

  .staff-card .staff-info {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
    transform: translateY(0);
    pointer-events: auto;
    background: rgba(248, 248, 248, 0.95);
    margin-top: 0;
  }
}

/* Staff Role */
.staff-role {
  font-size: 11px;
  font-family: var(--wp--preset--font-family--ja-serif);
  line-height: 1.4;
  margin: 0 !important;
  letter-spacing: 0.05em;
}

/* Staff Name */
.staff-name {
  font-size: 16px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 500;
  margin: 0 !important;
  color: #000;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .staff-name {
    font-size: 15px;
  }
}

/* Staff More Button (Arrow) */
.staff-more-btn {
  position: absolute;
  bottom: 16px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #000;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  -o-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  padding: 0;
  font-weight: 300;
}

.staff-card:hover .staff-more-btn {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
  transform: translateX(5px);
}

/* Hidden Data (JSON) - Legacy, no longer used */
.staff-data {
  display: none;
}

/* ================================
   Staff Modal
================================ */

.staff-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.staff-modal.active {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
}

.staff-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.staff-modal-content {
  position: relative;
  background: white;
  max-width: 1000px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 2;
  margin: 20px;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .staff-modal-content {
    width: 95%;
    max-height: 95vh;
    margin: 10px;
  }
}

.staff-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  color: #000;
  z-index: 10;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  transition: color 0.2s ease;
  padding: 0;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
}

.staff-modal-close:hover {
  color: #999;
}

/* Modal Inner: Horizontal Layout (Desktop) */
.staff-modal-inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  min-height: 500px;
}

@media (max-width: 768px) {
  .staff-modal-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
    min-height: auto;
  }
}

/* Modal Photo */
.staff-modal-photo {
  -webkit-box-flex: 0;
     -moz-box-flex: 0;
      -ms-flex: 0 0 45%;
  flex: 0 0 45%;
  background: #f5f5f5;
}

@media (max-width: 768px) {
  .staff-modal-photo {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

.staff-modal-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .staff-modal-photo img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Modal Info */
.staff-modal-info {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  padding: 50px 50px 50px 50px;
  font-family: var(--wp--preset--font-family--ja-serif);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .staff-modal-info {
    padding: 32px 24px;
  }
}

/* Modal Name */
.staff-modal-name {
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.staff-name-label {
  display: block;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.05em;
}

.staff-modal-name h2 {
  font-size: 26px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 500;
  margin: 0;
  color: #000;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .staff-modal-name {
    margin-bottom: 30px;
    padding-bottom: 16px;
  }

  .staff-modal-name h2 {
    font-size: 22px;
  }
}

/* Modal Sections */
.staff-modal-section {
  margin-bottom: 32px;
}

.staff-modal-section:last-child {
  margin-bottom: 0;
}

.staff-modal-section h3 {
  font-size: 15px;
  font-family: var(--wp--preset--font-family--ja-sans);
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #000;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .staff-modal-section h3 {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

.staff-modal-section p {
  font-size: 14px;
  line-height: 1.9;
  font-family: var(--wp--preset--font-family--ja-serif);
  margin: 0;
  color: #444;
  white-space: pre-wrap;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .staff-modal-section {
    margin-bottom: 28px;
  }

  .staff-modal-section p {
    font-size: 13px;
    line-height: 1.8;
  }
}

/* Hide empty sections */
.staff-modal-section:empty {
  display: none;
}

/* ================================
   Recruit Section (in Staff Archive)
================================ */

.recruit-section {
  text-align: center;
}

.recruit-form-btn .wp-block-button__link {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  background: white;
  color: #000;
  border: 1px solid #000;
  border-radius: 4px;
  padding: 20px 40px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.recruit-form-btn .wp-block-button__link:hover {
  background: #000;
  color: #fff;
}

@media (max-width: 768px) {
  .recruit-form-btn .wp-block-button__link {
    font-size: 14px;
    padding: 16px 32px;
  }
}

/* Accessibility: Prevent body scroll when modal is open */
body.staff-modal-open {
  overflow: hidden;
}

/* ================================
   Breadcrumb (Staff & Company)
================================ */

.breadcrumb-wrapper {
  width: 100%;
  padding: 40px 0;
  background: transparent;
}

.breadcrumb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.breadcrumb {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 10px !important;
  letter-spacing: 0.05em;
  line-height: 1;
}

.breadcrumb a {
  color: #000;
  text-decoration: none;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.breadcrumb a:hover {
  opacity: 0.6;
}

.breadcrumb-separator {
  margin: 0 8px;
  color: #000;
}

.breadcrumb-current {
  color: #666;
}

@media (max-width: 768px) {
  .breadcrumb-wrapper {
    padding: 24px 0;
  }

  .breadcrumb-container {
    padding: 0 18px;
  }
}



/* ================================
   Stories Archive Styles
   ストーリーアーカイブのスタイル
   ================================ */

/* Vertical Text */
.stories-archive-vertical-text {
  position: absolute;
  top: 0;
  right: 138px;
  margin: 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.4em;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Meiryo, system-ui, -apple-system, sans-serif;
}

/* Stories Archive H1 */
.post-type-archive-stories .wp-block-heading {
  font-size: 32px;
}

/* Stories Grid */
.stories-archive-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 80px;
}

/* Force square 1:1 aspect ratio on grid items (li elements) */
.stories-archive-grid .wp-block-post-template > li {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Story Card must fill the li parent */
.stories-archive-card {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Cover block must fill parent's constrained dimensions */
.stories-archive-card__cover {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
  align-items: flex-end;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Ensure featured image covers the entire card area */
.stories-archive-card__cover .wp-block-cover__image-background {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

/* Custom overlay for Stories cards */
.stories-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Image zoom effect on hover */
.stories-archive-card:hover .wp-block-cover__image-background {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.stories-archive-card__cover .wp-block-cover__inner-container {
  width: 100%;
}

/* Card Line Separator */
.stories-archive-card__line {
  border-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

/* Archive: Lead text size adjustment */
.stories-archive-card .story-lead-text__content {
  font-size: 11px;
  line-height: 1.6;
  color: #ffffff;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', Meiryo, system-ui, -apple-system, sans-serif;
  text-align: left;
  /* Truncate to 2 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Archive: Post title truncation - 2 lines */
.stories-archive-card .wp-block-post-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  .stories-archive-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .stories-archive-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 20px;
    row-gap: 7px;
  }

  .stories-archive-vertical-text {
    position: absolute;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    text-align: left;
    right: 22px;
    top: 0;
    margin-bottom: 20px;
  }

  .stories-archive-card__cover {
    min-height: 350px !important;
  }

  /* Container padding adjustment for mobile */
  .post-type-archive-stories .wp-block-group.alignfull {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ========================================
   Archive Pagination (Stories, Works, CSR, Projects, etc.)
   ======================================== */

/* Unified pagination styles for all custom post type archives */
.stories-pagination,
.works-pagination,
.post-type-archive-csr .wp-block-query-pagination,
.post-type-archive-projects .wp-block-query-pagination,
.post-type-archive-openhouse .wp-block-query-pagination,
.post-type-archive-event .wp-block-query-pagination {
  text-align: center;
  margin-top: 0;
  margin-bottom: 120px;
}

.stories-pagination .page-numbers,
.works-pagination .page-numbers,
.post-type-archive-csr .wp-block-query-pagination .page-numbers,
.post-type-archive-projects .wp-block-query-pagination .page-numbers,
.post-type-archive-openhouse .wp-block-query-pagination .page-numbers,
.post-type-archive-event .wp-block-query-pagination .page-numbers {
  display: inline-block;
  margin: 0 0.65rem;
  text-decoration: none;
  color: #898989;
  font-family: 'Kumbh Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
}

.stories-pagination .current,
.works-pagination .current,
.post-type-archive-csr .wp-block-query-pagination .current,
.post-type-archive-projects .wp-block-query-pagination .current,
.post-type-archive-openhouse .wp-block-query-pagination .current,
.post-type-archive-event .wp-block-query-pagination .current {
  color: #000000;
}

@media (max-width: 768px) {
  .stories-pagination,
  .works-pagination,
  .post-type-archive-csr .wp-block-query-pagination,
  .post-type-archive-projects .wp-block-query-pagination,
  .post-type-archive-openhouse .wp-block-query-pagination,
  .post-type-archive-event .wp-block-query-pagination {
    margin-bottom: 120px;
  }
}

/* ========================================
   CSR Archive Styles (Works-style Grid)
   ======================================== */

/* H1 Title - same as Works/Stories */
.post-type-archive-csr .csr-hero__title {
  font-size: 32px;
}

/* Grid layout - same as Works */
.csr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
  column-gap: 16px;
  row-gap: 0;
  max-width: var(--wp--custom--container-max);
  margin-inline: auto;
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .csr-grid {
    grid-template-columns: 1fr;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 0;
  }
}

/* Override WordPress block-gap */
.wp-block-post-template.csr-grid {
  --wp--style--block-gap: 0;
  gap: 0;
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
  column-gap: 16px;
  row-gap: 0;
}

@media (max-width: 768px) {
  .wp-block-post-template.csr-grid {
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 0;
  }
}

/* Image aspect ratio - same as Works */
.csr-grid img {
  aspect-ratio: 377 / 275;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .csr-grid img {
    aspect-ratio: 360 / 242;
  }
}

/* Card content area */
.csr-grid .csr-card__content {
  padding-bottom: 5px;
}

@media (max-width: 768px) {
  .csr-grid .csr-card__content {
    min-height: 110px;
    padding-bottom: 5px;
  }
}

/* Remove default margins from featured image */
.csr-grid .wp-block-post-featured-image {
  margin: 0;
}

/* Card title - same styling as Works */
.csr-grid .wp-block-post-title {
  font-family: var(--wp--custom--card--title-font-family);
  font-size: var(--wp--custom--card--title-font-size-pc);
  font-weight: var(--wp--custom--card--title-font-weight);
  line-height: var(--wp--custom--card--title-line-height);
  letter-spacing: var(--wp--custom--card--title-letter-spacing);
  color: var(--wp--custom--card--title-color);
  margin-top: 16px;
}

@media (max-width: 768px) {
  .csr-grid .wp-block-post-title {
    font-size: var(--wp--custom--card--title-font-size-sp);
  }
}

/* Card bottom margin */
.csr-grid .wp-block-post {
  margin-bottom: 80px;
}

@media (max-width: 768px) {
  .csr-grid .wp-block-post {
    margin-bottom: 60px;
  }
}

/* Tags/Categories styling */
.csr-grid .csr-card__tags {
  margin-top: var(--wp--custom--tag--margin-top-pc);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--wp--custom--tag--gap-y) var(--wp--custom--tag--gap-x);
}

.csr-grid .csr-card__tags a {
  font-family: var(--wp--custom--tag--font-family);
  font-size: var(--wp--custom--tag--font-size-pc);
  color: var(--wp--custom--tag--color);
  letter-spacing: var(--wp--custom--tag--letter-spacing);
  line-height: var(--wp--custom--tag--line-height);
  text-decoration: none;
}

@media (max-width: 768px) {
  .csr-grid .csr-card__tags {
    margin-top: var(--wp--custom--tag--margin-top-sp);
  }

  .csr-grid .csr-card__tags a {
    font-size: var(--wp--custom--tag--font-size-sp);
  }
}



/* ================================
   Stories Single Styles
   ストーリーシングルのスタイル
   ================================ */

/* Hero: padding-topを削除（featured imageが上端から開始） */
body.single-stories {
  padding-top: 0;
}

/* Lead Text Section の調整 */
.single-stories .has-gray-100-background-color p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Content section のスペーシング調整 */
.single-stories .wp-block-post-content > * + * {
  margin-top: 2em;
}

.single-stories .wp-block-post-content img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Story Content - padding lateral 24px total (body 10px + content 14px) */
body.single-stories .wp-block-post-content {
  padding-left: 14px;
  padding-right: 14px;
  max-width: 860px;
}

/* Contact Section - Quitar overlay oscuro */
body.single-stories .story-contact .wp-block-cover__background.has-background-dim {
  display: none;
}

body.single-stories .story-contact.wp-block-cover::before {
  background-color: transparent;
}

/* Responsive adjustments for Stories Single */
@media (max-width: 768px) {
  .single-stories .wp-block-cover {
    min-height: 50vh;
  }

  .single-stories .wp-block-group[style*="padding-top:80px"] {
    padding-top: 60px;
  }

  .single-stories .wp-block-group[style*="padding-bottom:80px"] {
    padding-bottom: 60px;
  }
}

/* ========================================
   CONTACT PAGE STYLES
   ======================================== */

/* Remove body padding-top for Contact page */
body.page-template-page-contact {
  padding-top: 0;
}

/* Contact Hero Section */
.contact-hero {
  position: relative;
  background-color: #f5f5f5;
}

/* Fix cover block background span z-index to allow clicking links */
.contact-hero .wp-block-cover__background {
  z-index: 0;
}

/* Hero Content Container - Full width for absolute positioning */
.contact-hero-content-full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Vertical Links Container - Centered */
.contact-vertical-links-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 17px;
}

/* FAQ Link - Bottom right corner */
.contact-faq-link-wrapper {
  position: absolute;
  bottom: 40px;
  right: 60px;
}

.contact-link {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  text-orientation: upright;
  text-decoration: none;
  color: #999;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
  position: relative;
  cursor: pointer;
  padding-right: 13px;
  height: 150px;
}

/* Vertical bar to the left of text */
.contact-link::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #ddd;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.contact-link:hover {
  color: #333;
}

.contact-link:hover::before {
  background-color: #999;
}

.contact-link.active {
  color: #333;
  font-weight: 500;
}

.contact-link.active::before {
  background-color: #333;
  width: 2px;
}

.contact-link:first-child::after {
  content: '';
  position: absolute;
  right: 50px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #ddd;
  -webkit-transition: background-color 0.3s 
ease;
  -o-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s 
ease;
  transition: background-color 0.3s 
ease;
}

/*.contact-link:first-child.active::after {
  background-color: #333;
  width: 2px;
}*/

.contact-link__text {
  display: inline-block;
}

/* FAQ Link */
.contact-faq-link {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #333;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  display: inline-block;
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
  position: relative;
  padding-right: 20px;
}

/* Arrow down triangle */
.contact-faq-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #333;
  -webkit-transition: border-top-color 0.3s ease;
  -o-transition: border-top-color 0.3s ease;
  transition: border-top-color 0.3s ease;
}

.contact-faq-link:hover {
  opacity: 0.7;
}

.contact-faq-link:hover::after {
  border-top-color: rgba(51, 51, 51, 0.7);
}

/* Decorative Green Background Section - Before Forms */
.contact-green-background {
  height: 300px;
  background-image: url('assets/images/cta-rfi-bg_pc.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Forms Section - White background only */
.contact-forms-container {
  position: relative;
  background-color: #ffffff;
}

/* Ensure white background is maintained */
.contact-forms-container.has-white-background-color {
  background-color: #ffffff;
}

/* Override gray background from .page .contact-form-wrapper with higher specificity */
.page-template-page-contact .contact-form-wrapper {
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  background-color: #ffffff;
  background: #ffffff;
  padding: 40px;
  border-radius: 8px;
}

.page-template-page-contact .contact-form-wrapper.active {
  display: block;
  opacity: 1;
}

.page-template-page-contact .contact-form-header {
  text-align: center;
  margin-bottom: 60px;
  background-color: #ffffff;
}

.pamphlet-image {
  margin-bottom: 40px;
  min-height: 200px;
  background: transparent;
  border-radius: 8px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
}

.contact-form-title {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 29px;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  color: #333;
}

.contact-form-subtitle {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
  margin: 0;
}

/* Contact Form 7 Styling */
.contact-form-wrapper .wpcf7-form {
  max-width: 100%;
}

.contact-form-wrapper .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea,
.contact-form-wrapper select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  background: #fff;
  -webkit-transition: border-color 0.3s ease;
  -o-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.page-template-page-contact .contact-form-wrapper input[type="text"],
.page-template-page-contact .contact-form-wrapper input[type="email"],
.page-template-page-contact .contact-form-wrapper input[type="tel"],
.page-template-page-contact .contact-form-wrapper textarea,
.page-template-page-contact .contact-form-wrapper select {
  border: 1px solid #F5F5F5;
  background: #F5F5F5;
}

.contact-form-wrapper input[type="text"]:focus,
.contact-form-wrapper input[type="email"]:focus,
.contact-form-wrapper input[type="tel"]:focus,
.contact-form-wrapper textarea:focus,
.contact-form-wrapper select:focus {
  outline: none;
  border-color: #333;
}

.contact-form-wrapper textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form-wrapper label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  color: #333;
}

.contact-form-wrapper p {
  margin-bottom: 24px;
}

.contact-form-wrapper .wpcf7-submit {
  width: 100%;
  max-width: 400px;
  margin: 40px auto 0;
  display: block;
  padding: 16px 50px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 15px;
  letter-spacing: 0.1em;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.contact-form-wrapper .wpcf7-submit:hover {
  background: #555;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .contact-vertical-links-wrapper {
    top: 40%;
    gap: 17px;
  }

  .contact-link {
    font-size: 13px;
    padding-right: 13px;
  }

  .contact-link::before {
    width: 1px;
  }

  .contact-link.active::before {
    width: 2px;
  }

  .contact-faq-link-wrapper {
    bottom: 30px;
    right: 30px;
  }

  .contact-faq-link {
    font-size: 12px;
  }

  .contact-forms-container {
    background-image: none;
    background-color: #fff;
  }

  .page-template-page-contact .contact-form-header {
    margin-bottom: 40px;
  }

  .page-template-page-contact .contact-form-title {
    font-size: 25px;
  }

  .page-template-page-contact .contact-form-subtitle {
    font-size: 11px;
  }

  .pamphlet-image {
    min-height: 150px;
    margin-bottom: 30px;
  }

  .page-template-page-contact .contact-form-wrapper .wpcf7-submit {
    max-width: 100%;
  }

  .contact-form-wrapper input[type="text"],
  .contact-form-wrapper input[type="email"],
  .contact-form-wrapper input[type="tel"],
  .contact-form-wrapper textarea,
  .contact-form-wrapper select {
    font-size: 11px;
  }
}

/* ========================================
   CONTACT FORM 7 CUSTOM STYLES
   ======================================== */

.iemoto-contact-form {
  width: 100%;
}

.iemoto-contact-form .form-row {
  margin-bottom: 24px;
}

.iemoto-contact-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  font-weight: 500;
  color: #333;
  text-align: left;
}

.iemoto-contact-form label.reservation-privacy-checkbox-label {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.iemoto-contact-form .required {
  color: #d32f2f;
  margin-left: 4px;
}

.iemoto-contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.iemoto-contact-form .form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 15px;
  background: #fafafa;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.page-template-page-contact .iemoto-contact-form .form-input {
  border: 1px solid #F5F5F5;
  background: #F5F5F5;
}

.iemoto-contact-form .form-input:focus {
  outline: none;
  border-color: #333;
  background: #fff;
}

.page-template-page-contact .iemoto-contact-form .form-input:focus {
  border-color: #969696;
  background: #F7F7F7;
}

.iemoto-contact-form textarea.form-input {
  min-height: 150px;
  resize: vertical;
}

.iemoto-contact-form select.form-input {
  cursor: pointer;
}

/* Postal Code Row */
.postal-row .postal-input-group {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
}

.postal-row .postal-input {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  max-width: 200px;
}

.address-search-btn {
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.address-search-btn:hover {
  background: #333;
}

.address-search-btn:disabled {
  background: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Submit Button */
.iemoto-contact-form .form-submit {
  text-align: center;
  margin-top: 40px;
}

.iemoto-contact-form .submit-btn {
  min-width: 300px;
  padding: 18px 60px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  position: relative;
}

.iemoto-contact-form .submit-btn:hover {
  background: #333;
}

.iemoto-contact-form .submit-btn:disabled {
  background: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Contact Form 7 Validation */
.iemoto-contact-form .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #d32f2f;
  margin-top: 4px;
  display: block;
}

.iemoto-contact-form .wpcf7-not-valid {
  border-color: #d32f2f;
  background: #fff5f5;
}

.iemoto-contact-form .wpcf7-response-output {
  margin: 20px 0;
  padding: 16px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

.iemoto-contact-form .wpcf7-validation-errors {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

.iemoto-contact-form .wpcf7-mail-sent-ok {
  background: #d4edda;
  border: 1px solid #28a745;
  color: #155724;
}

.iemoto-contact-form .wpcf7-mail-sent-ng {
  background: #f8d7da;
  border: 1px solid #dc3545;
  color: #721c24;
}

.iemoto-contact-form .wpcf7-spam-blocked {
  background: #fff3cd;
  border: 1px solid #ffc107;
  color: #856404;
}

/* Pamphlet Image */
.contact-form-header .pamphlet-image {
  margin: 0 auto 40px;
  width: 100%;
  max-width: 500px;
  height: 300px;
  background-image: url('assets/images/cta-rfi_pc.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 8px;
}

/* CF7 Spinner */
.iemoto-contact-form .wpcf7-spinner {
  margin-left: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .postal-row .postal-input-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
    align-items: stretch;
  }

  

  .postal-row .postal-input {
    max-width: 100%;
  }

  .address-search-btn {
    width: 100%;
  }

  .iemoto-contact-form .submit-btn {
    min-width: 100%;
    padding: 16px 40px;
  }

  .contact-form-header .pamphlet-image {
    height: 200px;
    margin-bottom: 30px;
  }

  .iemoto-contact-form .form-row {
    margin-bottom: 20px;
  }

  .iemoto-contact-form label {
    font-size: 11px;
  }
}

@media (min-width: 769px) {
  .iemoto-contact-form .form-row {
    margin-bottom: 30px;
  }
}

/* ============================================
   CSR Archive Styles
   ============================================ */

/* Hero Section */
.csr-hero {
  position: relative;
  margin-bottom: 80px;
  padding-top: 0; /* Override header padding */
}

/* Override body padding for CSR archive */
body.post-type-archive-csr .csr-hero {
  margin-top: calc(-1 * (var(--iemoto-logo-pc) + var(--iemoto-header-pad-top-pc)));
}

.csr-hero .wp-block-cover__inner-container {
  position: absolute;
  bottom: 60px;
  left: 80px;
  right: auto;
  width: auto;
}

.csr-hero .csr-hero__title {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* CSR Archive Container */
.csr-archive-container {
  margin-bottom: 80px;
  padding: 0 20px;
}

/* Old CSR grid and pagination styles removed - now using unified styles from lines 3302-3430 */

/* RECRUIT Block */
.recruit-block {
  margin: 0;
  background: #fff;
  padding: 0;
}

/* Image at the top */
.recruit-block__image {
  margin: 0 auto 60px;
  text-align: center;
  max-height: 450px;
  overflow: hidden;
}

.recruit-block__image img {
  width: 100%;
  height: 450px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}

.recruit-block__content {
  padding: 0 20px 80px;
  text-align: center;
}

.recruit-block__title {
  margin: 0 0 16px 0;
  color: #333;
}

.recruit-block__subtitle {
  margin: 0 0 40px 0;
  color: #333;
}

.recruit-block__text {
  margin: 0 0 40px 0;
  color: #666;
}

.recruit-block__btn .wp-block-button__link {
  padding: 16px 50px;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.recruit-block__btn .wp-block-button__link:hover {
  background: #fff;
  color: #000;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  /* Override header padding for mobile too */
  body.post-type-archive-csr .csr-hero {
    margin-top: calc(-1 * (var(--iemoto-logo-sp) + var(--iemoto-header-pad-top-sp)));
  }

  .csr-hero {
    margin-bottom: 40px;
  }

  body.post-type-archive-csr .csr-hero .wp-block-cover {
    min-height: 250px;
  }

  .csr-hero .wp-block-cover__inner-container {
    bottom: 40px;
    left: 20px;
  }

  .csr-archive-container {
    margin-bottom: 40px;
    padding: 0 16px;
  }

  /* Mobile: Stack posts vertically */
  .csr-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 40px;
  }

  .csr-card__image {
    margin-bottom: 16px;
  }

  .csr-card__title {
    font-size: 15px;
  }

  .csr-pagination {
    margin: 40px 0;
    gap: 6px;
  }

  .csr-pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .recruit-block {
    margin-top: 40px;
    margin-left: -10px;
    margin-right: -10px;
  }

  .recruit-block__image {
    max-height: 180px;
    margin-bottom: 40px;
  }

  .recruit-block__image img {
    max-height: 180px;
  }

  .recruit-block__content {
    padding: 0 20px 60px;
  }

  body.post-type-archive-csr .recruit-block__title.wp-block-heading {
    font-size: 28px;
    margin-bottom: 12px;
  }

  body.post-type-archive-csr .recruit-block__subtitle.wp-block-heading {
    font-size: 16px;
    margin-bottom: 30px;
  }

  body.post-type-archive-csr .recruit-block__text.has-text-align-center {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
  }

  .recruit-block__btn .wp-block-button__link {
    padding: 14px 40px;
    font-size: 13px;
  }
}

/* ========================================
   NEWS ARCHIVE
   ======================================== */

/* Query container */
.archive.post-type-archive-news .wp-block-query {
  max-width: 900px;
  margin: 0 auto;
}

/* Border color personalizado */
.archive.post-type-archive-news .wp-block-group {
  border-bottom-color: #E5E5E5;
}

/* Paginación */
.archive.post-type-archive-news .wp-block-query-pagination {
  margin-top: 60px;
}

.archive.post-type-archive-news .wp-block-query-pagination a {
  color: #333;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 14px;
  letter-spacing: 0.1em;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.archive.post-type-archive-news .wp-block-query-pagination a:hover {
  color: #666;
}

.archive.post-type-archive-news .wp-block-query-pagination .page-numbers.current {
  color: #000;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
  .archive.post-type-archive-news .wp-block-query {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ========================================
   NEWS SINGLE
   ======================================== */

.single-news .news-hero {
  height: 340px;
  padding-top: 245px !important;
  padding-bottom: 0px !important;
}

/* Hero con SNS icons */
.single-news .news-hero__container, .single-news .news-hero__container2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
}
.single-news .news-hero__container2 {
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  height: 102px;
  padding-right: 20px;
}

.single-news .news-hero__title {
  margin: 0;
}

.single-news .news-hero__sns {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.single-news .news-hero__sns-label {
  margin: 0;
  margin-right: 10px;
  font-size: 14px !important;
}

.single-news .news-hero__sns a {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  line-height: 1;
}

.single-news .news-hero__sns a:hover {
  opacity: 0.6;
}

.single-news .post-content-container h1 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 20px;
  line-height: 1.8;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 400;
  padding-left: 20px;
}

/* Content Area Typography */
.single-news .post-content-container .wp-block-post-content h1 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 20px;
  line-height: 1.8;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 400;
}

.single-news .post-content-container .wp-block-post-content h2 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 18px;
  line-height: 1.8;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 400;
}

.single-news .post-content-container .wp-block-post-content h3 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 16px;
  line-height: 1.8;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 400;
}

.single-news .post-content-container .wp-block-post-content p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.single-news .post-content-container .wp-block-post-content img {
  width: 100%;
  height: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Post Navigation */
.single-news .post-navigation {
  background-color: #FFFFFF;
}

.single-news .post-navigation__inner {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 40px;
}

.single-news .post-navigation a {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  color: #333;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.single-news .post-navigation a:hover {
  color: #666;
}

.single-news .post-navigation__prev {
  text-align: left;
}

.single-news .post-navigation__prev p {
  margin: 0;
}

.single-news .post-navigation__next {
  text-align: right;
}

.single-news .post-navigation__next p {
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .single-news .news-hero {
    padding-top: 240px !important;
    padding-bottom: 0px !important;
    padding-left: 25px !important;
  }

  .wp-block-group.news-hero__container2 {
    height: 50px;
    padding-right: 15px !important;
  }

  .single-news .news-hero__container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    gap: 20px;
  }

  .single-news .news-hero__sns {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
  .single-news .news-hero__sns-label {
    font-size: 11px !important;
  }

  .single-news .post-content-container {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .single-news .post-content-container h1 {
    font-size: 20px;
    padding-left: 15px;
  }
  
  .single-news .post-content-container .wp-block-post-content h1 {
    font-size: 18px;

  }

  .single-news .post-content-container .wp-block-post-content h2 {
    font-size: 16px;
  }

  .single-news .post-content-container .wp-block-post-content h3 {
    font-size: 14px;
  }

  .single-news .post-navigation__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
  }

  .single-news .post-navigation__next {
    text-align: left;
  }
}

/* ========================================
   404 ERROR PAGE
   ======================================== */

/* Remove default body padding-top for 404 page */
body.error404 {
  padding-top: 0;
}

/* Hero Section */
body.error404 .error-404-hero {
  position: relative;
  background-color: #F7F7F7;
}

/* Logo Image */
body.error404 .error-404-hero__logo {
  margin-bottom: 0;
}

body.error404 .error-404-hero__logo img {
  width: 400px;
  height: auto;
}

/* Title */
body.error404 .error-404-hero__title {
  color: #333;
  margin-top: 40px;
  margin-bottom: 20px;
}

/* Subtitle */
body.error404 .error-404-hero__subtitle {
  color: #666;
  margin-bottom: 50px;
}

/* Button */
body.error404 .error-404-hero__button .wp-block-button__link, 
body.page-template-page-thanks .error-404-hero__button, 
body.page-template-page-thanks-event .error-404-hero__button,
body.page-template-page-thanks-request .error-404-hero__button {
  background-color: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 5px;
  color: #000000;
  width: 281px;
  height: 74px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 300;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

body.error404 .error-404-hero__button .wp-block-button__link::after, 
body.page-template-page-thanks .error-404-hero__button a::after,
body.page-template-page-thanks-event .error-404-hero__button  a::after,
body.page-template-page-thanks-request .error-404-hero__button  a::after {
  content: '→';
  font-size: 16px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

body.error404 .error-404-hero__button .wp-block-button__link:hover, 
body.page-template-page-thanks .error-404-hero__button:hover,
body.page-template-page-thanks-event .error-404-hero__button:hover,
body.page-template-page-thanks-request .error-404-hero__button:hover {
  background-color: #000000;
  color: #FFFFFF;
  border-color: #000000;
}

body.page-template-page-thanks .error-404-hero__button:hover a,
body.page-template-page-thanks-event .error-404-hero__button:hover a,
body.page-template-page-thanks-request .error-404-hero__button:hover a {
  color: #FFFFFF !important;
}

body.error404 .error-404-hero__button .wp-block-button__link:hover::after, 
body.page-template-page-thanks .error-404-hero__button:hover::after,
body.page-template-page-thanks-event .error-404-hero__button:hover::after,
body.page-template-page-thanks-request .error-404-hero__button:hover::after {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
  transform: translateX(5px);
}

/* Breadcrumb with gray background (same as hero) */
body.error404 .error-404-breadcrumb {
  background-color: #F7F7F7;
  margin: 0;
  padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
  body.error404 .error-404-hero {
    padding-top: 150px;
    padding-bottom: 80px;
  }

  body.error404 .error-404-hero__logo img {
    width: 300px;
  }

  body.error404 .error-404-hero__title {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
  }

  body.error404 .error-404-hero__subtitle {
    font-size: 13px;
    margin-bottom: 40px;
  }

  body.error404 .error-404-hero__button .wp-block-button__link {
    width: 240px;
    height: 64px;
    font-size: 13px;
  }
}

/* ========================================
   PRIVACY PAGE
   ======================================== */

/* Hero Section */
.page-template-page-privacy .privacy-hero {
  background-color: #FFFFFF;
}

.page-template-page-privacy .privacy-hero__title {
  color: #333;
  font-size: 29px !important;
}

.page-template-page-privacy .privacy-hero__subtitle {
  color: #666;
}

/* Content Area */
.page-template-page-privacy .privacy-content-container {
  font-family: var(--wp--preset--font-family--ja-serif);
}

.page-template-page-privacy .privacy-content-container h2 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #333;
}

.page-template-page-privacy .privacy-content-container h3 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #333;
}

.page-template-page-privacy .privacy-content-container p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 20px;
  color: #333;
}

.page-template-page-privacy .privacy-content-container ul,
.page-template-page-privacy .privacy-content-container ol {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 20px;
  padding-left: 30px;
  color: #333;
}

.page-template-page-privacy .privacy-content-container li {
  margin-bottom: 10px;
}

/* Breadcrumb */
.page-template-page-privacy .privacy-breadcrumb {
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .page-template-page-privacy .privacy-hero {
    padding-top: 80px;
    padding-bottom: 30px;
  }

  .page-template-page-privacy .privacy-hero__title {
    font-size: 25px !important;
    margin-bottom: 5px;
  }

  .page-template-page-privacy .privacy-hero__subtitle {
    font-size: 13px;
  }

  .page-template-page-privacy .privacy-content-container {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .page-template-page-privacy .privacy-content-container h2 {
    font-size: 18px;
  }

  .page-template-page-privacy .privacy-content-container h3 {
    font-size: 16px;
  }

  .page-template-page-privacy .privacy-content-container p {
    font-size: 14px;
  }
}


/* ================================
   Projects Archive Styles
   プロジェクトアーカイブのスタイル
   ================================ */

/* Vertical Text */
.projects-archive-vertical-text {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;
  text-orientation: mixed;
  position: absolute;
  right: 40px;
  top: 120px;
}

/* Projects Grid */
.projects-archive-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Project Card */
.projects-archive-card {
  position: relative;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.projects-archive-card:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}

.projects-archive-card__cover {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
     -moz-box-align: end;
      -ms-flex-align: end;
  align-items: flex-end;
}

.projects-archive-card__cover .wp-block-cover__inner-container {
  width: 100%;
}

/* Card Line Separator */
.projects-archive-card__line {
  border-color: rgba(255, 255, 255, 0.5);
  width: 100%;
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
  .projects-archive-grid .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .projects-archive-vertical-text {
    right: 30px;
    top: 100px;
  }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .projects-archive-grid .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .projects-archive-vertical-text {
    position: static;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    text-align: left;
    margin-bottom: 20px;
  }

  .projects-archive-card__cover {
    min-height: 350px;
  }
}

/* ================================
   Projects Single Styles
   プロジェクト個別ページのスタイル
   ================================ */

/* Hero: padding-topを削除（featured imageが上端から開始） */
body.single-projects {
  padding-top: 0;
}

/* Main Container - Override constrained to be full width */
.single-projects main.site-main {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Fix overflow in mobile - ensure alignfull doesn't cause horizontal scroll */
@media (max-width: 768px) {
  .single-projects main.site-main.alignfull,
  .single-projects .alignfull {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }

  .single-projects main.site-main.wp-block-group.alignfull {
    padding-left: 0;
    padding-right: 0;
  }
}

/* All wrapper sections should be full width */
.single-projects .story-timeline-wrapper,
.single-projects .project-gallery-wrapper,
.single-projects .project-faq-wrapper,
.single-projects .project-related-wrapper,
.single-projects .project-staff-intro-wrapper {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Lead Text Section の調整 */
.single-projects .has-gray-100-background-color p {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Content section のスペーシング調整 */
.single-projects .wp-block-post-content > * + * {
  margin-top: 2em;
}

.single-projects .wp-block-post-content img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ================================
   Hero / Featured Image Styles
   ================================ */

/* Hero Container - Full Width */
.single-projects .project-hero {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* Remove WordPress auto-margins from alignfull */
.single-projects .project-hero.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100%;
  width: 100%;
}

/* Featured Image as Hero - Full Width */
.single-projects .project-hero .wp-block-post-featured-image {
  position: relative;
  margin: 0;
  min-height: 500px;
  width: 100%;
  max-width: 100%;
}

.single-projects .project-hero .wp-block-post-featured-image img {
  width: 100%;
  height: 500px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Post Title Over Featured Image - Bottom Left */
.single-projects .project-hero .wp-block-post-title {
  position: absolute;
  bottom: 60px;
  left: 80px;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: left;
  margin: 0;
  padding: 0;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-family: var(--wp--preset--font-family--ja-serif);
}

/* Responsive Hero */
@media (max-width: 768px) {
  .single-projects .project-hero.alignfull {
    margin-left: 0;
    margin-right: 0;
  }

  .single-projects .project-hero .wp-block-post-featured-image {
    min-height: 400px;
  }

  .single-projects .project-hero .wp-block-post-featured-image img {
    height: 400px;
  }

  .single-projects .project-hero .wp-block-post-title {
    bottom: 40px;
    left: 20px;
    font-size: 24px;
    letter-spacing: 0.08em;
  }
}

/* ================================
   Lead Text Section
   ================================ */

.project-lead-text {
  width: 100%;
  background-color: #F7F7F7;
  padding: 60px 20px;
  margin: 0;
}

.project-lead-text__content {
  font-size: 16px;
  line-height: 2;
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #333;
}

@media (max-width: 768px) {
  .project-lead-text {
    padding: 40px 20px;
  }

  .project-lead-text__content {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ================================
   Timeline Section (using story-timeline classes)
   ================================ */

/* Timeline Wrapper with Background */
.single-projects .story-timeline-wrapper,
.single-stories .story-timeline-wrapper,
.story-timeline-section {
  width: 100%;
  background-color: #FFFFFF;
  padding: 80px 20px;
  margin: 0;
}

/* Timeline Header */
.single-projects .story-timeline__header {
  text-align: center;
  margin-bottom: 60px;
}

.single-projects .story-timeline__title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  color: #333;
}

.single-projects .story-timeline__subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #666;
}

.story-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 0 60px 40px;
  background-color: #ffffff;
}

.story-timeline__line {
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #333;
  z-index: 1;
}

.story-timeline__item {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  margin-bottom: 40px;
  padding-left: 0;
  opacity: 0;
  -webkit-transform: translateY(30px);
      -ms-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  -o-transition: opacity 0.6s ease, transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease, -webkit-transform 0.6s ease;
}

.story-timeline__item:last-child {
  margin-bottom: 0;
}

.story-timeline__item.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
  transform: translateY(0);
}

.story-timeline__marker {
  position: absolute;
  left: -20px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.story-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  border: none;
}

.story-timeline__number {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  font-family: var(--wp--preset--font-family--en-serif);
  letter-spacing: 0.05em;
  line-height: 1;
  padding-right: 20px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
}

.story-timeline__content {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px 30px;
  border-radius: 0;
  margin-left: 10px;
}

.story-timeline__note {
  font-size: 15px;
  color: #333;
  margin: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* Timeline Responsive */
@media (max-width: 768px) {
  .story-timeline {
    padding: 40px 0 40px 20px;
  }

  .story-timeline__line {
    left: 15px;
  }

  .story-timeline__marker {
    left: -5px;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .story-timeline__dot {
    width: 8px;
    height: 8px;
    border: none;
  }

  .story-timeline__number {
    width: 40px;
    font-size: 12px;
    line-height: 1;
    padding-right: 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
  }

  .story-timeline__content {
    margin-left: 10px;
    padding: 15px 20px;
  }

  .story-timeline__note {
    font-size: 14px;
  }

  .story-timeline__item {
    margin-bottom: 30px;
  }
}

/* ================================
   Gallery Section
   ================================ */

/* Gallery Wrapper with Background */
.single-projects .project-gallery-wrapper,
.single-stories .project-gallery-wrapper {
  width: 100%;
  background-color: #F7F7F7;
  padding: 80px 0;
  margin: 0;
}

.project-gallery {
  margin: 0 auto;
  padding: 0;
}

.project-gallery__title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  color: #333;
}

.project-gallery__subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 60px;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #666;
}

/* Slider Container */
.project-gallery__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
}

.project-gallery__slides {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 7px;
  -webkit-transition: -webkit-transform 0.6s ease-in-out;
  transition: -webkit-transform 0.6s ease-in-out;
  -o-transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
}

.project-gallery__slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

/* Desktop: Multiple images side by side */
@media (min-width: 769px) {
  .project-gallery__slide {
    width: 548px;
  }
}

/* Mobile: One image at a time */
@media (max-width: 768px) {
  .project-gallery__slides {
    gap: 7px;
  }

  .project-gallery__slide {
    width: 332px;
  }
}

/* Image - 548:465 aspect ratio */
.project-gallery__image {
  width: 100%;
  aspect-ratio: 548 / 465;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.project-gallery__image:hover {
  opacity: 0.9;
}

.project-gallery__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Caption */
.project-gallery__caption {
  margin: 16px 0 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  text-align: left;
  font-family: var(--wp--preset--font-family--ja-serif);
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.project-gallery__caption:hover {
  opacity: 0.7;
}

/* Line Indicators */
.project-gallery__indicators {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.project-gallery__line {
  width: 40px;
  height: 2px;
  padding: 0;
  border: none;
  background: #ccc;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.project-gallery__line:hover {
  background: #999;
}

.project-gallery__line.is-active {
  background: #333;
}

/* Modal */
.project-gallery__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  -o-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.project-gallery__modal:not([hidden]) {
  opacity: 1;
  visibility: visible;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.project-gallery__modal[hidden] {
  display: none;
}

.project-gallery__modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
}

.project-gallery__modal-image {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Modal Close Button */
.project-gallery__close {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.project-gallery__close:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Modal Navigation Buttons - Desktop */
.project-gallery__prev,
.project-gallery__next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.project-gallery__prev:hover,
.project-gallery__next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Desktop: Botones posicionados absolute cerca de la imagen */
@media (min-width: 769px) {
  .project-gallery__modal-content {
    padding: 0 80px;
  }

  .project-gallery__prev-desktop {
    left: 30px;
  }

  .project-gallery__next-desktop {
    right: 30px;
  }

  /* Ocultar botones mobile en desktop */
  .project-gallery__modal-nav {
    display: none;
  }
}

/* Gallery Responsive */
@media (max-width: 768px) {
  /* Ocultar botones desktop en mobile */
  .project-gallery__prev-desktop,
  .project-gallery__next-desktop {
    display: none;
  }
  .single-projects .project-gallery-wrapper,
  .single-stories .project-gallery-wrapper {
    padding: 60px 20px;
  }

  .project-gallery__title {
    font-size: 28px;
  }

  .project-gallery__subtitle {
    margin-bottom: 40px;
  }

  .project-gallery__caption {
    font-size: 13px;
  }

  .project-gallery__line {
    width: 30px;
  }

  .project-gallery__close {
    width: 35px;
    height: 35px;
    font-size: 24px;
    top: 10px;
    right: 10px;
  }

  /* Mobile: Modal con box-sizing para centrar imagen */
  .project-gallery__modal {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
  }

  .project-gallery__modal-content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  .project-gallery__modal-image {
    max-width: 100%;
    max-height: 70vh;
  }

  /* Mobile: Botones abajo con space-around */
  .project-gallery__modal-nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
  }

  .project-gallery__prev,
  .project-gallery__next {
    position: static;
    -webkit-transform: none;
        -ms-transform: none;
    transform: none;
    width: 40px;
    height: 40px;
    font-size: 20px;
    margin: 0;
  }

  /* Story Gallery - Mobile Swipe/Touch Scrolling */
  .story-gallery,
  .single-stories .wp-block-gallery,
  .wp-block-gallery {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    scroll-behavior: smooth;
    gap: 10px;
    padding: 0 10px;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
  }

  .story-gallery.active,
  .single-stories .wp-block-gallery.active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
  }

  /* Gallery items */
  .story-gallery .gallery-item,
  .story-gallery .wp-block-image,
  .single-stories .wp-block-gallery .wp-block-image {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    scroll-snap-align: start;
    width: 85vw;
    max-width: 320px;
  }

  /* Hide scrollbar */
  .story-gallery::-webkit-scrollbar,
  .single-stories .wp-block-gallery::-webkit-scrollbar {
    display: none;
  }

  .story-gallery,
  .single-stories .wp-block-gallery {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}

/* ================================
   FAQ Section
   ================================ */

/* FAQ Wrapper with Background */
.single-projects .project-faq-wrapper,
.single-stories .faq-section,
.single-stories .wp-block-group.faq-section,
.story-faq,
.story-faq-section {
  width: 100%;
  background-color: #FFFFFF;
  padding: 80px 20px;
  margin: 0;
}

.project-faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.project-faq__title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  color: #333;
}

.project-faq__subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 40px;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #666;
}

.project-faq__list {
  margin-bottom: 40px;
}

.project-faq__item {
  border-bottom: 1px solid #ddd;
}

.project-faq__item:first-child {
  border-top: 1px solid #ddd;
}

.project-faq__question {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

.project-faq__question:hover {
  background-color: #f8f8f8;
}

.project-faq__question[aria-expanded="true"] {
  background-color: #f0f0f0;
}

.project-faq__q-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-sans);
}

.project-faq__toggle {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-serif);
  line-height: 1.6;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  padding-right: 30px;
}

/* Toggle Icon (+ / -) */
.project-faq__toggle::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 24px;
  font-weight: 300;
  color: #333;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.project-faq__question[aria-expanded="true"] .project-faq__toggle::after {
  content: '−';
}

.project-faq__answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
  -webkit-transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
  -o-transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.project-faq__answer[hidden] {
  display: block;
}

.project-faq__answer:not([hidden]) {
  max-height: 1000px;
  opacity: 1;
  padding: 20px 24px 24px 24px;
}

.project-faq__answer-content {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
  align-items: flex-start;
  gap: 12px;
}

.project-faq__a-label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-sans);
}

.project-faq__answer p {
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
}

.project-faq__cta {
  text-align: center;
  margin-top: 40px;
}

.project-faq__button {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-family: var(--wp--preset--font-family--ja-serif);
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.2s ease;
  -o-transition: background-color 0.2s ease, transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease;
  transition: background-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
  border-radius: 4px;
}

.project-faq__button:hover {
  background-color: #555;
  -webkit-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  color: #fff;
}

/* FAQ Responsive */
@media (max-width: 768px) {
  .project-faq {
    margin: 60px auto;
  }

  .project-faq__title {
    font-size: 28px;
  }

  .project-faq__question {
    padding: 16px 20px;
  }

  .project-faq__q-label {
    font-size: 13px;
  }

  .project-faq__toggle {
    font-size: 15px;
  }

  .project-faq__answer:not([hidden]) {
    padding: 0 20px 20px 20px;
  }

  .project-faq__answer p {
    font-size: 14px;
  }

  .project-faq__button {
    padding: 10px 24px;
    font-size: 14px;
  }
}

/* ================================
   Staff Intro Section
   ================================ */

/* Staff Intro Wrapper with Background */
.single-projects .project-staff-intro-wrapper {
  width: 100%;
  background-color: #FFFFFF;
  padding: 80px 20px;
  margin: 0;
}

.project-staff-intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
}

.project-staff-intro__title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  color: #333;
}

.project-staff-intro__subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 40px;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #666;
}

/* Speech Bubble for Comment */
.project-staff-intro__speech-bubble {
  position: relative;
  max-width: 700px;
  margin: 0 auto 40px auto;
  padding: 30px 40px;
  border: 1px solid #333;
  border-radius: 4px;
  background-color: #FFFFFF;
}

.project-staff-intro__speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #333;
}

.project-staff-intro__speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid #FFFFFF;
  z-index: 1;
}

.project-staff-intro__comment {
  font-size: 15px;
  line-height: 1.9;
  color: #333;
  text-align: center;
  font-family: var(--wp--preset--font-family--ja-serif);
  margin: 0;
}

/* Staff Faces */
.project-staff-intro__faces {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
  justify-content: center;
  gap: 30px;
  margin-top: 50px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.project-staff-intro__face {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
}

.project-staff-intro__face img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  margin-bottom: 12px;
  border: 2px solid #E0E0E0;
}

.project-staff-intro__name {
  font-size: 12px;
  color: #999;
  margin: 0 0 4px 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  text-align: center;
}

.project-staff-intro__role {
  font-size: 14px;
  color: #333;
  margin: 0;
  font-family: var(--wp--preset--font-family--en-serif);
  font-weight: 500;
  text-align: center;
}

/* Staff Intro Responsive */
@media (max-width: 768px) {
  .project-staff-intro {
    margin: 60px auto;
  }

  .project-staff-intro__title {
    font-size: 28px;
  }

  .project-staff-intro__speech-bubble {
    padding: 24px 20px;
  }

  .project-staff-intro__comment {
    font-size: 14px;
    line-height: 1.8;
  }

  .project-staff-intro__face img {
    width: 60px;
    height: 60px;
  }
}

/* ================================
   Related Articles Section
   ================================ */

/* Related Articles Wrapper with Background */
.single-projects .project-related-wrapper {
  width: 100%;
  background-color: #F7F7F7;
  padding: 80px 20px;
  margin: 0;
}

.project-related {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.project-related__title {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-align: center;
  margin-bottom: 10px;
  font-family: var(--wp--preset--font-family--en-serif);
  color: #333;
}

.project-related__subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 60px;
  font-family: var(--wp--preset--font-family--ja-serif);
  color: #666;
}

.project-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

.project-related__item {
  display: block;
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  -o-transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  border: 1px solid #eee;
  overflow: hidden;
}

.project-related__item:hover {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-related__item img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.project-related__item:hover img {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.project-related__item-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  padding: 20px;
  margin: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
  line-height: 1.6;
}

.project-related__date {
  font-size: 13px;
  color: #999;
  padding: 0 20px 20px 20px;
  margin: 0;
  font-family: var(--wp--preset--font-family--ja-serif);
}

/* Related Responsive */
@media (max-width: 768px) {
  .project-related {
    margin: 60px auto;
  }

  .project-related__title {
    font-size: 28px;
  }

  .project-related__subtitle {
    margin-bottom: 40px;
  }

  .project-related__item img {
    height: 250px;
  }

  .project-related__item-title {
    font-size: 16px;
    padding: 16px;
  }

  .project-related__date {
    padding: 0 16px 16px 16px;
  }
}

/* Contact Section */
.single-projects .project-contact {
  background-image: url('/wp-content/uploads/2025/10/contact_bg.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
}

.single-projects .project-contact .wp-block-cover__inner-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Contact Section - Quitar overlay oscuro */
body.single-projects .project-contact .wp-block-cover__background.has-background-dim {
  display: none;
}

body.single-projects .project-contact.wp-block-cover::before {
  background-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .single-projects .project-contact {
    padding-top: 60px;
    padding-bottom: 60px;
    min-height: 350px;
  }

  .single-projects .project-contact h2 {
    font-size: 28px;
  }

  .single-projects .project-contact p {
    font-size: 14px;
  }

  .single-projects .wp-block-cover {
    min-height: 50vh;
  }

  .single-projects .wp-block-group[style*="padding-top:80px"] {
    padding-top: 60px;
  }

  .single-projects .wp-block-group[style*="padding-bottom:80px"] {
    padding-bottom: 60px;
  }
}

/* ================================
   Header Light Mode
   ヘッダーライトモード - White logo and menu on dark backgrounds
   ================================ */

/*
 * Logo Change Strategy:
 * - PHP Hook (render_block filter) handles logo.svg → logo_w.svg replacement
 * - Changes happen server-side before HTML is rendered
 * - No CSS needed for logo switching
 */

/*
 * Menu Color Strategy:
 * - JavaScript applies inline styles for colors (higher specificity than WordPress !important)
 * - CSS below serves as fallback and provides transitions
 * - Inline styles: color, backgroundColor, borderColor
 */

/* Smooth transitions for all header elements */
.iemoto-header__logo img,
.iemoto-header a,
.iemoto-header a.iemoto-btn,
.iemoto-header .wp-block-navigation__responsive-container-open,
.iemoto-header .wp-block-navigation__responsive-container-close {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Light Mode - Initial state (white colors) */
/* These are fallback styles - JavaScript applies inline styles with higher priority */

/* Menu links: white color */
body.header-light-mode .wp-block-navigation a {
  color: #FFFFFF;
}

/* Contact button: White background, black text */
body.header-light-mode .iemoto-header a.iemoto-btn {
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #FFFFFF;
}

body.header-light-mode .iemoto-header a.iemoto-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Mobile menu toggle buttons: white */
body.header-light-mode .wp-block-navigation__responsive-container-open,
body.header-light-mode .wp-block-navigation__responsive-container-close {
  color: #FFFFFF;
}

body.header-light-mode .wp-block-navigation__responsive-container-close {
  color: #000000;
}

/* Scrolled State - Dark colors */
/* JavaScript changes logo src and applies inline styles for all elements */

/* Menu links: black color */
body.header-light-mode.header-scrolled .wp-block-navigation a {
  color: #000000;
}

/* Contact button: Black background, white text */
body.header-light-mode.header-scrolled .iemoto-header a.iemoto-btn {
  background-color: #000000;
  color: #FFFFFF;
  border: 1px solid #000000;
}

body.header-light-mode.header-scrolled .iemoto-header a.iemoto-btn:hover {
  background-color: #333333;
}

/* Mobile menu toggle buttons: black */
body.header-light-mode.header-scrolled .wp-block-navigation__responsive-container-open,
body.header-light-mode.header-scrolled .wp-block-navigation__responsive-container-close {
  color: #000000;
}

/* Story FAQ - Mobile box-sizing fix */
@media (max-width: 768px) {
  .story-faq {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
}

/* --------------------------------------------------
   TOP PAGE - FAQ + CONTACT SECTION (Gray Background)
   -------------------------------------------------- */

/* Wrapper con fondo gris que contiene FAQ + CONTACT */
.top-faq-contact-wrapper {
  background-color: #F5F5F5 !important;
}

/* FAQ Section dentro del wrapper gris */
.top-faq-contact-wrapper .top-faq {
  /* Los estilos de .top-faq heredan de .story-faq automáticamente */
}

/* Contact Section dentro del wrapper gris - mantiene su imagen de fondo */
.top-faq-contact-wrapper .contact-section {
  /* Contact section mantiene sus propios estilos con imagen de fondo */
}

/* --------------------------------------------------
   TOP PAGE - NEWS SECTION
   -------------------------------------------------- */

/* Lista de news en top page */
.top-news-list {
  max-width: 1200px;
  margin: 0 auto;
}

/* Separación entre items de news */
.top-news-list .news-meta {
  padding: 0;
}

/* Padding for li containers in Top Page (posts are inside li elements) */
.top-news-list li {
  padding: 5px 0;
}

.top-news-list li:first-child {
  padding-top: 0;
}

.top-news-list li:last-child {
  padding-bottom: 0;
}

/* Reset padding for .news-meta inside li to avoid double padding */
.top-news-section .top-news-list li .news-meta {
  padding: 0;
}

/* Responsive para news en top page */
@media (max-width: 768px) {
  .top-news-list .news-meta {
    padding: 0;
  }
}

/* --------------------------------------------------
   TOP PAGE - ALINEAR ANCHOS DE SECCIONES (igual que Works = 1200px)
   -------------------------------------------------- */

/*
 * TODAS las secciones del top page deben alinearse a 1200px como Works
 * Works usa .works-grid con max-width: var(--wp--custom--container-max) = 1200px
 * Aplicamos el mismo ancho a Story, Open House, Event/Workshop
 */

/* Regla general para todos los query blocks con alignwide en top page */
.wp-block-query.alignwide,
.wp-block-post-template.alignwide {
  max-width: var(--wp--custom--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Story Section - Query Block específico */
.wp-block-query.stories-query-loop,
.stories-query-loop .wp-block-post-template {
  max-width: var(--wp--custom--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Open House Section - Query Block específico */
.openhouse-cards-grid {
  max-width: var(--wp--custom--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Event/Workshop Section - Query Block específico */
.wp-block-query.workshop-query-loop,
.workshop-query-loop .wp-block-post-template,
.wp-block-query.event-query-loop,
.event-query-loop .wp-block-post-template {
  max-width: var(--wp--custom--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------
   CSR SINGLE - HIDE EMPTY SECTIONS
   -------------------------------------------------- */

/* Hide Timeline section if empty */
.single-csr .csr-timeline-section:not(:has(.story-timeline)) {
  display: none;
}

/* Hide Gallery section if empty */
.single-csr .csr-gallery-section:not(:has(.works-gallery-slider)) {
  display: none;
}

/* Hide FAQ section if empty */
.single-csr .csr-faq-section:not(:has(.story-faq)) {
  display: none;
}

/* Hide Staff Intro section if empty */
.single-csr .csr-staff-intro-section:not(:has(.story-staff-intro)) {
  display: none;
}

/* --------------------------------------------------
   CSR RELATED ARTICLE SECTION
   -------------------------------------------------- */

/* Section Background */
.csr-related-section {
  background-color: #f7f7f7;
}

/* Horizontal Separator Lines (Top and Bottom) */
.csr-related-top-line,
.csr-related-bottom-line {
  width: 75%;
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid #000;
  border-bottom: none;
  opacity: 1;
}

/* Grid Container */
.csr-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Card Styles */
.csr-related-card {
  background: transparent;
}

.csr-related-card-content {
  padding-top: 0;
}

/* Card Divider */
.csr-related-card-divider {
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: none;
  opacity: 1;
  margin: 10px 0;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .csr-related-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .csr-related-card {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
    flex-direction: row;
    gap: 15px;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
    align-items: flex-start;
    max-width: 100%;
    overflow: hidden;
  }

  /* Image on left - 40% of container width, maintains 4:3 aspect ratio */
  .csr-related-card .wp-block-post-featured-image {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    width: 40%;
    min-width: 40%;
  }

  /* Content on right - 60% of container width */
  .csr-related-card-content {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    width: 60%;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* Limit content height to match image height in mobile */
  .csr-related-card .csr-related-card-content.wp-block-group {
    max-height: 100%;
    -ms-flex-item-align: stretch;
    align-self: stretch;
  }

  /* Add margin between title and divider */
  .csr-related-card-content .wp-block-post-title {
    margin-top: 0;
    margin-bottom: 10px;
  }

  .csr-related-top-line,
  .csr-related-bottom-line {
    width: 90%;
  }
}

/* ========================================
   Top Page - NEWS Section
   ======================================== */

.top-news-section {
  position: relative;
  padding-top: 80px;
}

/* Draw line at the top using ::before (only on Top Page, not on About/Company) */
body.home .top-news-section::before,
body.page-template-page-top-page .top-news-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}

/* Hide the HTML line element (we're using ::before instead) */
.top-news-section__line {
  display: none;
}

/* Header del NEWS */
.top-news-section__header {
  text-align: left;
  margin-bottom: 50px;
}

.top-news-section__title {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.top-news-section__subtitle {
  font-family: var(--wp--preset--font-family--ja-sans) !important;
  font-size: 12px;
  letter-spacing: 0.15em;
  margin: 0;
  color: #000;
}

/* Query de posts - CENTRADO (solo desktop) */
.top-news-section__query {
  margin-bottom: 50px;
}

@media (min-width: 769px) {
  .top-news-section__query.alignwide {
    max-width: 65% !important;
    margin-left: 25% !important;
    margin-right: 10% !important;
  }
}

/* Estilos del news-meta dentro del top page */
.top-news-section .news-meta {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: baseline;
     -moz-box-align: baseline;
      -ms-flex-align: baseline;
  align-items: baseline;
  gap: 30px;
  padding: 0;
}

.top-news-section .news-meta:first-child {
  border-top: none;
}

.top-news-section .news-meta__date {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 14px;
  color: #000;
  letter-spacing: 0.08em;
  font-weight: 300;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  min-width: 110px;
}

.top-news-section .news-meta__title {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  font-family: var(--wp--preset--font-family--ja-serif);
  letter-spacing: 0.03em;
  -webkit-box-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-news-section .news-meta__title a {
  color: #333;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  -webkit-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.top-news-section .news-meta__title a:hover {
  color: #666;
}

.top-news-section .news-meta__icon {
  font-size: 10px;
  opacity: 0.5;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.top-news-section .news-meta__title a:hover .news-meta__icon {
  opacity: 0.8;
}

/* Desktop: Center containers for About page shortcode */
@media (min-width: 769px) {
  body.page-about .top-news-section__header,
  body.page-template-page-about .top-news-section__header,
  body.page-about .top-news-section__query.alignwide,
  body.page-template-page-about .top-news-section__query.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Link "NEWS 一覧" - ALINEADO A LA IZQUIERDA */
.top-news-section__link {
  text-align: left;
  margin-top: 50px;
}

@media (min-width: 769px) {
  .top-news-section__link {
    max-width: 1200px;
    margin: 50px auto 0;
    text-align: left;
  }
}

/* ============================================================
   NEWS SECTION - DESKTOP GRID LAYOUT (2 COLUMNS)
   To revert: Delete everything between START and END markers
   ============================================================ */

@media (min-width: 769px) {
  /* 1. Main Container as GRID */
  .top-news-section {
    display: grid !important;
    /* Column 1: Title/Link (300px fixed), Column 2: News List (flexible) */
    grid-template-columns: 300px 1fr !important;
    grid-template-rows: auto auto !important; /* Row 1: Content, Row 2: Link */
    -webkit-column-gap: 60px !important;
       -moz-column-gap: 60px !important;
            column-gap: 60px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    -webkit-box-align: start !important;
       -moz-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: start !important;
    padding-bottom: 100px !important;
  }

  /* 2. Header (Title + Subtitle) - Left Column */
  .top-news-section__header {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important; /* First row */
    margin-bottom: 0 !important;
    text-align: left !important;
  }

  /* 3. Link "NEWS 一覧" - Left Column, Below Title */
  .top-news-section__link {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important; /* Second row */
    margin-top: 80px !important;
    text-align: left !important;
    margin-left: 0 !important;
    max-width: none !important;
  }

  /* 4. News List - Right Column (spans both rows) */
  .top-news-section__query,
  .top-news-section__query.alignwide {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 2 !important; /* Rows 1-2 (header + link rows) */
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Adjustment for list items alignment */
  .top-news-section .news-meta {
    padding: 5px 0;
  }

  /* Title margin reset */
  .top-news-section .top-news-section__title,
  .top-news-section h2.top-news-section__title {
    margin-top: 0;
  }

  /* Override About page specific rules when using grid */
  body.page-about .top-news-section__header,
  body.page-template-page-about .top-news-section__header,
  body.page-about .top-news-section__query.alignwide,
  body.page-template-page-about .top-news-section__query.alignwide {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ============================================================
   END - NEWS SECTION DESKTOP GRID LAYOUT
   ============================================================ */

.top-news-section__link-text {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #000;
  text-decoration: none;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.top-news-section__link-text:hover {
  opacity: 0.7;
}

.top-news-section__link-en {
  font-family: var(--wp--preset--font-family--en-serif);
}

.top-news-section__link-arrow {
  font-size: 14px;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.top-news-section__link-text:hover .top-news-section__link-arrow {
  -webkit-transform: translateX(5px);
      -ms-transform: translateX(5px);
  transform: translateX(5px);
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .top-news-section {
    padding-top: 60px;
  }

  /* Línea horizontal en mobile también existe */
  .top-news-section__line {
    width: 90%;
    margin-bottom: 40px;
  }

  /* Centrar título y subtítulo */
  .top-news-section__header {
    text-align: center;
    margin-bottom: 35px;
  }

  .top-news-section__title {
    font-size: 24px;
    letter-spacing: 0.18em;
  }

  .top-news-section__subtitle {
    font-size: 11px;
  }

  /* Query centrada con padding más amplio */
  .top-news-section__query {
    max-width: 100%;
    padding: 0 30px;
  }

  /* MANTENER layout horizontal (fecha + título) */
  .top-news-section .news-meta {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
    flex-direction: row;
    gap: 15px;
    padding: 0;
    margin-bottom: 15px;
  }

  .top-news-section .news-meta__date {
    font-size: 13px;
    min-width: auto;
    margin-right: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .top-news-section .news-meta__title {
    font-size: 14px;
    line-height: 1.75;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
    flex: 1;
  }

  /* Link alineado a la DERECHA en mobile con padding */
  .top-news-section__link {
    text-align: right;
    margin-top: 35px;
    padding: 0 30px;
  }

  .top-news-section__link-text {
    font-size: 12px;
  }
}

/* ========================================
   Works Related Grid - Responsive
   ======================================== */

.works-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 768px) {
  .works-related-grid {
    grid-template-columns: 1fr;
  }
}

/* Related Article - Works post styling */
.works-related-grid .wp-block-post-title,
.works-related-grid .wp-block-post-title a {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
}

.works-related-grid h2.wp-block-post-title {
  padding-left: 12px;
  margin-top: 15px;
  font-size: 14px !important;
  font-weight: 400;
}

.works-related-grid .wp-block-post-terms.taxonomy-works_tag {
  padding-left: 12px;
}

.works-related-grid .taxonomy-works_tag a {
  color: #969696;
}

@media (max-width: 768px) {
  .works-related-grid .wp-block-post-title,
  .works-related-grid .wp-block-post-title a {
    font-size: 14px;
  }

  .works-related-grid .wp-block-post-title,
  .works-related-grid .taxonomy-works_tag {
    padding-left: 20px;
  }
}

/* ===== Related Articles Section - Stories ===== */

/* Related Articles Section - Background */
.single-stories .related-articles-section {
  background-color: #F7F7F7;
}

/* Desktop - Title Center Aligned */
@media (min-width: 769px) {
  .single-stories .related-articles-header {
    text-align: center;
  }

  /* English Title - Desktop */
  .single-stories .related-articles-title-en {
    font-size: 21px;
    font-weight: 300;
  }

  /* Japanese Subtitle - Desktop */
  .single-stories .related-articles-title-ja {
    font-size: 14px;
    font-family: var(--wp--preset--font-family--ja-sans) !important;
  }

  /* Grid: 3 columns */
  .single-stories .stories-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .stories-related-grid h2.wp-block-post-title {
    padding-left: 12px;
    font-size: 14px !important;
    font-weight: 400;
  }
}

/* Mobile - Title Left Aligned */
@media (max-width: 768px) {
  .single-stories .related-articles-header {
    text-align: left;
    padding-left: 10px;
  }

  /* English Title - Mobile */
  .single-stories .related-articles-title-en {
    font-size: 20px;
    font-weight: 300;
  }

  /* Japanese Subtitle - Mobile */
  .single-stories .related-articles-title-ja {
    font-size: 11px;
  }

  /* Grid: 1 column */
  .single-stories .stories-related-grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
}

/* Related Article - Stories post styling */
.stories-related-grid .wp-block-post-title,
.stories-related-grid .wp-block-post-title a {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif;
}

.stories-related-grid .wp-block-post-date {
  color: #969696;
  font-size: 11px !important;
  padding-left: 12px;
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro';
}

/* Related Articles - Fallback for posts without thumbnail */
.stories-related-grid .wp-block-post-featured-image {
  background-color: #969696;
  aspect-ratio: 16 / 9;
  min-height: 200px;
  display: block;
}

.stories-related-grid .wp-block-post-featured-image a {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

@media (max-width: 768px) {
  .stories-related-grid .wp-block-post-title,
  .stories-related-grid .wp-block-post-title a {
    font-size: 14px;
  }

  .stories-related-grid .wp-block-post-title,
  .stories-related-grid .wp-block-post-date {
    padding-left: 20px;
  }
}

/* ===== Staff Introduction Section - Hide when empty ===== */
.csr-staff-intro-section:empty,
.csr-staff-intro-section:has(> :empty) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================
   Events Page Styles
   ======================================== */

/* Grid layouts - ensure display grid for all event grids */
.events-gallery-grid,
.events-section-grid {
  display: grid;
}

/* Event Card Styles */
.event-card {
  position: relative;
}

.event-card__image-wrapper {
  position: relative;
  overflow: hidden;
}

.event-card__image-wrapper figure {
  margin-bottom: 0;
}

.event-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 377 / 275;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.event-card__image-wrapper:hover .event-card__image {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.event-card__location {
  position: absolute;
  top: 14px;
  right: 0;
  background-color: #000;
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-family: var(--wp--preset--font-family--ja-serif);
}

.event-card__title {
  font-size: 14px;
  line-height: 1.6;
  margin: 15px 0 0 0;
  padding: 0 5px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 400;
  padding-left: 12px;
}

.event-card__title a {
  text-decoration: none;
  color: inherit;
}

.event-card__title a:hover {
  opacity: 0.7;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .events-gallery-grid,
  .events-section-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Events Archive - Adjustments ===== */

/* Task 1: Hero Section - Base Styles (from Works Archive) */
.archive.tax-event_category .hero-section,
.archive.post-type-archive-openhouse .hero-section,
.archive.post-type-archive-consultation .hero-section,
.archive.post-type-archive-lifestyle_workshop .hero-section,
.page-template-page-events .hero-section {
  position: relative;
  min-height: 330px;
  margin: 0;
  padding: 0;
}

/* Task 2: Hero Section - Title Alignment & Sizing */
.archive.tax-event_category .hero-section h1,
.archive.post-type-archive-openhouse .hero-section h1,
.archive.post-type-archive-consultation .hero-section h1,
.archive.post-type-archive-lifestyle_workshop .hero-section h1,
.page-template-page-events .hero-section h1 {
  text-align: left;
  padding-top: 160px;
  padding-bottom: 75px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
     -moz-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 16px;
}

/* English Title (Main) */
.archive.tax-event_category .hero-section h1 .en-title,
.archive.post-type-archive-openhouse .hero-section h1 .en-title,
.archive.post-type-archive-consultation .hero-section h1 .en-title,
.archive.post-type-archive-lifestyle_workshop .hero-section h1 .en-title,
.page-template-page-events .hero-section h1 .en-title {
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 29px;
  font-weight: 400;
}

/* Japanese Subtitle */
.archive.tax-event_category .hero-section h1 .ja-title,
.archive.post-type-archive-openhouse .hero-section h1 .ja-title,
.archive.post-type-archive-consultation .hero-section h1 .ja-title,
.archive.post-type-archive-lifestyle_workshop .hero-section h1 .ja-title,
.page-template-page-events .hero-section h1 .ja-title {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  font-weight: 400;
}

/* Task 6: Hide Circle Arrow Button Wrapper */
.archive.tax-event_category .circle-arrow-button-wrapper,
.archive.post-type-archive-openhouse .circle-arrow-button-wrapper,
.archive.post-type-archive-consultation .circle-arrow-button-wrapper,
.archive.post-type-archive-lifestyle_workshop .circle-arrow-button-wrapper,
.page-template-page-events .circle-arrow-button-wrapper {
  display: none;
}

/* Task 7: Body Padding-Top Override */
html body.archive.tax-event_category,
html body.post-type-archive-openhouse,
html body.post-type-archive-consultation,
html body.post-type-archive-lifestyle_workshop,
html body.page-template-page-events {
  padding-top: 0;
}

/* Mobile Styles */
@media (max-width: 768px) {
  /* Task 1: Hero Section - Mobile Height */
  .archive.tax-event_category .hero-section,
  .archive.post-type-archive-openhouse .hero-section,
  .archive.post-type-archive-consultation .hero-section,
  .archive.post-type-archive-lifestyle_workshop .hero-section,
  .page-template-page-events .hero-section {
    min-height: 260px; /* Mobile height similar to Works */
  }

  /* Task 2: Hero Title - Mobile Font Sizes */
  .archive.tax-event_category .hero-section h1,
  .archive.post-type-archive-openhouse .hero-section h1,
  .archive.post-type-archive-consultation .hero-section h1,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1,
  .page-template-page-events .hero-section h1 {
    gap: 12px;
  }

  .archive.tax-event_category .hero-section h1 .en-title,
  .archive.post-type-archive-openhouse .hero-section h1 .en-title,
  .archive.post-type-archive-consultation .hero-section h1 .en-title,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1 .en-title,
  .page-template-page-events .hero-section h1 .en-title {
    font-size: 25px;
  }

  .archive.tax-event_category .hero-section h1 .ja-title,
  .archive.post-type-archive-openhouse .hero-section h1 .ja-title,
  .archive.post-type-archive-consultation .hero-section h1 .ja-title,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1 .ja-title,
  .page-template-page-events .hero-section h1 .ja-title {
    font-size: 12px;
  }

  /* Task 4: Events Grid - Mobile Override (1 column) */
  .events-section-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  /* Task 5: Event Post Title - Spacing & Padding */
  .events-section-grid .wp-block-post-featured-image,
  .page-template-page-events .events-section-grid .wp-block-post-featured-image {
    margin-bottom: 17px;
  }

  .events-section-grid .wp-block-post-title,
  .event-card .wp-block-post-title,
  .openhouse-card .wp-block-post-title,
  .consultation-card .wp-block-post-title,
  .workshop-card .wp-block-post-title,
  .page-template-page-events .events-section-grid .wp-block-post-title,
  .page-template-page-events .event-card .wp-block-post-title {
    padding-left: 15px;
  }
}

/* Task 11: Hero Section - Desktop Titles (max-width: none + padding-left) */
@media (min-width: 769px) {
  .archive.tax-event_category .hero-section h1,
  .archive.post-type-archive-openhouse .hero-section h1,
  .archive.post-type-archive-consultation .hero-section h1,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1,
  .page-template-page-events .hero-section h1 {
    max-width: none;
    padding-left: 130px;
  }
}

/* ===== Events Filter Bar - Task 3 ===== */

/* Filter Bar - Container */
.events-filter-bar {
  background-color: #F7F7F7;
  width: 100%;
  padding: 20px 0;
}

.events-filter-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Row共通 */
.filter-row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-row:last-child {
  margin-bottom: 0;
}

/* Prefecture Filter - Row 1 */
.filter-label {
  font-family: var(--wp--preset--font-family--ja-serif); /* Shippori Mincho */
  font-size: 11px;
  color: #000000;
}

.filter-divider {
  color: #CCCCCC;
  margin: 0 8px;
}

.filter-checkboxes {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.filter-checkbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  color: #000000;
  cursor: pointer;
}

.filter-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Category Filter - Row 2 */
.category-filter {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
}

.filter-dropdown {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: none;
  border-right: 1px solid #CCCCCC;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  color: #000000;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.filter-dropdown:hover {
  opacity: 0.7;
}

.filter-dropdown:last-child {
  border-right: none;
}

.dropdown-icon {
  font-size: 10px;
  color: #000000;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .events-filter-bar {
    margin: 0 -10px; /* Escape body padding */
  }

  .events-filter-container {
    padding: 0 10px;
  }

  .filter-label {
    font-size: 10px;
  }

  .filter-checkbox {
    font-size: 12px;
  }

  .filter-dropdown {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Stack filters vertically on mobile if needed */
  .filter-row {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

/* ===== Task 3 (NEW): Prefecture Filter Bar - Full Width (Archives Only) ===== */

/* Override WordPress auto-centering for archives */
.archive.post-type-archive-openhouse .events-filter-bar,
.archive.post-type-archive-consultation .events-filter-bar,
.archive.post-type-archive-lifestyle_workshop .events-filter-bar {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* More specific selector with !important if needed */
.archive.post-type-archive-openhouse .wp-block-group.events-filter-bar,
.archive.post-type-archive-consultation .wp-block-group.events-filter-bar,
.archive.post-type-archive-lifestyle_workshop .wp-block-group.events-filter-bar {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Task 7: Prefecture Filter Bar - Full Width + Right Alignment (Mobile) */
@media (max-width: 768px) {
  .archive.post-type-archive-openhouse .events-filter-bar,
  .archive.post-type-archive-consultation .events-filter-bar,
  .archive.post-type-archive-lifestyle_workshop .events-filter-bar,
  .page-template-page-events .events-filter-bar {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
  }

  /* Align filters to the right */
  .archive.post-type-archive-openhouse .events-filter-container,
  .archive.post-type-archive-consultation .events-filter-container,
  .archive.post-type-archive-lifestyle_workshop .events-filter-container,
  .page-template-page-events .events-filter-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .archive.post-type-archive-openhouse .events-filter-bar .prefecture-filter,
  .archive.post-type-archive-consultation .events-filter-bar .prefecture-filter,
  .archive.post-type-archive-lifestyle_workshop .events-filter-bar .prefecture-filter,
  .page-template-page-events .events-filter-bar .prefecture-filter {
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/* Task 8: Prefecture Filter - Right Alignment (Desktop) */
@media (min-width: 769px) {
  .archive.post-type-archive-openhouse .events-filter-container,
  .archive.post-type-archive-consultation .events-filter-container,
  .archive.post-type-archive-lifestyle_workshop .events-filter-container,
  .page-template-page-events .events-filter-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .archive.post-type-archive-openhouse .events-filter-bar .prefecture-filter,
  .archive.post-type-archive-consultation .events-filter-bar .prefecture-filter,
  .archive.post-type-archive-lifestyle_workshop .events-filter-bar .prefecture-filter,
  .page-template-page-events .events-filter-bar .prefecture-filter {
    -webkit-box-pack: end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/* ===== Task 4 (NEW): Category Links Section - Separate Block ===== */

/* Category Links Section Container */
.events-category-links-section,
.page-template-page-events .events-category-links-section {
  background-color: #ffffff;
  padding: 50px 0 20px 0;  /* Task 9: 50px top padding */
  width: 100%;
}

/* Category Links - Desktop (Horizontal) */
.events-category-links,
.page-template-page-events .events-category-links {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Category Link Button */
.category-link,
.page-template-page-events .category-link {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  color: #000000;
  background: transparent;
  border: none;
  border-right: none !important;  /* Task 9: Remove vertical separators */
  padding: 8px 24px 8px 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

/* Task 9: Preserve border-bottom on desktop */
@media (min-width: 769px) {
  .events-category-links .category-link,
  .page-template-page-events .events-category-links .category-link {
    border-bottom: 1px solid #CCCCCC !important;
  }
}

/* Task 9: Ensure no lateral borders */
.events-category-links .category-link:not(:last-child),
.page-template-page-events .events-category-links .category-link:not(:last-child) {
  border-right: none !important;
}

/* Task 10: Category Links - Center alignment with space-evenly (Desktop) */
@media (min-width: 769px) {
  .events-category-links,
  .page-template-page-events .events-category-links {
    -webkit-box-pack: space-evenly;
       -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/* Down Arrow - CSS Pseudo-element */
.category-link::after,
.page-template-page-events .category-link::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-left: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Task 8: Category Links Section - Hide in Archives (Open House / Consultation / Workshop) */
.archive.post-type-archive-openhouse .events-category-links-section,
.archive.post-type-archive-consultation .events-category-links-section,
.archive.post-type-archive-lifestyle_workshop .events-category-links-section {
  display: none;
}

/* Keep visible in page-events */
.page-template-page-events .events-category-links-section {
  display: block;
}

/* Prefecture Filter - Hide filtered events */
.event-card.event-hidden,
.wp-block-post.event-hidden {
  display: none !important;
}

/* Mobile - Grid 2x2 */
@media (max-width: 768px) {
  .events-category-links-section,
  .page-template-page-events .events-category-links-section {
    padding: 15px 0;
  }

  .events-category-links,
  .page-template-page-events .events-category-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 10px;
  }

  .category-link,
  .page-template-page-events .category-link {
    font-size: 12px;
    border-right: none;
    border-bottom: 1px solid #CCCCCC;
    padding: 0 0 10px 0;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

/* ============================================================
   CEO MESSAGE TEMPLATE STYLES
   ============================================================ */

/* Hero Section */
.ceo-hero {
  padding: 60px 20px;
  text-align: center;
}

.ceo-message-title {
  font-size: 28px;
  letter-spacing: 0.2em;
  font-weight: 300;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--en-serif);
}

/* Full Width Image */
.ceo-image-section {
  margin: 0;
}

.ceo-featured-image {
  margin: 0;
}

.ceo-featured-image img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  max-height: 500px;
}

/* Content Section */
.ceo-content-section {
  background-color: var(--wp--preset--color--light-gray);
}

.ceo-content-inner {
  width: 100%;
}

/* Name and Position */
.ceo-name {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-family: var(--wp--preset--font-family--en-serif);
}

.ceo-position {
  font-size: 14px;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
  border-top: 1px solid #000;
  padding-top: 20px;
  font-family: var(--wp--preset--font-family--ja-serif);
}

/* Message Paragraphs */
.ceo-message-paragraphs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.ceo-paragraph {
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: 0.05em;
  font-family: var(--wp--preset--font-family--ja-serif);
  text-align: justify;
}

/* Desktop Layout - Paragraphs side by side */
@media (min-width: 769px) {
  .ceo-content-container{
    padding: 0 90px 85px 90px !important;
  }
  
  .ceo-hero {
    padding: 80px 20px;
  }
  
  .ceo-message-title {
    font-size: 36px;
  }

  .ceo-hero-section h1 {
    font-size: 29px !important;
  }

  .ceo-featured-image img {
    max-height: 600px;
  }

  .ceo-white-block{
    padding: 52px 115px 180px 115px !important;
  }

  .ceo-name {
    font-size: 42px;
  }

  .ceo-hero h2.wp-block-heading.has-en-serif-font-family {
    font-size: 37px !important;
    margin-bottom: 0;
  }

  .ceo-message-paragraphs {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .ceo-hero .wp-block-group.is-layout-grid.wp-container-core-group-is-layout-03da88b1 {
    gap: 45px;
  }

  .ceo-paragraph {
    margin-bottom: 0;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .ceo-message-paragraphs {
    gap: 40px;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .ceo-content-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .ceo-content-container {
    padding: 0 14px 93px 14px !important;
  }
  
  .ceo-hero h2.wp-block-heading.has-en-serif-font-family {
    font-size: 32px !important;
    margin-bottom: 0;
  }

  .ceo-name {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .ceo-position {
    font-size: 12px;
    margin-bottom: 40px;
  }

  .ceo-white-block {
    padding: 59px 20px 130px 20px !important;
  }

  .ceo-paragraph {
    font-size: 13px;
    line-height: 2;
  }

  .ceo-featured-image img {
    max-height: 400px;
  }
}

/* ============================================================
   TOP PAGE - EVENTS SECTION STYLES
   ============================================================ */

/* Event link wrapper - hover effect */
.event-link-wrapper {
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.event-link-wrapper:hover {
  opacity: 0.7;
}

/* Event item wrapper - force consistent layout for all events */
.event-item-wrapper {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide default page title on Privacy Policy page */
body.page .entry-header,
body.page .wp-block-post-title {
  display: none;
}

/* Exception: Show post titles in top page WORKS section */
body.page .top-works-section-wrapper .wp-block-post-title {
  display: block !important;
}

/* ============================================================
   Top Page Hero - Video PC/SP separado
   ============================================================ */

/* Desktop: Mostrar video PC, ocultar video SP */
@media (min-width: 769px) {
  .video-wrapper{
    max-width: none;
  }
  .hero-video-pc {
    display: block !important;
  }
  .hero-video-sp {
    display: none !important;
  }

}

/* Mobile: Mostrar video SP, ocultar video PC */
@media (max-width: 768px) {
  .hero-video-pc {
    display: none !important;
  }
  .hero-video-sp {
    display: block !important;
  }

  /* Hero video full width en móvil (ignorar padding lateral del body) */
  .hero-dynamic-section,
  .hero-video-container {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px);
  }
}

/* ============================================================
   Top Page - Events Section Mobile Design
   ============================================================ */

/* Mobile: Cambiar fondo a gris y ajustar layout */
@media (max-width: 768px) {
  /* Fondo gris en móvil + padding-top de 20px */
  .top-events-section {
    background-color: #f7f7f7 !important;
    padding-top: 20px !important;
  }

  /* Título h2: tamaño 14px, color gris, eliminar margin-top y agregar padding-left */
  .top-events-section .wp-block-heading.has-text-align-center.has-en-serif-font-family {
    margin-top: 0 !important;
    padding-left: 15px;
    text-align: left !important;
    font-size: 14px !important;
    color: #969696 !important;
  }

  /* Ocultar el spacer debajo del título h2 */
  .top-events-section > .wp-block-spacer {
    display: none !important;
  }

  /* Layout mobile: columna con wrap */
  .event-item-wrapper {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
       -moz-box-orient: vertical !important;
       -moz-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    -webkit-box-align: start !important;
       -moz-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    gap: 8px;
  }

  /* Primera línea: Location tag + Título */
  .event-info-group {
    width: 100%;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
  }

  /* Location tag: estilo de caja con borde */
  .event-location-tag {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid #333 !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
  }

  /* Título del evento */
  .event-title {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: 14px !important;
  }

  /* Segunda línea: Fechas */
  .event-dates {
    width: 100%;
    font-size: 12px !important;
    margin: 0;
  }
}

/* ============================================================
   Top Page - Works Section Mobile Adjustments
   ============================================================ */

/* Mobile: Reducir espaciado después del título "WORKS" */
@media (max-width: 768px) {
  /* Primer spacer después del título WORKS: 100px → 60px en móvil */
  .top-works-section-wrapper > .wp-block-spacer:first-of-type {
    height: 60px !important;
  }

  /* Mantener títulos NEW WORKS/RECOMMENDED WORKS en 14px (override global h3 rule) */
  .top-works-section-wrapper h3.has-en-serif-font-family {
    font-size: 14px !important;
  }

  /* Convertir grids de WORKS a slider horizontal en móvil */
  .top-works-section-wrapper .works-grid {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 10px;

    /* Ocultar scrollbar pero mantener funcionalidad */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .top-works-section-wrapper .works-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .top-works-section-wrapper .works-grid li.wp-block-post {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 85%;
            flex: 0 0 85%;
    scroll-snap-align: center;
    max-width: 85%;
  }

  .top-works-section-wrapper .works-grid li.wp-block-post figure {
    margin-bottom: 16px;
  }

  /* ============================================================
     Top Page - Story Section Mobile Adjustments
     ============================================================ */

  /* Row gap entre tarjetas Story: 7px en móvil */
  .story-cards-grid {
    row-gap: 7px !important;
  }

  /* Mostrar títulos de posts en Story section */
  body.page .story-card-with-overlay .wp-block-post-title {
    display: block !important;
  }

  /* Ajustar spacers a 90px en móvil (superior e inferior) */
  .top-story-section-wrapper > .wp-block-spacer {
    height: 90px !important;
  }

  /* Works Section: Títulos NEW WORKS / RECOMMENDED WORKS - alinear izquierda y color gris */
  .top-works-section-wrapper h3.has-en-serif-font-family {
    text-align: left;
    color: #969696;
  }

  /* Works Cards: Agregar padding-left al texto para separar de imagen */
  .top-works-section-wrapper .works-card__body {
    padding-left: 20px;
  }

  /* Works Cards en Top Page: Remover min-height (solo en Top Page, no en Archive) */
  .top-works-section-wrapper li .works-card__body {
    min-height: 0 !important;
  }

  /* Ocultar spacers entre títulos y posts de Works en móvil */
  .top-works-section-wrapper h3 + .wp-block-spacer {
    display: none;
  }

  /* FAQ Section: box-sizing para correcto centrado */
  .top-faq-contact-wrapper .top-faq {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  /* Contact Section: remover padding lateral dentro de FAQ wrapper */
  .top-faq-contact-wrapper .contact-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Event/Workshop Section: Layout horizontal en móvil (igual a Open House) */
  /* Grid de cards en 1 columna */
  .top-workshop-section .workshop-cards-grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
  }

  /* Cada card en horizontal: imagen izquierda (45%), texto derecha (55%) */
  .top-workshop-section .workshop-card {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 15px;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  /* Imagen: 45% del ancho */
  .top-workshop-section .workshop-card .workshop-card__image {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%;
    width: 45%;
    min-width: 45%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Contenido: 55% del ancho */
  .top-workshop-section .workshop-card-content {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 55%;
            flex: 0 0 55%;
    width: 55%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  /* Alinear location con top */
  .top-workshop-section .workshop-card-content .workshop-location {
    margin-top: 0;
    margin-bottom: 5px;
  }

  /* Ajustar título */
  .top-workshop-section .workshop-card-content .workshop-title {
    margin-top: 0;
    margin-bottom: 5px;
  }

  /* Ajustar fechas */
  .top-workshop-section .workshop-card-content .workshop-dates {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

/* ================================
   SINGLE OPEN HOUSE / CONSULTATION / WORKSHOP - MOBILE STYLES
   ================================ */

/* Single Open House - Mobile Only */
@media (max-width: 768px) {

  /* Hero Title - 16px */
  .single-openhouse .openhouse-hero h1,
  .single-openhouse .hero-section h1,
  .single-consultation .openhouse-hero h1,
  .single-consultation .hero-section h1,
  .single-lifestyle_workshop .openhouse-hero h1,
  .single-lifestyle_workshop .hero-section h1 {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* First Element after Hero (TYPE) - Padding Top 29px */
  .single-openhouse .openhouse-hero + .wp-block-group,
  .single-openhouse .hero-section + .event-details,
  .single-openhouse .hero-section + .wp-block-group,
  .single-consultation .openhouse-hero + .wp-block-group,
  .single-consultation .hero-section + .event-details,
  .single-consultation .hero-section + .wp-block-group,
  .single-lifestyle_workshop .openhouse-hero + .wp-block-group,
  .single-lifestyle_workshop .hero-section + .event-details,
  .single-lifestyle_workshop .hero-section + .wp-block-group {
    padding-top: 6px !important;
  }


  /* Event Info Content - 13px */
  .single-openhouse .event-info-content,
  .single-openhouse .event-type-value,
  .single-openhouse .event-venue-value,
  .single-openhouse .event-date-value,
  .single-openhouse .wp-block-paragraph.has-shippori-mincho-font-family,
  .single-openhouse .wp-block-post-title,
  .single-consultation .event-info-content,
  .single-consultation .event-type-value,
  .single-consultation .event-venue-value,
  .single-consultation .event-date-value,
  .single-consultation .wp-block-paragraph.has-shippori-mincho-font-family,
  .single-consultation .wp-block-post-title,
  .single-lifestyle_workshop .event-info-content,
  .single-lifestyle_workshop .event-type-value,
  .single-lifestyle_workshop .event-venue-value,
  .single-lifestyle_workshop .event-date-value,
  .single-lifestyle_workshop .wp-block-paragraph.has-shippori-mincho-font-family,
  .single-lifestyle_workshop .wp-block-post-title {
    font-size: 13px !important;
  }

  /* Spacing: Info to Title - 15px total */
  .single-openhouse .wp-block-columns .wp-block-column .wp-block-heading,
  .single-consultation .wp-block-columns .wp-block-column .wp-block-heading,
  .single-lifestyle_workshop .wp-block-columns .wp-block-column .wp-block-heading {
    margin-bottom: 10px;
    margin-top: 0;
    padding-top: 20px;
  }

  .single-openhouse .wp-block-columns .wp-block-column p,
  .single-openhouse .wp-block-columns .wp-block-column .wp-block-post-title,
  .single-consultation .wp-block-columns .wp-block-column p,
  .single-consultation .wp-block-columns .wp-block-column .wp-block-post-title,
  .single-lifestyle_workshop .wp-block-columns .wp-block-column p,
  .single-lifestyle_workshop .wp-block-columns .wp-block-column .wp-block-post-title {
    margin-top: 0 !important;
    margin-bottom: 0;
  }

  /* Spacing: Lines to Text - 21px total */
  .single-openhouse .wp-block-columns .wp-block-column:not(:last-child)::after,
  .single-consultation .wp-block-columns .wp-block-column:not(:last-child)::after,
  .single-lifestyle_workshop .wp-block-columns .wp-block-column:not(:last-child)::after {
    margin-top: 21px;
  }

  /* Reset existing spacing para control preciso */
  .single-openhouse .event-detail-item,
  .single-consultation .event-detail-item,
  .single-lifestyle_workshop .event-detail-item {
    margin: 0;
    padding: 0;
  }

  .single-openhouse .event-detail-item + .event-detail-item,
  .single-consultation .event-detail-item + .event-detail-item,
  .single-lifestyle_workshop .event-detail-item + .event-detail-item {
    margin-top: 15px;
  }
}

/* ================================
   SINGLE OPEN HOUSE - GREY BLOCK LATERAL PADDING (MOBILE)
   ================================ */

@media (max-width: 768px) {

  /* Grey Block Content - Total 35px lateral padding */
  .single-openhouse .wp-block-group.alignfull.is-layout-constrained,
  .single-consultation .wp-block-group.alignfull.is-layout-constrained,
  .single-lifestyle_workshop .wp-block-group.alignfull.is-layout-constrained {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }

  /* Specific container class pattern */
  .single-openhouse .wp-block-group.alignfull[class*="wp-container-core-group-is-layout-"],
  .single-consultation .wp-block-group.alignfull[class*="wp-container-core-group-is-layout-"],
  .single-lifestyle_workshop .wp-block-group.alignfull[class*="wp-container-core-group-is-layout-"] {
    padding-left: 35px !important;
    padding-right: 35px !important;
    padding-bottom: 46px !important;
  }
}

/* ================================
   SINGLE OPEN HOUSE - EDITOR CONTENT & PLAN SECTION PADDING (ALL SCREENS)
   ================================ */

/* Editor Content Container - Desktop and Mobile */
.single-openhouse .wp-block-group.alignwide.is-layout-constrained,
.single-consultation .wp-block-group.alignwide.is-layout-constrained,
.single-lifestyle_workshop .wp-block-group.alignwide.is-layout-constrained {
  padding-left: 17px !important;
  padding-right: 17px !important;
}

/* Specific container with dynamic class */
.single-openhouse .wp-block-group.alignwide[class*="wp-container-core-group-is-layout-"],
.single-consultation .wp-block-group.alignwide[class*="wp-container-core-group-is-layout-"],
.single-lifestyle_workshop .wp-block-group.alignwide[class*="wp-container-core-group-is-layout-"] {
  padding-left: 17px !important;
  padding-right: 17px !important;
}

/* Plan Section */
.single-openhouse .plan-section.wp-block-group.alignwide,
.single-openhouse .event-plan-section.wp-block-group.alignwide,
.single-consultation .plan-section.wp-block-group.alignwide,
.single-consultation .event-plan-section.wp-block-group.alignwide,
.single-lifestyle_workshop .plan-section.wp-block-group.alignwide,
.single-lifestyle_workshop .event-plan-section.wp-block-group.alignwide {
  padding-left: 17px !important;
  padding-right: 17px !important;
}

/* ====================================
   Events Archive - Tasks 5-8
   ==================================== */

/* Task 5: Event Post Title - Mobile Spacing & Padding */
@media (max-width: 768px) {
  .page-template-page-events .events-section-grid .wp-block-post-title,
  .archive.post-type-archive-openhouse .events-section-grid .wp-block-post-title,
  .archive.post-type-archive-consultation .events-section-grid .wp-block-post-title,
  .archive.post-type-archive-lifestyle_workshop .events-section-grid .wp-block-post-title {
    margin-top: 17px !important;
    padding-left: 15px !important;
  }
}

/* Task 6: Hero Section - Unified Height with position relative */
/* Desktop: 435px */
@media (min-width: 769px) {
  .page-template-page-events .hero-section,
  .archive.post-type-archive-openhouse .hero-section,
  .archive.post-type-archive-consultation .hero-section,
  .archive.post-type-archive-lifestyle_workshop .hero-section {
    position: relative;
    min-height: 435px;
    height: 435px;
  }
}

/* Mobile: 340px */
@media (max-width: 768px) {
  .page-template-page-events .hero-section,
  .archive.post-type-archive-openhouse .hero-section,
  .archive.post-type-archive-consultation .hero-section,
  .archive.post-type-archive-lifestyle_workshop .hero-section {
    position: relative;
    min-height: 340px;
    height: 340px;
  }
}

/* Task 7 & 8: Hero Title positioned at bottom */
/* Desktop */
@media (min-width: 769px) {
  .page-template-page-events .hero-section h1,
  .archive.post-type-archive-openhouse .hero-section h1,
  .archive.post-type-archive-consultation .hero-section h1,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 110px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .page-template-page-events .hero-section h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: 33px;
    padding-bottom: 75px;
  }

  /* También aplicar a archive pages en mobile si es necesario */
  .archive.post-type-archive-openhouse .hero-section h1,
  .archive.post-type-archive-consultation .hero-section h1,
  .archive.post-type-archive-lifestyle_workshop .hero-section h1 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 75px;
  }
}

/* ====================================
   Open House Archive - Tasks 10-12
   ==================================== */

/* Task 10: Single Pages - Event Info Container Gap 0 - Mobile */
@media (max-width: 768px) {
  /* Primero intentar sin !important */
  .single-openhouse .wp-block-columns.is-layout-flex[class*="wp-container-core-columns-is-layout-"],
  .single-consultation .wp-block-columns.is-layout-flex[class*="wp-container-core-columns-is-layout-"],
  .single-lifestyle_workshop .wp-block-columns.is-layout-flex[class*="wp-container-core-columns-is-layout-"] {
    gap: 0;
  }

  /* Con mayor especificidad si es necesario */
  .single-openhouse .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex[class*="wp-container-core-columns-is-layout-"],
  .single-consultation .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex[class*="wp-container-core-columns-is-layout-"],
  .single-lifestyle_workshop .wp-block-columns.is-layout-flex.wp-block-columns-is-layout-flex[class*="wp-container-core-columns-is-layout-"] {
    gap: 0 !important;
    margin-bottom: 40px !important;
  }
}

/* Task 11: Single Pages - Event Labels Color - Desktop */
@media (min-width: 769px) {
  .single-openhouse .event-label,
  .single-openhouse .event-type-label,
  .single-openhouse .event-venue-label,
  .single-openhouse .event-date-label,
  .single-consultation .event-label,
  .single-consultation .event-type-label,
  .single-consultation .event-venue-label,
  .single-consultation .event-date-label,
  .single-lifestyle_workshop .event-label,
  .single-lifestyle_workshop .event-type-label,
  .single-lifestyle_workshop .event-venue-label,
  .single-lifestyle_workshop .event-date-label {
    color: #969696;
    font-family: var(--wp--preset--font-family--en-serif); /* Adobe Jenson Pro */
  }
}

/* Event Info Section - Labels color for all screen sizes */
.single-openhouse .event-info-section h3,
.single-consultation .event-info-section h3,
.single-lifestyle_workshop .event-info-section h3 {
  color: #969696 !important;
}

/* Task 12: Single Pages - Event Labels Specificity Fix - Mobile */
@media (max-width: 768px) {
  /* Specific selectors for labels within event-info-section */
  .single-openhouse .event-info-section h3,
  .single-consultation .event-info-section h3,
  .single-lifestyle_workshop .event-info-section h3 {
    font-size: 12px !important;
    color: #969696 !important;
    font-family: var(--wp--preset--font-family--en-serif);
  }

  /* Event Info Section - Column spacing */
  .single-openhouse .event-info-section .wp-block-column:not(:last-child),
  .single-consultation .event-info-section .wp-block-column:not(:last-child),
  .single-lifestyle_workshop .event-info-section .wp-block-column:not(:last-child) {
    padding-bottom: 20px !important;
    margin-bottom: 0px !important;
  }

  .single-openhouse .event-info-section .is-layout-flow.wp-block-column-is-layout-flow, 
  .single-consultation .event-info-section .is-layout-flow.wp-block-column-is-layout-flow, 
  .single-lifestyle_workshop .event-info-section .is-layout-flow.wp-block-column-is-layout-flow {
    padding-top: 20px;
  }

  /* Task 13: Single Pages - Content Images Full Width (Mobile) */
  .single-openhouse .wp-block-post-content .wp-block-image img,
  .single-consultation .wp-block-post-content .wp-block-image img,
  .single-lifestyle_workshop .wp-block-post-content .wp-block-image img,
  .single-openhouse .event-description__content img,
  .single-consultation .event-description__content img,
  .single-lifestyle_workshop .event-description__content img {
    margin-left: -20px !important;
    margin-right: -20px !important;
    max-width: calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    display: block;
  }
}

/* Task 8: Reservation Form - Privacy Policy Section */
/* Privacy Policy Section Styles */
.reservation-privacy-section {
  margin-top: 40px;
  margin-bottom: 30px;
}

.reservation-privacy-title {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 12px;
  text-align: left;
}

.reservation-privacy-divider {
  border: none;
  border-top: 1px solid #CCCCCC;
  margin-bottom: 16px;
}

.reservation-privacy-content-container {
  max-height: 200px;
  overflow: auto;
  border: 1px solid #CCCCCC;
  padding: 16px;
  margin-bottom: 16px;
  background-color: #F5F5F5;
}

#reservation .reservation-privacy-content-container p {
  text-align: left;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #000;
}

.reservation-privacy-content {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 12px;
  line-height: 1.8;
  color: #000000;
  margin: 0;
}

.reservation-privacy-checkbox-field {
  margin-top: 16px;
  margin-bottom: 24px;
}

.reservation-privacy-checkbox-label {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  cursor: pointer;
}

.reservation-privacy-checkbox-label input[type="checkbox"] {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #000000;
}

.reservation-privacy-required {
  color: #FF0000;
  margin-left: 4px;
}

/* Submit Button Control */
.single-openhouse .wpcf7-submit,
.single-consultation .wpcf7-submit,
.single-lifestyle_workshop .wpcf7-submit {
  width: 100%;
  padding: 16px;
  background-color: #000000;
  color: #ffffff;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 16px;
  border: none;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.single-openhouse .wpcf7-submit:disabled,
.single-consultation .wpcf7-submit:disabled,
.single-lifestyle_workshop .wpcf7-submit:disabled {
  background-color: #CCCCCC;
  cursor: not-allowed;
}

.single-openhouse .wpcf7-submit:hover:not(:disabled),
.single-consultation .wpcf7-submit:hover:not(:disabled),
.single-lifestyle_workshop .wpcf7-submit:hover:not(:disabled) {
  background-color: #333333;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .reservation-privacy-title {
    font-size: 13px;
  }

  .reservation-privacy-content {
    font-size: 12px;
  }

  .reservation-privacy-checkbox-label {
    font-size: 11px;
  }
}

/* Task 8: Reservation Form - Phone Field Layout */
/* Phone Field Container - Mobile */
@media (max-width: 768px) {
  .single-openhouse .phone-inputs,
  .single-consultation .phone-inputs,
  .single-lifestyle_workshop .phone-inputs {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    width: 100%;
  }

  .single-openhouse .phone-inputs input,
  .single-consultation .phone-inputs input,
  .single-lifestyle_workshop .phone-inputs input {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 15px;
    background: #fafafa;
    -webkit-transition: border-color 0.3s ease;
    -o-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .single-openhouse .phone-inputs input:focus,
  .single-consultation .phone-inputs input:focus,
  .single-lifestyle_workshop .phone-inputs input:focus {
    outline: none;
    border-color: #333;
  }

  .single-openhouse .phone-inputs input:nth-child(1),
  .single-consultation .phone-inputs input:nth-child(1),
  .single-lifestyle_workshop .phone-inputs input:nth-child(1) {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
  }

  .single-openhouse .phone-inputs input:nth-child(3),
  .single-consultation .phone-inputs input:nth-child(3),
  .single-lifestyle_workshop .phone-inputs input:nth-child(3) {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 37.5%;
            flex: 0 1 37.5%;
  }

  .single-openhouse .phone-inputs input:nth-child(5),
  .single-consultation .phone-inputs input:nth-child(5),
  .single-lifestyle_workshop .phone-inputs input:nth-child(5) {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 1 37.5%;
            flex: 0 1 37.5%;
  }

  .phone-separator {
    color: #333;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-size: 14px;
  }
}

/* Phone Field Container - Desktop */
@media (min-width: 769px) {
  .single-openhouse .phone-inputs,
  .single-consultation .phone-inputs,
  .single-lifestyle_workshop .phone-inputs {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    width: 100%;
  }

  .single-openhouse .phone-inputs input,
  .single-consultation .phone-inputs input,
  .single-lifestyle_workshop .phone-inputs input {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 15px;
    background: #fafafa;
    -webkit-transition: border-color 0.3s ease;
    -o-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .single-openhouse .phone-inputs input:focus,
  .single-consultation .phone-inputs input:focus,
  .single-lifestyle_workshop .phone-inputs input:focus {
    outline: none;
    border-color: #333;
  }

  .phone-separator {
    color: #333;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    font-size: 14px;
  }
}

/* Phone Error Message */
.phone-error-message {
  display: block;
  color: #FF0000;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 12px;
  margin-top: 8px;
  text-align: left;
}

/* ========================================
   ABOUT PAGE - CSS ADJUSTMENTS
   ======================================== */

/* Task 1: Empty p tags - Remove unwanted spaces */
body.page-id-about,
body.page-about,
body.page-template-page-about p:empty,
body.page-template-about p:empty,
body.about p:empty {
  margin: 0 !important;
  padding: 0 !important;
  display: none;
}


/* Task 2: Hero Section - Override align-items */
/* Desktop - Bottom left alignment */
@media (min-width: 769px) {
  body.page-id-about .wp-block-cover,
body.page-about .wp-block-cover,
body.page-template-page-about .wp-block-cover,
  body.page-template-about .wp-block-cover {
    -webkit-box-align: end !important;
       -moz-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
            height: 488px;
  }

  body.page-id-about .wp-block-cover__inner-container,
body.page-about .wp-block-cover__inner-container,
body.page-template-page-about .wp-block-cover__inner-container,
  body.page-template-about .wp-block-cover__inner-container {
    -webkit-box-align: end !important;
       -moz-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
    -webkit-box-pack: start !important;
       -moz-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    width: 100%;
  }
}

/* Mobile - Bottom left alignment */
@media (max-width: 768px) {
  body.page-id-about .wp-block-cover,
body.page-about .wp-block-cover,
body.page-template-page-about .wp-block-cover,
  body.page-template-about .wp-block-cover {
    -webkit-box-align: end !important;
       -moz-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
            height: 503px;
  }

  body.page-id-about .wp-block-cover__inner-container,
body.page-about .wp-block-cover__inner-container,
body.page-template-page-about .wp-block-cover__inner-container,
  body.page-template-about .wp-block-cover__inner-container {
    -webkit-box-align: end !important;
       -moz-box-align: end !important;
        -ms-flex-align: end !important;
            align-items: flex-end !important;
    -webkit-box-pack: start !important;
       -moz-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
    width: 100%;
  }
}

/* Task 3: Menu Links - Same style as Guide page */
body.page-id-about .about-menu-link,
body.page-about .about-menu-link,
body.page-template-page-about .about-menu-link,
body.page-template-about .about-menu-link {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #CCCCCC;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 13px;
  text-decoration: none;
  color: #000000;
}

/* Down arrow (v shape) with CSS */
body.page-id-about .about-menu-link,
body.page-about .about-menu-link,
body.page-template-page-about .about-menu-link::after,
body.page-template-about .about-menu-link::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  margin-left: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* Hide existing ">" character if present */
body.page-id-about .about-menu-link,
body.page-about .about-menu-link,
body.page-template-page-about .about-menu-link > span:last-child,
body.page-template-about .about-menu-link > span:last-child {
  display: none;
}

/* Desktop - Vertical layout */
body.page-id-about .about-menu-container,
body.page-about .about-menu-container,
body.page-template-page-about .about-menu-container,
body.page-template-about .about-menu-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

/* Mobile - Grid layout (2 columns × 2 rows) */
@media (max-width: 768px) {
  body.page-id-about .about-menu-container,
body.page-about .about-menu-container,
body.page-template-page-about .about-menu-container,
  body.page-template-about .about-menu-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: 18px;
       -moz-column-gap: 18px;
            column-gap: 18px;
    row-gap: 40px;
    width: 100%;
  }

  body.page-id-about .about-menu-link,
body.page-about .about-menu-link,
body.page-template-page-about .about-menu-link,
  body.page-template-about .about-menu-link {
    width: 100%;
  }
}

/* Task 4: Company Profile Table - th border styles */
/* Desktop - Add bottom border to th */
@media (min-width: 769px) {
  body.page-id-about .company-profile-table,
body.page-about .company-profile-table,
body.page-template-page-about .company-profile-table th,
  body.page-template-about .company-profile-table th {
    border-bottom: 1px solid #464646;
  }
}

/* Mobile - Remove all borders from th */
@media (max-width: 768px) {
  body.page-id-about .company-profile-table,
body.page-about .company-profile-table,
body.page-template-page-about .company-profile-table th,
  body.page-template-about .company-profile-table th {
    border: none;
  }
}

/* Common th styles */
body.page-id-about .company-profile-table,
body.page-about .company-profile-table,
body.page-template-page-about .company-profile-table th,
body.page-template-about .company-profile-table th {
  padding: 10px;
  text-align: left;
  font-weight: normal;
}

/* Task 5: Staff Section - Auto Slider + Hover Effect */
/* Container - staff-carousel */
body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel,
body.page-template-about .staff-carousel {
  overflow: hidden;
  width: 100%;
  position: relative;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

body.page-id-about .staff-carousel:active,
body.page-about .staff-carousel:active,
body.page-template-page-about .staff-carousel:active,
body.page-template-about .staff-carousel:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* Track - wp-block-post-template (override grid layout) */
body.page-id-about .staff-carousel .wp-block-post-template,
body.page-about .staff-carousel .wp-block-post-template,
body.page-template-page-about .staff-carousel .wp-block-post-template,
body.page-template-about .staff-carousel .wp-block-post-template {
  display: -webkit-box !important;
  display: -moz-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  will-change: transform;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Staff Card - wp-block-post (list item) */
body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post,
body.page-template-about .staff-carousel .wp-block-post {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
  margin: 0;
}

body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card,
body.page-template-about .staff-carousel .staff-card {
  position: relative;
  overflow: hidden;
}

body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post-featured-image img,
body.page-template-about .staff-carousel .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Desktop - Hover Overlay */
@media (min-width: 769px) {
  /* Hide role/name text by default (shown on hover) */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post p,
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post h3,
  body.page-template-about .staff-carousel .wp-block-post p,
  body.page-template-about .staff-carousel .wp-block-post h3 {
    display: none;
  }

  /* Staff info container */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card > .wp-block-group:last-child,
  body.page-template-about .staff-carousel .staff-card > .wp-block-group:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card:hover > .wp-block-group:last-child,
  body.page-template-about .staff-carousel .staff-card:hover > .wp-block-group:last-child {
    opacity: 1;
  }

  /* Show text on hover */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card:hover p,
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card:hover h3,
  body.page-template-about .staff-carousel .staff-card:hover p,
  body.page-template-about .staff-carousel .staff-card:hover h3 {
    display: block !important;
    text-align: center;
    margin: 0;
  }

  /* Role text styling */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card p,
  body.page-template-about .staff-carousel .staff-card p {
    padding-top: 14px;
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 13px;
    color: #000000;
  }

  /* Name text styling */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card h3,
  body.page-template-about .staff-carousel .staff-card h3 {
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 16px;
    color: #000000;
  }

}

/* Mobile - Always show info below image */
@media (max-width: 768px) {
  body.page-id-about .staff-carousel, body.page-about .staff-carousel, body.page-template-page-about .staff-carousel, body.page-template-about .staff-carousel {
    overflow: visible !important;
  }

  /* Show text container normally */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card > .wp-block-group:last-child,
  body.page-template-about .staff-carousel .staff-card > .wp-block-group:last-child {
    position: absolute;
    opacity: 1;
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background-color: transparent;
    bottom: -18%;
  }

  body.page-id-about .staff-carousel li.staff.type-staff.has-post-thumbnail.hentry, body.page-template-page-about .staff-carousel .wp-block-post {
    height: 294px;
    width: 258px;
    overflow: visible;
  }

  body.page-id-about .staff-carousel, body.page-about .staff-carousel, body.page-template-page-about .staff-carousel .staff-card, body.page-template-about .staff-carousel .staff-card {
    overflow: visible !important;
  }

  /* Show all text elements */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post p,
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .wp-block-post h3,
  body.page-template-about .staff-carousel .wp-block-post p,
  body.page-template-about .staff-carousel .wp-block-post h3 {
    display: block !important;
    opacity: 1;
    text-align: center;
  }

  /* Role text styling */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card p,
  body.page-template-about .staff-carousel .staff-card p {
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 10px !important;
    color: #000000;
    margin: 0 !important;
    padding-top: 0;
  }

  /* Name text styling */
  body.page-id-about .staff-carousel,
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel .staff-card h3,
  body.page-template-about .staff-carousel .staff-card h3 {
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 15px !important;
    color: #000000;
    margin: 0;
  }

}

/* Task 6: Message Section - Image styles */
body.page-id-about .message-title-image,
body.page-about .message-title-image,
body.page-template-page-about .message-title-image,
body.page-template-about .message-title-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

body.page-id-about .message-section,
body.page-about .message-section,
body.page-template-page-about .message-section .wp-block-image,
body.page-template-about .message-section .wp-block-image {
  text-align: center;
}

@media (max-width: 768px) {
  body.page-id-about .message-title-image,
body.page-about .message-title-image,
body.page-template-page-about .message-title-image,
  body.page-template-about .message-title-image {
    max-width: 100%;
  }
}

/* Task 7: CSR Section - Gallery (Story Single style) */
@media (min-width: 769px) {
  body.page-id-about .csr-gallery-container,
body.page-about .csr-gallery-container,
body.page-template-page-about .csr-gallery-container,
  body.page-template-about .csr-gallery-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
  }

  body.page-id-about .csr-gallery-item,
body.page-about .csr-gallery-item,
body.page-template-page-about .csr-gallery-item,
  body.page-template-about .csr-gallery-item {
    position: relative;
    overflow: hidden;
  }

  body.page-id-about .csr-gallery-item,
body.page-about .csr-gallery-item,
body.page-template-page-about .csr-gallery-item img,
  body.page-template-about .csr-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media (max-width: 768px) {
  body.page-id-about .csr-gallery-container,
body.page-about .csr-gallery-container,
body.page-template-page-about .csr-gallery-container,
  body.page-template-about .csr-gallery-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  body.page-id-about .csr-gallery-container,
body.page-about .csr-gallery-container,
body.page-template-page-about .csr-gallery-container::-webkit-scrollbar,
  body.page-template-about .csr-gallery-container::-webkit-scrollbar {
    display: none;
  }

  body.page-id-about .csr-gallery-item,
body.page-about .csr-gallery-item,
body.page-template-page-about .csr-gallery-item,
  body.page-template-about .csr-gallery-item {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: start;
  }

  body.page-id-about .csr-gallery-item,
body.page-about .csr-gallery-item,
body.page-template-page-about .csr-gallery-item img,
  body.page-template-about .csr-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/* Task 8: Recruitment Section - Copy CSR Archive style */
body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section,
body.page-template-about .recruitment-section {
  background-color: #ffffff;
  padding: 60px 0;
}

body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section h2,
body.page-template-about .recruitment-section h2 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 24px;
  margin-bottom: 40px;
}

body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section p,
body.page-template-about .recruitment-section p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section a,
body.page-template-about .recruitment-section a {
  color: #000000;
  text-decoration: underline;
}

@media (min-width: 769px) {
  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section,
  body.page-template-about .recruitment-section {
    padding: 80px 0;
  }

  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section h2,
  body.page-template-about .recruitment-section h2 {
    font-size: 28px;
  }

  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section p,
  body.page-template-about .recruitment-section p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section,
  body.page-template-about .recruitment-section {
    padding: 40px 0;
  }

  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section h2,
  body.page-template-about .recruitment-section h2 {
    font-size: 20px;
    margin-bottom: 30px;
  }

  body.page-id-about .recruitment-section,
body.page-about .recruitment-section,
body.page-template-page-about .recruitment-section p,
  body.page-template-about .recruitment-section p {
    font-size: 13px;
  }

  body.page-id-about .recruit-section .office-building,
  body.page-about .recruit-section .office-building,
  body.page-template-page-about .recruit-section .office-building,
  body.page-template-about .recruit-section .office-building {
    height: 375px;
    overflow: hidden;
  }

  body.page-id-about .recruit-section .wp-image-521,
  body.page-about .recruit-section .wp-image-521,
  body.page-template-page-about .recruit-section .wp-image-521,
  body.page-template-about .recruit-section .wp-image-521 {
    min-height: 375px;
    height: 375px;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
}

/* Task 9: Project Section - Top Page Stories style */
body.page-id-about .project-section,
body.page-about .project-section,
body.page-template-page-about .project-section,
body.page-template-about .project-section {
  background-color: #F7F7F7;
  padding: 60px 0;
}

@media (min-width: 769px) {
  body.page-id-about .project-grid,
body.page-about .project-grid,
body.page-template-page-about .project-grid,
  body.page-template-about .project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  body.page-id-about .project-grid,
body.page-about .project-grid,
body.page-template-page-about .project-grid,
  body.page-template-about .project-grid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
    padding: 0 10px;
  }
}

body.page-id-about .project-item,
body.page-about .project-item,
body.page-template-page-about .project-item,
body.page-template-about .project-item {
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
}

body.page-id-about .project-item,
body.page-about .project-item,
body.page-template-page-about .project-item a,
body.page-template-about .project-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

body.page-id-about .project-item,
body.page-about .project-item,
body.page-template-page-about .project-item img,
body.page-template-about .project-item img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

body.page-id-about .project-content,
body.page-about .project-content,
body.page-template-page-about .project-content,
body.page-template-about .project-content {
  padding: 20px;
}

body.page-id-about .project-title,
body.page-about .project-title,
body.page-template-page-about .project-title,
body.page-template-about .project-title {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 18px;
  line-height: 1.6;
  color: #000000;
  margin-bottom: 10px;
}

body.page-id-about .project-meta,
body.page-about .project-meta,
body.page-template-page-about .project-meta,
body.page-template-about .project-meta {
  font-family: var(--wp--preset--font-family--ja-sans);
  font-size: 14px;
  color: #666666;
}

/* Task 10: News Section - Top Page style */
body.page-id-about .news-section,
body.page-about .news-section,
body.page-template-page-about .news-section,
body.page-template-about .news-section {
  background-color: #ffffff;
  padding: 60px 0;
}

@media (min-width: 769px) {
  body.page-id-about .news-list,
body.page-about .news-list,
body.page-template-page-about .news-list,
  body.page-template-about .news-list {
    max-width: 1200px;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }

  /* Old news-item styles removed - now using .news-meta from top-news-section */
}

@media (max-width: 768px) {
  body.page-id-about .news-list,
body.page-about .news-list,
body.page-template-page-about .news-list,
  body.page-template-about .news-list {
    padding: 0 10px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }

  body.page-id-about .news-item,
body.page-about .news-item,
body.page-template-page-about .news-item,
  body.page-template-about .news-item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #CCCCCC;
  }

  body.page-id-about .news-item,
body.page-about .news-item,
body.page-template-page-about .news-item:last-child,
  body.page-template-about .news-item:last-child {
    border-bottom: none;
  }

  body.page-id-about .news-date,
body.page-about .news-date,
body.page-template-page-about .news-date,
  body.page-template-about .news-date {
    font-family: var(--wp--preset--font-family--en-serif);
    font-size: 12px;
    color: #666666;
  }

  body.page-id-about .news-title,
body.page-about .news-title,
body.page-template-page-about .news-title,
  body.page-template-about .news-title {
    font-family: var(--wp--preset--font-family--ja-serif);
    font-size: 14px;
    line-height: 1.8;
    color: #000000;
    margin: 0;
  }

  body.page-id-about .news-title,
body.page-about .news-title,
body.page-template-page-about .news-title a,
  body.page-template-about .news-title a {
    text-decoration: none;
    color: inherit;
  }
}

/* ========================================
   CSR GALLERY SECTION - About Page (Same as Events Point Gallery)
   ======================================== */

/* Desktop - Grid Layout (3 columns) */
@media (min-width: 769px) {
  .csr-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
  }

  .csr-card-image {
    width: 100%;
    aspect-ratio: 548 / 465;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .csr-card-image a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }

  .csr-card-image a:hover {
    opacity: 0.9;
  }

  .csr-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  .csr-card-caption {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    font-family: var(--wp--preset--font-family--ja-serif);
    margin: 0;
  }

  .csr-card-caption a {
    text-decoration: none;
    color: inherit;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }

  .csr-card-caption a:hover {
    opacity: 0.7;
  }
}

/* Mobile - Horizontal Swiper (Same as events point-gallery) */
@media (max-width: 768px) {
  .csr-gallery-grid {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
       -moz-box-orient: horizontal !important;
       -moz-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -ms-scroll-snap-type: x mandatory !important;
        scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 7px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .csr-gallery-grid::-webkit-scrollbar {
    display: none !important;
  }

  .csr-card {
    -webkit-box-flex: 0 !important;
       -moz-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
            flex: 0 0 auto !important;
    width: 332px !important;
    scroll-snap-align: start !important;
  }

  .csr-card-image {
    width: 100%;
    aspect-ratio: 548 / 465;
    overflow: hidden;
    margin-bottom: 16px;
  }

  .csr-card-image a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .csr-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  .csr-card-caption {
    font-size: 13px;
    line-height: 1.8;
    color: #333;
    font-family: var(--wp--preset--font-family--ja-serif);
    margin: 0;
  }

  .csr-card-caption a {
    text-decoration: none;
    color: inherit;
  }
}

/* ========================================
   PROJECT SECTION - About Page
   ======================================== */

/* Desktop - Grid de 3 columnas */
@media (min-width: 769px) {
  .company-projects-section-wrapper .story-cards-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
  }

  /* Aspect ratio 1:1 para las imágenes */
  .company-projects-section-wrapper .story-card-with-overlay .wp-block-post-featured-image img {
    aspect-ratio: 1 / 1;
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  /* Zoom en hover */
  .company-projects-section-wrapper .story-card-with-overlay:hover .wp-block-post-featured-image img {
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
  }
}

/* Mobile - Horizontal Swiper */
@media (max-width: 768px) {
  .company-projects-section-wrapper .story-cards-container {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
       -moz-box-orient: horizontal !important;
       -moz-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -ms-scroll-snap-type: x mandatory !important;
        scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 7px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .company-projects-section-wrapper .story-cards-container::-webkit-scrollbar {
    display: none !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay {
    -webkit-box-flex: 0 !important;
       -moz-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
            flex: 0 0 auto !important;
    width: 332px !important;
    scroll-snap-align: start !important;
  }
}

/* ========================================
   PROJECT CARDS - Ensure overlay text is visible
   ======================================== */

.company-projects-section-wrapper .story-overlay-content {
  opacity: 1 !important;
  visibility: visible !important;
}

.company-projects-section-wrapper .story-card-with-overlay .wp-block-post-title,
.company-projects-section-wrapper .story-card-with-overlay .wp-block-post-title a {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.company-projects-section-wrapper .story-card-with-overlay .wp-block-post-date {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Event single templates - Desktop column padding */
@media (min-width: 769px) {
  body.single-lifestyle_workshop .wp-block-columns.event-info-section,
  body.single-consultation .wp-block-columns.event-info-section,
  body.single-openhouse .wp-block-columns.event-info-section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  body.single-lifestyle_workshop .wp-block-columns .wp-block-column,
  body.single-consultation .wp-block-columns .wp-block-column,
  body.single-openhouse .wp-block-columns .wp-block-column {
    padding-right: 20px;
    padding-left: 20px;
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

/* Override WordPress inline styles for staff carousel figure */
.staff-carousel.alignwide .wp-block-post .staff-card figure.wp-block-post-featured-image[style*="aspect-ratio"],
.staff-carousel.alignwide .wp-block-post .wp-block-group.staff-card figure.wp-block-post-featured-image[style*="height"] {
  height: 100% !important;
  aspect-ratio: unset !important;
}

/* ============================================================
   POST CONTENT EDITOR STYLES
   Applies to: works, stories, openhouse, consultation,
   lifestyle_workshop, projects, csr
   ============================================================ */

/* ============================================================
   EDITOR TYPOGRAPHY STYLES
   Standardizes font family and sizes for editor content across
   specified post types (Desktop & Mobile: same sizes)
   ============================================================ */

/* Headings (h1-h6) */
body.single-works .entry-content.wp-block-post-content h1,
body.single-works .entry-content.wp-block-post-content h2,
body.single-works .entry-content.wp-block-post-content h3,
body.single-works .entry-content.wp-block-post-content h4,
body.single-works .entry-content.wp-block-post-content h5,
body.single-works .entry-content.wp-block-post-content h6,
body.single-stories .entry-content.wp-block-post-content h1,
body.single-stories .entry-content.wp-block-post-content h2,
body.single-stories .entry-content.wp-block-post-content h3,
body.single-stories .entry-content.wp-block-post-content h4,
body.single-stories .entry-content.wp-block-post-content h5,
body.single-stories .entry-content.wp-block-post-content h6,
body.single-openhouse .entry-content.wp-block-post-content h1,
body.single-openhouse .entry-content.wp-block-post-content h2,
body.single-openhouse .entry-content.wp-block-post-content h3,
body.single-openhouse .entry-content.wp-block-post-content h4,
body.single-openhouse .entry-content.wp-block-post-content h5,
body.single-openhouse .entry-content.wp-block-post-content h6,
body.single-consultation .entry-content.wp-block-post-content h1,
body.single-consultation .entry-content.wp-block-post-content h2,
body.single-consultation .entry-content.wp-block-post-content h3,
body.single-consultation .entry-content.wp-block-post-content h4,
body.single-consultation .entry-content.wp-block-post-content h5,
body.single-consultation .entry-content.wp-block-post-content h6,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h1,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h2,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h3,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h4,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h5,
body.single-lifestyle_workshop .entry-content.wp-block-post-content h6,
body.single-projects .entry-content.wp-block-post-content h1,
body.single-projects .entry-content.wp-block-post-content h2,
body.single-projects .entry-content.wp-block-post-content h3,
body.single-projects .entry-content.wp-block-post-content h4,
body.single-projects .entry-content.wp-block-post-content h5,
body.single-projects .entry-content.wp-block-post-content h6,
body.single-csr .entry-content.wp-block-post-content h1,
body.single-csr .entry-content.wp-block-post-content h2,
body.single-csr .entry-content.wp-block-post-content h3,
body.single-csr .entry-content.wp-block-post-content h4,
body.single-csr .entry-content.wp-block-post-content h5,
body.single-csr .entry-content.wp-block-post-content h6 {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Paragraphs (p) */
body.single-works .entry-content.wp-block-post-content p,
body.single-stories .entry-content.wp-block-post-content p,
body.single-openhouse .entry-content.wp-block-post-content p,
body.single-consultation .entry-content.wp-block-post-content p,
body.single-lifestyle_workshop .entry-content.wp-block-post-content p,
body.single-projects .entry-content.wp-block-post-content p,
body.single-csr .entry-content.wp-block-post-content p {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Figcaption */
body.single-works .entry-content.wp-block-post-content figcaption,
body.single-stories .entry-content.wp-block-post-content figcaption,
body.single-openhouse .entry-content.wp-block-post-content figcaption,
body.single-consultation .entry-content.wp-block-post-content figcaption,
body.single-lifestyle_workshop .entry-content.wp-block-post-content figcaption,
body.single-projects .entry-content.wp-block-post-content figcaption,
body.single-csr .entry-content.wp-block-post-content figcaption {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* List Items (li) */
body.single-works .entry-content.wp-block-post-content li,
body.single-stories .entry-content.wp-block-post-content li,
body.single-openhouse .entry-content.wp-block-post-content li,
body.single-consultation .entry-content.wp-block-post-content li,
body.single-lifestyle_workshop .entry-content.wp-block-post-content li,
body.single-projects .entry-content.wp-block-post-content li,
body.single-csr .entry-content.wp-block-post-content li {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Strong (bold only, same size as parent) */
body.single-works .entry-content.wp-block-post-content strong,
body.single-stories .entry-content.wp-block-post-content strong,
body.single-openhouse .entry-content.wp-block-post-content strong,
body.single-consultation .entry-content.wp-block-post-content strong,
body.single-lifestyle_workshop .entry-content.wp-block-post-content strong,
body.single-projects .entry-content.wp-block-post-content strong,
body.single-csr .entry-content.wp-block-post-content strong {
  font-weight: 700 !important;
  font-size: inherit !important; /* Mantiene el tamaño del elemento padre */
}

/* Blockquote */
body.single-works .entry-content.wp-block-post-content blockquote,
body.single-stories .entry-content.wp-block-post-content blockquote,
body.single-openhouse .entry-content.wp-block-post-content blockquote,
body.single-consultation .entry-content.wp-block-post-content blockquote,
body.single-lifestyle_workshop .entry-content.wp-block-post-content blockquote,
body.single-projects .entry-content.wp-block-post-content blockquote,
body.single-csr .entry-content.wp-block-post-content blockquote {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Cite */
body.single-works .entry-content.wp-block-post-content cite,
body.single-stories .entry-content.wp-block-post-content cite,
body.single-openhouse .entry-content.wp-block-post-content cite,
body.single-consultation .entry-content.wp-block-post-content cite,
body.single-lifestyle_workshop .entry-content.wp-block-post-content cite,
body.single-projects .entry-content.wp-block-post-content cite,
body.single-csr .entry-content.wp-block-post-content cite {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Reset margins for figures and images */
body.single-works .wp-block-post-content figure,
body.single-stories .wp-block-post-content figure,
body.single-openhouse .wp-block-post-content figure,
body.single-consultation .wp-block-post-content figure,
body.single-lifestyle_workshop .wp-block-post-content figure,
body.single-projects .wp-block-post-content figure,
body.single-csr .wp-block-post-content figure {
  margin-bottom: 0;
}

body.single-works .wp-block-post-content img,
body.single-stories .wp-block-post-content img,
body.single-openhouse .wp-block-post-content img,
body.single-consultation .wp-block-post-content img,
body.single-lifestyle_workshop .wp-block-post-content img,
body.single-projects .wp-block-post-content img,
body.single-csr .wp-block-post-content img {
  margin-bottom: 0;
}

/* Paragraph and Heading spacing - Desktop */
@media (min-width: 769px) {
  /* Base styles for all paragraphs and figcaptions */
  body.single-works .wp-block-post-content p,
  body.single-works .wp-block-post-content figcaption,
  body.single-stories .wp-block-post-content p,
  body.single-stories .wp-block-post-content figcaption,
  body.single-openhouse .wp-block-post-content p,
  body.single-openhouse .wp-block-post-content figcaption,
  body.single-consultation .wp-block-post-content p,
  body.single-consultation .wp-block-post-content figcaption,
  body.single-lifestyle_workshop .wp-block-post-content p,
  body.single-lifestyle_workshop .wp-block-post-content figcaption,
  body.single-projects .wp-block-post-content p,
  body.single-projects .wp-block-post-content figcaption,
  body.single-csr .wp-block-post-content p,
  body.single-csr .wp-block-post-content figcaption {
    padding-left: 30px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  body.single-works .wp-block-post-content h1,
  body.single-works .wp-block-post-content h2,
  body.single-works .wp-block-post-content h3,
  body.single-works .wp-block-post-content h4,
  body.single-works .wp-block-post-content h5,
  body.single-works .wp-block-post-content h6,
  body.single-stories .wp-block-post-content h1,
  body.single-stories .wp-block-post-content h2,
  body.single-stories .wp-block-post-content h3,
  body.single-stories .wp-block-post-content h4,
  body.single-stories .wp-block-post-content h5,
  body.single-stories .wp-block-post-content h6,
  body.single-openhouse .wp-block-post-content h1,
  body.single-openhouse .wp-block-post-content h2,
  body.single-openhouse .wp-block-post-content h3,
  body.single-openhouse .wp-block-post-content h4,
  body.single-openhouse .wp-block-post-content h5,
  body.single-openhouse .wp-block-post-content h6,
  body.single-consultation .wp-block-post-content h1,
  body.single-consultation .wp-block-post-content h2,
  body.single-consultation .wp-block-post-content h3,
  body.single-consultation .wp-block-post-content h4,
  body.single-consultation .wp-block-post-content h5,
  body.single-consultation .wp-block-post-content h6,
  body.single-lifestyle_workshop .wp-block-post-content h1,
  body.single-lifestyle_workshop .wp-block-post-content h2,
  body.single-lifestyle_workshop .wp-block-post-content h3,
  body.single-lifestyle_workshop .wp-block-post-content h4,
  body.single-lifestyle_workshop .wp-block-post-content h5,
  body.single-lifestyle_workshop .wp-block-post-content h6,
  body.single-projects .wp-block-post-content h1,
  body.single-projects .wp-block-post-content h2,
  body.single-projects .wp-block-post-content h3,
  body.single-projects .wp-block-post-content h4,
  body.single-projects .wp-block-post-content h5,
  body.single-projects .wp-block-post-content h6,
  body.single-csr .wp-block-post-content h1,
  body.single-csr .wp-block-post-content h2,
  body.single-csr .wp-block-post-content h3,
  body.single-csr .wp-block-post-content h4,
  body.single-csr .wp-block-post-content h5,
  body.single-csr .wp-block-post-content h6 {
    padding-top: 30px;
    padding-left: 30px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* padding-top for paragraphs NOT after another paragraph AND NOT after any heading */
  body.single-works .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-stories .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-openhouse .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-consultation .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-lifestyle_workshop .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-projects .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-csr .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p) {
    padding-top: 30px;
  }

  /* Blockquote and Cite - Mobile padding-left */
  body.single-works .entry-content.wp-block-post-content blockquote,
  body.single-stories .entry-content.wp-block-post-content blockquote,
  body.single-openhouse .entry-content.wp-block-post-content blockquote,
  body.single-consultation .entry-content.wp-block-post-content blockquote,
  body.single-lifestyle_workshop .entry-content.wp-block-post-content blockquote,
  body.single-projects .entry-content.wp-block-post-content blockquote,
  body.single-csr .entry-content.wp-block-post-content blockquote,
  body.single-works .entry-content.wp-block-post-content cite,
  body.single-stories .entry-content.wp-block-post-content cite,
  body.single-openhouse .entry-content.wp-block-post-content cite,
  body.single-consultation .entry-content.wp-block-post-content cite,
  body.single-lifestyle_workshop .entry-content.wp-block-post-content cite,
  body.single-projects .entry-content.wp-block-post-content cite,
  body.single-csr .entry-content.wp-block-post-content cite {
    padding-left: 30px;
  }
}

/* Paragraph and Heading spacing - Mobile */
@media (max-width: 768px) {
  /* Base styles for all paragraphs and figcaptions */
  body.single-works .wp-block-post-content p,
  body.single-works .wp-block-post-content figcaption,
  body.single-stories .wp-block-post-content p,
  body.single-stories .wp-block-post-content figcaption,
  body.single-openhouse .wp-block-post-content p,
  body.single-openhouse .wp-block-post-content figcaption,
  body.single-consultation .wp-block-post-content p,
  body.single-consultation .wp-block-post-content figcaption,
  body.single-lifestyle_workshop .wp-block-post-content p,
  body.single-lifestyle_workshop .wp-block-post-content figcaption,
  body.single-projects .wp-block-post-content p,
  body.single-projects .wp-block-post-content figcaption,
  body.single-csr .wp-block-post-content p,
  body.single-csr .wp-block-post-content figcaption {
    padding-left: 15px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  body.single-works .wp-block-post-content h1,
  body.single-works .wp-block-post-content h2,
  body.single-works .wp-block-post-content h3,
  body.single-works .wp-block-post-content h4,
  body.single-works .wp-block-post-content h5,
  body.single-works .wp-block-post-content h6,
  body.single-stories .wp-block-post-content h1,
  body.single-stories .wp-block-post-content h2,
  body.single-stories .wp-block-post-content h3,
  body.single-stories .wp-block-post-content h4,
  body.single-stories .wp-block-post-content h5,
  body.single-stories .wp-block-post-content h6,
  body.single-openhouse .wp-block-post-content h1,
  body.single-openhouse .wp-block-post-content h2,
  body.single-openhouse .wp-block-post-content h3,
  body.single-openhouse .wp-block-post-content h4,
  body.single-openhouse .wp-block-post-content h5,
  body.single-openhouse .wp-block-post-content h6,
  body.single-consultation .wp-block-post-content h1,
  body.single-consultation .wp-block-post-content h2,
  body.single-consultation .wp-block-post-content h3,
  body.single-consultation .wp-block-post-content h4,
  body.single-consultation .wp-block-post-content h5,
  body.single-consultation .wp-block-post-content h6,
  body.single-lifestyle_workshop .wp-block-post-content h1,
  body.single-lifestyle_workshop .wp-block-post-content h2,
  body.single-lifestyle_workshop .wp-block-post-content h3,
  body.single-lifestyle_workshop .wp-block-post-content h4,
  body.single-lifestyle_workshop .wp-block-post-content h5,
  body.single-lifestyle_workshop .wp-block-post-content h6,
  body.single-projects .wp-block-post-content h1,
  body.single-projects .wp-block-post-content h2,
  body.single-projects .wp-block-post-content h3,
  body.single-projects .wp-block-post-content h4,
  body.single-projects .wp-block-post-content h5,
  body.single-projects .wp-block-post-content h6,
  body.single-csr .wp-block-post-content h1,
  body.single-csr .wp-block-post-content h2,
  body.single-csr .wp-block-post-content h3,
  body.single-csr .wp-block-post-content h4,
  body.single-csr .wp-block-post-content h5,
  body.single-csr .wp-block-post-content h6 {
    padding-top: 20px;
    padding-left: 15px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* padding-top for paragraphs NOT after another paragraph AND NOT after any heading */
  body.single-works .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-stories .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-openhouse .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-consultation .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-lifestyle_workshop .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-projects .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  body.single-csr .wp-block-post-content p:not(p + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p) {
    padding-top: 20px;
  }
  
  /* Blockquote and Cite - Mobile padding-left */
  body.single-works .entry-content.wp-block-post-content blockquote,
  body.single-stories .entry-content.wp-block-post-content blockquote,
  body.single-openhouse .entry-content.wp-block-post-content blockquote,
  body.single-consultation .entry-content.wp-block-post-content blockquote,
  body.single-lifestyle_workshop .entry-content.wp-block-post-content blockquote,
  body.single-projects .entry-content.wp-block-post-content blockquote,
  body.single-csr .entry-content.wp-block-post-content blockquote,
  body.single-works .entry-content.wp-block-post-content cite,
  body.single-stories .entry-content.wp-block-post-content cite,
  body.single-openhouse .entry-content.wp-block-post-content cite,
  body.single-consultation .entry-content.wp-block-post-content cite,
  body.single-lifestyle_workshop .entry-content.wp-block-post-content cite,
  body.single-projects .entry-content.wp-block-post-content cite,
  body.single-csr .entry-content.wp-block-post-content cite {
    padding-left: 15px !important;
  }
}

/* ============================================================
   EVENT DESCRIPTION CONTENT - Same typography and spacing as editor
   ============================================================ */

/* Base styles - max-width and lateral padding */
.event-description__content {
  padding-left: 14px;
  padding-right: 14px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop - Vertical padding */
@media (min-width: 769px) {
  .event-description__content {
    padding-top: 120px !important;
    padding-bottom: 150px !important;
  }
}

/* Mobile - Vertical padding */
@media (max-width: 768px) {
  .event-description__content {
    padding-top: 90px !important;
    padding-bottom: 120px !important;
  }
}

/* Typography for event-description__content */
/* Headings (h1-h6) */
.event-description__content h1,
.event-description__content h2,
.event-description__content h3,
.event-description__content h4,
.event-description__content h5,
.event-description__content h6 {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* Paragraphs (p) and List Items (li) */
.event-description__content p,
.event-description__content li {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Figcaption */
.event-description__content figcaption {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Lists (ul, ol) - Show bullets/numbers */
.event-description__content ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 30px;
}

.event-description__content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 30px;
}

.event-description__content li {
  display: list-item;
}

/* Event Description - Desktop spacing */
@media (min-width: 769px) {
  /* Base styles for paragraphs and figcaptions */
  .event-description__content p,
  .event-description__content figcaption {
    padding-left: 30px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Base styles for list items (no padding-left, it comes from ul/ol) */
  .event-description__content li {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  .event-description__content h1,
  .event-description__content h2,
  .event-description__content h3,
  .event-description__content h4,
  .event-description__content h5,
  .event-description__content h6 {
    padding-top: 30px;
    padding-left: 30px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* padding-top for paragraphs and list items NOT after another paragraph/li AND NOT after any heading */
  .event-description__content p:not(p + p):not(li + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  .event-description__content li:not(li + li):not(p + li):not(h1 + li):not(h2 + li):not(h3 + li):not(h4 + li):not(h5 + li):not(h6 + li) {
    padding-top: 30px;
  }
}

/* Event Description - Mobile spacing */
@media (max-width: 768px) {
  /* Base styles for paragraphs and figcaptions */
  .event-description__content p,
  .event-description__content figcaption {
    padding-left: 15px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Base styles for list items (no padding-left, it comes from ul/ol) */
  .event-description__content li {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  .event-description__content h1,
  .event-description__content h2,
  .event-description__content h3,
  .event-description__content h4,
  .event-description__content h5,
  .event-description__content h6 {
    padding-top: 20px;
    padding-left: 15px;
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* padding-top for paragraphs and list items NOT after another paragraph/li AND NOT after any heading */
  .event-description__content p:not(p + p):not(li + p):not(h1 + p):not(h2 + p):not(h3 + p):not(h4 + p):not(h5 + p):not(h6 + p),
  .event-description__content li:not(li + li):not(p + li):not(h1 + li):not(h2 + li):not(h3 + li):not(h4 + li):not(h5 + li):not(h6 + li) {
    padding-top: 20px;
  }
}

/* ============================================================
   END POST CONTENT EDITOR STYLES
   ============================================================ */

/* ============================================================
   MOBILE MENU ADJUSTMENTS - Close Button Positioning
   If you need to revert, delete everything between START and END
   ============================================================ */

@media (max-width: 768px) {
  /* Close Button (X): Absolute Positioning */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10000 !important; /* Ensure it's above everything */
  }
}

/* ============================================================
   END MOBILE MENU ADJUSTMENTS
   ============================================================ */

/* ============================================================
   GUIDE WARRANTY GRID STYLES
   ============================================================ */
  .guide-supports {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
  }

   .guide-warranty-grid .wp-block-column {
  position: relative;
  padding: 35px 35px 20px 35px !important;
  border: none !important; /* Reset standard borders */
}

/* Border via pseudo-element (Desktop & Mobile base) */
.guide-warranty-grid .wp-block-column::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Default Desktop width */
  height: 1px;
  background-color: #C9C9C9;
  display: block;
}

/* Titles */
.guide-warranty-grid .wp-block-column h4,
.guide-warranty-grid .wp-block-column .wp-block-heading {
  font-family: var(--wp--preset--font-family--ja-sans) !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  margin-top: 0;
  margin-bottom: 10px;
}

/* Paragraphs */
.guide-warranty-grid .wp-block-column p {
  font-family: var(--wp--preset--font-family--ja-serif) !important;
  font-size: 12px !important;
  line-height: 2 !important;
  letter-spacing: 1px !important;
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .guide-warranty-grid .wp-block-columns {
    gap: 3em !important;
  }
}
/* Mobile Styles */
@media (max-width: 768px) {
  /* Remove gap between columns in flex layout */
  .guide-warranty-grid .wp-block-columns {
    gap: 0 !important;
  }

  .guide-warranty-grid .wp-block-column {
    padding: 30px 20px 25px 20px !important;
  }
  
  .guide-warranty-grid .wp-block-column h4,
  .guide-warranty-grid .wp-block-column .wp-block-heading {
    font-size: 14px !important;
  }

  /* Adjust border for mobile (95% width, centered) */
  .guide-warranty-grid .wp-block-column::before {
    width: 95%;
    left: 2.5%;
  }
}

.guide-flow .flow-step {
  display: grid;
  grid-template-columns: 40% 10% 50%;
  gap: 0;
  margin-bottom: 60px;
  -webkit-box-align: start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.guide-flow .flow-step:last-child {
  margin-bottom: 0;
}

.guide-flow .flow-item-number {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  letter-spacing: 0.1em;
  margin: 0 20px;
}

.guide-flow .flow-item-title-vertical {
  grid-column: 2;
  grid-row: 2;
  font-size: 14px;
  letter-spacing: 0.1em;
  margin: 0 20px;
}

.guide-flow .flow-item-title-vertical p {
  margin-top: 0;
}

.guide-flow .flow-item-image {
  grid-column: 2;
  grid-row: 2;
}

.guide-flow .flow-item-desc {
  grid-column: 3;
  grid-row: 2 / 3;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-align-self: center;
     -moz-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}

.guide-flow .flow-step-01 .flow-item-image,
.guide-flow .flow-step-03 .flow-item-image,
.guide-flow .flow-step-05 .flow-item-image,
.guide-flow .flow-step-07 .flow-item-image {
  grid-column: 1;
  grid-row: 2;
}

.guide-flow .flow-step-01 .flow-item-number,
.guide-flow .flow-step-03 .flow-item-number,
.guide-flow .flow-step-05 .flow-item-number,
.guide-flow .flow-step-07 .flow-item-number {
  text-align: left;
  margin-left: 20px;
  margin-right: 0;
}

.guide-flow .flow-step-01 .flow-item-title-vertical,
.guide-flow .flow-step-03 .flow-item-title-vertical,
.guide-flow .flow-step-05 .flow-item-title-vertical,
.guide-flow .flow-step-07 .flow-item-title-vertical {
  text-align: left;
  margin-left: 20px;
  margin-right: 0;
}

.guide-flow .flow-step-01 .flow-item-desc,
.guide-flow .flow-step-03 .flow-item-desc,
.guide-flow .flow-step-05 .flow-item-desc,
.guide-flow .flow-step-07 .flow-item-desc {
  grid-column: 3;
  grid-row: 2 / 3;
  padding-right: 10px;
  padding-left: 25px;
}

.guide-flow .flow-step-02 .flow-item-image,
.guide-flow .flow-step-04 .flow-item-image,
.guide-flow .flow-step-06 .flow-item-image,
.guide-flow .flow-step-08 .flow-item-image {
  grid-column: 3;
  grid-row: 2;
}

.guide-flow .flow-step-02 .flow-item-number,
.guide-flow .flow-step-04 .flow-item-number,
.guide-flow .flow-step-06 .flow-item-number,
.guide-flow .flow-step-08 .flow-item-number {
  text-align: right;
  margin-left: 0;
  margin-right: 20px;
}

.guide-flow .flow-step-02 .flow-item-title-vertical,
.guide-flow .flow-step-04 .flow-item-title-vertical,
.guide-flow .flow-step-06 .flow-item-title-vertical,
.guide-flow .flow-step-08 .flow-item-title-vertical {
  text-align: right;
  margin-left: 0;
  margin-right: 20px;
}

.guide-flow .flow-step-02 .flow-item-desc,
.guide-flow .flow-step-04 .flow-item-desc,
.guide-flow .flow-step-06 .flow-item-desc,
.guide-flow .flow-step-08 .flow-item-desc {
  grid-column: 1;
  grid-row: 2 / 3;
  padding-left: 10px;
  padding-right: 25px;
}

.guide-flow .flow-item-image img {
  width: 100%;
  height: auto;
  display: block;
}

.guide-flow .flow-item-desc p {
  font-size: 14px;
  line-height: 2;
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 768px) {
  .guide-flow {
    margin-left: -10px !important;
    margin-right: -10px !important;
  }

  .guide-flow .flow-step {
    display: grid;
    grid-template-columns: 1fr 80px;
    grid-template-rows: auto auto auto;
    gap: 0;
    margin-bottom: 40px;
  }

  .guide-flow .flow-item-number {
    grid-column: 2;
    grid-row: 1;
    text-align: center !important;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }

  .guide-flow .flow-item-number p {
    font-weight: 400;
  }

  .guide-flow .flow-item-title-vertical {
    grid-column: 2;
    grid-row: 2;
    text-align: center !important;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0;
  }

  .guide-flow .flow-item-title-vertical p {
    margin-top: 0;
  }

  .guide-flow .flow-item-image {
    grid-column: 1;
    grid-row: 2 / 3;
    height: 185px;
  }

  .guide-flow .flow-item-desc {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
    width: 100%;
  }

  .guide-flow .flow-step-01,
  .guide-flow .flow-step-03,
  .guide-flow .flow-step-05,
  .guide-flow .flow-step-07 {
    grid-template-columns: 1fr 70px;
  }

  .guide-flow .flow-step-01 .flow-item-number,
  .guide-flow .flow-step-03 .flow-item-number,
  .guide-flow .flow-step-05 .flow-item-number,
  .guide-flow .flow-step-07 .flow-item-number {
    grid-column: 2;
    grid-row: 1;
    text-align: center !important;
    margin-left: 0;
    margin-right: 0;
  }

  .guide-flow .flow-step-01 .flow-item-title-vertical,
  .guide-flow .flow-step-03 .flow-item-title-vertical,
  .guide-flow .flow-step-05 .flow-item-title-vertical,
  .guide-flow .flow-step-07 .flow-item-title-vertical {
    grid-column: 2;
    grid-row: 2;
    text-align: center !important;
    margin-left: 0;
    margin-right: 0;
  }

  .guide-flow .flow-step-01 .flow-item-title-vertical p,
  .guide-flow .flow-step-03 .flow-item-title-vertical p,
  .guide-flow .flow-step-05 .flow-item-title-vertical p,
  .guide-flow .flow-step-07 .flow-item-title-vertical p {
    margin-top: 0;
  }

  .guide-flow .flow-step-01 .flow-item-image,
  .guide-flow .flow-step-03 .flow-item-image,
  .guide-flow .flow-step-05 .flow-item-image,
  .guide-flow .flow-step-07 .flow-item-image {
    grid-column: 1;
    grid-row: 2 / 3;
    height: 185px;
  }

  .guide-flow .flow-step-01 .flow-item-desc,
  .guide-flow .flow-step-03 .flow-item-desc,
  .guide-flow .flow-step-05 .flow-item-desc,
  .guide-flow .flow-step-07 .flow-item-desc {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }

  .guide-flow .flow-step-02,
  .guide-flow .flow-step-04,
  .guide-flow .flow-step-06,
  .guide-flow .flow-step-08 {
    grid-template-columns: 70px 1fr;
  }

  .guide-flow .flow-step-02 .flow-item-number,
  .guide-flow .flow-step-04 .flow-item-number,
  .guide-flow .flow-step-06 .flow-item-number,
  .guide-flow .flow-step-08 .flow-item-number {
    grid-column: 1;
    grid-row: 1;
    text-align: center !important;
    margin-left: 0;
    margin-right: 0;
  }

  .guide-flow .flow-step-02 .flow-item-title-vertical,
  .guide-flow .flow-step-04 .flow-item-title-vertical,
  .guide-flow .flow-step-06 .flow-item-title-vertical,
  .guide-flow .flow-step-08 .flow-item-title-vertical {
    grid-column: 1;
    grid-row: 2;
    text-align: center !important;
    margin-left: 0;
    margin-right: 0;
  }

  .guide-flow .flow-step-02 .flow-item-title-vertical p,
  .guide-flow .flow-step-04 .flow-item-title-vertical p,
  .guide-flow .flow-step-06 .flow-item-title-vertical p,
  .guide-flow .flow-step-08 .flow-item-title-vertical p {
    margin-top: 0;
  }

  .guide-flow .flow-step-02 .flow-item-image,
  .guide-flow .flow-step-04 .flow-item-image,
  .guide-flow .flow-step-06 .flow-item-image,
  .guide-flow .flow-step-08 .flow-item-image {
    grid-column: 2;
    grid-row: 2 / 3;
    height: 185px;
  }

  .guide-flow .flow-step-02 .flow-item-desc,
  .guide-flow .flow-step-04 .flow-item-desc,
  .guide-flow .flow-step-06 .flow-item-desc,
  .guide-flow .flow-step-08 .flow-item-desc {
    grid-column: 2;
    grid-row: 3;
    text-align: center;
  }

  .guide-flow .flow-item-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
}

/* ============================================
   EVENTS DROPDOWN NAVIGATION STYLES
   ============================================ */

/* Hide default WordPress submenu arrow */
.events-dropdown .wp-block-navigation__submenu-icon {
  display: none !important;
}

/* Custom + sign for closed state - only affects the parent li's link */
li.events-dropdown > a.wp-block-navigation-item__content::after {
  content: "+";
  margin-left: 8px;
  font-size: 16px;
  font-weight: 300;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Change + to - on hover */
li.events-dropdown:hover > a.wp-block-navigation-item__content::after {
  content: "−";
}

/* Dropdown submenu container UL only */
ul.wp-block-navigation__submenu-container.events-dropdown {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  padding: 15px 0 0 0 !important;
  width: 250px !important;
  min-width: 250px !important;
  left: 0 !important;
  right: auto !important;
  list-style: none !important;
  margin: -15px 0 0 0 !important;
  opacity: 0;
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  -o-transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
  pointer-events: none;
  top: 100% !important;
}

@media (max-width: 768px) {
  ul.wp-block-navigation__submenu-container.events-dropdown {
    margin: 10px 0 0 0 !important;
  }
}

/* Show submenu UL on parent li hover */
li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}

/* Style for LI items INSIDE the dropdown UL */
ul.wp-block-navigation__submenu-container.events-dropdown > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
  opacity: 0;
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  -o-transition: opacity 0.4s ease, transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}

/* Staggered animation delay for each item inside dropdown */
li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(1) {
  -webkit-transition-delay: 0.1s;
       -o-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(2) {
  -webkit-transition-delay: 0.15s;
       -o-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(3) {
  -webkit-transition-delay: 0.2s;
       -o-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(4) {
  -webkit-transition-delay: 0.25s;
       -o-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(5) {
  -webkit-transition-delay: 0.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

/* Show items on hover */
li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

ul.wp-block-navigation__submenu-container.events-dropdown > li:last-child {
  margin-bottom: 0 !important;
}

/* Style submenu links inside dropdown UL only */
ul.wp-block-navigation__submenu-container.events-dropdown > li > a {
  font-size: 14px !important;
  text-decoration: none !important;
  display: block;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  background: transparent !important;
  padding: 0 !important;
}

/* Add dash before link text inside dropdown only */
ul.wp-block-navigation__submenu-container.events-dropdown > li > a .wp-block-navigation-item__label::before {
  content: "- ";
  margin-right: 5px;
}

ul.wp-block-navigation__submenu-container.events-dropdown > li > a:hover {
  opacity: 0.7;
  text-decoration: underline !important;
}

/* ============================================
   MOBILE/DESKTOP NAVIGATION VISIBILITY
   ============================================ */

/* Hide mobile-only navigation items on desktop */
@media (min-width: 782px) {
  li.mobile-only-nav {
    display: none !important;
  }
}

/* Hide events dropdown on mobile, show mobile items */
@media (max-width: 781px) {
  li.events-dropdown {
    display: none !important;
  }

  li.mobile-only-nav {
    display: block !important;
  }
}