/*
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;
  }

  /* Excepción: point-gallery.alignfull no debe escapar del padding */
  .point-gallery.alignfull {
    margin-left: 0;
    margin-right: 0;
  }

  /* 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;
  }

  /* Works Archive: padding-top para móviles */
  body.archive.post-type-archive-works,
  body.archive.tax-works_tag, 
  body.post-type-archive-stories,
  body.post-type-archive-projects {
    padding-top: 120px;
  }
}

@media (min-width: 769px) {
  body.post-type-archive-works, 
  body.post-type-archive-stories, 
  body.post-type-archive-projects,
  body.archive.tax-works_tag,
  body.archive.tax-projects_tag {
    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: 16px;
  }
}

/* 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;
}

/* Gallery Section Spacer - Single Stories */
body.single-stories .gallery-section-container .wp-block-spacer {
  height: 37px !important;
}

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

/* FAQ Section - Desktop: center with max-width */
@media (min-width: 769px) {
  body.single-stories .faq-section-container {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* FAQ Section Spacer - Single Stories (ocultar) */
body.single-stories .faq-section-container .wp-block-spacer {
  display: none !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: 0px !important;
    padding-bottom: 120px !important;
    padding-left: 15px;
    padding-right: 15px;
  }

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

  /* Gallery Section Spacer - Single Stories Mobile */
  body.single-stories .gallery-section-container .wp-block-spacer {
    height: 29px !important;
  }
}

/* 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;
  }

  body.single-csr .wp-block-group.alignfull.has-gray-100-background-color.has-background {
    padding-left: 35px !important;
    padding-right: 35px !important;
  }
  
  /* Restaurar padding del post content (que no tiene gray-100) */
  body.single-csr .wp-block-group.is-layout-constrained:not(.has-gray-100-background-color):not(.alignfull) {
    padding-left: 10px !important;
    padding-right: 10px !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: 16px;
  }
}

/* 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-header__logo a,
.custom-logo-link {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.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;
    z-index: 100001;
  }

  .iemoto-header__logo img,
  .iemoto-header__logo svg {
    height: var(--iemoto-logo-sp) !important;
    -webkit-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
  }

  /* Mobile: Reduce logo size on scroll */
  .iemoto-header.scrolled .iemoto-header__logo img,
  .iemoto-header.scrolled .iemoto-header__logo svg {
    height: 50px !important;
  }

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

/* === 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);
    top: -4px;
    right: 16px;
    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);
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    color: var(--wp--preset--color--black);
    z-index: 10000;
  }

  .iemoto-nav--two-bars .wp-block-navigation__responsive-container-open::before {
    content: "";
    position: absolute;
    top: 4px;
    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: 8px;
    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 === */

.top-works-section-wrapper h3.wp-block-heading {
  color: #969696;
}

/* グリッド（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: 下余白 */
}

/* Ocultar paginación cuando no hay suficientes posts (solo una página) */
.works-pagination:empty {
  display: none;
}

/* Ocultar cuando solo tiene un número de página (sin paginación necesaria) */
.works-pagination:has(.page-numbers.current:only-child) {
  display: none;
}

/* Ocultar cuando no hay enlaces activos a otras páginas */
/* Si no hay enlaces a números de página (solo el current que es span, no enlace) */
.works-pagination:not(:has(a.page-numbers)) {
  display: none;
}

@media (max-width: 768px) {
  .works-pagination {
    margin-top: 0px;    /* SP: 上余白 */
    margin-bottom: 120px; /* SP: 下余白（共通） */
  }
}

/* Desktop: Reduce logo size on scroll */
@media (min-width: 769px) {
  .iemoto-header__logo img,
  .iemoto-header__logo svg {
    -webkit-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
  }

  .iemoto-header.scrolled .iemoto-header__logo img,
  .iemoto-header.scrolled .iemoto-header__logo svg {
    height: 70px !important;
  }
}

/* ページネーション数字調整 */
.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.7em 1em 0.5em;
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--black);
  text-decoration: none;
  font-family: 'Kumbh Sans', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .5px;
  width: 120px;
  text-align: center;
}


.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);
}

@media (max-width: 768px) {
  .works-tabs__nav {
    max-width: 360px;
  }
}

/* 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;
  background: url("assets/images/node_088.jpg") center 92% / cover no-repeat;
  height: 677px;
}
@media (max-width: 767px) {
  .iemoto-footer__hero {
    background-image: url("assets/images/footer-pic_sp.png");
    background: url("assets/images/node_088.jpg") center / cover no-repeat;
    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 a {
  display: block;
  text-decoration: none;
  border: none;
  outline: none;
}
.iemoto-footer__logo a img,
.iemoto-footer__logo img {
  width: var(--iemoto-footer-logo-pc);
  height: auto;
  display: block;
}
@media (max-width: 767px) {
  .iemoto-footer__logo a img,
  .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); }

/* projects_tag の見た目（taxonomy-projects_tag と整合） */
.wp-block-post-terms-projects_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-projects_tag { margin-top: var(--wp--custom--tag--margin-top-sp); }

  /* Projects Detail: Reducir padding-top del hashtag en móvil */
  body.single-projects .wp-block-post-terms-projects_tag {
    margin-top: 15px;
  }
}
.wp-block-post-terms-projects_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-projects_tag a { font-size: var(--wp--custom--tag--font-size-sp); }
}
.wp-block-post-terms-projects_tag a::before {
  content: "#";
  margin-right: 2px;
  color: #969696;
}

/* ラッパー：横並び＆折り返し */
.wp-block-post-terms.taxonomy-projects_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-projects_tag{ margin-top: var(--wp--custom--tag--margin-top-sp); }
}
.wp-block-post-terms.taxonomy-projects_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-projects_tag a{ font-size: var(--wp--custom--tag--font-size-sp); }
}
.wp-block-post-terms.taxonomy-projects_tag a::before{
  content: "#";
  margin-right: 2px;
  color: #969696;
}
.wp-block-post-terms.taxonomy-projects_tag .wp-block-post-terms__separator{ display:none; }
.wp-block-post-terms.taxonomy-projects_tag a:hover{ -webkit-filter: brightness(.97); filter: brightness(.97); }



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

/* ================================
 * PROJECTS Archive: Reutilizar estilos de WORKS
 * ------------------------------- */

/* Projects Hero Slider - Reutilizar estilos de Works */
.projects-hero-slider {
  width: initial;
}

@media (max-width: 768px) {
  .projects-hero-slider {
    margin-left: -10px;
    margin-right: -10px;
    width: initial;
  }
}

/* Projects Grid - Reutilizar estilos de Works */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  row-gap: 40px;
}

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

.wp-block-post-template.projects-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: 40px !important;
}

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

/* Projects Grid Images */
.projects-grid img {
  aspect-ratio: 377 / 275;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

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

/* Projects Card Body */
li .projects-card__body {
  padding-bottom: 5px;
  padding-left: 12px;
}

@media (max-width: 768px) {
  li .projects-card__body {
    min-height: 110px;
    padding-bottom: 5px;
  }
}



/* ================================
 * WORKS アーカイブ：白帯（FV）をXD寸法で固定
 * ------------------------------- */
.post-type-archive-works .hero-wrap,
.archive.tax-works_tag .hero-wrap{
  position: relative;
  height: 365px;
  margin: 0;
  padding: 0;
}
.post-type-archive-works .hero-wrap > .wp-block-heading,
.archive.tax-works_tag .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;
  letter-spacing: 4px;
}
.post-type-archive-works .hero-wrap > .tate-label,
.archive.tax-works_tag .hero-wrap > .tate-label{
  position: absolute;
  top: -10px;
  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,
.archive.tax-works_tag .works-hero-slider{ margin-top: 0 !important; }
@media (max-width: 768px){
  .post-type-archive-works .hero-wrap,
  .archive.tax-works_tag .hero-wrap{ height: 220px; }
  .post-type-archive-works .hero-wrap > .wp-block-heading,
  .archive.tax-works_tag .hero-wrap > .wp-block-heading{ top: 123px; left: 32px; }
  .post-type-archive-works .hero-wrap > .tate-label,
  .archive.tax-works_tag .hero-wrap > .tate-label{ right: 20px; top: -37px; }

  /* 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,
.archive.tax-works_tag .hero-wrap .tate-label,
.archive.tax-works_tag .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: "\2192";
  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;
  }
  .ceo-breadcrumbs-section .simple-breadcrumbs {
    padding: 30px 24px;
  }
}

@media (max-width: 768px) {
  .simple-breadcrumbs {
    padding: 24px 18px;
    margin-left: -15px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .simple-breadcrumbs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

@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-role-name {
  font-size: 10px;
}

.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);
}

.ceo-titles {
  margin-bottom: 30px;
}

.ceo-message-paragraph p, 
.ceo-message-paragraph li, 
.ceo-message-paragraph strong, 
.ceo-message-paragraph cite, 
.ceo-message-paragraph blockquote {
  font-size: 12px;
  -webkit-margin-after: 18px;
          margin-block-end: 18px;
}

@media (min-width: 769px) {
  .ceo-banner_desktop {
    display: block;
  }

  .ceo-banner_sp {
    display: none;
  }
}

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

  .ceo-titles {
    margin-bottom: 20px;
  }

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

  .ceo-banner_desktop {
    display: none;
  }

  .ceo-banner_sp {
    display: block;
  }

  .ceo-message-paragraph p, 
  .ceo-message-paragraph li, 
  .ceo-message-paragraph strong, 
  .ceo-message-paragraph cite, 
  .ceo-message-paragraph blockquote {
    font-size: 11px;
    -webkit-margin-after: 23px;
            margin-block-end: 23px;
  }
}

/* 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: "\2192";
  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;
}

/* =========================================
   SP（スマホ）用 お問い合わせフォーム修正（完全版）
   ========================================= */
@media screen and (max-width: 768px) {

  /* 1. フォーム全体の枠を画面幅に合わせる */
  .contact-form-wrapper,
  .catalog-form-wrapper,
  .event-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 24px 60px !important;
    -webkit-box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
  }

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

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

  /* Override margin-bottom for reservation subtitle in event templates (mobile) */
  .single-openhouse #reservation p.has-ja-sans-font-family[style*="margin-bottom:50px"],
  .single-consultation #reservation p.has-ja-sans-font-family[style*="margin-bottom:50px"],
  .single-lifestyle_workshop #reservation p.has-ja-sans-font-family[style*="margin-bottom:50px"] {
    margin-bottom: 0px !important;
  }

  /* Add lateral padding to forms in event templates (mobile) */
  .single-openhouse #reservation,
  .single-consultation #reservation,
  .single-lifestyle_workshop #reservation {
    padding-left: 31px !important;
    padding-right: 31px !important;
  }

  /* 2. 各行のレイアウト修正（縦積みにする） */
  .form-row {
    display: block !important;
    width: 100% !important;
    margin-bottom: 24px !important; /* 余白を少し広めに */
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  /* 3. ラベル（「お名前」など）の調整 */
  .form-row label {
    width: 100% !important;
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 11px !important; /* ラベルも読みやすいサイズに */
  }

  /* 4. 入力欄（テキストボックス）の幅と文字サイズ修正 */
  /* ★重要: 16px以上にしないとiPhoneで勝手にズームされます */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
    font-size: 16px !important; /* 文字サイズを16pxに統一 */
    padding: 12px !important;   /* タップしやすいように広げる */
    margin-bottom: 15px !important;
    border-radius: 4px !important; /* 角を少し丸くしてスマホらしく */
  }

  /* Fix date input overflow on iPhone - Event templates */
  .single-openhouse .wpcf7-form-control-wrap[data-name="reservation_timing"],
  .single-consultation .wpcf7-form-control-wrap[data-name="reservation_timing"],
  .single-lifestyle_workshop .wpcf7-form-control-wrap[data-name="reservation_timing"] {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .single-openhouse .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"],
  .single-consultation .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"],
  .single-lifestyle_workshop .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"],
  .single-openhouse .wpcf7-form-control-wrap[data-name="reservation_timing"] .wpcf7-date,
  .single-consultation .wpcf7-form-control-wrap[data-name="reservation_timing"] .wpcf7-date,
  .single-lifestyle_workshop .wpcf7-form-control-wrap[data-name="reservation_timing"] .wpcf7-date {
    width: 100% !important;
    max-width: 100% !important;
    -webkit-box-sizing: border-box !important;
       -moz-box-sizing: border-box !important;
            box-sizing: border-box !important;
    min-width: 0 !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    padding: 12px 8px 12px 8px !important; /* Reduced padding, especially right */
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 16px !important; /* Keep 16px to avoid iOS zoom */
    font-family: var(--wp--preset--font-family--ja-serif) !important;
    background: #fafafa !important;
    overflow: visible !important; /* Allow content to show, but container clips */
    -o-text-overflow: ellipsis !important;
       text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Ensure the input content fits within bounds */
  .single-openhouse .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit,
  .single-consultation .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit,
  .single-lifestyle_workshop .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .single-openhouse .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .single-consultation .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  .single-lifestyle_workshop .wpcf7-form-control-wrap[data-name="reservation_timing"] input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. 姓名（姓・名）の横並び調整 */
  .form-row div[style*="display:flex"],
  .form-row div[style*="display: flex"] {
    display: block !important;
    width: 100% !important;
    gap: 10px !important;
  }

  /* 姓・名の入力欄を均等配置 */
  .form-row div[style*="display:flex"] > p,
  .form-row div[style*="display: flex"] > p,
  .form-row div[style*="display:flex"] .wpcf7-form-control-wrap,
  .form-row div[style*="display: flex"] .wpcf7-form-control-wrap {
    -webkit-box-flex: 1 !important;
       -moz-box-flex: 1 !important;
        -ms-flex: 1 !important;
            flex: 1 !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* 6. 送信ボタン */
  .form-submit,
  .submit-button {
    width: 100% !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
       -moz-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }

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

  .single-openhouse .form-submit,
  .single-consultation .form-submit,
  .single-lifestyle_workshop .form-submit {
    margin-top: 0px !important;
  }

  /* Hide empty p elements in form-submit for event templates (mobile) */
  .single-openhouse .form-submit > p:empty,
  .single-consultation .form-submit > p:empty,
  .single-lifestyle_workshop .form-submit > p:empty {
    display: none !important;
    width: 0 !important;
    -webkit-box-flex: 0 !important;
       -moz-box-flex: 0 !important;
        -ms-flex: 0 0 0px !important;
            flex: 0 0 0 !important;
  }

  /* Change form-submit to column layout for event templates (mobile) */
  .single-openhouse .form-submit,
  .single-consultation .form-submit,
  .single-lifestyle_workshop .form-submit {
    -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: center !important;
       -moz-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }

  /* Submit button minimum width for event templates (mobile) */
  .single-openhouse .form-submit .wpcf7-submit,
  .single-consultation .form-submit .wpcf7-submit,
  .single-lifestyle_workshop .form-submit .wpcf7-submit {
    width: auto !important;
    min-width: 243px !important;
    max-width: 100% !important;
  }

  /* Position spinner below button, centered for event templates (mobile) */
  .single-openhouse .form-submit .wpcf7-spinner,
  .single-consultation .form-submit .wpcf7-spinner,
  .single-lifestyle_workshop .form-submit .wpcf7-spinner {
    margin-left: 0 !important;
    margin-top: 10px !important;
    display: block !important;
  }

  /* ボタン自体のサイズ調整 */
  .submit-button {
    height: auto !important;
    padding: 15px 0 !important;
    font-size: 16px !important;
  }
}

/* ================================
   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;
        height: 50px;
  }

  /* 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%;
  }

  body.single-openhouse .form-row .reservation-privacy-content-container,
  body.single-lifestyle_workshop .form-row .reservation-privacy-content-container,
  body.single-consultation .form-row .reservation-privacy-content-container {
    margin-bottom: 17px !important;
  }

  /* 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;
            -webkit-box-orient: vertical !important;
            -webkit-box-direction: normal !important;
               -moz-box-orient: vertical !important;
               -moz-box-direction: normal !important;
                -ms-flex-flow: column !important;
                    flex-flow: column !important;
                    gap: 0px;
  }

  /* 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: 17px;
  font-size: 14px;
}

@media (max-width: 768px) {
  body.single-openhouse #reservation .form-row p,
  body.single-lifestyle_workshop #reservation .form-row p,
  body.single-consultation #reservation .form-row p {
    font-size: 12px;
  }
}

/* About Page - CSR & Projects Section Subtitles */
/* About Page - CSR ACTIVITY and PROJECTS titles font size fix */
body.page-template-page-about .csr-activity-section h2,
body.page-template-page-about .company-projects-section-wrapper h2 {
  font-size: 29px !important;
}

@media (max-width: 768px) {
  body.page-template-page-about .csr-activity-section h2,
  body.page-template-page-about .company-projects-section-wrapper h2 {
    font-size: 25px !important;
  }
}

.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;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    row-gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.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 {
    min-width: 30px;
    width: 30px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}

/* 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: 62px;
  height: 62px;
}

.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 {
  position: relative;
  z-index: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: -moz-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          -moz-box-align: center;
       align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          -moz-box-pack: center;
       justify-content: center;
  width: 20px;
  height: 4px;
  -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__arrow svg {
  width: 20px;
  height: 4px;
  display: block;
}

.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: 62px;
    height: 62px;
  }

  .circle-arrow-button__arrow {
    width: 18px;
    height: 4px;
  }

  .circle-arrow-button__arrow svg {
    width: 18px;
    height: 4px;
  }

  @-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,
body.page .story-overlay-content .wp-block-post-title  {
  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%;
  }
}

/* Story Lead Text - Make clickable in thumbnails */
.story-lead-text__link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  -webkit-transition: opacity 0.2s ease;
  -o-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.story-lead-text__link:hover {
  opacity: 0.8;
}

.story-lead-text__link .story-lead-text__content {
  margin: 0;
}

/* Ensure pointer cursor on story-lead-text in cards (even without link for visual consistency) */
.story-card-with-overlay .story-lead-text,
.stories-archive-card .story-lead-text {
  cursor: pointer;
}

/* Works and Projects related stories already have onclick on card, but ensure text is also clickable */
.works-related-story .story-lead-text,
.projects-related-story .story-lead-text {
  cursor: pointer;
}

/* 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 #bfbfbf;
  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,
.workshop-cards-grid,
.consultation-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Individual Open House Card */
.openhouse-card,
.workshop-card,
.consultation-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,
.workshop-card .wp-block-post-featured-image,
.consultation-card .wp-block-post-featured-image {
  margin-bottom: 0.5em;
  display: block;
}

/* Open House Card Title - Desktop */
.openhouse-card .wp-block-post-title,
.workshop-card .workshop-title,
.consultation-card .consultation-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,
.workshop-card .workshop-title a,
.consultation-card .consultation-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,
.workshop-card-divider,
.consultation-card-divider {
  width: 100%;
  border: none;
  border-top: 1px solid #333333;
  margin: 0;
  opacity: 1;
}

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

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

/* Open House Location Block */
.openhouse-location,
.workshop-location,
.consultation-location {
  margin-bottom: 5px !important;
  margin-top: 4px;
}

.openhouse-card-content .openhouse-title,
.workshop-card-content .workshop-title,
.consultation-card-content .consultation-title {
  margin-top: 0px;
}

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

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

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

.openhouse-card-content .openhouse-location__content,
.workshop-card-content .workshop-location__content,
.consultation-card-content .consultation-location__content,
.workshop-location,
.consultation-location {
  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,
.workshop-dates,
.consultation-dates {
  margin-top: 5px;
}

.openhouse-dates .date-number,
.workshop-dates .date-number,
.consultation-dates .date-number {
  font-size: 14px;
}

.openhouse-dates .date-day,
.workshop-dates .date-day,
.consultation-dates .date-day {
  font-size: 11px;
}

.openhouse-card-content .openhouse-dates__content,
.workshop-card-content .workshop-dates__content,
.consultation-card-content .consultation-dates__content,
.workshop-dates,
.consultation-dates {
  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,
  .workshop-cards-grid,
  .consultation-cards-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .openhouse-card,
  .workshop-card,
  .consultation-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,
  .workshop-card .wp-block-post-featured-image,
  .consultation-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%;
  }

  /* Ensure image inside fills container */
  .openhouse-card .wp-block-post-featured-image img,
  .workshop-card .wp-block-post-featured-image img,
  .consultation-card .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Content on right - 55% of container width */
  .openhouse-card-content,
  .workshop-card-content,
  .consultation-card-content {
    -webkit-box-flex: 0;
       -moz-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    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,
  .workshop-card .workshop-card-content .workshop-location,
  .consultation-card .consultation-card-content .consultation-location {
    margin-top: 0;
    margin-bottom: 5px;
  }

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

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

  /* Limit content height to match image height in mobile */
  .openhouse-card .openhouse-card-content.wp-block-group,
  .workshop-card .workshop-card-content.wp-block-group,
  .consultation-card .consultation-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,
  .workshop-card-content .workshop-title,
  .consultation-card-content .consultation-title {
    margin-top: 10px;
  }

  /* Adjust separator lines for mobile */
  .openhouse-top-line,
  .openhouse-bottom-line,
  .workshop-card-divider,
  .consultation-card-divider {
    width: 100%;
  }

  .workshop-card-divider,
  .consultation-card-divider {
    margin-bottom: 3px;
  }
}

/* ============================================
   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 Cards Grid - MATCHING OPEN HOUSE GRID */
/* Combined with Open House styles above */

/* 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;
}

/* President Message Section - Gradient Background */
.president-message-section {
  background: -o-linear-gradient(top, #f7f7f7, #EEEEEE);
  background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#EEEEEE));
  background: linear-gradient(to bottom, #f7f7f7, #EEEEEE);
  max-width: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop - Reduce gap between columns */
.president-message-section .wp-block-columns {
  gap: 30px !important;
}

/* President Photo - Image Cropping */
.president-message-section .president-photo {
  margin-bottom: 0 !important;
}
.president-message-section .president-photo img {
  /*width: 100%;*/
  width: 56%;
    height: 465px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 0%;
     object-position: center 0%;
  display: block;
  display: none;
}

/* Separator with Arrow */
.president-message-section hr {
  position: relative;
  overflow: visible;
}

.president-message-section hr::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  -webkit-transform: translateY(-149%) rotate(14deg);
      -ms-transform: translateY(-149%) rotate(14deg);
          transform: translateY(-149%) rotate(14deg);
  width: 2px;
  height: 1px;
  border-left: 9px solid #000;
  border-top: 2px solid transparent;
}

/* Text Adjustments - Right Aligned */
.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family {
  text-align: right;
}

.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family a {
  text-align: right;
  display: inline-block;
}

/* Desktop - Font Sizes */
.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family:nth-of-type(1) {
  font-size: 12px !important;
}

.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family:nth-of-type(2) {
  font-size: 14px !important;
}

/* Desktop - President Title and Name spans */
.president-message-section .president-title {
  font-size: 8px !important;
}

.president-message-section .president-name {
  font-size: 14px !important;
}

/* Clickable Elements */
.president-message-section .president-message-image,
.president-message-section .president-message-logo,
.president-message-section hr,
.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family a {
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.president-message-section .president-message-image:hover,
.president-message-section .president-message-logo:hover,
.president-message-section hr:hover,
.president-message-section .wp-block-column:first-child p.has-ja-serif-font-family a:hover {
  opacity: 0.7;
}

.president-name-title-link {
  text-decoration: none;
}

/* President Message - Links preserve design */
.president-message-section .president-message-image-link {
  display: block;
  text-decoration: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.president-message-section .president-message-image-link:hover {
  opacity: 0.7;
}

.president-message-section .president-message-image-link .president-message-image {
  margin: 0;
  padding: 0;
}

.president-message-section .president-message-hr-link {
  display: block;
  text-decoration: none;
  margin: 24px 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.president-message-section .president-message-hr-link:hover {
  opacity: 0.7;
}

.president-message-section .president-message-hr-link hr {
  margin: 0;
}

@media (min-width: 769px) {
  .president-message-section hr {
    width: 80%;
    margin-right: 0;
  }

  .president-message-section .wp-block-columns {
    height: 340px;
  }

  .president-message-section .wp-block-columns {
    -webkit-box-pack: center !important;
       -moz-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
  
  .president-message-section .wp-block-column.is-vertically-aligned-center {
    -ms-flex-preferred-size: auto !important;
        flex-basis: auto !important;
    max-width: 500px;
    position: absolute;
  }
}
@media (max-width: 768px) {
  .president-message-section {
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .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;
  }

  /* Mobile - Image Cropping (~50% height) */
  .president-message-section .president-photo {
    position: relative;
    margin-bottom: 0;
  }

  .president-message-section .president-photo img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center 0%;
       object-position: center 0%;
    height: 51vh;
    min-height: 350px;
    width: 59%;
    margin-left: auto;
    display: none;
  }

  /* Mobile - Content with Absolute Position */
  .president-message-section .wp-block-columns {
    position: relative;
  }

  .president-message-section .wp-block-column:first-child {
    position: absolute;
    left: 20px;
    top: 115px;
    z-index: 10;
    width: 45%;
    padding-right: 15px;
    left: 30%;
  }

  .president-message-section .wp-block-column:last-child {
    width: 100%;
    height: 42vh;
    min-height: 300px;
  }

  /* Mobile - Text Adjustments */
  .president-message-section .wp-block-column:first-child p.has-ja-serif-font-family {
    text-align: left;
  }

  .president-message-section .wp-block-column:first-child p.has-ja-serif-font-family:nth-of-type(1) {
    font-size: 11px !important;
  }

  .president-message-section .wp-block-column:first-child p.has-ja-serif-font-family:nth-of-type(2) {
    font-size: 14px !important;
  }

  /* Mobile - President Title and Name spans */
  .president-message-section .president-title {
    font-size: 8px !important;
  }

  .president-message-section .president-name {
    font-size: 14px !important;
  }
}

/* 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;
  background: #FFFFFF !important;
  color: #000 !important;
  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;
          border-radius: 7px !important;
}

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

.recruit-btn .recruit-arrow-icon {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  display: inline-block;
}

/* ================================
   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: '\2192';
  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;
    font-weight: 300 !important;
  }

  h3.has-en-serif-font-family {
    font-size: 20px !important;
    font-weight: 300 !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-content-container {
  padding-bottom: 0 !important;
}

/* Hide Staff List Button in single staff pages */
.single-staff .staff-list-button-container {
  display: none !important;
}


/* ================================
   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 !important;
  border: 1px solid #000;
  border-radius: 7px !important;
  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-color: #000 !important;
  color: #fff !important;
}

.recruit-form-btn .recruit-arrow-icon {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  display: inline-block;
}

.recruit-form-btn .wp-block-button__link:hover .recruit-arrow-icon {
  stroke: currentColor;
}

@media (min-width: 769px) {
  body.page-template-page-about .recruit-section.wp-block-cover {
    height: 761px;
  }
}

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

  .recruit-form-btn .recruit-arrow-icon,
  .recruit-btn .recruit-arrow-icon {
    width: 18px;
    height: 18px;
    margin-left: 6px;
  }
}

/* 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: -10px;
  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: 96px;
}

/* 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;
    margin-bottom: 63px;
  }
}

/* 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: -37px;
    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;
  }

  /* Hero section - padding-left para h1 y p */
  .post-type-archive-stories .wp-block-group.alignfull:first-of-type h1,
  .post-type-archive-stories .wp-block-group.alignfull:first-of-type p {
    padding-left: 25px !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;
  font-size: 14px;
  width: 11px;
  padding-bottom: 5px;
}

.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;
}

.csr-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;
}

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

  .csr-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 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: 0 0 15px 15px;
}

@media (max-width: 768px) {
  .csr-grid .csr-card__content {
    min-height: 50px;
    padding-bottom: 5px;
      -webkit-box-flex: 0;
      -moz-box-flex: 0;
      -ms-flex: 0 0 51%;
      flex: 0 0 51%;
    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;
  }
}

/* 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: 20px;
  }
}

/* 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: #FFFFFF;
  height: 432px;
}

/* 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: 257px;
  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;
}

.contact-link__text::after {
  content: '';
  position: absolute;
  right: 65%;
  top: 144px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 6px solid #999;
  -webkit-transition: border-top-color 0.3s 
ease;
  -o-transition: border-top-color 0.3s ease;
  -o-transition: border-top-color 0.3s 
ease;
  transition: border-top-color 0.3s 
ease;
}

/* 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-link.active .contact-link__text::after {
  border-top: 6px solid #333;
}

.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;
  position: relative;
}

.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;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.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-hero {
    height: 600px;
  }

  .contact-vertical-links-wrapper {
    top: 280px;
    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: 13px;
  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;
}

/* お問い合わせ内容（textarea）のフォントとサイズを強制統一 */
.iemoto-contact-form textarea.form-input {
  /* フォントの種類：サイト本体（しっぽり明朝）を引き継ぐ */
  font-family: inherit !important;

  /* 文字サイズ：プルダウンと同じ14pxに強制指定 */
  font-size: 14px !important;

  /* ついでに行間も少し整えて読みやすくします */
  line-height: 1.6 !important;

  /* 色や余白もプルダウンと全く同じにする */
  color: #333;
  padding: 12px 15px !important;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  width: 100%;

  /* スマホでの見た目リセット */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;

  /* Altura mínima y resize */
  min-height: 150px;
  resize: vertical;
}

/* プレースホルダー（薄い文字）も同様に設定 */
.iemoto-contact-form textarea.form-input::-webkit-input-placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #999; /* 薄いグレー */
  opacity: 1;
}
.iemoto-contact-form textarea.form-input::-moz-placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #999; /* 薄いグレー */
  opacity: 1;
}
.iemoto-contact-form textarea.form-input:-ms-input-placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #999; /* 薄いグレー */
  opacity: 1;
}
.iemoto-contact-form textarea.form-input::-ms-input-placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #999; /* 薄いグレー */
  opacity: 1;
}
.iemoto-contact-form textarea.form-input::placeholder {
  font-family: inherit !important;
  font-size: 14px !important;
  color: #999; /* 薄いグレー */
  opacity: 1;
}

/* セレクトボックスの高さをテキスト入力欄と揃える */
.iemoto-contact-form select.form-input {
  height: auto; /* ブラウザ標準の高さをリセット */
  padding: 14px 16px; /* テキスト入力欄と同じパディング */
  font-size: 13px; /* フォントサイズも統一 */
  line-height: 1.5; /* 行間も統一 */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fafafa;
  color: #333; /* 入力済みテキスト色 */
  cursor: pointer;
  
  /* ブラウザ標準の矢印を消してカスタム矢印を表示する場合の準備（現状は標準矢印のままでも高さは揃います） */
  -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="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
  background-repeat: no-repeat;
  background-position: right 16px center; /* 矢印の位置 */
  background-size: 16px;
}

/* プレースホルダー（未選択時）の色とサイズ調整 */
.iemoto-contact-form select.form-input option[value=""],
.iemoto-contact-form select.form-input option:first-child {
  color: #757575;
  display: none;
}

/* 未選択時の文字色をグレーにする */
.iemoto-contact-form select.form-input:has(option[value=""]:checked),
.iemoto-contact-form select.form-input:invalid {
  color: #757575 !important;
  font-weight: normal; /* 太字にならないように念のため */
}


/* 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;
  position: absolute;
  top: -360px;
  left: 21%;
}

/* 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;
  }

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

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

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

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

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

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

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

  #wpcf7-f312-o1 .iemoto-contact-form .form-row br {
    display: none;
  }
}

@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 */
  height: 485px;
}

/* Override body padding for CSR archive */
body.post-type-archive-csr .csr-hero {
  margin-top: calc(0 * (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 0 30px 64px;
  text-align: left;
  font-size: 25px !important;
}

/* CSR Hero Vertical Text */
.csr-hero {
  position: relative;
}

.csr-hero-vertical-text {
  position: absolute !important;
  top: initial;
  top: 120px;
  right: 138px !important;
  margin: 0 !important;
  -webkit-writing-mode: vertical-rl !important;
      -ms-writing-mode: tb-rl !important;
  writing-mode: vertical-rl !important;
  -webkit-text-orientation: upright !important;
  text-orientation: upright !important;
  letter-spacing: 0.4em !important;
  color: #ffffff !important;
  font-size: 14px !important;
  z-index: 2;
}

@media (max-width: 768px) {
  .csr-hero-vertical-text {
    right: 22px !important;
    top: initial !important;
    font-size: 13px !important;
  }
}

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

/* 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: #FFFFFF;
  color: #000;
  border: 1px 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;
  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;
}

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

.recruit-block__btn .wp-block-button__link:hover .recruit-arrow-icon {
  stroke: currentColor;
}

.recruit-block__btn .recruit-arrow-icon {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
  display: inline-block;
}

/* 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)));
    margin-left: -10px;
    margin-right: -10px;
  }

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

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

  .post-type-archive-csr .csr-hero__title {
    padding: 0 0 3px 36px;
    font-size: 25px !important;
  }

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

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

  /* 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: 0px;
    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;
  }

  .recruit-block__btn .recruit-arrow-icon {
    width: 18px;
    height: 18px;
    margin-left: 6px;
  }
}

/* ========================================
   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;
  z-index: 100;
}

.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: '\2192';
  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;
  padding-top: 210px !important;
}

.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: 14px;
  font-weight: 400;
  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: 14px;
  font-weight: 400;
  line-height: 1.8;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #333;
}

.page-template-page-privacy .privacy-content-container h4 {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: #333;
}

.page-template-page-privacy .privacy-content-container p {
  font-family: var(--wp--preset--font-family--ja-serif);
  font-size: 12px;
  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;
  font-size: 12px;
}

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

.page-template-page-privacy .privacy-content-container blockquote {
  font-size: 12px;
}

.page-template-page-privacy .privacy-content-container cite {
  font-size: 12px;
}

.page-template-page-privacy .privacy-content-container strong {
  font-size: 12px;
}

.page-template-page-privacy .privacy-content-container hr,
.page-template-page-privacy .privacy-content-container hr.wp-block-separator {
  border-color: #CCCCCC;
  border-width: 1px;
}

.page-template-page-privacy .privacy-content-container pre.wp-block-preformatted {
  margin: 0 auto;
  text-align: center;
  border: 1px solid #CCCCCC;
  font-size: 12px;
  padding: 25px 20px 20px;
}

/* 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: 143px !important;
    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;
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .page-template-page-privacy .privacy-content-container h2 {
    font-size: 14px;
    font-weight: 400;
  }

  .page-template-page-privacy .privacy-content-container h3 {
    font-size: 14px;
    font-weight: 400;
  }

  .page-template-page-privacy .privacy-content-container h4 {
    font-size: 14px;
    font-weight: 400;
  }

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

  .page-template-page-privacy .privacy-content-container ul,
  .page-template-page-privacy .privacy-content-container ol {
    font-size: 12px;
  }

  .page-template-page-privacy .privacy-content-container pre.wp-block-preformatted {
    font-size: 12px;
    padding: 25px 20px 20px;
  }
}


/* ================================
   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;
  top: -10px;
  right: 138px;
}

/* 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: 20px;
    top: -37px;
  }
}

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

  .projects-archive-vertical-text {
    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) {
  body.single-projects {
    margin-right: -10px;
    margin-left: -10px;
  }
  
  .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 {
  
}

/* 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__indicators {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    row-gap: 8px;
  }

  .project-gallery__line {
    min-width: 30px;
    width: 30px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .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: 39px 20px 80px;
  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 (CSS shapes: + to -) */
.project-faq__toggle {
  position: relative;
  padding-right: 24px; /* Space for icon */
}

/* Horizontal line (always visible) */
.project-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: #333;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Vertical line (rotates to horizontal when expanded) */
.project-faq__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4.5px; /* Center with the 10px width of after (10/2 - 0.5) */
  width: 1px;
  height: 10px;
  background-color: #333;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Change + to - when expanded by rotating vertical line */
.project-faq__question[aria-expanded="true"] .project-faq__toggle::before {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

.project-faq__answer {
  display: block !important; /* Override display: none from hidden attribute */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 24px;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
  visibility: hidden; /* Hide content when closed */
  -webkit-transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              -webkit-transform 0.5s ease,
              visibility 0.5s ease;
  -o-transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s ease,
              visibility 0.5s ease;
  -webkit-transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.5s ease,
              -webkit-transform 0.5s ease;
  transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 0.5s ease,
              -webkit-transform 0.5s ease;
  transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s ease,
              visibility 0.5s ease;
  transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease,
              padding 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s ease,
              visibility 0.5s ease,
              -webkit-transform 0.5s ease;
}

.project-faq__answer[hidden] {
  display: block !important;
}

.project-faq__answer:not([hidden]) {
  max-height: 1000px;
  opacity: 1;
  padding: 20px 24px 24px 24px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  visibility: visible; /* Show content when open */
}

.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;
    padding-right: 20px;
  }
  
  .project-faq__toggle::after {
    width: 8px;
  }
  
  .project-faq__toggle::before {
    right: 3.5px;
    height: 8px;
  }

  .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;
    padding: 35px 20px 42px;
  }
}

/* --------------------------------------------------
   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 */
}

/* Hide FAQ link in top page */
.top-faq__link {
  display: none;
}

/* 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: 9px 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;
}

/* Consultation Section - Cards Grid */
.consultation-cards-grid {
  max-width: var(--wp--custom--container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.workshop-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: 2.5%;
  width: 95%;
  height: 1px;
  background-color: #bfbfbf;
}

/* 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: 14px !important;
  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: 0px;
  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;
  display: none;
}

.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 一覧" - Left alignment */
.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);
  font-size: 14px ;
}

.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: 85px;
  }

  .top-news-section__title {
    font-size: 24px;
    letter-spacing: 0.18em;
  }

  .top-news-section__subtitle {
    font-size: 12px !important;
  }

  /* Query centrada con padding más amplio */
  .top-news-section__query {
    max-width: 100%;
    padding: 0 40px;
  }

  /* 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: 7px;
    padding: 0;
    margin-bottom: 0;
  }

  .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;
    min-width: 0; /* Importante para que flex respete el overflow */
  }

  .top-news-section .news-meta__title a {
    display: block; /* Cambiar de inline-flex a block en móvil */
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .top-news-section .news-meta__icon {
    display: none; /* Mantener el icono inline */
  }

  /* 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;
  }
}

/* ========================================
   Single Works - Related Works Section
   Title and Subtitle Alignment
   ======================================== */

/* Mobile: Left align title and subtitle in Related Works Section */
/* Target elements within container that contains works-related-grid */
@media (max-width: 768px) {
  /* Target h2 heading in Related Works Section */
  body.single-works main .wp-block-group.alignfull.has-white-background-color .wp-block-heading.has-text-align-center.has-en-serif-font-family {
    text-align: left !important;
  }

  /* Target paragraph subtitle in Related Works Section */
  body.single-works main .wp-block-group.alignfull.has-white-background-color .has-text-align-center.has-ja-serif-font-family {
    text-align: left !important;
  }
}

/* ===== 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-hero-section {
    padding: 0 147px 60px 147px !important;
  }
  
  .ceo-content-container{
    padding: 0 90px 85px 90px !important;
  }
  
  .ceo-hero {
    padding: 0px 20px 65px !important;
  }
  
  .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 120px 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;
    letter-spacing: 11px !important;
  }

  .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;
    letter-spacing: 11px !important;
  }

  .ceo-name {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .ceo-position {
    font-size: 12px;
    margin-bottom: 40px;
  }

  .ceo-white-block {
    padding: 59px 20px 54px 20px !important;
  }

  .ceo-paragraph {
    font-size: 13px;
    line-height: 2;
  }

  .ceo-featured-image img {
    max-height: 400px;
  }
}

/* ============================================================
   TOP PAGE - EVENTS SECTION STYLES
   ============================================================ */
  .top-events-section {
    padding-top: 55px !important;
  }

.top-events-section .wp-block-spacer{
  height: 30px !important;
}

.top-events-section h2.wp-block-heading {
  margin-top: 0px;
  color: #969696;
  font-size: 13px !important;
}
/* 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;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
  border-bottom: none;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.event-info-group .event-location-tag {
  border-color: #707070 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
  width: 45px;
  text-align: center;
  height: 17px;
  line-height: 16px;
}

@media (min-width: 769px) {
  .event-info-group .event-location-tag {
    font-size: 12px !important;
  }

  .event-info-group .event-title {
    font-size: 13px !important;
  }

  .event-info-group .event-dates {
    font-size: 13px !important;
  }

  /* Desktop - Flecha al lado de event-dates (20px del lado derecho) */
  .top-events-section .event-item-wrapper {
    position: relative;
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  
  .top-events-section .event-dates {
    position: relative;
  }
  
  .top-events-section .event-title-arrow-desktop {
    display: inline;
    font-size: 0.6em; 
    font-variant-emoji: none; 
    margin-left: 20px;
    vertical-align: 2px;
  }
  
  .top-events-section .event-title-arrow-desktop::before {
    content: '\25B6'; 
    font-variant-emoji: none;
    text-rendering: optimizeLegibility;
  }
  
  .top-events-section .event-title-arrow-mobile {
    display: none;
  }

  
  .top-events-section .event-day-name {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .event-info-group .event-location-tag{
    height: 15px;
    font-size: 10px !important;
    line-height: 15px;
  }

  .event-info-group .event-title {
    font-size: 12px !important;
    line-height: 23px;
    /* Truncate to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
  }
}

/* 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);
  }
}

/* ============================================================
   Hero Image - Full width and height (ONLY for images, not videos)
   ============================================================ */

/* Desktop - Hero Image Full Width and Height */
@media (min-width: 769px) {
  .hero-dynamic-section .wp-block-cover:has(.wp-block-cover__image-background) {
    width: 100% !important;
    min-height: 500px !important;
    height: 70vh !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-dynamic-section .wp-block-cover:has(.wp-block-cover__image-background) .wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center !important;
       object-position: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
  }
}

/* Mobile - Hero Image Full Width and Height */
@media (max-width: 768px) {
  .hero-dynamic-section .wp-block-cover:has(.wp-block-cover__image-background) {
    width: 100% !important;
    min-height: 670px !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hero-dynamic-section .wp-block-cover:has(.wp-block-cover__image-background) .wp-block-cover__image-background {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center center !important;
       object-position: center center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 0 !important;
  }
}

/* Hero Picture - Desktop and Mobile Images */
.hero-picture-desktop {
  display: block;
}

.hero-picture-mobile {
  display: none;
}

/* Mobile: mostrar mobile, ocultar desktop */
@media (max-width: 768px) {
  .hero-picture-desktop {
    display: none !important;
  }
  
  .hero-picture-mobile {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    -o-object-position: center !important;
       object-position: center !important;
  }
}

/* Desktop: mostrar desktop, ocultar mobile */
@media (min-width: 769px) {
  .hero-picture-desktop {
    display: block !important;
  }
  
  .hero-picture-mobile {
    display: none !important;
  }
}

/* ============================================================
   Top Page - Events Section Mobile Design
   ============================================================ */


@media (max-width: 768px) {
  
  .top-events-section {
    background-color: #f7f7f7 !important;
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 7px !important;
  }

  
  .top-events-section .wp-block-heading.has-text-align-center.has-en-serif-font-family {
    margin-top: 0 !important;
    text-align: left !important;
    font-size: 11px !important;
    color: #000000 !important;
  }

  
  .top-events-section > .wp-block-spacer {
    display: none !important;
  }

  
  .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: 2px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    -webkit-box-pack: justify;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  
  .event-info-group {
    width: 100%;
    -webkit-box-align: start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    gap: 7px;
  }
  .top-events-section .wp-block-group {
    margin-top: 9px;
  }

  .top-events-section .wp-block-group.event-item-wrapper, 
  .top-events-section .wp-block-group.event-info-group {
    margin-top: 0;
  }

  
  .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;
  }

  
  .event-title {
    -webkit-box-flex: 1;
       -moz-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: 12px !important;
  }

  
  .event-dates {
    width: 100%;
    font-size: 12px !important;
    margin: 0;
  }

  
  .top-events-section .event-info-group {
    position: relative;
    padding-right: 20px; 
  }
  
  .top-events-section .event-title-arrow-mobile {
    top: 20px;
    font-size: 0.6em; 
    font-variant-emoji: none; 
    vertical-align: 1px;
    margin-left: 10px;
  }
  
  .top-events-section .event-title-arrow-mobile::before {
    content: '\25B6'; 
    font-variant-emoji: none;
    text-rendering: optimizeLegibility;
  }
  
  .top-events-section .event-title-arrow-desktop {
    display: none;
  }

  
  .top-events-section .event-day-name {
    font-size: 11px;
  }

  /* Top Events Section - Mobile Reorder: Location + Date (same line) -> Title */
  .top-events-section .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;
  }

  .top-events-section .event-info-group {
    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: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  /* Ocultar fecha desktop en mobile */
  .top-events-section .event-dates-desktop {
    display: none !important;
  }

  /* Mostrar fecha mobile */
  .top-events-section .event-dates-mobile {
    display: block;
    margin: 0;
    margin-left: 5px;
  }

  /* Título debajo de location + fecha */
  .top-events-section .event-title {
    width: 100%;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-top: 1px;
    /* Truncate to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
  }
}

/* Desktop: mostrar fecha desktop, ocultar fecha mobile */
@media (min-width: 769px) {
  .top-events-section .event-dates-desktop {
    display: block;
  }

  .top-events-section .event-dates-mobile {
    display: none !important;
  }
}

/* ============================================================
   Top Page - Works Section Mobile Adjustments
   ============================================================ */
@media (min-width: 769px) {
  .top-works-section-wrapper > .wp-block-spacer:first-of-type {
    height: 50px !important;
  }

  .top-works-section-wrapper > .wp-block-spacer {
    height: 37px !important;
  }

  .top-works-section-wrapper .works-grid .wp-block-post {
    margin-bottom: 50px;
  }
}
/* 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;
    padding-left: 10px;
  }

  /* 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 50%;
            flex: 0 0 50%;
    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: 10px !important;
    padding-right: 10px !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;
  }

  /* 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: 12px !important;
  padding-right: 12px !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;
  font-size: 13px !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: 10px !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,
  .single-openhouse .event-content img,
  .single-consultation .event-content img,
  .single-lifestyle_workshop .event-content img {
    margin-left: -10px !important;
    margin-right: -10px !important;
    max-width: calc(100% + 20px) !important;
    width: calc(100% + 20px) !important;
    display: block;
  }

  /* Images inside <p> tags in events - 10px margin from edge (mobile) */
  /* Text has 25px margin, images need -15px to achieve 10px from edge */
  body.single-openhouse .wp-block-post-content p img,
  body.single-consultation .wp-block-post-content p img,
  body.single-lifestyle_workshop .wp-block-post-content p img {
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    max-width: calc(100% + 30px) !important;
    width: calc(100% + 30px) !important;
    display: block;
  }

  /* Images inside <p> tags in stories - 10px margin from edge (mobile) */
  /* Container has padding-left: 15px, body has padding: 10px = 25px total */
  /* To achieve 10px from edge: need -15px margin */
  body.single-stories .wp-block-post-content p img,
  body.single-stories .wp-block-post-content figure img,
  body.single-stories .wp-block-post-content h1 img,
  body.single-stories .wp-block-post-content h2 img,
  body.single-stories .wp-block-post-content h3 img,
  body.single-stories .wp-block-post-content h4 img,
  body.single-stories .wp-block-post-content h5 img,
  body.single-stories .wp-block-post-content h6 img,
  body.single-stories .wp-block-post-content div img,
  body.single-stories .wp-block-post-content blockquote img {
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    max-width: calc(100% + 30px) !important;
    width: calc(100% + 30px) !important;
    display: block;
  }

  /* Images inside <p> tags in csr, works, projects - 10px margin from edge (mobile) */
  body.single-csr .wp-block-post-content p img,
  body.single-works .wp-block-post-content p img,
  body.single-projects .wp-block-post-content p img {
    margin-left: -10px !important;
    margin-right: -10px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    max-width: calc(100% + 20px) !important;
    width: calc(100% + 20px) !important;
    display: block;
  }

  .contact-section__container {
    gap: 0px;
  }

  .contact-section__content {
    padding: 35px 20px 40px;
  }

  .contact-section__first-text {
    margin-bottom: 36px;
  }

  .contact-section__text {
    margin-bottom: 10px;
  }
}

/* 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: #fafafa;
}

#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;
}

/* ================================
   PAGE ABOUT - Critical Hero & Navigation Styles
   IMPORTANT: These styles control the hero section and navigation
   Originally in HTML blocks, moved here for safety
================================ */

/* Override body padding for about page */
body.page-about,
body.page-template-page-about,
body.page-id-about {
  padding-top: 0;
}

/* Hero content positioning */
.company-hero-content {
  position: relative;
  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;
  padding: 40px;
}

/* H1 title with z-index */
.company-hero h1 {
  position: absolute;
  bottom: 40px;
  left: 40px;
  margin: 0;
  font-family: var(--wp--preset--font-family--en-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: white;
  text-transform: uppercase;
  z-index: 10;
}

/* Tate label (vertical text) - Right side with z-index */
.company-tate-label {
  position: absolute;
  top: 50%;
  right: 40px;
  -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;
  font-family: 'Shippori Mincho', serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: white;
  font-weight: 400;
  z-index: 10;
}

/* Navigation links below hero */
.company-nav-links {
  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;
  margin: 0 auto;
  padding: 65px 0 0;
  background: white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.company-nav-links 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;
}

.company-nav-links 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;
}

.company-nav-links a:hover {
  opacity: 0.7;
}

/* Mobile adjustments for hero and nav */
@media (max-width: 782px) {
  .company-hero .wp-block-cover__image-background {
    -o-object-position: right center;
       object-position: right center;
  }
  
  .company-hero-content {
    padding: 30px 20px;
  }

  .company-hero h1 {
    bottom: 30px;
    left: 20px;
    font-size: 28px;
  }

  .company-tate-label {
    right: 20px;
    font-size: 12px;
  }

  .company-nav-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 30px 20px;
  }

  .company-nav-links a {
    width: 100%;
  }
}

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

  .company-nav-links a {
    width: 100%;
  }
}

/* ================================
   PAGE ABOUT - Staff Carousel Additional Overrides
   IMPORTANT: These override the generic staff-carousel styles
   to match server configuration (no animation)
================================ */

/* Override .alignwide constraints */
body.page-about .staff-carousel.alignwide,
body.page-about .staff-carousel .wp-block-post-template.alignwide,
body.page-template-page-about .staff-carousel.alignwide,
body.page-template-page-about .staff-carousel .wp-block-post-template.alignwide,
body.page-id-about .staff-carousel.alignwide,
body.page-id-about .staff-carousel .wp-block-post-template.alignwide {
  margin-left: unset !important;
  margin-right: unset !important;
  max-width: none !important;
}

/* Full viewport width */
body.page-about .staff-carousel,
body.page-template-page-about .staff-carousel,
body.page-id-about .staff-carousel {
  overflow: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Force flex layout without animation (matches server) */
body.page-about .staff-carousel .wp-block-post-template,
body.page-template-page-about .staff-carousel .wp-block-post-template,
body.page-id-about .staff-carousel .wp-block-post-template {
  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;
  grid-template-columns: none !important;
  gap: 0 !important;
  overflow: visible !important;
  will-change: transform !important;
  /* Note: Animation intentionally removed to match server */
}

/* Post sizing */
body.page-about .staff-carousel .wp-block-post,
body.page-template-page-about .staff-carousel .wp-block-post,
body.page-id-about .staff-carousel .wp-block-post {
  -webkit-box-flex: 0 !important;
     -moz-box-flex: 0 !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Anchor height fix */
body.page-about .staff-carousel .wp-block-post > a,
body.page-template-page-about .staff-carousel .wp-block-post > a,
body.page-id-about .staff-carousel .wp-block-post > a {
  display: block !important;
  height: 100% !important;
}

/* Staff card container */
body.page-about .staff-carousel .staff-card,
body.page-template-page-about .staff-carousel .staff-card,
body.page-id-about .staff-carousel .staff-card {
  position: relative !important;
  overflow: hidden !important;
}

/* Featured image */
body.page-about .staff-carousel .wp-block-post-featured-image,
body.page-template-page-about .staff-carousel .wp-block-post-featured-image,
body.page-id-about .staff-carousel .wp-block-post-featured-image {
  overflow: hidden;
}

body.page-about .staff-carousel .wp-block-post-featured-image img,
body.page-template-page-about .staff-carousel .wp-block-post-featured-image img,
body.page-id-about .staff-carousel .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* Desktop - Text overlay on hover */
@media (min-width: 769px) {
  body.page-about .staff-carousel .staff-card > .wp-block-group,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    -webkit-transform: translateY(100%) !important;
        -ms-transform: translateY(100%) !important;
            transform: translateY(100%) !important;
    -webkit-transition: -webkit-transform 0.3s ease !important;
    transition: -webkit-transform 0.3s ease !important;
    -o-transition: transform 0.3s ease !important;
    transition: transform 0.3s ease !important;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease !important;
    z-index: 10 !important;
  }

  body.page-about .staff-carousel .staff-card:hover > .wp-block-group,
  body.page-template-page-about .staff-carousel .staff-card:hover > .wp-block-group,
  body.page-id-about .staff-carousel .staff-card:hover > .wp-block-group {
    -webkit-transform: translateY(0) !important;
        -ms-transform: translateY(0) !important;
            transform: translateY(0) !important;
  }

  body.page-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-about .staff-carousel .staff-card > .wp-block-group h3,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group h3,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group h3 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}

/* Mobile - Text always visible */
@media (max-width: 768px) {
  body.page-about .staff-carousel .staff-card > .wp-block-group,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group {
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
    padding: 5px 10px !important;
  }

  body.page-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-about .staff-carousel .staff-card > .wp-block-group h3,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-template-page-about .staff-carousel .staff-card > .wp-block-group h3,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group p,
  body.page-id-about .staff-carousel .staff-card > .wp-block-group h3 {
    text-align: center !important;
    margin: 0;
  }
  
  body.page-about .staff-carousel .wp-block-post-featured-image,
  body.page-template-page-about .staff-carousel .wp-block-post-featured-image,
  body.page-id-about .staff-carousel .wp-block-post-featured-image {
    width: auto;
    height: auto;
  }
}

/* Keyframes for potential future use */
@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes scroll-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

/* 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) {
  /* Centrar y limitar ancho del contenedor */
  .company-projects-section-wrapper .story-cards-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: var(--wp--custom--container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Aspect ratio 1:1 para el card completo */
  .company-projects-section-wrapper .story-card-with-overlay {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Aspect ratio 1:1 para el figure */
  .company-projects-section-wrapper .story-card-with-overlay .wp-block-post-featured-image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Imagen que ocupa todo el espacio */
  .company-projects-section-wrapper .story-card-with-overlay .wp-block-post-featured-image img {
    aspect-ratio: 1 / 1 !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    -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);
  }

  /* Tamaños de texto - Desktop (igual que story cards del top page) */
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content h3,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-title,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-title a {
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content time,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-date {
    font-size: 14px !important;
  }
}

/* Mobile - Grid vertical de 1 columna */
@media (max-width: 768px) {
  .company-projects-section-wrapper .story-cards-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    max-width: 100% !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay .wp-block-post-featured-image {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay .wp-block-post-featured-image img {
    aspect-ratio: 1 / 1 !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content h3,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-title,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-title a {
    font-size: 15px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
  }

  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content time,
  .company-projects-section-wrapper .story-card-with-overlay .story-overlay-content .wp-block-post-date {
    font-size: 14px !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;
}

/* 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 {
    -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;
    -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;
  }

  /* Tables - Mobile: width 100% and font-size 12px for th and td */
  body.single-works .wp-block-post-content table,
  body.single-stories .wp-block-post-content table,
  body.single-openhouse .wp-block-post-content table,
  body.single-consultation .wp-block-post-content table,
  body.single-lifestyle_workshop .wp-block-post-content table,
  body.single-projects .wp-block-post-content table,
  body.single-csr .wp-block-post-content table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto;
  }

  body.single-works .wp-block-post-content table th,
  body.single-works .wp-block-post-content table td,
  body.single-stories .wp-block-post-content table th,
  body.single-stories .wp-block-post-content table td,
  body.single-openhouse .wp-block-post-content table th,
  body.single-openhouse .wp-block-post-content table td,
  body.single-consultation .wp-block-post-content table th,
  body.single-consultation .wp-block-post-content table td,
  body.single-lifestyle_workshop .wp-block-post-content table th,
  body.single-lifestyle_workshop .wp-block-post-content table td,
  body.single-projects .wp-block-post-content table th,
  body.single-projects .wp-block-post-content table td,
  body.single-csr .wp-block-post-content table th,
  body.single-csr .wp-block-post-content table td {
    font-size: 12px !important;
    font-family: var(--wp--preset--font-family--ja-serif) !important;
  }

  /* Story lead text content - Mobile font-size 13px */
  body.single-stories .story-lead-text__content,
  body.single-csr .story-lead-text__content {
    font-size: 13px !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: 0 !important;
    padding-bottom: 120px !important;
    padding-left: 0;
        padding-right: 0;
  }
}

/* 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;
}

/* 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;
  }

  /* Remove padding-left for text elements in event templates (desktop) */
  .single-openhouse .event-description__content p,
  .single-openhouse .event-description__content span,
  .single-openhouse .event-description__content strong,
  .single-openhouse .event-description__content blockquote,
  .single-openhouse .event-description__content cite,
  .single-openhouse .event-description__content h1,
  .single-openhouse .event-description__content h2,
  .single-openhouse .event-description__content h3,
  .single-openhouse .event-description__content h4,
  .single-openhouse .event-description__content h5,
  .single-openhouse .event-description__content h6,
  .single-consultation .event-description__content p,
  .single-consultation .event-description__content span,
  .single-consultation .event-description__content strong,
  .single-consultation .event-description__content blockquote,
  .single-consultation .event-description__content cite,
  .single-consultation .event-description__content h1,
  .single-consultation .event-description__content h2,
  .single-consultation .event-description__content h3,
  .single-consultation .event-description__content h4,
  .single-consultation .event-description__content h5,
  .single-consultation .event-description__content h6,
  .single-lifestyle_workshop .event-description__content p,
  .single-lifestyle_workshop .event-description__content span,
  .single-lifestyle_workshop .event-description__content strong,
  .single-lifestyle_workshop .event-description__content blockquote,
  .single-lifestyle_workshop .event-description__content cite,
  .single-lifestyle_workshop .event-description__content h1,
  .single-lifestyle_workshop .event-description__content h2,
  .single-lifestyle_workshop .event-description__content h3,
  .single-lifestyle_workshop .event-description__content h4,
  .single-lifestyle_workshop .event-description__content h5,
  .single-lifestyle_workshop .event-description__content h6 {
    padding-left: 0 !important;
  }

  /* 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 {
    
    -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;
  }

  /* Remove padding-left for text elements in event templates (mobile) */
  .single-openhouse .event-description__content p,
  .single-openhouse .event-description__content span,
  .single-openhouse .event-description__content strong,
  .single-openhouse .event-description__content blockquote,
  .single-openhouse .event-description__content cite,
  .single-openhouse .event-description__content h1,
  .single-openhouse .event-description__content h2,
  .single-openhouse .event-description__content h3,
  .single-openhouse .event-description__content h4,
  .single-openhouse .event-description__content h5,
  .single-openhouse .event-description__content h6,
  .single-consultation .event-description__content p,
  .single-consultation .event-description__content span,
  .single-consultation .event-description__content strong,
  .single-consultation .event-description__content blockquote,
  .single-consultation .event-description__content cite,
  .single-consultation .event-description__content h1,
  .single-consultation .event-description__content h2,
  .single-consultation .event-description__content h3,
  .single-consultation .event-description__content h4,
  .single-consultation .event-description__content h5,
  .single-consultation .event-description__content h6,
  .single-lifestyle_workshop .event-description__content p,
  .single-lifestyle_workshop .event-description__content span,
  .single-lifestyle_workshop .event-description__content strong,
  .single-lifestyle_workshop .event-description__content blockquote,
  .single-lifestyle_workshop .event-description__content cite,
  .single-lifestyle_workshop .event-description__content h1,
  .single-lifestyle_workshop .event-description__content h2,
  .single-lifestyle_workshop .event-description__content h3,
  .single-lifestyle_workshop .event-description__content h4,
  .single-lifestyle_workshop .event-description__content h5,
  .single-lifestyle_workshop .event-description__content h6 {
    padding-left: 0 !important;
  }

  /* 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;
  }
}

/* Hide subtitle for PLAN section (slider) in single-openhouse */
body.single-openhouse .wp-block-group.alignfull:has(.point-gallery) p.has-text-align-center.has-ja-sans-font-family {
  display: none;
}

/* Event Content - Same styles as event-description__content */
.event-content__content {
  padding-left: 14px;
  padding-right: 14px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop - Vertical padding */
@media (min-width: 769px) {
  .event-content__content {
    padding-top: 120px !important;
    padding-bottom: 150px !important;
  }
}

/* Mobile - Vertical padding */
@media (max-width: 768px) {
  .event-content__content {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* Typography for event-content__content */
/* Headings (h1-h6) */
.event-content__content h1,
.event-content__content h2,
.event-content__content h3,
.event-content__content h4,
.event-content__content h5,
.event-content__content h6 {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 14px !important;
}

/* Paragraphs (p) and List Items (li) */
.event-content__content p,
.event-content__content li {
  font-family: var(--wp--preset--font-family--ja-serif) !important; /* Shippori Mincho */
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Figcaption */
.event-content__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-content__content ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 30px;
}

.event-content__content ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 30px;
}

.event-content__content li {
  display: list-item;
}

/* Event Content - Desktop spacing */
@media (min-width: 769px) {
  /* Base styles for paragraphs and figcaptions */
  .event-content__content p,
  .event-content__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-content__content li {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  .event-content__content h1,
  .event-content__content h2,
  .event-content__content h3,
  .event-content__content h4,
  .event-content__content h5,
  .event-content__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-content__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-content__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 Content - Mobile spacing */
@media (max-width: 768px) {
  /* Base styles for paragraphs and figcaptions */
  .event-content__content p,
  .event-content__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-content__content li {
    -webkit-margin-before: 0;
            margin-block-start: 0;
  }

  /* Headings: always have padding-top and padding-left */
  .event-content__content h1,
  .event-content__content h2,
  .event-content__content h3,
  .event-content__content h4,
  .event-content__content h5,
  .event-content__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-content__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-content__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;
  }
}

/* ============================================================
   Hide Empty Sections in Event Templates
   ============================================================ */

/* Hide PLAN section (slider) if point-gallery is empty */
body.single-openhouse .wp-block-group.alignfull:has(.point-gallery--empty),
body.single-openhouse .wp-block-group.alignfull:has(.point-gallery):not(:has(.point-gallery-slides)),
body.single-consultation .wp-block-group.alignfull:has(.point-gallery--empty),
body.single-consultation .wp-block-group.alignfull:has(.point-gallery):not(:has(.point-gallery-slides)),
body.single-lifestyle_workshop .wp-block-group.alignfull:has(.point-gallery--empty),
body.single-lifestyle_workshop .wp-block-group.alignfull:has(.point-gallery):not(:has(.point-gallery-slides)) {
  display: none;
}

/* Hide POINT section (event-description) if both event-description and event-content are empty */
body.single-openhouse .wp-block-group.alignwide:has(.event-description--empty),
body.single-openhouse .wp-block-group.alignwide:has(.event-description):not(:has(.event-description__content)):not(:has(.event-content__content)),
body.single-consultation .wp-block-group.alignwide:has(.event-description--empty),
body.single-consultation .wp-block-group.alignwide:has(.event-description):not(:has(.event-description__content)):not(:has(.event-content__content)),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.event-description--empty),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.event-description):not(:has(.event-description__content)):not(:has(.event-content__content)) {
  display: none;
}

/* Hide NOTES section if event-notes is empty */
body.single-openhouse .wp-block-group.alignwide:has(.event-notes--empty),
body.single-openhouse .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes__list)),
body.single-openhouse .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes .event-notes__item)),
body.single-consultation .wp-block-group.alignwide:has(.event-notes--empty),
body.single-consultation .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes__list)),
body.single-consultation .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes .event-notes__item)),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.event-notes--empty),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes__list)),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.event-notes):not(:has(.event-notes .event-notes__item)) {
  display: none;
}

/* Hide STAFF INTRO section if shortcode is empty (project-staff-intro-empty) */
body.single-openhouse .wp-block-group.alignwide:has(.project-staff-intro-empty),
body.single-openhouse .wp-block-group.alignwide:has(.wp-block-shortcode:empty),
body.single-consultation .wp-block-group.alignwide:has(.project-staff-intro-empty),
body.single-consultation .wp-block-group.alignwide:has(.wp-block-shortcode:empty),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.project-staff-intro-empty),
body.single-lifestyle_workshop .wp-block-group.alignwide:has(.wp-block-shortcode:empty) {
  display: none !important;
}

/* ===== Staff Intro Styles for Events (Openhouse, Consultation, Workshop) ===== */
.single-openhouse .staff-intro,
.single-consultation .staff-intro,
.single-lifestyle_workshop .staff-intro {
  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;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.single-openhouse .staff-intro__item,
.single-consultation .staff-intro__item,
.single-lifestyle_workshop .staff-intro__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;
  width: 100%;
  gap: 20px;
}

.single-openhouse .staff-intro__bubble,
.single-consultation .staff-intro__bubble,
.single-lifestyle_workshop .staff-intro__bubble {
  position: relative;
  background: #fff;
  border: 2px solid #333;
  border-radius: 0;
  padding: 24px 28px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-serif);
}

.single-openhouse .staff-intro__bubble p,
.single-consultation .staff-intro__bubble p,
.single-lifestyle_workshop .staff-intro__bubble p {
  margin: 0;
}

.single-openhouse .staff-intro__item--bubble-left .staff-intro__bubble,
.single-consultation .staff-intro__item--bubble-left .staff-intro__bubble,
.single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__bubble {
  text-align: left;
}

.single-openhouse .staff-intro__item--bubble-right .staff-intro__bubble,
.single-consultation .staff-intro__item--bubble-right .staff-intro__bubble,
.single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__bubble {
  text-align: right;
}

.single-openhouse .staff-intro__item--bubble-left .staff-intro__bubble::after,
.single-consultation .staff-intro__item--bubble-left .staff-intro__bubble::after,
.single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__bubble::after {
  content: '';
  position: absolute;
  left: 40px;
  bottom: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
}

.single-openhouse .staff-intro__item--bubble-left .staff-intro__bubble::before,
.single-consultation .staff-intro__item--bubble-left .staff-intro__bubble::before,
.single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__bubble::before {
  content: '';
  position: absolute;
  left: 39px;
  bottom: -17px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 15px solid #000;
  z-index: 0;
}

.single-openhouse .staff-intro__item--bubble-right .staff-intro__bubble::after,
.single-consultation .staff-intro__item--bubble-right .staff-intro__bubble::after,
.single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__bubble::after {
  content: '';
  position: absolute;
  right: 40px;
  bottom: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #fff;
}

.single-openhouse .staff-intro__item--bubble-right .staff-intro__bubble::before,
.single-consultation .staff-intro__item--bubble-right .staff-intro__bubble::before,
.single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__bubble::before {
  content: '';
  position: absolute;
  right: 39px;
  bottom: -17px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 15px solid #000;
  z-index: 0;
}

.single-openhouse .staff-intro__info,
.single-consultation .staff-intro__info,
.single-lifestyle_workshop .staff-intro__info {
  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: 16px;
}

.single-openhouse .staff-intro__item--bubble-left .staff-intro__info,
.single-consultation .staff-intro__item--bubble-left .staff-intro__info,
.single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__info {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.single-openhouse .staff-intro__item--bubble-right .staff-intro__info,
.single-consultation .staff-intro__item--bubble-right .staff-intro__info,
.single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__info {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.single-openhouse .staff-intro__info--photo-left,
.single-consultation .staff-intro__info--photo-left,
.single-lifestyle_workshop .staff-intro__info--photo-left {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.single-openhouse .staff-intro__info--photo-right,
.single-consultation .staff-intro__info--photo-right,
.single-lifestyle_workshop .staff-intro__info--photo-right {
  -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;
}

.single-openhouse .staff-intro__photo,
.single-consultation .staff-intro__photo,
.single-lifestyle_workshop .staff-intro__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border: 2px solid #f0f0f0;
}

.single-openhouse .staff-intro__text,
.single-consultation .staff-intro__text,
.single-lifestyle_workshop .staff-intro__text {
  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: 4px;
}

.single-openhouse .staff-intro__role,
.single-consultation .staff-intro__role,
.single-lifestyle_workshop .staff-intro__role {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #999;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 400;
}

.single-openhouse .staff-intro__name,
.single-consultation .staff-intro__name,
.single-lifestyle_workshop .staff-intro__name {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  font-family: var(--wp--preset--font-family--ja-serif);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .single-openhouse .staff-intro,
  .single-consultation .staff-intro,
  .single-lifestyle_workshop .staff-intro {
    max-width: 100%;
    padding: 0 20px;
  }

  .single-openhouse .staff-intro__bubble,
  .single-consultation .staff-intro__bubble,
  .single-lifestyle_workshop .staff-intro__bubble {
    padding: 20px 24px;
    font-size: 14px;
  }

  .single-openhouse .staff-intro__photo,
  .single-consultation .staff-intro__photo,
  .single-lifestyle_workshop .staff-intro__photo {
    width: 70px;
    height: 70px;
  }

  .single-openhouse .staff-intro__role,
  .single-consultation .staff-intro__role,
  .single-lifestyle_workshop .staff-intro__role {
    font-size: 10px;
  }

  .single-openhouse .staff-intro__name,
  .single-consultation .staff-intro__name,
  .single-lifestyle_workshop .staff-intro__name {
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .single-openhouse .staff-intro,
  .single-consultation .staff-intro,
  .single-lifestyle_workshop .staff-intro {
    
    padding: 0 16px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .single-openhouse .staff-intro__item,
  .single-consultation .staff-intro__item,
  .single-lifestyle_workshop .staff-intro__item {
    gap: 20px;
  }

  .single-openhouse .staff-intro__bubble,
  .single-consultation .staff-intro__bubble,
  .single-lifestyle_workshop .staff-intro__bubble {
    padding: 18px 20px;
    font-size: 14px;
    line-height: 1.7;
    border-radius: 0;
  }

  .single-openhouse .staff-intro__item--bubble-left .staff-intro__bubble::after,
  .single-openhouse .staff-intro__item--bubble-left .staff-intro__bubble::before,
  .single-consultation .staff-intro__item--bubble-left .staff-intro__bubble::after,
  .single-consultation .staff-intro__item--bubble-left .staff-intro__bubble::before,
  .single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__bubble::after,
  .single-lifestyle_workshop .staff-intro__item--bubble-left .staff-intro__bubble::before {
    left: 30px;
  }

  .single-openhouse .staff-intro__item--bubble-right .staff-intro__bubble::after,
  .single-openhouse .staff-intro__item--bubble-right .staff-intro__bubble::before,
  .single-consultation .staff-intro__item--bubble-right .staff-intro__bubble::after,
  .single-consultation .staff-intro__item--bubble-right .staff-intro__bubble::before,
  .single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__bubble::after,
  .single-lifestyle_workshop .staff-intro__item--bubble-right .staff-intro__bubble::before {
    right: 30px;
  }

  .single-openhouse .staff-intro__photo,
  .single-consultation .staff-intro__photo,
  .single-lifestyle_workshop .staff-intro__photo {
    width: 60px;
    height: 60px;
  }


  .single-openhouse .staff-intro__role,
  .single-consultation .staff-intro__role,
  .single-lifestyle_workshop .staff-intro__role {
    font-size: 10px;
  }

  .single-openhouse .staff-intro__name,
  .single-consultation .staff-intro__name,
  .single-lifestyle_workshop .staff-intro__name {
    font-size: 12px;
  }
}

/* ============================================================
   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: 20px !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10000 !important; /* Ensure it's above everything */
    width: 44px;
    height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    height: 34px;
    width: 34px;
  }
}

/* ============================================================
   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 {
  position: relative;
  padding-right: 20px; /* Space for the icon */
}

/* Horizontal line (always visible) */
li.events-dropdown > a.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  margin-left: 8px; /* Maintain existing spacing logic if any, but positioning handles it */
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Vertical line (rotates to horizontal on hover) */
li.events-dropdown > a.wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 4.5px; /* Center with the 10px width of after (10/2 - 0.5) */
  width: 1px;
  height: 10px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Change + to - on hover by rotating vertical line */
li.events-dropdown:hover > a.wp-block-navigation-item__content::before {
  -webkit-transform: translateY(-50%) rotate(90deg);
      -ms-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}

/* Hide default content change rule */
/* li.events-dropdown:hover > a.wp-block-navigation-item__content::after {
  content: "−";
} */

/* Override navigation submenu transition from blocks/navigation/style.min.css */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  -webkit-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

/* 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); /* Start slightly up for drop-down effect */
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  top: 140% !important;
  visibility: hidden; /* Ensure it's hidden */
}

@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;
  visibility: visible;
}

/* 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(-15px); /* Start higher for drop-down effect */
      -ms-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  -o-transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 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.3s;
       -o-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(2) {
  -webkit-transition-delay: 0.4s;
       -o-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(3) {
  -webkit-transition-delay: 0.5s;
       -o-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(4) {
  -webkit-transition-delay: 0.6s;
       -o-transition-delay: 0.6s;
          transition-delay: 0.6s;
}

li.events-dropdown:hover > ul.wp-block-navigation__submenu-container.events-dropdown > li:nth-child(5) {
  -webkit-transition-delay: 0.7s;
       -o-transition-delay: 0.7s;
          transition-delay: 0.7s;
}

/* 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;
  }
}

/* ============================================
   MOBILE MENU ANIMATIONS & JAPANESE TEXT
   ============================================ */

/* 1. Mobile Slide-in Animation */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 100000 !important;
    
    /* Position off-screen right using left property instead of transform */
    left: 100% !important;
    
    opacity: 1 !important;
    visibility: visible !important; /* Keep visible so transition works reliably */
    pointer-events: none;
    
    -webkit-transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    -o-transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open {
    /* Bring on-screen */
    left: 0 !important;
    
    pointer-events: auto;
    
    /* Ensure transition is maintained when class is present */
    -webkit-transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    -o-transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  
  /* Ensure content container is visible and maintains padding during close */
  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    padding-top: 100px !important;
    padding-left: 64px;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    opacity: 1;
  }
  
  /* Hide content when closed, but keep padding to prevent layout shift */
  .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    opacity: 0;
  }
}

/* 2. Staggered Item Fade-in (Mobile) */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container li {
    opacity: 0;
    /* No transition when closed - instant change */
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open li {
    opacity: 1;
    /* Apply transition only when menu is open for fade-in effect */
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
    -webkit-box-align: start !important;
       -moz-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: start !important;
    width: 100% !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open li.iemoto-btn {
    -webkit-box-pack: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 44px;
  }

  .wp-block-navigation__responsive-container.is-menu-open li.iemoto-btn a {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    padding-left: 18px !important;
    height: 100%;
    width: 100%;
    -webkit-box-align: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            background: #000000 !important;
  }

  /* Stagger delays */
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(1) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(2) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(3) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(4) { -webkit-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(5) { -webkit-transition-delay: 1.0s; -o-transition-delay: 1.0s; transition-delay: 1.0s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(6) { -webkit-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(7) { -webkit-transition-delay: 1.4s; -o-transition-delay: 1.4s; transition-delay: 1.4s; }
  .wp-block-navigation__responsive-container.is-menu-open li:nth-child(8) { -webkit-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; }
  
  /* Contact button appears last */
  .wp-block-navigation__responsive-container.is-menu-open li.iemoto-btn {
    -webkit-transition-delay: 1.8s;
    -o-transition-delay: 1.8s;
    transition-delay: 1.8s;
  }
}

/* 3. Japanese Text Mapping (Mobile & Desktop) */

/* Mobile Styling */
@media (max-width: 781px) {
  /* Use label pseudo-element to avoid conflict with link icons */
  .wp-block-navigation__responsive-container li:not(.iemoto-btn) a .wp-block-navigation-item__label::after {
    display: block;
    font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 11px;
    color: #5C5C5C;
    margin-top: 5px;
    line-height: 1;
    content: ""; /* Default empty */
  }
}

/* Desktop Styling */
@media (min-width: 782px) {
  ul.wp-block-navigation__container > li:not(.iemoto-btn) > a {
    position: relative;
    /* overflow: hidden; Removed to allow icon visibility if needed */
  }

  ul.wp-block-navigation__container > li:not(.iemoto-btn) > a .wp-block-navigation-item__label {
    position: relative; /* Context for pseudo-element */
    display: inline-block;
  }
  
  /* English Text (The label itself) - Fade out */
  /* We can't fade out the label itself because the pseudo-element is inside it. 
     If we fade out parent, child also fades.
     So we need to fade out the TEXT of the label, but keep pseudo visible? No, that's hard.
     
     Alternative: Put Japanese text in Link ::before (if unused) or Span ::before.
     But Link ::before/after are used for +/- icon on Events.
     
     Let's use Span ::before for Japanese text?
     Or, we can use color: transparent on the label text to "hide" it while keeping ::after visible?
  */

  ul.wp-block-navigation__container > li:not(.iemoto-btn) > a .wp-block-navigation-item__label {
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
  }

  ul.wp-block-navigation__container > li:not(.iemoto-btn) > a .wp-block-navigation-item__label::after {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-size: 12px;
    color: #000000;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    content: "";
  }

  /* Hover Effect */
  ul.wp-block-navigation__container > li:not(.iemoto-btn):hover > a .wp-block-navigation-item__label {
    color: transparent; /* Hide English text */
  }

  ul.wp-block-navigation__container > li:not(.iemoto-btn):hover > a .wp-block-navigation-item__label::after {
    opacity: 1; /* Show Japanese text */
    color: #000000; /* Ensure color is visible despite parent transparent? No, pseudo-elements don't inherit transparent color if set explicitly */
  }
  
  /* Header white mode - Japanese text should be white */
  body.header-light-mode ul.wp-block-navigation__container > li:not(.iemoto-btn):hover > a .wp-block-navigation-item__label::after {
    color: #FFFFFF !important;
  }
  
  /* Header scrolled (black) - Japanese text should be black */
  body.header-light-mode.header-scrolled ul.wp-block-navigation__container > li:not(.iemoto-btn):hover > a .wp-block-navigation-item__label::after {
    color: #000000 !important;
  }
}

/* Text Mapping based on HREF (Targeting the LABEL pseudo-element) */
/* Works */
li:not(.iemoto-btn) a[href*="works"] .wp-block-navigation-item__label::after,
li:not(.iemoto-btn) a[href*="archive-works"] .wp-block-navigation-item__label::after {
  content: "施工事例" !important;
}

/* Story */
li:not(.iemoto-btn) a[href*="stories"] .wp-block-navigation-item__label::after,
li:not(.iemoto-btn) a[href*="story"] .wp-block-navigation-item__label::after {
  content: "家つくりストーリー" !important;
}

/* Open House */
li:not(.iemoto-btn) a[href*="openhouse"] .wp-block-navigation-item__label::after {
  content: "完成内覧会・モデルハウス見学" !important;
}

/* Consultation */
li:not(.iemoto-btn) a[href*="consultation"] .wp-block-navigation-item__label::after {
  content: "相談会・各種イベント" !important;
}

/* Workshop */
li:not(.iemoto-btn) a[href*="workshop"] .wp-block-navigation-item__label::after {
  content: "ライフスタイルワークショップ" !important;
}

/* Guide */
li:not(.iemoto-btn) a[href*="guide"] .wp-block-navigation-item__label::after {
  content: "家づくりガイド" !important;
}

/* Company */
li:not(.iemoto-btn) a[href*="company"] .wp-block-navigation-item__label::after,
li:not(.iemoto-btn) a[href*="about"] .wp-block-navigation-item__label::after {
  content: "会社概要" !important;
}

/* Events (Parent Menu) */
li.events-dropdown > a .wp-block-navigation-item__label::after {
  content: "イベント" !important;
}
/* Also catch if it has a specific href but usually parent items are # or /events */
li:not(.iemoto-btn) a[href*="events"] .wp-block-navigation-item__label::after {
   content: "イベント" !important;
}

/* 4. Desktop Specific Overrides */
@media (min-width: 782px) {
  /* Prevent Japanese text injection on Events Dropdown sub-items */
  ul.wp-block-navigation__submenu-container.events-dropdown li a .wp-block-navigation-item__label::after {
     content: none !important;
     display: none !important;
  }
  
  /* Ensure hover effect doesn't hide English text for sub-items */
  /* (The selector `ul.wp-block-navigation__container > li ... > a` already protects this, but good to be sure) */
  
  /* Specific adjustment for STORY item (2nd item) Japanese text spacing */
  ul.wp-block-navigation__container > li:nth-child(2) > a .wp-block-navigation-item__label::after {
    letter-spacing: 0px !important;
  }
}

/* ============================================
   WORKS DATA CONTAINER (Spec List)
   ============================================ */

/* DATA Section Heading */
.works-data-section h3.wp-block-heading.has-en-serif-font-family,
.works-data-section .wp-block-heading.has-en-serif-font-family,
.works-data-section h3.wp-block-heading,
.works-data-section h3 {
  font-size: 10px !important;
  color: #969696 !important;
  margin-bottom: 20px !important;
}

/* Container */
.works-data-container {
  padding: 35px 35px !important;
  background: #fff;
  border-radius: 0;
}

/* Grid container for property stats */
.works-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 180px));
  gap: 20px;
  justify-items: start;
  -webkit-box-pack: start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

/* Individual property stat item */
.property-stats {
  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;
  max-width: 180px;
  width: 100%;
}

/* Label (above value) */
.property-label {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 11px;
  color: #555555;
  margin-bottom: 7px;
  line-height: 1.4;
}

/* Value (ACF field) */
.property-value {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  font-size: 12px;
  color: #000000;
  margin: 0;
  line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .works-data-grid {
    grid-template-columns: 40% 60%; /* Primera columna 35%, segunda 65% */
    gap: 30px 20px; /* vertical horizontal - gap horizontal reducido */
    justify-items: start;
    -webkit-box-pack: start;
       -moz-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
  
  .property-stats {
    max-width: 100%;
    width: 100%;
  }
}

/* ============================================
   FONTS CORRECTION (Consolidated Rules)
   ============================================ */

/* --- Rule Group 1: H1 Fixed 25px (Works, Stories, Company, CSR, Staff, CEO, Projects) --- */
.post-type-archive-works .wp-block-heading,
.post-type-archive-stories .wp-block-heading,
.page-template-page-about .company-hero-title,
.post-type-archive-csr .csr-hero__title,
.post-type-archive-staff .staff-page-title,
.page-template-page-ceo-message-new .ceo-hero-section h1,
.post-type-archive-projects .wp-block-heading, .tax-projects_tag .wp-block-heading {
  font-family: adobe-jenson-pro, 'Adobe Jenson Pro', serif !important;
  font-size: 25px !important;
}

@media (max-width: 768px) {
  .post-type-archive-works .wp-block-heading,
  .post-type-archive-stories .wp-block-heading,
  .page-template-page-about .company-hero-title,
  .post-type-archive-csr .csr-hero__title,
  .post-type-archive-staff .staff-page-title,
  .page-template-page-ceo-message-new .ceo-hero-section h1,
  .post-type-archive-projects .wp-block-heading, .tax-projects_tag .wp-block-heading  {
    font-size: 25px !important;
  }

  .post-type-archive-staff .recruit-block__content h2.wp-block-heading,
  .post-type-archive-csr .recruit-block__content h2.wp-block-heading,
  .post-type-archive-projects .recruit-block__content h2.wp-block-heading{
    font-size: 19px !important;
  }

  .post-type-archive-staff .recruit-block__content h3.wp-block-heading,
  .post-type-archive-csr .recruit-block__content h3.wp-block-heading,
  .post-type-archive-projects .recruit-block__content h3.wp-block-heading{
    font-size: 11px !important;
  }
}

/* --- Rule Group 2: H1 29px/25px + Japanese Text (Guide, Openhouse, Consultation, Workshop) --- */
/* H1 Styles */
.page-template-single-guides .guide-hero-title,
.post-type-archive-openhouse h1 .en-title,
.post-type-archive-consultation h1 .en-title,
.post-type-archive-lifestyle_workshop h1 .en-title {
  font-family: adobe-jenson-pro, 'Adobe Jenson Pro', serif !important;
  font-size: 29px !important;
}

@media (max-width: 768px) {
  .page-template-single-guides .guide-hero-title,
  .post-type-archive-openhouse h1 .en-title,
  .post-type-archive-consultation h1 .en-title,
  .post-type-archive-lifestyle_workshop h1 .en-title {
    font-size: 25px !important;
  }
}

/* Japanese Text Styles (Subtitle/Helper Text) */
.page-template-single-guides .guide-hero-subtitle,
.post-type-archive-openhouse h1 .ja-title,
.post-type-archive-consultation h1 .ja-title,
.post-type-archive-lifestyle_workshop h1 .ja-title {
  font-family: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', serif !important;
  font-size: 14px !important;
}

@media (max-width: 768px) {
  .page-template-single-guides .guide-hero-subtitle,
  .post-type-archive-openhouse h1 .ja-title,
  .post-type-archive-consultation h1 .ja-title,
  .post-type-archive-lifestyle_workshop h1 .ja-title {
    font-size: 12px !important;
  }
}

/* --- Rule Group 3: Vertical Text (Works, Stories, About, CSR, Staff, Projects) --- */
/* Target: .tate-label, .stories-archive-vertical-text, .company-tate-label, .post-type-archive-staff .vertical-text-label, .csr-hero-vertical-text, .projects-archive-vertical-text */
.tate-label,
.stories-archive-vertical-text,
.company-tate-label,
.post-type-archive-staff .vertical-text-label,
.csr-hero-vertical-text,
.projects-archive-vertical-text {
  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 !important;
  font-size: 14px !important;
}

@media (max-width: 768px) {
  .tate-label,
  .stories-archive-vertical-text,
  .company-tate-label,
  .post-type-archive-staff .vertical-text-label,
  .csr-hero-vertical-text,
  .projects-archive-vertical-text {
    font-size: 13px !important;
  }
}

/* Hide spacer between CONCEPT subtitle and content in event templates */
/* Target spacer that comes after h2 in CONCEPT section (first h2 in alignwide container) */
.single-openhouse .alignwide > h2.wp-block-heading:first-of-type + .wp-block-spacer,
.single-consultation .alignwide > h2.wp-block-heading:first-of-type + .wp-block-spacer,
.single-lifestyle_workshop .alignwide > h2.wp-block-heading:first-of-type + .wp-block-spacer {
  display: none !important;
}

/* Hide spacer between POINT subtitle and content in event templates */
/* Target spacer that comes after p (subtitle) in POINT section */
.single-openhouse .alignwide h2.wp-block-heading + p.has-ja-sans-font-family + .wp-block-spacer,
.single-consultation .alignwide h2.wp-block-heading + p.has-ja-sans-font-family + .wp-block-spacer,
.single-lifestyle_workshop .alignwide h2.wp-block-heading + p.has-ja-sans-font-family + .wp-block-spacer {
  display: none !important;
}