@charset "utf-8";
/* ===================================================================
 * files_responsive.css
 * Tab/SP overrides only. PC (>=1024px) stays untouched.
 *   Tab  : 768px - 1023px
 *   SP   : 0    - 767px
 * Strategy: ride on top of files_pc.css with high-specificity overrides.
 * =================================================================== */

/* -------------------------------------------------------------------
 * GLOBAL  (anywhere narrower than 1024px)
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* Kill the 1300px min-width that pins the PC layout */
  html, body { min-width: 0 !important; max-width: 100vw; overflow-x: hidden; }
  body { font-size: 15px; }
  img, video, iframe { max-width: 100%; height: auto; }

  /* Wrapper grids */
  #wrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  #outer_block, #inner_block, #main, #primary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* Header / branding */
  #branding_box {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    position: relative !important;
    padding: 14px 16px 12px !important;
    box-sizing: border-box;
  }
  #site-description {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    text-align: center !important;
  }
  #site-description a {
    display: inline-block !important;
    font-size: 18px !important;
    color: #36653b !important;
    text-decoration: none !important;
    font-weight: 700 !important;
  }
  #header_information {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #header_information .main_header {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  #header_information .main_header img {
    width: auto !important;
    max-width: 160px !important;
    height: auto !important;
  }

  /* Side drawer becomes full-width on small screens */
  #access {
    width: 100% !important;
    right: -100% !important;
  }
  body.opened #access { right: 0 !important; }

  /* Menu trigger – align inside viewport */
  #menuTrigger {
    top: 12px !important;
    right: 12px !important;
    width: 130px !important;
    height: 40px !important;
    background-size: 130px auto !important;
  }

  /* Main visual */
  #main_teaser {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }
  #main_teaser img,
  #main_teaser video {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Outer dotted frame and decorative paddings */
  #outer_block { padding: 0 !important; }

  /* Generic section containers */
  .entry_post, .post_margin {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  .headline_title { font-size: 22px !important; line-height: 1.4 !important; }
  .text_box, .text { font-size: 15px !important; line-height: 1.8 !important; }
  .field_2col, .field_3col, .field_4col, .field_5col {
    display: block !important;
  }
  .field_2col > *, .field_3col > *, .field_4col > *, .field_5col > * {
    width: 100% !important;
    margin-bottom: 18px !important;
  }

  /* Footer */
  #footer_block, #footer_box { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  #footer_information { width: 100% !important; padding: 16px !important; box-sizing: border-box; }
  #footer-widget-area { display: block !important; width: 100% !important; padding: 16px !important; box-sizing: border-box; }
  #footer-widget-area #first { width: 100% !important; }
  #footer-widget-area ul.menu { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0; }
  #footer-widget-area ul.menu li { list-style: none; font-size: 13px; }
  #footer-widget-area ul.menu li a { color: #36653b; text-decoration: none; }
  #copyright { font-size: 12px !important; padding: 12px 8px !important; text-align: center; }

  /* Fixed side buttons – compact 4-in-a-row at the bottom */
  .fixed_btn {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: rgba(54, 101, 59, 0.92);
    padding: 6px 4px !important;
    z-index: 800;
  }
  .fixed_btn > div {
    position: static !important;
    width: 25% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .fixed_btn > div a {
    display: inline-block !important;
  }
  .fixed_btn > div img {
    width: 100% !important;
    max-width: 60px !important;
    height: auto !important;
  }
  #float_top_btn {
    bottom: 96px !important;
    right: 10px !important;
  }
  #float_top_btn img { width: 44px !important; height: auto !important; }
  body { padding-bottom: 80px !important; }

  /* ===== LP common sections (independent of viewport width) ===== */
  .lp_section { padding: 24px 16px !important; }
  .lp_section__title { font-size: 20px !important; line-height: 1.4 !important; }
  .lp_lead { font-size: 15px !important; line-height: 1.8 !important; padding: 0 4px !important; }
  .lp_problems__list,
  .lp_strengths__grid,
  .lp_signs__grid,
  .lp_gallery__grid,
  .lp_flow__list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .lp_gallery__card img { width: 100% !important; height: auto !important; }
  .lp_cta_panel {
    padding: 20px 14px !important;
    text-align: center;
  }
  .lp_cta_panel__title { font-size: 18px !important; }
  .lp_cta_panel__btn { width: 100% !important; box-sizing: border-box; }
  .lp_detail__body { padding: 0 4px !important; font-size: 15px !important; }

  /* ===== FAQ ===== */
  .faq_lead { padding: 18px 16px !important; }
  .faq_post {
    padding: 0 12px !important;
  }
  .faq_post > .faq-title,
  .faq_post > .faq-answer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .faq-title { font-size: 15px !important; padding: 12px 14px !important; }
  .faq-answer { font-size: 14px !important; padding: 12px 14px !important; line-height: 1.85 !important; }

  /* ===== News list ===== */
  .news_item { padding: 12px 14px !important; }
  .news_item__date { font-size: 13px !important; }
  .news_item__title { font-size: 15px !important; }

  /* ===== Blog list cards ===== */
  .blog_section { padding: 20px 14px !important; }
  .blog_filters { gap: 6px !important; }
  .blog_filter { font-size: 12px !important; padding: 6px 10px !important; }
  .blog_grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog_card__title { font-size: 15px !important; }
  .blog_card__excerpt { font-size: 13px !important; }

  /* ===== Blog detail page ===== */
  .post_breadcrumb { padding: 0 14px !important; font-size: 12px !important; }
  .post_article {
    padding: 24px 16px 28px !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    border-radius: 6px;
  }
  .post_article__title { font-size: 20px !important; line-height: 1.5 !important; }
  .post_article__content,
  .post_article__content p,
  .post_article__content li { font-size: 15px !important; line-height: 1.9 !important; }
  .post_article__content h2 {
    font-size: 17px !important;
    padding: 10px 14px !important;
    margin: 28px 0 14px !important;
  }
  .post_article__content h3 { font-size: 15px !important; margin: 22px 0 10px !important; }
  .post_navigation {
    grid-template-columns: 1fr !important;
    padding: 0 14px !important;
  }
  .post_cta {
    margin: 0 14px 28px !important;
    padding: 24px 18px !important;
  }
  .post_cta__title { font-size: 18px !important; }
  .post_cta__lead { font-size: 14px !important; }
  .post_cta__btn { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  .post_cta__buttons { flex-direction: column; gap: 10px; align-items: center; }

  /* ===== Opening animation cleanup on small screens ===== */
  #progress { transform: scale(0.6) !important; }
  #opening, .opening_overlay { background-size: cover !important; }

  /* The footer Tab/SP fixed button rail tends to overlap copyright; push it up */
  #footer_block { padding-bottom: 92px !important; }
}

/* -------------------------------------------------------------------
 * TAB  (768px - 1023px) — 2-column grids, larger headlines
 * ------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  body { font-size: 16px; }
  #site-description a { font-size: 22px !important; }
  #header_information .main_header img { max-width: 200px !important; }

  /* 2-col grids where SP collapsed to 1col */
  .lp_problems__list,
  .lp_strengths__grid,
  .lp_signs__grid,
  .lp_gallery__grid,
  .lp_flow__list,
  .blog_grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .post_article { padding: 32px 28px 36px !important; margin-left: 24px !important; margin-right: 24px !important; }
  .post_article__title { font-size: 24px !important; }
  .post_article__content h2 { font-size: 19px !important; padding: 12px 16px !important; }

  .lp_section { padding: 36px 24px !important; }
  .lp_section__title { font-size: 24px !important; }

  .blog_section { padding: 28px 22px !important; }

  .fixed_btn > div img { max-width: 70px !important; }

  /* Drawer width at tab */
  #access { width: 60% !important; min-width: 360px !important; }
}

/* -------------------------------------------------------------------
 * SP  (<=767px) — single column, compact paddings
 * ------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Branding compaction */
  #branding_box { padding: 12px 12px 8px !important; }
  #site-description a { font-size: 16px !important; }

  /* Drawer becomes full screen */
  #access { width: 100% !important; }

  /* Tight typography */
  h1, h2, h3 { line-height: 1.5; }
  .headline_title { font-size: 18px !important; }

  /* Section paddings already set above; just enforce */
  .lp_section { padding: 22px 14px !important; }
  .blog_section { padding: 18px 12px !important; }

  /* Hide the wide PC opening label that overflows */
  #opening_label { transform: scale(0.5) !important; transform-origin: center center; }

  /* Make tap targets at least 44px tall (accessibility) */
  .blog_filter, .lp_cta_panel__btn, .post_cta__btn, .blog_card__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Image grids: make sure no overflow */
  .lp_gallery__grid figure,
  .blog_card { width: 100% !important; }

  /* Contact form (contact.html) */
  table.wpcf7-table, .wpcf7 form { width: 100% !important; }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea { width: 100% !important; box-sizing: border-box; font-size: 16px; }

  /* Drawer contact CTA (when injected) — already SP-friendly */
}

/* -------------------------------------------------------------------
 * Hard overrides for stubborn fixed-width PC structures
 * (multipress theme uses absolute 1300/960px containers)
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Main teaser block (absolute 1300px in multipress) */
  #main_teaser,
  .entry_teaser_1, .entry_teaser_2, .entry_teaser_3, .entry_teaser_4,
  .entry_teaser_5, .entry_teaser_6, .entry_teaser_7, .entry_teaser_8,
  .entry_teaser_9 {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }
  #main_teaser > *,
  [class*="entry_teaser_"] > * {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }
  #main_teaser img,
  [class*="entry_teaser_"] img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* easys_* fixed-width containers (multipress) */
  .easys_content,
  .easys_content_inner,
  [class*="easys_content"],
  [class^="nc_"], [class^="nb_"], [class^="nk_"],
  [class*=" nc_"], [class*=" nb_"], [class*=" nk_"] {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
  }
  .easys_content_inner { padding: 0 16px !important; }
  .easys_content_inner.moved { padding: 0 16px !important; }

  /* Generic full-width reset for content blocks */
  .entry_post,
  .post_margin,
  .text_box,
  .post_data,
  .html_post,
  .field_1col,
  .field_2col,
  .field_3col,
  .field_4col,
  .field_5col,
  .clear_float {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Block-level headings */
  .headline_title,
  h2.headline_title,
  .post_data > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Body must not enforce 1300px */
  body, html { min-width: 0 !important; }

  /* Anything absolute-positioned with a 1300px setting becomes flow content */
  body * {
    max-width: 100vw;
  }

  /* But restore explicit max-width on a few intentional elements */
  body .post_article,
  body .blog_section,
  body .post_cta,
  body .post_navigation,
  body .post_breadcrumb { max-width: 100vw; }
}

/* index slider/viewer block (multipress 'viewer_NNNN') — also 1300px on PC */
@media (max-width: 1023px) {
  [class*="viewer_"],
  .viewer,
  [class*="select_"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Design blocks that float absolute on PC — disable absolute on SP */
  [class*="design_block"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 12px 0 !important;
  }
}

/* -------------------------------------------------------------------
 * 2026-05-18 Pass 2 – fix header collision, awkward line breaks, MV
 * (PC layout untouched; only <=1023px applies)
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* (A) Hide the h1 page-title text that was colliding with Menu button.
        The original site renders this h1 as an image; on SP it
        regressed to plain text and overflowed under #menuTrigger. */
  #site-description,
  body.page #site-description,
  body.blog #site-description,
  body.single #site-description {
    /* Keep for SEO but visually hide so it cannot overlap */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* (B) Guarantee a comfortable header strip on small screens so the
        Menu button has its own row */
  #branding_box {
    min-height: 64px !important;
    padding: 12px 12px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  #header_information {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #header_information .main_header {
    text-align: left !important;
  }
  #header_information .main_header img {
    max-width: 150px !important;
  }
  /* Menu trigger lives top-right inside that header row */
  #menuTrigger {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    width: 130px !important;
    height: 40px !important;
    background-size: 130px auto !important;
    z-index: 950 !important;
  }
  /* Push subsequent content down to keep clear of header strip */
  #main_teaser { margin-top: 0 !important; }

  /* (C) Force natural line-wrap by neutralising hard <br> inside
        bodies of common paragraph blocks. PC keeps its <br>s. */
  .faq_lead p br,
  .faq_lead p > br,
  .post_data p br,
  .post_data > br,
  .lp_lead br,
  .post_article__content p > br,
  .text_box p br,
  .post_cta__lead br {
    display: none !important;
  }
  /* Re-establish wider gutters so wrap occurs cleanly */
  .faq_lead { padding: 24px 22px !important; }
  .faq_lead p {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.95 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: pretty;
  }
  .post_data p,
  .text_box p,
  .post_article__content p,
  .lp_lead {
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: pretty;
  }

  /* (D) Main visual — give it real height so the image actually shows */
  #main_teaser {
    min-height: 0 !important;
    aspect-ratio: auto;
  }
  #main_teaser img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
    object-position: center;
  }
  /* Hide the giant decorative "お見積り お問い合わせ Contact" floating
     graphic that overlaps content on small screens */
  .design_block.block2 { display: none !important; }
}

/* SP-only refinement */
@media (max-width: 767px) {
  #branding_box { min-height: 56px !important; padding: 10px 10px 6px !important; }
  #header_information .main_header img { max-width: 130px !important; }
  #menuTrigger {
    top: 8px !important;
    right: 8px !important;
    width: 110px !important;
    height: 36px !important;
    background-size: 110px auto !important;
  }
  .faq_lead p, .post_data p, .lp_lead { font-size: 14px !important; line-height: 1.9 !important; }
}

/* -------------------------------------------------------------------
 * index.html main visual (oversized on SP/Tab) – contain the hero
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* Hero teaser block – cap height so it doesn't dominate the page */
  body.page-id-1 #main_teaser,
  body.home #main_teaser,
  #main_teaser {
    max-height: 56vh !important;
    overflow: hidden !important;
  }
  /* The big "稲葉塗装" graphic + roller sprite on the home page (design_block / opening overlay).
     Cap their visual footprint so the hero doesn't fill the whole viewport. */
  #main_teaser [class*="design_block"],
  #main_teaser [class*="opening"],
  [class*="opening_block"] {
    transform: scale(0.55) !important;
    transform-origin: center center !important;
  }
  /* Roller animation that floats on the right edge */
  [class*="roller"], [class*="paint_roller"] {
    max-width: 22vw !important;
  }
}
@media (max-width: 767px) {
  #main_teaser { max-height: 48vh !important; }
  #main_teaser [class*="design_block"],
  #main_teaser [class*="opening"] {
    transform: scale(0.42) !important;
  }
}

/* -------------------------------------------------------------------
 * index.html MV stack (jquery_slider_pc + design_block) for Tab/SP.
 * Original layout uses absolute positions at 1300px wide; we flatten
 * everything to natural flow on small screens.
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* slider top of index */
  #jquery_slider_pc,
  .top_slider {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  #jquery_slider_pc .viewer,
  .top_slider .viewer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  #jquery_slider_pc img,
  .top_slider img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  /* When stacking imgs, only first one displays */
  #jquery_slider_pc img:not(#slide_item_0),
  .top_slider img:not(:first-of-type) {
    display: none !important;
  }

  /* design_block (absolute decorations) — flatten */
  [class*="design_block"] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  [class*="design_block"] img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Hide ALL decorative design_blocks on SP/Tab; keep only slider photo as hero */
  .design_block,
  .design_block.block1,
  .design_block.block2,
  .design_block.block3,
  [class*="design_block"][class*="block"] { display: none !important; }

  /* The fixed video background on index becomes huge on tiny screens — keep it but contained */
  video.fixed_video, body > video[autoplay] {
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Container width fixes for the home page custom widgets */
  [id^="r"][id$=""].easys_content,
  .easys_content.no_margin {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}

/* -------------------------------------------------------------------
 * SP/Tab — rebuild the Menu button from scratch (no PNG sprite),
 * so hamburger lines and "Menu" label align perfectly.
 * ------------------------------------------------------------------- */
@media (max-width: 1023px) {
  #menuTrigger {
    background-color: #36653b !important;
    background-image: none !important;
    border-radius: 26px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 22px 0 18px !important;
    gap: 10px !important;
    cursor: pointer !important;
  }
  body.opened #menuTrigger {
    background-image: none !important;
  }

  /* Inside <button>: transparent, no padding/margin, flex row */
  #menuTrigger > button {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important; /* hide any inherited text */
    font-size: 0 !important;
    pointer-events: none !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
  }

  /* Hamburger lines container */
  #menuTrigger > button > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 20px !important;
    height: 14px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  #menuTrigger > button > div > span {
    display: block !important;
    background-color: #ffffff !important;
    height: 2px !important;
    width: 100% !important;
    border-radius: 1px !important;
    position: relative !important;
  }

  /* Add the "Menu" / "Close" label via pseudo-element so it stays in sync */
  #menuTrigger::after {
    content: "Menu";
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
  body.opened #menuTrigger::after { content: "Close"; }

  /* Hide the original PNG label area entirely (PC sprite is now off) */
  #menuTrigger > button > span,
  #menuTrigger > button > .menu-text { display: none !important; }

  /* Sizing per breakpoint */
  #menuTrigger { height: 44px !important; top: 12px !important; right: 12px !important; width: auto !important; min-width: 110px !important; }
}
@media (max-width: 767px) {
  #menuTrigger { height: 40px !important; top: 10px !important; right: 10px !important; min-width: 100px !important; padding: 0 18px 0 14px !important; gap: 8px !important; }
  #menuTrigger::after { font-size: 13px !important; }
  #menuTrigger > button > div { width: 18px !important; height: 12px !important; }
}

/* ===================================================================
 * SP-only LP hero — full-bleed cinematic MV with eyebrow + title + CTA
 * Designed only for <=767px. PC & Tab keep the original compact MV.
 * =================================================================== */

/* Hide overlay by default; only revealed at SP */
.lp_hero_overlay { display: none; }

@media (max-width: 767px) {
  /* The LP teaser becomes a full-bleed hero — ONLY when the LP overlay markup is present */
  #main_teaser:has(.lp_hero_overlay) {
    position: relative !important;
    width: 100% !important;
    height: 70vh !important;
    min-height: 520px !important;
    max-height: 740px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1a2818;
  }
  #main_teaser:has(.lp_hero_overlay) img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 78% 60% !important;
    filter: brightness(0.52) saturate(1.05) contrast(1.06);
    transform: scale(1.1);
  }

  /* Dual-gradient veil — only inside LP hero */
  #main_teaser:has(.lp_hero_overlay)::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(15,22,12,0.42) 0%,
        rgba(15,22,12,0.20) 35%,
        rgba(15,22,12,0.42) 60%,
        rgba(15,22,12,0.92) 100%),
      linear-gradient(135deg,
        rgba(54,101,59,0.32) 0%,
        rgba(54,101,59,0.0)  45%,
        rgba(244,100,22,0.0) 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Overlay container */
  .lp_hero_overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 32px 24px 36px;
    color: #fff;
    text-align: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .lp_hero_overlay__inner {
    position: relative;
    animation: lpHeroFadeUp 0.9s 0.15s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes lpHeroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Eyebrow English label — handwriting flourish */
  .lp_hero_overlay__eyebrow {
    font-family: 'Caveat', 'Georgia', 'Yu Mincho', cursive;
    font-style: italic;
    font-size: 18px;
    font-weight: 500;
    color: #f9b994;
    margin: 0 0 8px;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    position: relative;
    padding-left: 36px;
  }
  .lp_hero_overlay__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: #f46416;
    border-radius: 1px;
    transform: translateY(-50%);
  }

  /* Title — Japanese, oversized, with paint-stroke accent */
  .lp_hero_overlay__title {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 14px;
    line-height: 1.12;
    letter-spacing: 0.08em;
    text-shadow: 0 4px 18px rgba(0,0,0,0.4);
    position: relative;
    padding-left: 18px;
  }
  .lp_hero_overlay__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 10px;
    width: 4px;
    background: linear-gradient(180deg, #f46416 0%, #36653b 100%);
    border-radius: 2px;
  }
  /* Tighten long titles like "コーキング打ち替え" */
  .lp_hero_overlay__title:has(+ * ) { /* always present */ }
  body.page-lp-caulking .lp_hero_overlay__title,
  body.page-lp-butsugu .lp_hero_overlay__title { font-size: 32px; }
  /* Fallback for browsers without :has — handle via length: use word-break-aware sizing */
  @supports not (selector(:has(*))) {
    .lp_hero_overlay__title { font-size: 34px; }
  }

  .lp_hero_overlay__lead {
    font-family: 'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo', sans-serif;
    font-size: 14px;
    line-height: 1.85;
    color: #f5ecdc;
    margin: 0 0 24px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    max-width: 320px;
    letter-spacing: 0.02em;
  }

  .lp_hero_overlay__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
  }
  .lp_hero_overlay__btn,
  .lp_hero_overlay__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 28px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.04em;
    min-height: 48px;
    box-sizing: border-box;
  }
  .lp_hero_overlay__btn {
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(244, 100, 22, 0.45), 0 2px 6px rgba(0,0,0,0.18);
  }
  .lp_hero_overlay__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(244, 100, 22, 0.55);
  }
  .lp_hero_overlay__btn span { font-size: 16px; }
  .lp_hero_overlay__tel {
    background: rgba(255, 255, 255, 0.96);
    color: #36653b !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  }
  .lp_hero_overlay__tel:hover { background: #fff; transform: translateY(-2px); }

  /* Scroll cue at the bottom */
  .lp_hero_overlay::after {
    content: "Scroll";
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    letter-spacing: 0.1em;
    pointer-events: none;
    animation: lpHeroScroll 2.4s ease-in-out infinite;
  }
  @keyframes lpHeroScroll {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
    50%      { transform: translate(-50%, 6px); opacity: 1; }
  }
}

/* Tablet & PC: hide overlay completely */
@media (min-width: 768px) {
  .lp_hero_overlay { display: none !important; }
}

/* SP hero — pure-CSS phone icon for the tel CTA (replacing 📞 emoji) */
@media (max-width: 767px) {
  .lp_hero_overlay__tel_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #36653b;
    /* Phone receiver SVG, monochrome */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
  }
}


/* ===================================================================
 * SP UI/UX overhaul — proper card-based responsive design
 *  (Tab inherits SP behaviour where appropriate; PC stays untouched)
 * =================================================================== */
@media (max-width: 1023px) {

  /* ---- All multi-column grids collapse to 1 column on small screens ---- */
  .float_left, .float_right { float: none !important; clear: both !important; width: 100% !important; }
  .field_2col, .field_3col, .field_4col, .field_5col {
    display: block !important;
    width: 100% !important;
  }
  .field_2col > *, .field_3col > *, .field_4col > *, .field_5col > * {
    width: 100% !important;
    margin: 0 0 16px !important;
    float: none !important;
  }

  /* ---- Convert entry_post blocks into proper cards ---- */
  .entry_post.post_margin {
    display: block !important;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(54, 101, 59, 0.10);
    margin: 0 16px 22px !important;
    padding: 22px 20px 20px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden;
  }
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin h2 {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    color: #36653b !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px 16px !important;
    position: relative;
    border-bottom: 2px dotted #f2e8d9 !important;
    background: none !important;
  }
  .entry_post.post_margin .headline_title::before,
  .entry_post.post_margin h2::before {
    content: "";
    position: absolute;
    left: 0; top: 4px; bottom: 14px;
    width: 4px;
    background: linear-gradient(180deg, #f46416 0%, #36653b 100%);
    border-radius: 2px;
  }
  .entry_post.post_margin .text_box,
  .entry_post.post_margin .post_data {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .entry_post.post_margin p {
    font-size: 14.5px !important;
    line-height: 1.95 !important;
    color: #333 !important;
    margin: 0 0 14px !important;
  }
  .entry_post.post_margin p:last-child { margin-bottom: 0 !important; }
  .entry_post.post_margin img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px;
    margin: 4px 0 14px !important;
    display: block;
  }
  .entry_post.post_margin a:not([class*="btn"]) {
    color: #f46416 !important;
    text-decoration: underline;
    text-decoration-color: rgba(244, 100, 22, 0.4);
    text-underline-offset: 3px;
  }

  /* ---- Tables (company.html 会社概要, etc.) -> mobile definition lists ---- */
  table.width_2column_share,
  table[class*="width_2column"],
  table.float_left,
  table.float_right {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }
  table[class*="width_2column"] tbody,
  table.width_2column_share tbody { display: block !important; width: 100% !important; }
  table[class*="width_2column"] tr,
  table.width_2column_share tr {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    border-bottom: 1px dashed rgba(54, 101, 59, 0.22) !important;
    background: transparent !important;
  }
  table[class*="width_2column"] tr:last-child,
  table.width_2column_share tr:last-child {
    border-bottom: 0 !important;
  }
  table[class*="width_2column"] th,
  table.width_2column_share th {
    display: block !important;
    width: 100% !important;
    padding: 0 0 6px !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #36653b !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  table[class*="width_2column"] td,
  table.width_2column_share td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #222 !important;
  }

  /* ---- Service cards on business.html: orange accent strip on left ---- */
  .entry_post.post_margin[class*="_1084"],
  .entry_post.post_margin[class*="_1085"],
  .entry_post.post_margin[class*="_1086"],
  .entry_post.post_margin[class*="_1187"],
  .entry_post.post_margin[class*="_1188"],
  .entry_post.post_margin[class*="_1189"],
  .entry_post.post_margin[class*="_1071"],
  .entry_post.post_margin[class*="_1123"] {
    position: relative;
    border-left: 4px solid #f46416;
  }

  /* ---- Section title centered ---- */
  body.page-id-1037 .entry_post .headline_title,
  body.page-id-1039 .entry_post .headline_title,
  body.page-id-1038 .entry_post .headline_title {
    text-align: center !important;
    font-size: 22px !important;
    color: #36653b !important;
  }

  .float_right img, .float_left img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 6px 0 12px !important;
  }

  /* ---- Contact form (wpcf7) ---- */
  .wpcf7 form { padding: 0 16px !important; }
  .wpcf7 form p { margin: 0 0 16px !important; }
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea,
  .wpcf7 select {
    width: 100% !important;
    padding: 14px 14px !important;
    font-size: 16px !important;
    border: 1px solid #d4c8a6 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: #fffefb !important;
  }
  .wpcf7 input[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 6px 16px rgba(244, 100, 22, 0.35) !important;
  }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .entry_post.post_margin .headline_title { font-size: 18px !important; }
  .post_data > p:first-child {
    font-size: 15.5px !important;
    line-height: 2 !important;
    color: #1f2920 !important;
  }
}


/* ===================================================================
 * SP-only home hero (index.html) — replaces the empty MV gap.
 *  PC and Tab continue to use the original slider + design_block MV.
 * =================================================================== */
.home_hero_sp { display: none; }

@media (max-width: 767px) {
  /* Hide the original PC slider/jQuery_slider on SP */
  #jquery_slider_pc, .top_slider { display: none !important; }

  .home_hero_sp {
    display: block;
    position: relative;
    width: 100%;
    height: 88vh;
    min-height: 600px;
    max-height: 840px;
    overflow: hidden;
    background: #1a2818;
  }
  .home_hero_sp__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.45) saturate(1.1) contrast(1.06);
    transform: scale(1.08);
    animation: homeHeroZoom 12s ease-out forwards;
  }
  @keyframes homeHeroZoom {
    from { transform: scale(1.18); }
    to   { transform: scale(1.0); }
  }
  /* gradient veil */
  .home_hero_sp::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg,
        rgba(15,22,12,0.45) 0%,
        rgba(15,22,12,0.18) 30%,
        rgba(15,22,12,0.48) 65%,
        rgba(15,22,12,0.92) 100%),
      linear-gradient(135deg,
        rgba(54,101,59,0.40) 0%,
        rgba(54,101,59,0.0) 55%,
        rgba(244,100,22,0.18) 100%);
    pointer-events: none;
    z-index: 1;
  }

  .home_hero_sp__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 24px 92px;
    color: #fff;
    box-sizing: border-box;
    animation: homeHeroFadeUp 1s 0.25s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes homeHeroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .home_hero_sp__eyebrow {
    font-family: 'Caveat', 'Georgia', 'Yu Mincho', cursive;
    font-style: italic;
    font-size: 17px;
    color: #f9b994;
    margin: 0 0 6px;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    padding-left: 36px;
    position: relative;
  }
  .home_hero_sp__eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 28px; height: 2px;
    background: #f46416;
    border-radius: 1px;
    transform: translateY(-50%);
  }

  .home_hero_sp__title {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 64px;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: 0.18em;
    line-height: 1.0;
    text-shadow: 0 6px 24px rgba(0,0,0,0.5);
  }
  .home_hero_sp__sub {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-style: italic;
    font-size: 16px;
    color: #f2e8d9;
    margin: 6px 0 0;
    letter-spacing: 0.36em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .home_hero_sp__tag {
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: 22px;
    color: #f46416;
    margin: 14px 0 18px;
    letter-spacing: 0.04em;
    transform: rotate(-1.2deg);
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    align-self: flex-start;
  }
  .home_hero_sp__lead {
    font-size: 13.5px;
    line-height: 1.85;
    color: #efe2cf;
    margin: 0 0 22px;
    max-width: 320px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
    letter-spacing: 0.02em;
  }

  .home_hero_sp__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
  }
  .home_hero_sp__btn,
  .home_hero_sp__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 28px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    letter-spacing: 0.04em;
    min-height: 48px;
    box-sizing: border-box;
  }
  .home_hero_sp__btn {
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(244, 100, 22, 0.45), 0 2px 6px rgba(0,0,0,0.18);
  }
  .home_hero_sp__btn:hover { transform: translateY(-2px); }
  .home_hero_sp__tel {
    background: rgba(255,255,255,0.96);
    color: #36653b !important;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  }
  .home_hero_sp__tel_icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #36653b;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  .home_hero_sp__scroll {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    letter-spacing: 0.12em;
    margin: 0;
    pointer-events: none;
    animation: homeHeroScroll 2.4s ease-in-out infinite;
  }
  @keyframes homeHeroScroll {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.55; }
    50%      { transform: translate(-50%, 6px); opacity: 1; }
  }
}

/* =================================================================
 * Long LP titles — clamp font-size so they never wrap awkwardly
 * ================================================================= */
@media (max-width: 767px) {
  .lp_hero_overlay__title {
    font-size: clamp(28px, 8.5vw, 40px) !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}


/* ===================================================================
 * 2026-05-18 Pass 3 — fix table cell readability, CTA styling, centering
 * (SP/Tab only; PC unchanged)
 * =================================================================== */
@media (max-width: 1023px) {

  /* ---- Bullet-proof centered cards ---- */
  .entry_post.post_margin {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 580px !important;
  }

  /* ---- Table area wrapper centering ---- */
  .table_area,
  .width_two_column {
    display: block !important;
    width: 100% !important;
    max-width: 580px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- Re-style "会社概要" tables — th-style label + value pair ---- */
  table[class*="width_2column"] {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }
  table[class*="width_2column"] tbody { display: block !important; width: 100% !important; }
  table[class*="width_2column"] tr {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed rgba(54, 101, 59, 0.22) !important;
  }
  table[class*="width_2column"] tr:last-child {
    border-bottom: 0 !important;
  }
  /* Both <th> and <td> become blocks; first td in each row is the label */
  table[class*="width_2column"] th,
  table[class*="width_2column"] td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    line-height: 1.7 !important;
    color: #222 !important;
    font-size: 15px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  /* Label cell (.td_name): small eyebrow style */
  table[class*="width_2column"] td.td_name,
  table[class*="width_2column"] td[class*="name_cell"],
  table[class*="width_2column"] th {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #36653b !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
  }
  /* Value cell (.td_value) */
  table[class*="width_2column"] td.td_value,
  table[class*="width_2column"] td[class*="value_cell"] {
    font-size: 15px !important;
    color: #1d2c1d !important;
    font-weight: 500 !important;
  }
  table[class*="width_2column"] td a {
    color: #f46416 !important;
    text-decoration: underline;
  }

  /* ---- main_btn CTA (used on index TOP & many service pages) ---- */
  .main_btn {
    margin: 24px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .main_btn a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 24px !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
    border-radius: 28px !important;
    box-shadow: 0 8px 20px rgba(244, 100, 22, 0.4), 0 2px 6px rgba(0,0,0,0.12) !important;
    transition: transform 0.2s ease !important;
    min-height: 52px !important;
  }
  .main_btn a::after {
    content: " →";
    margin-left: 6px;
    font-weight: 700;
  }
  .main_btn a:hover { transform: translateY(-2px) !important; }
  .main_btn.btn_align_left, .main_btn.btn_align_right { text-align: center !important; }

  /* ---- "bnr_contact_btn" CTA banner present at LP bottom ---- */
  .bnr_contact_btn,
  .eyecatch.set_width {
    width: 100% !important;
    max-width: 580px !important;
    margin: 24px auto !important;
    text-align: center !important;
  }
  .bnr_contact_btn img,
  .eyecatch.set_width img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
    margin: 0 auto;
  }

  /* ---- Eyecatch images centred ---- */
  .eyecatch {
    width: 100% !important;
    max-width: 580px !important;
    margin: 16px auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .eyecatch img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 6px;
  }

  /* ---- Headlines inside service cards: centered when card is centered ---- */
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin h2.headline_title {
    text-align: left !important;
  }

  /* ---- Inner content centering helper ---- */
  .easys_content_inner,
  .easys_content_inner.moved {
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left;
  }

  /* ---- Prevent text overlap by ensuring all text containers have padding ---- */
  .entry_post.post_margin p,
  .entry_post.post_margin li,
  .entry_post.post_margin td.td_value {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: pretty;
  }
}

/* SP-only fine tuning */
@media (max-width: 767px) {
  .entry_post.post_margin {
    margin-left: 14px !important;
    margin-right: 14px !important;
    max-width: none !important;
  }
  .table_area, .width_two_column { padding: 0 !important; }
  table[class*="width_2column"] tr { padding: 12px 0 !important; }
  .main_btn { max-width: 100% !important; padding: 0 16px !important; }
}


/* ===================================================================
 * Pass 4 — kill text-indent:-9999px and color overrides on .main_btn
 * (PC was using sprite-image buttons; SP/Tab need plain text)
 * =================================================================== */
@media (max-width: 1023px) {
  .main_btn a,
  .main_btn a:link,
  .main_btn a:visited {
    text-indent: 0 !important;
    color: #ffffff !important;
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    background-color: #f46416 !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    text-shadow: none !important;
    text-transform: none !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  .main_btn a:hover,
  .main_btn a:focus,
  .main_btn a:active {
    color: #ffffff !important;
    background-image: linear-gradient(135deg, #d95108 0%, #b54206 100%) !important;
  }
  /* Suppress sprite image backgrounds */
  .main_btn a {
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
  }
}

/* SP padding */
@media (max-width: 767px) {
  .main_btn a { padding: 14px 20px !important; min-height: 50px !important; }
}


/* ===================================================================
 * Pass 5 — final hammer for .main_btn color  (high specificity)
 * =================================================================== */
@media (max-width: 1023px) {
  body p.main_btn a,
  body p.main_btn a[href],
  body p.main_btn a:link,
  body p.main_btn a:visited,
  body .main_btn > a,
  body .main_btn > a[href] {
    color: #ffffff !important;
    text-indent: 0 !important;
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    -webkit-text-fill-color: #ffffff !important;
    text-fill-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  body p.main_btn a:hover,
  body p.main_btn a:active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-image: linear-gradient(135deg, #d95108 0%, #b54206 100%) !important;
  }
}


/* ===================================================================
 * Pass 6 — fix LP CTA panel 2-column overflow + replace bnr_contact_btn image
 * (SP only; PC unchanged)
 * =================================================================== */

/* ---- LP CTA panel buttons stack vertically on SP ---- */
@media (max-width: 767px) {
  .lp_cta_panel { padding: 28px 16px !important; }
  .lp_cta_panel__inner { width: 100% !important; max-width: none !important; }
  .lp_cta_panel__btns {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .lp_cta_btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 18px !important;
    min-height: 64px !important;
    text-decoration: none !important;
  }
  .lp_cta_btn__icon {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .lp_cta_btn__icon svg { width: 24px; height: 24px; }
  .lp_cta_btn__txt {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    min-width: 0;
    flex: 1;
  }
  .lp_cta_btn__sub {
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    opacity: 0.85;
    margin-bottom: 2px !important;
    white-space: nowrap;
  }
  .lp_cta_btn__main {
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap;
  }
  .lp_cta_panel__h2 { font-size: 20px !important; line-height: 1.5 !important; }
  .lp_cta_panel__h2 br { display: none !important; }
  .lp_cta_panel__lead { font-size: 13px !important; line-height: 1.85 !important; }
  .lp_cta_panel__lead br { display: none !important; }
  .lp_cta_panel__handwrite { font-size: 16px !important; }
  .lp_cta_panel__badge { font-size: 11px !important; padding: 5px 12px !important; }
  .lp_cta_panel__hours { font-size: 12px !important; line-height: 1.6 !important; padding: 10px 0 0 !important; }
}

/* ---- Replace bnr_contact_btn.png image with a real responsive button ---- */
@media (max-width: 1023px) {
  /* The image was sized for PC width; on SP it shrinks and the text inside
     becomes unreadable. Hide the image and let the parent <a> become a button. */
  .eyecatch a img[src*="bnr_contact_btn"],
  a[href*="contact"] img[src*="bnr_contact_btn"],
  img[src*="bnr_contact_btn"] {
    display: none !important;
  }
  /* The wrapping <a> gets a real button shape */
  .eyecatch.set_width:has(img[src*="bnr_contact_btn"]),
  .eyecatch:has(img[src*="bnr_contact_btn"]),
  .field_1col:has(img[src*="bnr_contact_btn"]) {
    width: 100% !important;
    max-width: 360px !important;
    margin: 20px auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"]),
  .field_1col a:has(img[src*="bnr_contact_btn"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 22px !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.05em !important;
    border-radius: 32px !important;
    box-shadow: 0 8px 22px rgba(244, 100, 22, 0.42), 0 2px 6px rgba(0,0,0,0.14) !important;
    min-height: 56px !important;
    transition: transform 0.2s ease !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"]):hover,
  .field_1col a:has(img[src*="bnr_contact_btn"]):hover {
    transform: translateY(-2px) !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"])::before,
  .field_1col a:has(img[src*="bnr_contact_btn"])::before {
    content: "お問い合わせフォームはこちら";
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    position: static !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background-image: none !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    white-space: nowrap !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"]),
  .field_1col a:has(img[src*="bnr_contact_btn"]) {
    padding: 12px 10px !important;
    min-height: 56px !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"])::after,
  .field_1col a:has(img[src*="bnr_contact_btn"])::after {
    content: none !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"])::after,
  .field_1col a:has(img[src*="bnr_contact_btn"])::after {
    content: none !important;
  }
}

/* ---- Various general text overflow protections at SP ---- */
@media (max-width: 767px) {
  /* Buttons & link cells: keep text on one line where reasonable */
  a, button {
    overflow-wrap: anywhere;
  }
  .lp_section__title br { display: none !important; }
  .lp_lead__h2 { font-size: 18px !important; line-height: 1.55 !important; }
  .lp_lead__h2 br { display: none !important; }
  .lp_lead__p { font-size: 14px !important; line-height: 1.95 !important; padding: 0 8px !important; }
  .lp_lead__p br { display: none !important; }
}


/* ===================================================================
 * Pass 7 — clean replacement for bnr_contact_btn (HTML rewritten too)
 * =================================================================== */
.contact_cta_wrap {
  width: 100%;
  max-width: 720px;
  margin: 28px auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.contact_cta_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 18px 24px;
  background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  border-radius: 32px;
  box-shadow: 0 8px 22px rgba(244, 100, 22, 0.42), 0 2px 6px rgba(0,0,0,0.14);
  min-height: 56px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact_cta_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(244, 100, 22, 0.5); }
.contact_cta_btn--tel {
  background: #ffffff;
  color: #36653b !important;
  -webkit-text-fill-color: #36653b;
  border: 2px solid #36653b;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.contact_cta_btn--tel:hover { background: #f6f1e6; transform: translateY(-2px); }
.contact_cta_btn__icon {
  display: inline-block;
  width: 18px; height: 18px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 5l8 5 8-5h2v14H2z M22 4l-8 5-8-5H2L10 9 2 14v1l8-5 8 5v-1l-8-5z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 5l8 5 8-5h2v14H2z M22 4l-8 5-8-5H2L10 9 2 14v1l8-5 8 5v-1l-8-5z'/%3E%3C/svg%3E") no-repeat center / contain;
  flex-shrink: 0;
}
.contact_cta_btn__icon--tel {
  background-color: #36653b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.contact_cta_btn__arrow {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}

/* Japanese-aware line breaking — apply natural phrase wrapping to titles
 * and short heading text so words don't break mid-character.
 *   - word-break: auto-phrase = wrap at Japanese phrase boundaries (Chrome 119+, Safari 17.4+)
 *   - line-break: strict      = stricter punctuation rules
 *   - overflow-wrap: anywhere = only break when truly necessary (long URL etc.)
 * Body paragraphs keep normal wrapping so very long English words still break. */
.blog_card__title,
.blog_card__excerpt,
.entry_post h1,
.entry_post h2,
.entry_post h3,
.entry_post h4,
.entry_post h5,
.headline_title,
.inline_title,
.unity_title,
.entry_title,
.mid_entry_title,
.post_article__title,
.faq-title,
.faq-answer,
.page_hero_sp__title,
.page_hero_sp__catch,
.lp_hero_overlay__title,
.lp_hero_overlay__lead,
.home_hero_sp__title,
.home_hero_sp__tag,
.home_hero_sp__lead,
.home_half_cta__main,
.home_half_cta__sub,
.main_btn a,
.contact_cta_btn__txt,
.post_title_list,
.blog_post .post_title_list a {
  word-break: keep-all !important;
  line-break: strict !important;
  overflow-wrap: normal !important;
  hanging-punctuation: allow-end;
}
/* fallback for older engines that don't know auto-phrase */
@supports not (word-break: auto-phrase) {
  .blog_card__title,
  .entry_post h1,
  .entry_post h2,
  .entry_post h3,
  .headline_title,
  .page_hero_sp__title,
  .lp_hero_overlay__title,
  .home_hero_sp__title,
  .main_btn a,
  .post_title_list,
  .blog_post .post_title_list a {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

/* Slightly tighter title sizing on SP so phrase wrapping has more room */
@media (max-width: 767px) {
  .blog_card__title,
  .blog_post .post_title_list,
  .blog_post .post_data .post_title_list,
  .blog_post .post_title {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 0.01em !important;
    padding-right: 2px;
  }
  .blog_card__excerpt {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }
}

/* =============================================================
 * Footer — rebuild the look of the reference design:
 *   稲葉塗装 / inaba paint (logo)
 *   ········ dotted divider ········
 *   Site map (eyebrow heading)
 *   2-column menu (4 + 4 items, arrow on the right of each)
 *   ········ dotted divider ········
 *   Copyright (C) 稲葉塗装 All Rights Reserved.
 *   TOP↑ button bottom-right
 * The bundled footer_bg.png has the dividers + "Site map" baked into a
 * single image; we replace it with a solid color + CSS pseudo elements so
 * the layout scales correctly on every viewport.
 * ============================================================= */
#footer_block {
  background-image: none !important;
  background-color: #36653b !important;
  padding: 0 !important;
  margin-top: 60px;
  height: auto !important;
}
#footer_box {
  background-image: none !important;
  background-color: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 56px 24px 40px !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  position: relative;
  box-sizing: border-box;
}

/* Footer logo wordmark (replaces the text baked into footer_bg.png) */
.footer_brand {
  text-align: center;
  margin: 0 0 28px;
}
.footer_brand__jp {
  font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Noto Sans JP', sans-serif;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #ffffff;
  margin: 0 0 6px;
}
.footer_brand__en {
  font-family: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #ffffff;
  margin: 0;
}
@media (max-width: 767px) {
  .footer_brand__jp { font-size: 30px; }
  .footer_brand__en { font-size: 15px; }
}

/* Dotted dividers (top & bottom of the sitemap section) */
.footer_divider {
  border: 0;
  border-top: 1px dotted rgba(255, 255, 255, 0.55);
  margin: 0;
  width: 100%;
}

/* Site map block */
#footer_sitemap_block {
  background-color: transparent !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 40px 0 40px !important;
  position: relative;
  box-sizing: border-box;
}
#footer_sitemap_block .footer_sitemap__title {
  text-align: center;
  font-family: 'Caveat', 'Georgia', cursive;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 28px;
}

/* Side-by-side: menu (left) + map (right) on PC, stacked on SP */
.footer_sitemap__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .footer_sitemap__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.footer_map {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.footer_map iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}
.footer_map__address {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  line-height: 1.7;
  margin: 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.15);
}
.footer_map__address a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}
.footer_map__address a:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .footer_map iframe { height: 220px; }
}

/* 2-column menu — applies on every viewport */
#footer_sitemap_block #footer-widget-area {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: left !important;
}
#footer_sitemap_block #footer-widget-area .widget-area {
  width: 100% !important;
  padding: 0 !important;
}
#footer_sitemap_block #footer-widget-area .widget-area ul.menu {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(4, auto) !important;
  column-gap: 32px !important;
  row-gap: 18px !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
  flex-direction: unset !important;
  flex-wrap: unset !important;
}
#footer_sitemap_block #footer-widget-area .widget-area ul.menu li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}
#footer_sitemap_block #footer-widget-area .widget-area .menu-item a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 6px 4px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: normal !important;
  line-height: 1.55;
  box-sizing: border-box;
}
#footer_sitemap_block #footer-widget-area .widget-area .menu-item a::after {
  content: '↗';
  flex-shrink: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
  padding-left: 8px;
}
#footer_sitemap_block #footer-widget-area .widget-area .menu-item a:hover {
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 767px) {
  #footer_box { padding: 40px 16px 28px !important; }
  #footer_sitemap_block { padding: 32px 0 32px !important; }
  #footer_sitemap_block .footer_sitemap__title { margin: 0 0 24px !important; }
  /* SP: stack the menu in a single column */
  #footer_sitemap_block #footer-widget-area .widget-area ul.menu {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(8, auto) !important;
    grid-auto-flow: row !important;
    row-gap: 14px !important;
    column-gap: 0 !important;
    max-width: 320px !important;
  }
  #footer_sitemap_block #footer-widget-area .widget-area .menu-item a {
    font-size: 13.5px !important;
    padding: 8px 4px !important;
  }
}

/* Hide the obsolete .footer_infomation block that the EASYS theme placed
 * BELOW the sitemap (address + TEL + 4 round buttons + 先頭へ).  We render
 * the same info with the new copyright + TOP button below. */
.footer_infomation { display: none !important; }

/* Copyright */
#copyright {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: 0.04em;
  margin: 24px 0 0;
  padding: 0;
}
@media (max-width: 767px) {
  #copyright { font-size: 11.5px; }
}

/* TOP↑ button anchored to bottom-right of #footer_box */
.footer_top_btn,
.footer_top_btn:link,
.footer_top_btn:visited {
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #ffffff !important;
  color: #36653b !important;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.footer_top_btn::before {
  content: '↑';
  font-size: 18px;
  line-height: 1;
  margin-bottom: 1px;
  color: #36653b;
}
.footer_top_btn:hover { transform: translateY(-3px); }
@media (max-width: 767px) {
  .footer_top_btn { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* =============================================================
 * Sticky bottom CTA (お電話 / News / GATEN / TikTok)
 *   - PC (>=1024px): floating in the lower-right corner
 *   - Tab/SP   : full-width strip along the bottom with semi-transparent
 *                green background
 * The bundled SVG/PNG files include the green dome + icon + label, so the
 * <a> wrapper just sizes the image; no extra styling needed inside.
 * ============================================================= */
.inaba_fixed_cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  height: 96px;
  background: rgba(54, 101, 59, 0.92);
  z-index: 9000;
  padding: 6px 4px;
  box-sizing: border-box;
  backdrop-filter: blur(2px);
}
.inaba_fixed_cta__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}
.inaba_fixed_cta__item:hover { transform: translateY(-2px); text-decoration: none !important; }
.inaba_fixed_cta__item img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 84px;
  object-fit: contain;
}

/* Tablet: same full-width strip but a tad taller */
@media (min-width: 768px) and (max-width: 1023px) {
  .inaba_fixed_cta { height: 112px; padding: 8px 6px; }
  .inaba_fixed_cta__item img { max-height: 96px; }
}

/* PC: detach from full width, stick flush to the bottom-right corner */
@media (min-width: 1024px) {
  .inaba_fixed_cta {
    left: auto;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: 440px;
    height: auto;
    background: transparent;
    padding: 0;
    gap: 10px; /* space between buttons only — outer edges stay flush */
    backdrop-filter: none;
    pointer-events: none;
    align-items: flex-end;
  }
  .inaba_fixed_cta__item {
    flex: 0 0 auto;
    pointer-events: auto;
    padding: 0;
    margin: 0;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
  }
  .inaba_fixed_cta__item img {
    width: 64px;
    height: 92px;
    max-height: none;
    display: block;
  }
  /* TOP↑ button replaces the in-footer absolute one; sits to the left of お電話 */
  .inaba_fixed_cta__top {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #ffffff !important;
    color: #36653b !important;
    border-radius: 50%;
    text-decoration: none !important;
    font-weight: 800;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
    margin-bottom: 14px;
  }
  .inaba_fixed_cta__top_arrow {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 1px;
  }
  .inaba_fixed_cta__top_label {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .inaba_fixed_cta__top img { display: none; }
  /* Hide the old in-footer TOP button when the fixed CTA's TOP is active */
  .footer_top_btn { display: none !important; }
}

/* On Tab/SP keep behaviour: hide the CTA-bar TOP button and let the legacy
   .footer_top_btn (inside the footer) keep doing its job. */
@media (max-width: 1023px) {
  .inaba_fixed_cta__top { display: none !important; }
}

/* Reserve room at the bottom so the fixed CTA doesn't cover the footer */
body { padding-bottom: 96px; }
@media (min-width: 768px) and (max-width: 1023px) { body { padding-bottom: 112px; } }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* Hide legacy duplicate dome buttons inside the footer column block */
#footer_block .footer_round_btns { display: none !important; }

/* Pill-shaped round buttons (お電話 / News / GATEN / TikTok)
 * The bundled SVG/PNG already contains the dome + icon + label; the link is
 * just a thin wrapper that shows the image as-is. */
.footer_round_btns {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  margin: 28px auto 0;
  padding: 0 16px;
  max-width: 480px;
}
.footer_round_btn {
  display: block;
  width: 70px;
  height: 100px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease;
}
.footer_round_btn:hover {
  transform: translateY(-3px);
  text-decoration: none !important;
}
.footer_round_btn__icon {
  display: block;
  width: 70px;
  height: 100px;
}
.footer_round_btn__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}
.footer_round_btn__label {
  /* The image already includes the label */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 767px) {
  .footer_round_btns { gap: 10px; max-width: 100%; padding: 0 8px; }
  .footer_round_btn,
  .footer_round_btn__icon { width: 62px; height: 88px; }
}

/* Footer sitemap — let long items breathe on the right side (PC + Tab).
 * Constrains the 2-column menu inside a centered max-width so the long
 * Japanese items ("お見積り・お問い合わせ" "プライバシーポリシー") aren't
 * clipped at the right edge, and gives the right column the same horizontal
 * breathing room as the left column. */
@media (min-width: 768px) {
  #footer_sitemap_block {
    box-sizing: border-box;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #footer_sitemap_block #footer-widget-area {
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #footer_sitemap_block #footer-widget-area .widget-area ul.menu {
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto !important;
    column-gap: 32px;
    padding-right: 0;
    box-sizing: border-box;
  }
  #footer_sitemap_block #footer-widget-area .widget-area .menu-item a {
    width: max-content !important;
    min-width: 240px;
    max-width: 320px;
    padding-right: 32px !important;
    background-position: right 4px center;
    white-space: nowrap;
    box-sizing: border-box;
  }
}

/* Orange .design_btn — used in two flavors:
 *   1) <a class="design_btn"><img src=bnr_contact_btn.png><span></span></a>
 *      … contact CTA inside #ua5tluselfo83xt176v4. Show the image label.
 *   2) <p class="main_btn design_btn"><a>MORE<span></span></a></p>
 *      … injected by footer_pc.js. Show the MORE text.
 * Make sure the inner image is visible at all viewports and remove any
 * runaway pseudo-arrow that could overlay it. */
a.design_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  padding: 0 18px !important;
}
/* Hide the small bnr_contact_btn.png and render its label as crisp text */
a.design_btn img[src*="bnr_contact_btn"] {
  display: none !important;
}
/* Release the parent's intrinsic width so the text-only button can stretch.
 * Apply whenever the eyecatch contains the bnr_contact_btn image, regardless
 * of whether JS has added .design_btn class to the inner <a>. */
.eyecatch.set_width:has(img[src*="bnr_contact_btn"]),
.eyecatch:has(img[src*="bnr_contact_btn"]),
.field_1col:has(img[src*="bnr_contact_btn"]) {
  width: 100% !important;
  max-width: 520px !important;
  display: block !important;
  margin: 12px auto !important;
}
@media (max-width: 767px) {
  .eyecatch.set_width:has(img[src*="bnr_contact_btn"]),
  .eyecatch:has(img[src*="bnr_contact_btn"]),
  .field_1col:has(img[src*="bnr_contact_btn"]) {
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
  .eyecatch a:has(img[src*="bnr_contact_btn"]),
  .field_1col a:has(img[src*="bnr_contact_btn"]) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 14px !important;
    min-height: 66px !important;
  }
}
a.design_btn:has(img[src*="bnr_contact_btn"]) {
  min-height: 84px !important;
  padding: 14px 32px !important;
  width: 100% !important;
  max-width: 520px !important;
  background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
  border-radius: 48px !important;
  box-shadow: 0 10px 26px rgba(244, 100, 22, 0.42), 0 2px 6px rgba(0,0,0,0.14) !important;
  text-decoration: none !important;
}
a.design_btn:has(img[src*="bnr_contact_btn"])::before {
  content: 'お問い合わせフォームはこちら' !important;
  position: static !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  background-image: none !important;
  display: inline-block !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  white-space: nowrap !important;
  line-height: 1.2;
  text-align: center;
}
a.design_btn:has(img[src*="bnr_contact_btn"])::after {
  content: '↗' !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #d95108 !important;
  -webkit-text-fill-color: #d95108 !important;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  .eyecatch.set_width:has(a.design_btn img[src*="bnr_contact_btn"]) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  a.design_btn:has(img[src*="bnr_contact_btn"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 66px !important;
    padding: 10px 14px !important;
  }
  a.design_btn:has(img[src*="bnr_contact_btn"])::before {
    font-size: 14.5px !important;
    letter-spacing: 0 !important;
  }
  a.design_btn:has(img[src*="bnr_contact_btn"])::after {
    width: 28px;
    height: 28px;
    font-size: 14px;
    margin-left: 8px;
  }
}
@media (max-width: 360px) {
  a.design_btn:has(img[src*="bnr_contact_btn"])::before {
    font-size: 13px !important;
  }
}
/* (Previously suppressed pseudo-elements on SP — now we keep them so that
 *  ::before renders "お問い合わせフォームはこちら" and ::after renders ↗.) */
a.design_btn > span {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  margin-left: 4px;
}
a.design_btn > span::after {
  content: '→';
  font-size: 14px;
  color: #ffffff;
  line-height: 1;
}
/* Avoid double-arrow when an image label is present */
a.design_btn:has(img) > span::after { content: none !important; }

/* Contact form — the WP port still includes wpcf7c "Confirm" step buttons
 * even though the wpcf7c plugin JS isn't loaded. Hide the dead confirm/back
 * buttons and keep only the actual submit button. */
.wpcf7 .wpcf7-confirm,
.wpcf7 .wpcf7c-elm-step1,
.wpcf7 input.wpcf7-back,
.wpcf7 .wpcf7c-confirmed,
.wpcf7 button[type="submit"]:empty {
  display: none !important;
}

/* home_half_cta — 4 つも矢印が出ていたので、HTML に書かれた single arrow span
 * (`<span class="home_half_cta__arrow">→</span>`) だけ残して、子要素の
 * ::after で挿入されていた重複矢印を全部消す。 */
.home_half_cta__sub::after,
.home_half_cta__sub::before,
.home_half_cta__main::after,
.home_half_cta__main::before,
.home_half_cta__arrow::after,
.home_half_cta__arrow::before { content: none !important; }
/* JS appends an empty <span></span> after the arrow — kill any pseudo arrow
 * inserted into it via the generic a.design_btn > span::after rule. */
a.home_half_cta > span:empty::after,
a.home_half_cta > span:last-child::after,
a.home_half_cta > span:last-child::before { content: none !important; }

/* Section titles (.mid_entry_title / .half_entry_title / .short_entry_title)
 * were drawn on top of a fixed-height PNG background; long Japanese headings
 * (e.g. "メンテナンスが建物の寿命を守ります") wrapped to a 2nd line and
 * spilled out of the pill.  Replace the bitmap with a CSS pill that grows
 * with the text. */
.mid_entry_title,
.half_entry_title,
.short_entry_title {
  background-image: none !important;
  background-color: #36653b !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.6 !important;
  padding: 12px 26px !important;
  box-sizing: border-box !important;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
}
.mid_entry_title a,
.half_entry_title a,
.short_entry_title a { color: #ffffff !important; }

/* Privacy page — center the long text column so it isn't flush to the left edge.
   The shared #outer_block / #main / #content chain spans full width because the
   easys layout was built to let inner widgets (eyecatch images, banners, etc.)
   draw at edge. Privacy is text-only, so constrain its content box. */
body.page-template-page-privacy #content,
body.page-template-page-privacy-php #content,
body.page-privacy #content,
.privacy-page #content {
  max-width: 920px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  body.page-template-page-privacy #content,
  body.page-template-page-privacy-php #content,
  body.page-privacy #content,
  .privacy-page #content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Legacy contact CTA — post_content uses the upstream single-image markup
 * (.eyecatch.set_width > a > img bnr_contact_btn.png). The custom
 * .contact_cta_wrap / .contact_cta_btn block from the static port is no longer
 * emitted, so its rules are kept only as a safety fallback (hidden). */
.contact_cta_wrap { display: none !important; }
.contact_cta_legacy_image { display: none !important; }

/* Ensure white text inside new buttons on SP — strong override */
@media (max-width: 1023px) {
  body a.contact_cta_btn,
  body a.contact_cta_btn[href],
  body a.contact_cta_btn:link,
  body a.contact_cta_btn:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-indent: 0 !important;
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
  }
  body a.contact_cta_btn--tel,
  body a.contact_cta_btn--tel[href],
  body a.contact_cta_btn--tel:link,
  body a.contact_cta_btn--tel:visited {
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    background-image: none !important;
    background-color: #ffffff !important;
  }
}


/* ===================================================================
 * Pass 8 — Disable PC opening animation on SP/Tab.
 *  The #progress overlay was bleeding into homepage content on small screens.
 * =================================================================== */
@media (max-width: 1023px) {
  #progress,
  #progress_image,
  .opening_dots_top,
  .opening_dots_bottom,
  .opening_stage,
  .opening_logo,
  .opening_sub,
  .opening_tag,
  .opening_stroke,
  .opening_roller,
  .opening_splat,
  .opening_splat--1,
  .opening_splat--2,
  .opening_splat--3,
  .opening_splat--4,
  [class*="opening_"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
  }
}


/* ===================================================================
 * Pass 9 — contact_cta_btn text wrap fix on narrow SP
 * (Squeeze the label so it stays on one line at 390px)
 * =================================================================== */
@media (max-width: 767px) {
  .contact_cta_wrap {
    padding: 0 14px !important;
    gap: 10px !important;
  }
  .contact_cta_btn {
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    padding: 14px 18px !important;
    min-height: 52px !important;
    gap: 8px !important;
  }
  .contact_cta_btn__icon {
    width: 16px !important;
    height: 16px !important;
  }
  .contact_cta_btn__txt {
    white-space: nowrap !important;
    flex-shrink: 1;
    min-width: 0;
  }
  .contact_cta_btn__arrow {
    font-size: 16px !important;
  }
}

/* very narrow screens (<360px iPhone SE etc.) */
@media (max-width: 360px) {
  .contact_cta_btn {
    font-size: 13px !important;
    padding: 12px 14px !important;
  }
}


/* ===================================================================
 * Pass 10 — Hide bnr_contact_bg.jpg background bleeding behind SP CTA
 * (PC keeps the decorative image; SP/Tab gets a clean transparent surface)
 * =================================================================== */
@media (max-width: 1023px) {
  [class*="nd_01"][class*="easys_content"],
  .nd_01.nd01_12,
  .nd_01 {
    background-image: none !important;
    background: transparent !important;
  }
  /* Also kill any pasted .img_display container backgrounds */
  .img_display,
  [class*="img_display"] {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* Generic safety: clear any decorative bg with "bnr_contact" in url */
  [style*="bnr_contact"],
  [class*="contact_cta_wrap"] *,
  .contact_cta_wrap {
    background-image: none !important;
  }
  /* But re-affirm CTA buttons keep their gradient */
  .contact_cta_btn,
  body a.contact_cta_btn {
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
  }
  .contact_cta_btn--tel,
  body a.contact_cta_btn--tel {
    background-image: none !important;
    background-color: #ffffff !important;
  }
}


/* ===================================================================
 * Pass 11 — index.html SP P0/P1/P2 全件修正
 * =================================================================== */

/* ---- P0-2: コラム最新記事カードの文字色 (オレンジ→黒系) ---- */
@media (max-width: 1023px) {
  /* Latest column posts widget on index */
  .entry_post.post_margin .latest_post,
  .entry_post.post_margin .latest_post a,
  .entry_post.post_margin .post-list,
  .entry_post.post_margin .post-list a,
  .entry_post.post_margin .blog_widget,
  .entry_post.post_margin .blog_widget a,
  .entry_post.post_margin a[href*="/archives/"],
  .entry_post.post_margin a[href*="blog"] {
    color: #1d2c1d !important;
    -webkit-text-fill-color: #1d2c1d !important;
    text-decoration: none !important;
  }
  /* But keep "続きを読む" links readable in brand orange */
  .entry_post.post_margin a:has(> .more),
  .entry_post.post_margin .more,
  .entry_post.post_margin a.more,
  .entry_post.post_margin a[href*="/archives/"] .read-more,
  .entry_post.post_margin .read-more {
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    font-weight: 700 !important;
  }
  /* The list items themselves — strong black for title */
  .entry_post.post_margin h2 a,
  .entry_post.post_margin h3 a,
  .entry_post.post_margin .post_title,
  .entry_post.post_margin .post_title a,
  .entry_post.post_margin .entry_title a {
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    font-weight: 800 !important;
  }
  /* date / meta in subtle gray */
  .entry_post.post_margin .post_date,
  .entry_post.post_margin .entry_date,
  .entry_post.post_margin time {
    color: #6b5a3e !important;
    font-size: 12px !important;
  }
  /* paragraph excerpts: regular dark */
  .entry_post.post_margin p,
  .entry_post.post_margin .post-excerpt,
  .entry_post.post_margin .excerpt {
    color: #1d2c1d !important;
    -webkit-text-fill-color: #1d2c1d !important;
  }
}

/* ---- P0-3: 会社概要テーブル文字色 (薄グレー→濃い) ---- */
@media (max-width: 1023px) {
  body table[class*="width_2column"] td,
  body table[class*="width_2column"] td.td_value,
  body table[class*="width_2column"] td[class*="value_cell"] {
    color: #1d2c1d !important;
    -webkit-text-fill-color: #1d2c1d !important;
    opacity: 1 !important;
  }
  body table[class*="width_2column"] td.td_name,
  body table[class*="width_2column"] td[class*="name_cell"],
  body table[class*="width_2column"] th {
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    opacity: 1 !important;
    font-weight: 800 !important;
  }
}

/* ---- P1-1: page-05 大きな空白 + 画面外オレンジボタン ---- */
@media (max-width: 1023px) {
  /* Various floating decoration elements that leak negative-position on SP */
  .img_display,
  [class*="img_display"] {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  /* Remove empty container heights that PC was using for layered decorations */
  .easys_content.no_margin .img_display:empty,
  .easys_content .img_display:empty {
    display: none !important;
  }
  /* PCの巨大装飾文字 ("40年" 等) を抑える */
  [class*="design_text"],
  [class*="big_text"],
  .deco_text,
  .pc_only_deco {
    display: none !important;
  }
  /* Hidden floating elements with absolute positions */
  .moved[class*="design_"] {
    position: relative !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }
}

/* ---- P1-2: YouTube動画と装飾テキスト「40年」重なり解消 ---- */
@media (max-width: 1023px) {
  /* Force YouTube iframe to be the topmost in its container */
  iframe[src*="youtube"],
  iframe[src*="youtu.be"],
  .youtube_wrap iframe {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  .youtube_wrap {
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 16px 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  /* Hide any sibling decorative overlay text within the same container */
  .youtube_wrap + *,
  iframe[src*="youtube"] ~ [class*="text"]:not(.text_box):not(.text):not(.post_data) {
    display: none !important;
  }
}

/* ---- P1-3: 「事業内容はこちら」CTAの一体化 ---- */
@media (max-width: 1023px) {
  /* Look for the "Business 事業内容" link block — typically pc_btn_arrow style */
  .pc_btn_arrow,
  [class*="btn_arrow"],
  .text_btn_round,
  [class*="text_btn"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 16px auto !important;
    padding: 0 !important;
  }
  .pc_btn_arrow a,
  [class*="btn_arrow"] a,
  [class*="text_btn"] a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-radius: 32px !important;
    box-shadow: 0 6px 18px rgba(244, 100, 22, 0.4) !important;
    text-indent: 0 !important;
  }
}

/* ---- P2: 余白圧縮 (各 entry_post 間の縦余白を抑える) ---- */
@media (max-width: 767px) {
  .entry_post.post_margin {
    margin-bottom: 14px !important;
    padding: 18px 18px 16px !important;
  }
  .easys_content,
  .easys_content + .easys_content,
  [class*="easys_content"] {
    margin: 0 !important;
    padding: 0 !important;
  }
  .easys_content_inner { padding: 0 !important; }
  /* Tighten section bottom margins */
  .margin-bottom_50, .margin-bottom_40, .margin-bottom_30 { margin-bottom: 16px !important; }
  .margin-bottom_15 { margin-bottom: 10px !important; }
  /* h2 spacing */
  .entry_post.post_margin .headline_title { margin-bottom: 12px !important; padding-bottom: 8px !important; }
  /* Remove huge empty spacers */
  br + br + br, br + br + br + br { display: none; }
}


/* ===================================================================
 * Pass 12 — Selector fix: index.html table is wrapped in
 *   <div class="table_area width_2column_share float_*"><table>...
 * The previous selectors targeted the table itself.
 * =================================================================== */
@media (max-width: 1023px) {
  /* Block-ify the inner table */
  .table_area[class*="width_2column"] table,
  div.width_2column_share table {
    display: block !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    border-collapse: collapse !important;
    background: transparent !important;
  }
  .table_area[class*="width_2column"] table tbody,
  div.width_2column_share table tbody { display: block !important; width: 100% !important; }
  .table_area[class*="width_2column"] table tr,
  div.width_2column_share table tr {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    border-bottom: 1px dashed rgba(54, 101, 59, 0.22) !important;
  }
  .table_area[class*="width_2column"] table tr:last-child,
  div.width_2column_share table tr:last-child { border-bottom: 0 !important; }
  .table_area[class*="width_2column"] table th,
  .table_area[class*="width_2column"] table td,
  div.width_2column_share table th,
  div.width_2column_share table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    box-sizing: border-box !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  /* Label cells — eyebrow style */
  .table_area[class*="width_2column"] table td.td_name,
  .table_area[class*="width_2column"] table td[class*="name_cell"],
  div.width_2column_share table td.td_name,
  div.width_2column_share table td[class*="name_cell"] {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    opacity: 1 !important;
  }
  /* Value cells — strong readable black */
  .table_area[class*="width_2column"] table td.td_value,
  .table_area[class*="width_2column"] table td[class*="value_cell"],
  div.width_2column_share table td.td_value,
  div.width_2column_share table td[class*="value_cell"] {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1d2c1d !important;
    -webkit-text-fill-color: #1d2c1d !important;
    opacity: 1 !important;
  }
  .table_area[class*="width_2column"] table td a,
  div.width_2column_share table td a {
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    text-decoration: underline;
  }
}


/* ===================================================================
 * Pass 13 — Column post list colour fix
 *   index.html uses <span class="post_title_list"><a> and
 *   <span class="news_small_text"> wrappers.
 * =================================================================== */
@media (max-width: 1023px) {
  /* Title */
  .post_title_list,
  .post_title_list a,
  .post_title_list a:link,
  .post_title_list a:visited {
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    display: block !important;
    text-decoration: none !important;
    margin: 4px 0 8px !important;
  }
  /* Body excerpt */
  .news_small_text,
  span.news_small_text {
    color: #1d2c1d !important;
    -webkit-text-fill-color: #1d2c1d !important;
    font-size: 13.5px !important;
    line-height: 1.85 !important;
    display: block !important;
  }
  /* "続きを読む" link inside excerpt */
  .news_small_text a,
  .news_small_text a:link,
  .news_small_text a:visited {
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    text-decoration: underline;
    font-weight: 700;
    margin-left: 4px;
  }
}


/* ===================================================================
 * Pass 14 — Home "Business 事業内容はこちら / Company 会社概要はこちら"
 *   PC keeps the legacy image banners.
 *   SP/Tab uses cleaner unified buttons.
 * =================================================================== */
.home_half_ctas { display: none; }
.home_half_ctas_legacy { display: block; }

@media (max-width: 1023px) {
  .home_half_ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
    max-width: 600px;
    margin: 0 auto;
  }
  .home_half_cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
    background: #ffffff;
    border: 2px solid #36653b;
    border-radius: 12px;
    text-decoration: none !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    box-shadow: 0 4px 14px rgba(54, 101, 59, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 72px;
    position: relative;
    text-indent: 0 !important;
  }
  .home_half_cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(54, 101, 59, 0.22);
  }
  .home_half_cta__sub {
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    font-size: 16px;
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1;
  }
  .home_half_cta__main {
    font-size: 17px;
    font-weight: 800;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.04em;
    line-height: 1.3;
    flex: 1;
    margin-left: 4px;
  }
  .home_half_cta__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(244, 100, 22, 0.4);
  }
  /* Hide the legacy banner images on SP/Tab */
  .home_half_ctas_legacy { display: none !important; }
}


/* ===================================================================
 * Pass 15 — SP home hero: brighten image, fix top bar
 *   - The old filter brightness(0.45) made the top look like a dark bar.
 *   - Also kill #branding_box top_header_cover bg that bleeds dark on top.
 * =================================================================== */
@media (max-width: 767px) {
  /* Remove the top decorative cover that shows as a thin dark strip */
  #branding_box {
    background: transparent !important;
    background-image: none !important;
    min-height: 56px !important;
  }
  /* Home hero image: brighten + better positioning */
  .home_hero_sp__bg {
    filter: brightness(0.62) saturate(1.08) contrast(1.04) !important;
    object-position: center 40% !important;
    transform: scale(1.04) !important;
  }
  /* Smoother gradient veil — less dark at top, dark at bottom for legibility */
  .home_hero_sp::after {
    background:
      linear-gradient(180deg,
        rgba(15,22,12,0.10) 0%,
        rgba(15,22,12,0.05) 30%,
        rgba(15,22,12,0.40) 70%,
        rgba(15,22,12,0.85) 100%),
      linear-gradient(135deg,
        rgba(54,101,59,0.22) 0%,
        rgba(54,101,59,0.0)  55%,
        rgba(244,100,22,0.10) 100%) !important;
  }
  /* Add a subtle inner border to make it feel like a card */
  .home_hero_sp {
    border-radius: 0 !important;
  }
  /* Eyebrow more visible */
  .home_hero_sp__eyebrow {
    color: #ffc794 !important;
    -webkit-text-fill-color: #ffc794 !important;
  }
}


/* ===================================================================
 * Pass 16 — SP home hero: center content, reduce top dark area
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp {
    height: auto !important;
    min-height: 580px !important;
    max-height: none !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .home_hero_sp__inner {
    justify-content: center !important;
    padding: 56px 24px 56px !important;
  }
  /* Even softer top gradient — no more dark bar */
  .home_hero_sp::after {
    background:
      linear-gradient(180deg,
        rgba(15,22,12,0.04) 0%,
        rgba(15,22,12,0.0)  20%,
        rgba(15,22,12,0.0)  50%,
        rgba(15,22,12,0.30) 75%,
        rgba(15,22,12,0.80) 100%) !important;
  }
  /* Slightly less aggressive image brightness */
  .home_hero_sp__bg {
    filter: brightness(0.7) saturate(1.06) !important;
    object-position: center 50% !important;
  }
}


/* ===================================================================
 * Pass 17 — Eliminate ALL section background photos on SP/Tab
 *   plus restore proper margin/padding between cards.
 * =================================================================== */
@media (max-width: 1023px) {
  /* Catch every WP widget class that ships a section bg */
  .nd_01, .nd_02, .nd_03, .nd_04,
  .ndb_01, .ndb_02, .ndb_03, .ndb_04,
  .nm_01, .nm_02, .nm_03, .nm_04,
  .nh_01, .nh_02, .nc_01, .nc_02,
  .nb_01, .nb_02, .nk_01, .nk_02,
  [class*="ndb_"], [class*="nm_"], [class*="nh_"],
  [class*="nd_"][class*="post"], [class*="nb_"], [class*="nc_"], [class*="nk_"],
  [class*="easys_content"] {
    background-image: none !important;
    background-color: transparent !important;
  }
  /* Padding override for empty backgrounds */
  .ndb_01, .ndb_02, .nm_01 {
    padding: 0 !important;
  }
  /* Width / centering */
  [class*="easys_content"], .easys_content_inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* Restore generous card margins for breathing room */
  .entry_post.post_margin {
    margin: 24px 16px !important;
    padding: 26px 22px !important;
    box-shadow: 0 6px 22px rgba(54, 101, 59, 0.12);
    border-radius: 12px;
    background: #ffffff;
  }

  /* Section vertical rhythm between widgets */
  .easys_content + .easys_content,
  [class*="easys_content"] + [class*="easys_content"] {
    margin-top: 8px !important;
  }
  /* When a card sits directly inside an easys_content with no margin,
     keep equal gutter above/below via parent padding */
  [class*="easys_content"].no_margin {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  .entry_post.post_margin {
    margin: 20px 14px !important;
    padding: 24px 20px !important;
  }
}


/* ===================================================================
 * Pass 18 — FINAL hammer for main_btn inside .entry_post.post_margin
 * (Earlier rules in this file unintentionally orange-coloured the link)
 * =================================================================== */
@media (max-width: 1023px) {
  body .entry_post.post_margin p.main_btn a,
  body .entry_post.post_margin p.main_btn a[href],
  body .entry_post.post_margin p.main_btn a:link,
  body .entry_post.post_margin p.main_btn a:visited,
  body p.main_btn > a,
  body p.main_btn > a[href] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    background-color: #f46416 !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }
  body .entry_post.post_margin p.main_btn a:hover,
  body p.main_btn > a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background-image: linear-gradient(135deg, #d95108 0%, #b54206 100%) !important;
  }
}


/* ===================================================================
 * Pass 19 — Luxury SP home hero (designer rebuild)
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    min-height: 720px;
    overflow: hidden;
    background: #0e1a0e;
    margin: 0;
    padding: 0;
    color: #fff;
  }

  /* Background photo */
  .home_hero_sp__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: brightness(0.55) saturate(1.1) contrast(1.06);
    transform: scale(1.08);
    animation: heroBgZoom 18s ease-out infinite alternate;
    z-index: 0;
  }
  @keyframes heroBgZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1.14); }
  }

  /* Multi-layer overlay */
  .home_hero_sp::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background:
      radial-gradient(ellipse 60% 50% at 50% 30%, rgba(54,101,59,0.0) 0%, rgba(15,28,18,0.65) 75%),
      linear-gradient(180deg,
        rgba(15,22,12,0.45) 0%,
        rgba(15,22,12,0.10) 30%,
        rgba(15,22,12,0.30) 60%,
        rgba(15,22,12,0.92) 100%),
      linear-gradient(135deg,
        rgba(54,101,59,0.32) 0%,
        rgba(54,101,59,0.0)  55%,
        rgba(244,100,22,0.10) 100%);
    pointer-events: none;
  }
  /* Decorative paint stroke ribbon — subtle teal accent */
  .home_hero_sp__stroke {
    position: absolute;
    top: 30%; left: -10%; right: -10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
    z-index: 1;
    transform: rotate(-2deg);
  }

  /* Top bar: brand mark + EST 2003 */
  .home_hero_sp__top {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 22px 0;
  }
  .home_hero_sp__mark {
    display: flex; align-items: center; gap: 8px;
  }
  .home_hero_sp__mark svg { width: 30px; height: 30px; flex-shrink: 0; }
  .home_hero_sp__mark_txt {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-style: italic; font-weight: 500;
    color: #f5e9d0;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0.06em;
  }
  .home_hero_sp__meta {
    display: flex; align-items: baseline; gap: 6px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.18);
  }
  .home_hero_sp__meta_label {
    font-family: 'Georgia', serif;
    font-size: 9px;
    letter-spacing: 0.3em;
    color: #f9b994;
    font-style: italic;
    font-weight: 700;
  }
  .home_hero_sp__meta_val {
    font-family: 'Georgia', serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: #fff;
    font-weight: 700;
  }

  /* Inner content */
  .home_hero_sp__inner {
    position: relative; z-index: 3;
    padding: 80px 24px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 540px;
    animation: heroFadeUp 1s 0.2s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Eyebrow */
  .home_hero_sp__eyebrow {
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    font-size: 18px;
    color: #ffc794;
    margin: 0 0 14px;
    letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
  .home_hero_sp__eyebrow_dash {
    display: inline-block;
    width: 36px; height: 2px;
    background: linear-gradient(90deg, #f46416, transparent);
    border-radius: 1px;
  }

  /* Title with mixed type */
  .home_hero_sp__title {
    margin: 0 0 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .home_hero_sp__title_jp {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.18em;
    line-height: 1.0;
    text-shadow: 0 6px 28px rgba(0,0,0,0.55);
    position: relative;
    display: inline-block;
  }
  .home_hero_sp__title_jp::after {
    content: "";
    position: absolute;
    left: 0; right: 30%; bottom: -8px;
    height: 3px;
    background: linear-gradient(90deg, #f46416, transparent);
    border-radius: 2px;
  }
  .home_hero_sp__title_sub {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-style: italic;
    font-size: 18px;
    color: #f2e8d9;
    letter-spacing: 0.34em;
    margin-top: 16px;
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  /* Tag */
  .home_hero_sp__tag {
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: 26px;
    color: #f46416;
    margin: 18px 0 26px;
    letter-spacing: 0.02em;
    transform: rotate(-1.2deg);
    text-shadow: 0 2px 10px rgba(0,0,0,0.45);
    align-self: flex-start;
    line-height: 1.2;
  }
  .home_hero_sp__tag em {
    font-style: normal;
    color: #ffb37a;
    font-weight: 700;
    position: relative;
    padding: 0 2px;
  }
  .home_hero_sp__tag em::before {
    content: "";
    position: absolute; inset: 0;
    background: rgba(244, 100, 22, 0.18);
    border-radius: 4px;
    z-index: -1;
  }

  /* Stats badges row */
  .home_hero_sp__stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    margin: 0 0 28px;
    padding: 16px 6px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .home_hero_sp__stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .home_hero_sp__stat_num {
    font-family: 'Georgia', serif;
    font-size: 24px;
    font-weight: 800;
    color: #ffd4a8;
    letter-spacing: 0.02em;
    line-height: 1;
    display: flex; align-items: baseline; gap: 2px;
  }
  .home_hero_sp__stat_num small {
    font-size: 11px;
    color: #f5e9d0;
    font-weight: 600;
    margin-left: 2px;
  }
  .home_hero_sp__stat_label {
    font-size: 10px;
    color: #f2e8d9;
    letter-spacing: 0.12em;
    opacity: 0.9;
  }
  .home_hero_sp__stat_sep {
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.25), transparent);
    margin: 4px 0;
  }

  /* Lead text */
  .home_hero_sp__lead {
    font-size: 13.5px;
    line-height: 1.95;
    color: #efe2cf;
    margin: 0 0 24px;
    max-width: 320px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
    letter-spacing: 0.02em;
  }
  .home_hero_sp__lead br { display: inline; }

  /* CTA buttons */
  .home_hero_sp__cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
  }
  .home_hero_sp__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-wrap: wrap;
    padding: 16px 22px 14px;
    border-radius: 16px;
    text-decoration: none !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow:
      0 10px 26px rgba(244,100,22,0.45),
      0 2px 6px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
  }
  .home_hero_sp__btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
  }
  .home_hero_sp__btn:hover::before { left: 130%; }
  .home_hero_sp__btn:hover {
    transform: translateY(-2px);
    box-shadow:
      0 14px 32px rgba(244,100,22,0.55),
      0 4px 10px rgba(0,0,0,0.26),
      inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .home_hero_sp__btn_main {
    flex: 1;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #ffffff;
    line-height: 1.2;
  }
  .home_hero_sp__btn_sub {
    width: 100%;
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin-top: 2px;
    letter-spacing: 0.05em;
  }
  .home_hero_sp__btn_arrow {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-left: 6px;
    transition: transform 0.2s ease;
  }
  .home_hero_sp__btn:hover .home_hero_sp__btn_arrow { transform: translateX(4px); }

  /* Tel button */
  .home_hero_sp__tel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,0.96);
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    transition: transform .2s ease;
    flex-wrap: wrap;
  }
  .home_hero_sp__tel:hover { transform: translateY(-2px); }
  .home_hero_sp__tel_icon {
    display: inline-block;
    width: 18px; height: 18px;
    background-color: #36653b;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.65.57l-1.84 1.84a15.05 15.05 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.65L8.74 4.8a2 2 0 0 0-1.99-1.79H4.19c-1.14 0-2.08.95-2.02 2.09.45 9.05 7.69 16.29 16.74 16.74 1.14.06 2.09-.88 2.09-2.02v-2.56c.01-1.04-.78-1.92-1.77-2'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
  }
  .home_hero_sp__tel_num {
    flex: 1;
    font-family: 'Georgia', serif;
    font-size: 18px;
    font-weight: 800;
    color: #36653b;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .home_hero_sp__tel_label {
    width: 100%;
    font-size: 11px;
    color: #5d7558;
    margin-top: 4px;
    letter-spacing: 0.06em;
    padding-left: 30px;
  }

  /* Bottom roller + scroll cue */
  .home_hero_sp__bottom {
    position: relative; z-index: 3;
    padding: 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .home_hero_sp__roller {
    width: 40px; height: 28px;
    opacity: 0.85;
    animation: heroRollerSlide 4s ease-in-out infinite;
  }
  @keyframes heroRollerSlide {
    0%, 100% { transform: translateX(-12px); }
    50%      { transform: translateX(12px); }
  }
  .home_hero_sp__scroll {
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    font-size: 13px;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.12em;
    margin: 0;
    animation: heroScrollBlink 2.4s ease-in-out infinite;
  }
  @keyframes heroScrollBlink {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(4px); }
  }
}

/* PC/Tab: hide enhanced hero */
@media (min-width: 768px) {
  .home_hero_sp { display: none !important; }
}


/* ===================================================================
 * Pass 20 — Hero luxury fixes:
 *   - stat num must stay on one line
 *   - bump height so tel button no longer cut off
 *   - stat bar background a bit darker
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp { min-height: 880px !important; }
  .home_hero_sp__inner { min-height: 700px !important; padding: 80px 22px 42px !important; }

  /* Force horizontal layout for stat number */
  .home_hero_sp__stat {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    min-width: 0;
  }
  .home_hero_sp__stat_num {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    gap: 1px !important;
  }
  .home_hero_sp__stat_num small {
    font-size: 11px !important;
    margin-left: 3px !important;
    line-height: 1 !important;
    display: inline !important;
    white-space: nowrap !important;
  }

  /* Stat bar — darker glass for legibility */
  .home_hero_sp__stats {
    background: rgba(8, 14, 8, 0.45) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    padding: 18px 8px !important;
    margin: 0 0 26px !important;
  }

  /* Tel button — keep label inside */
  .home_hero_sp__tel {
    padding: 14px 18px 16px !important;
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }
  .home_hero_sp__tel_label {
    padding-left: 30px !important;
    margin-top: 2px !important;
  }

  /* Title pulse subtler — keep underline shorter */
  .home_hero_sp__title_jp { font-size: 52px !important; }
  .home_hero_sp__title_sub { font-size: 16px !important; letter-spacing: 0.42em !important; }

  /* Tag adjustments */
  .home_hero_sp__tag { font-size: 24px !important; margin: 16px 0 22px !important; }
}


/* ===================================================================
 * Pass 21 — Hero bottom space for fixed_btn
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp {
    min-height: 100vh !important;
    height: auto !important;
  }
  .home_hero_sp__inner {
    padding: 76px 22px 130px !important;
    min-height: auto !important;
  }
  .home_hero_sp__bottom {
    padding: 8px 0 110px !important;
  }
}


/* ===================================================================
 * Pass 22 — Revert luxury hero overrides (Pass 19/20/21 nullified)
 *   Reset .home_hero_sp* to the simpler earlier design.
 * =================================================================== */
@media (max-width: 767px) {
  /* Remove decorations introduced by luxury pass */
  .home_hero_sp__top,
  .home_hero_sp__stroke,
  .home_hero_sp__stats,
  .home_hero_sp__stat,
  .home_hero_sp__stat_sep,
  .home_hero_sp__bottom,
  .home_hero_sp__roller {
    display: none !important;
  }

  /* Reset hero container */
  .home_hero_sp {
    min-height: 580px !important;
    height: auto !important;
    max-height: none !important;
    background: #1a2818;
  }
  .home_hero_sp__bg {
    filter: brightness(0.7) saturate(1.06) !important;
    object-position: center 50% !important;
    transform: scale(1.04) !important;
    animation: none !important;
  }
  .home_hero_sp::after {
    background:
      linear-gradient(180deg,
        rgba(15,22,12,0.04) 0%,
        rgba(15,22,12,0.0)  20%,
        rgba(15,22,12,0.0)  50%,
        rgba(15,22,12,0.30) 75%,
        rgba(15,22,12,0.80) 100%) !important;
  }

  .home_hero_sp__inner {
    justify-content: center !important;
    padding: 56px 24px 56px !important;
    min-height: auto !important;
    flex-direction: column;
    display: flex;
  }

  /* Eyebrow back to simple */
  .home_hero_sp__eyebrow {
    font-family: 'Caveat', 'Georgia', cursive !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: #ffc794 !important;
    -webkit-text-fill-color: #ffc794 !important;
    margin: 0 0 6px !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
    padding-left: 36px !important;
    display: block !important;
    gap: 0 !important;
  }
  .home_hero_sp__eyebrow::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    top: auto !important;
    margin-top: 10px !important;
    width: 28px !important;
    height: 2px !important;
    background: #f46416 !important;
    border-radius: 1px !important;
  }
  /* Hide injected dash element */
  .home_hero_sp__eyebrow_dash { display: none !important; }

  /* Title back to single line */
  .home_hero_sp__title {
    display: block !important;
    margin: 0 !important;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
    font-size: 64px !important;
    font-weight: 900 !important;
    color: #fff !important;
    letter-spacing: 0.18em !important;
    line-height: 1.0 !important;
    text-shadow: 0 6px 24px rgba(0,0,0,0.5) !important;
  }
  /* If the nested spans exist, treat the JP one as the title text */
  .home_hero_sp__title_jp {
    display: inline !important;
    font-size: inherit !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    padding: 0 !important;
  }
  .home_hero_sp__title_jp::after { display: none !important; }
  .home_hero_sp__title_sub { display: none !important; }

  /* Sub text */
  .home_hero_sp__sub {
    font-family: 'Georgia', 'Yu Mincho', serif !important;
    font-style: italic !important;
    font-size: 16px !important;
    color: #f2e8d9 !important;
    margin: 6px 0 0 !important;
    letter-spacing: 0.36em !important;
    display: block !important;
  }
  .home_hero_sp__tag {
    font-family: 'Caveat', cursive !important;
    font-style: italic !important;
    font-size: 22px !important;
    color: #f46416 !important;
    margin: 14px 0 18px !important;
    letter-spacing: 0.04em !important;
    transform: rotate(-1.2deg) !important;
    align-self: flex-start !important;
    line-height: 1.2 !important;
  }
  .home_hero_sp__tag em {
    font-style: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    background: none !important;
  }
  .home_hero_sp__tag em::before { display: none !important; }

  /* Lead */
  .home_hero_sp__lead {
    font-size: 13.5px !important;
    line-height: 1.85 !important;
    color: #efe2cf !important;
    margin: 0 0 22px !important;
    max-width: 320px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.35) !important;
  }

  /* CTA back to single-line button */
  .home_hero_sp__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 14px 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 8px 20px rgba(244,100,22,0.45), 0 2px 6px rgba(0,0,0,0.18) !important;
    min-height: 48px !important;
    text-decoration: none !important;
    overflow: visible !important;
  }
  .home_hero_sp__btn::before { display: none !important; }
  .home_hero_sp__btn_main,
  .home_hero_sp__btn_sub,
  .home_hero_sp__btn_arrow { display: none !important; }

  /* Tel button */
  .home_hero_sp__tel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 14px 22px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,0.96) !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    min-height: 48px !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;
    text-decoration: none !important;
  }
  .home_hero_sp__tel_num,
  .home_hero_sp__tel_label { display: none !important; }

  /* Scroll cue back to simple */
  .home_hero_sp__scroll {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-family: 'Caveat', cursive !important;
    font-style: italic !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px !important;
    letter-spacing: 0.12em !important;
    margin: 0 !important;
    animation: homeHeroScroll 2.4s ease-in-out infinite !important;
    display: block !important;
  }
}


/* ===================================================================
 * Pass 23 — Remove dark frame above/below hero photo
 * =================================================================== */
@media (max-width: 767px) {
  /* Kill the gradient veil */
  .home_hero_sp::after,
  .home_hero_sp::before {
    background: none !important;
    background-image: none !important;
    content: none !important;
    display: none !important;
  }
  /* Brighten the photo so it shows naturally */
  .home_hero_sp__bg {
    filter: brightness(0.92) saturate(1.04) contrast(1.02) !important;
    transform: scale(1.0) !important;
    object-position: center 50% !important;
  }
  /* Remove the solid dark background of the wrapper */
  .home_hero_sp {
    background: transparent !important;
  }
  /* Strong text shadow so words still read clearly on the photo */
  .home_hero_sp__inner * {
    text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.7);
  }
  .home_hero_sp__btn,
  .home_hero_sp__tel { text-shadow: none !important; }
}


/* ===================================================================
 * Pass 24 — Text color only adjustments for hero readability
 *   (No layout/background/overlay changes)
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp__eyebrow {
    color: #c84e0d !important;
    -webkit-text-fill-color: #c84e0d !important;
  }
  .home_hero_sp__title {
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
  }
  .home_hero_sp__sub {
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
  }
  .home_hero_sp__tag {
    color: #d95108 !important;
    -webkit-text-fill-color: #d95108 !important;
  }
  .home_hero_sp__lead {
    color: #0e1a0e !important;
    -webkit-text-fill-color: #0e1a0e !important;
  }
  .home_hero_sp__scroll {
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
  }
}


/* ===================================================================
 * Pass 25 — Add a soft white mask layer over the hero photo
 * =================================================================== */
@media (max-width: 767px) {
  .home_hero_sp::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255, 255, 255, 0.38) !important;
    background-image: none !important;
    display: block !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .home_hero_sp__inner,
  .home_hero_sp__scroll {
    position: relative !important;
    z-index: 2 !important;
  }
}


/* ===================================================================
 * Pass 26 — Restore card headlines on SP that PC inline CSS hid
 *   PC uses image headlines and hides text version via
 *   "#<widget-id> .entry_post > [class*='title'] { display:none }".
 *   On SP we have no image headline, so force them visible.
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post .headline_title,
  .entry_post > [class*="title"],
  .entry_post > h2[class*="title"],
  .entry_post > h3[class*="title"],
  body div[id] .entry_post > [class*="title"],
  body div[id] .entry_post .headline_title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    text-indent: 0 !important;
    overflow: visible !important;
    position: static !important;
  }
}


/* ===================================================================
 * Pass 27 — main_btn redesigned: brand-coherent + horizontally centered
 *   (Tonmana: 緑 #36653b × オレンジ #f46416 × ベージュ + handwritten accent)
 * =================================================================== */
@media (max-width: 1023px) {
  /* Center alignment for the parent paragraph */
  .main_btn,
  p.main_btn,
  p.main_btn.btn_align_left,
  p.main_btn.btn_align_right {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px auto 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    position: relative;
  }

  /* The anchor itself */
  body p.main_btn a,
  body p.main_btn > a,
  body .entry_post.post_margin p.main_btn a {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 340px !important;
    padding: 16px 36px 16px 32px !important;
    background-image: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    background-color: #f46416 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    border-radius: 999px !important;
    border: 2px solid #36653b !important;
    box-shadow:
      0 8px 22px rgba(244, 100, 22, 0.38),
      0 2px 6px rgba(54, 101, 59, 0.20),
      inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  body p.main_btn a:hover,
  body p.main_btn > a:hover {
    transform: translateY(-2px);
    box-shadow:
      0 12px 28px rgba(244, 100, 22, 0.48),
      0 4px 10px rgba(54, 101, 59, 0.24),
      inset 0 1px 0 rgba(255,255,255,0.32) !important;
  }

  /* "more" handwritten eyebrow above the button via ::before on the parent */
  p.main_btn::before {
    content: "— more ↓";
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Caveat', 'Georgia', cursive;
    font-style: italic;
    font-size: 16px;
    color: #36653b;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    opacity: 0.85;
    position: absolute;
    top: -28px;
    left: 0;
  }

  /* Arrow on the anchor */
  body p.main_btn a::after,
  body p.main_btn > a::after {
    content: "" !important;
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5l7 7-7 7v-4H3v-6h11z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5l7 7-7 7v-4H3v-6h11z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .2s ease;
    flex-shrink: 0;
  }
  body p.main_btn a:hover::after,
  body p.main_btn > a:hover::after {
    transform: translateX(4px);
  }
}


/* ===================================================================
 * Pass 28 — home_half_cta also brand-coherent + centered
 * =================================================================== */
@media (max-width: 1023px) {
  .home_half_ctas {
    align-items: center !important;
    padding: 24px 16px !important;
  }
  .home_half_cta {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center !important;
    column-gap: 14px;
    width: 100% !important;
    max-width: 360px !important;
    padding: 18px 22px !important;
    background: #ffffff !important;
    border: 2px solid #36653b !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-shadow:
      0 6px 18px rgba(54, 101, 59, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.5) !important;
    min-height: 64px !important;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .home_half_cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 10px 22px rgba(54, 101, 59, 0.22),
      0 2px 6px rgba(244, 100, 22, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.6) !important;
  }
  .home_half_cta__sub {
    grid-column: 1;
    font-family: 'Caveat', 'Georgia', cursive !important;
    font-style: italic !important;
    font-size: 17px !important;
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
  }
  .home_half_cta__main {
    grid-column: 2;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.06em !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .home_half_cta__arrow {
    grid-column: 3;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(244, 100, 22, 0.4) !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    position: relative;
  }
  .home_half_cta__arrow::before {
    content: "" !important;
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5l7 7-7 7v-4H3v-6h11z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 5l7 7-7 7v-4H3v-6h11z'/%3E%3C/svg%3E") no-repeat center / contain;
    display: block;
  }
  .home_half_cta:hover .home_half_cta__arrow::before {
    animation: hhcArrowMove 0.6s ease-in-out;
  }
  @keyframes hhcArrowMove {
    50% { transform: translateX(3px); }
  }
}


/* ===================================================================
 * Pass 29 — home_half_cta size shrink + vertical center
 * =================================================================== */
@media (max-width: 1023px) {
  .home_half_ctas {
    padding: 16px 20px !important;
    gap: 10px !important;
  }
  .home_half_cta {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 10px !important;
    width: calc(100% - 8px) !important;
    max-width: 320px !important;
    padding: 12px 16px !important;
    min-height: 54px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .home_half_cta__sub {
    font-size: 14px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
  }
  .home_half_cta__main {
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .home_half_cta__arrow {
    width: 28px !important;
    height: 28px !important;
    align-self: center !important;
  }
  .home_half_cta__arrow::before {
    width: 14px !important;
    height: 14px !important;
  }
}
@media (max-width: 360px) {
  .home_half_cta { padding: 10px 14px !important; }
  .home_half_cta__sub, .home_half_cta__main { font-size: 13px !important; }
}


/* ===================================================================
 * Pass 30 — design_video on SP: clean up decorative arches/text
 *   Keep the video size as-is, fix text size/position, remove arches
 * =================================================================== */
@media (max-width: 1023px) {
  .design_video,
  div.design_video {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 16px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  /* video element keeps its natural size */
  .design_video video,
  div.design_video video {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 12px !important;
    z-index: 1 !important;
  }
  /* If the video is the body-level fixed background, lock it to PC behaviour */
  video[src*="para_bg"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    z-index: 1 !important;
    border-radius: 12px !important;
  }
  /* Remove the decorative arches / curves that PC draws as ::before/::after */
  .design_video::before,
  .design_video::after,
  div.design_video::before,
  div.design_video::after {
    display: none !important;
    content: none !important;
  }
  /* Centred overlay text (the "inaba paint" caption) — readable size */
  .design_video .text_box,
  .design_video .post_data,
  .design_video [class*="title"],
  .design_video p {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
    font-size: 16px !important;
    text-align: center !important;
    background: rgba(255,255,255,0.85) !important;
  }
  /* nm_01 widget wrapper around video — restrict width */
  [class*="nm_01"][class*="easys_content"] {
    max-width: 600px !important;
    margin: 16px auto !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }
}


/* ===================================================================
 * Pass 31 — Hide para_cover.png and related curve decorations on SP
 * =================================================================== */
@media (max-width: 1023px) {
  img[src*="para_cover"],
  img[alt="para_cover"],
  .img_display_1066,
  .img_display_1066 img,
  .img_display_1066 .eyecatch {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* Remove the parent widget that ends up empty */
  [class*="nd_01"][class*="easys_content"]:has(img[src*="para_cover"]) {
    display: none !important;
  }
}


/* ===================================================================
 * Pass 32 — Hide only the para_cover decoration container, NOT the
 *           sibling video widget (Pass 31's :has() was too greedy).
 * =================================================================== */
@media (max-width: 1023px) {
  /* Re-show whatever Pass 31 hid */
  [class*="nd_01"][class*="easys_content"]:has(img[src*="para_cover"]) {
    display: block !important;
  }
  /* But hide ONLY the small image_display block that contains the cover */
  .img_display_1066,
  .img_display_1066 .eyecatch,
  .img_display_1066 img,
  img[src*="para_cover"],
  img[alt="para_cover"] {
    display: none !important;
  }
}


/* ===================================================================
 * Pass 33 — TOP page .blog_post styled identically to blog index cards
 *   Works on PC and SP/Tab.
 * =================================================================== */

/* Card wrapper — looks like .blog_card */
.blog_post.margin-bottom_40 {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(54, 101, 59, 0.10);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 0 0 0 !important;
}
.blog_post.margin-bottom_40:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(54, 101, 59, 0.18);
}

/* Thumbnail full-width on top */
.blog_post .eyecatch.blog_thumb {
  position: relative;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.blog_post .eyecatch.blog_thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.blog_post .eyecatch.blog_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.4s ease;
}
.blog_post:hover .eyecatch.blog_thumb img { transform: scale(1.06); }

/* Category pill (orange) — overlay on the thumb top-left */
.blog_post .post_data .cat_area,
.blog_post .cat_area {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: linear-gradient(135deg, #f46416 0%, #d95108 100%);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 8px rgba(244,100,22,0.35);
  display: inline-block;
  width: auto;
}

/* Body section — under the thumbnail */
.blog_post .post_data.blog_list_text_size {
  padding: 18px 20px 20px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100% !important;
  font-size: inherit !important;
  line-height: 1.6 !important;
  position: relative;
}

/* Date — serif faint */
.blog_post .post_data .date_area,
.blog_post .date_area {
  display: block !important;
  font-family: 'Georgia', 'Yu Mincho', serif;
  font-size: 13px !important;
  color: #6b7065 !important;
  -webkit-text-fill-color: #6b7065 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  background: none !important;
  padding: 0 !important;
}

/* Title — green strong, line-clamp 3 */
.blog_post .post_title_list,
.blog_post .post_data .post_title_list {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
  color: #1d3220 !important;
}
.blog_post .post_title_list a,
.blog_post .post_data .post_title_list a {
  color: #1d3220 !important;
  -webkit-text-fill-color: #1d3220 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog_post .post_title_list a:hover { color: #f46416 !important; -webkit-text-fill-color: #f46416 !important; }

/* Excerpt body */
.blog_post .news_small_text,
.blog_post .post_data .news_small_text {
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.85 !important;
  color: #3d4536 !important;
  -webkit-text-fill-color: #3d4536 !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px dashed rgba(54,101,59,0.18);
  position: relative;
}
/* "続きを読む" link — orange, with arrow */
.blog_post .news_small_text a,
.blog_post .post_data .news_small_text a {
  display: block !important;
  margin-top: 14px !important;
  color: #f46416 !important;
  -webkit-text-fill-color: #f46416 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  text-align: left;
}
.blog_post .news_small_text a::after {
  content: " →";
  margin-left: 4px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.blog_post .news_small_text a:hover::after { transform: translateX(3px); }

/* Parent container: 3-column grid on PC, 1-column on SP, 2-col on Tab */
.img_display_1064,
.img_display_1065,
[class*="img_display"]:has(.blog_post.blog_post_1220),
[class*="img_display"]:has(.blog_post.blog_post_1218),
[class*="img_display"]:has(.blog_post.blog_post_1216) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  height: auto !important;
}

@media (max-width: 1023px) {
  [class*="img_display"]:has(.blog_post.blog_post_1220),
  [class*="img_display"]:has(.blog_post.blog_post_1218),
  [class*="img_display"]:has(.blog_post.blog_post_1216) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
}
@media (max-width: 640px) {
  [class*="img_display"]:has(.blog_post.blog_post_1220),
  [class*="img_display"]:has(.blog_post.blog_post_1218),
  [class*="img_display"]:has(.blog_post.blog_post_1216) {
    grid-template-columns: 1fr !important;
    padding: 0 14px !important;
  }
}


/* ===================================================================
 * Pass 34 — Fix TOP blog cards being clipped on the right edge
 *   Parent .img_display had overflow:hidden + 3-col grid pushed cards
 *   past the visible area. Remove overflow, restrict to viewport.
 * =================================================================== */
[class*="img_display"]:has(.blog_post.blog_post_1220),
[class*="img_display"]:has(.blog_post.blog_post_1218),
[class*="img_display"]:has(.blog_post.blog_post_1216),
.img_display_1064,
.img_display_1065,
.img_display_1066,
.img_display:has(.blog_post) {
  overflow: visible !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}
.blog_post.margin-bottom_40 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  box-sizing: border-box !important;
}
.blog_post .post_data.blog_list_text_size {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.blog_post .post_title_list a,
.blog_post .news_small_text {
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}


/* ===================================================================
 * Pass 35 — Make .cat_area sit inside the thumbnail, not in flow with date
 * =================================================================== */
.blog_post.margin-bottom_40 {
  position: relative !important;
}
.blog_post .eyecatch.blog_thumb {
  position: relative !important;
}
.blog_post .cat_area,
.blog_post .post_data .cat_area {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  display: inline-block !important;
  /* The pill becomes a child of the thumbnail visually */
}
/* Date occupies its own row, no left margin pushed by pill */
.blog_post .date_area,
.blog_post .post_data .date_area {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  position: static !important;
}
/* Move .cat_area out of post_data flow by mounting it inside the thumb wrapper visually */
.blog_post .post_data {
  position: static !important;
}


/* ===================================================================
 * Pass 36 — SP blog cards: shrink the cat pill, center contents
 *   (PC unchanged — only @media max-width: 1023px)
 * =================================================================== */
@media (max-width: 1023px) {
  /* The pill becomes compact overlay on the thumb, not a full-width banner */
  .blog_post .cat_area,
  .blog_post .post_data .cat_area,
  .blog_card .blog_card__cat {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    width: auto !important;
    max-width: 70% !important;
    display: inline-block !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    z-index: 3 !important;
    text-align: center !important;
  }

  /* Card text content centered like PC version */
  .blog_post .post_data,
  .blog_post .post_data.blog_list_text_size,
  .blog_card .blog_card__body {
    text-align: center !important;
    padding: 18px 20px 20px !important;
  }
  .blog_post .date_area,
  .blog_card .blog_card__date {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .blog_post .post_title_list,
  .blog_post .post_title_list a,
  .blog_card .blog_card__title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .blog_post .news_small_text,
  .blog_card .blog_card__excerpt {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .blog_post .news_small_text a,
  .blog_card .blog_card__more {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
}


/* ===================================================================
 * Pass 37 — Center the blog post card horizontally within viewport on SP
 * =================================================================== */
@media (max-width: 1023px) {
  [class*="img_display"]:has(.blog_post.blog_post_1220),
  [class*="img_display"]:has(.blog_post.blog_post_1218),
  [class*="img_display"]:has(.blog_post.blog_post_1216),
  .img_display:has(.blog_post) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    place-items: center !important;
    padding: 0 16px !important;
    gap: 18px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .blog_post.margin-bottom_40 {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 360px !important;
    width: 100% !important;
  }
}

/* Specifically narrow SP screens */
@media (max-width: 767px) {
  .blog_post.margin-bottom_40 {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}


/* ===================================================================
 * Pass 38 — Add proper gap/margin between blog cards on SP
 * =================================================================== */
@media (max-width: 1023px) {
  [class*="img_display"]:has(.blog_post.blog_post_1220),
  [class*="img_display"]:has(.blog_post.blog_post_1218),
  [class*="img_display"]:has(.blog_post.blog_post_1216) {
    gap: 32px !important;
    padding: 24px 16px !important;
  }
  .blog_post.margin-bottom_40 {
    margin: 0 auto !important;
  }
  /* Last card no extra space */
  .blog_post.margin-bottom_40:last-child {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767px) {
  [class*="img_display"]:has(.blog_post.blog_post_1220),
  [class*="img_display"]:has(.blog_post.blog_post_1218),
  [class*="img_display"]:has(.blog_post.blog_post_1216) {
    gap: 28px !important;
    padding: 20px 14px !important;
  }
}


/* ===================================================================
 * Pass 39 — Force margin between cards (parent is flex with no gap)
 * =================================================================== */
@media (max-width: 1023px) {
  .blog_post.margin-bottom_40 {
    margin: 0 auto 32px !important;
  }
  .blog_post.margin-bottom_40:last-child {
    margin-bottom: 0 !important;
  }
  /* Make sure parent doesn't collapse the margin */
  .easys_content_inner:has(.blog_post) {
    display: block !important;
    flex-direction: unset !important;
    padding: 12px 0 !important;
  }
}
@media (max-width: 767px) {
  .blog_post.margin-bottom_40 {
    margin: 0 auto 24px !important;
  }
}


/* ===================================================================
 * Pass 40 — Fix the "X" cross in Close state of the Menu button
 *   Old translateY values pushed the two strokes too far apart.
 *   Center them on the same point with pure rotation.
 * =================================================================== */
@media (max-width: 1023px) {
  /* Ensure the hamburger container has known dimensions */
  #menuTrigger > button > div {
    width: 20px !important;
    height: 14px !important;
    position: relative !important;
  }
  /* Open state — the three lines */
  #menuTrigger > button > div > span {
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #ffffff !important;
    transition: transform .25s ease, opacity .15s ease !important;
  }
  #menuTrigger > button > div > span:nth-of-type(1) { top: 0 !important; }
  #menuTrigger > button > div > span:nth-of-type(2) { top: 50% !important; transform: translateY(-50%) !important; }
  #menuTrigger > button > div > span:nth-of-type(3) { top: auto !important; bottom: 0 !important; }

  /* Closed state — burger -> X cross at vertical center */
  body.opened #menuTrigger > button > div > span:nth-of-type(1) {
    top: 50% !important;
    transform: translateY(-50%) rotate(45deg) !important;
  }
  body.opened #menuTrigger > button > div > span:nth-of-type(2) {
    opacity: 0 !important;
  }
  body.opened #menuTrigger > button > div > span:nth-of-type(3) {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) rotate(-45deg) !important;
  }
}


/* ===================================================================
 * Pass 41 — Replace dynamic "MORE" button with "コラム" section title
 * =================================================================== */
/* Hide the dynamically-injected MORE button at the bottom of the column section */
.nm_01.nm01_6 > .main_btn.design_btn,
.nm_01 > .main_btn.design_btn,
.main_btn.design_btn:has(a[href$="blog.html"]) {
  display: none !important;
}

/* Add a "コラム" section title at the top of the column widget */
.nm_01.nm01_6 {
  position: relative !important;
  padding-top: 130px !important;
}
.nm_01.nm01_6::before {
  content: "コラム";
  display: block;
  position: absolute;
  top: 24px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #36653b;
  letter-spacing: 0.12em;
  z-index: 2;
}
.nm_01.nm01_6::after {
  content: "Column / News";
  display: block;
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  text-align: center;
  font-family: 'Caveat', 'Georgia', cursive;
  font-style: italic;
  font-size: 14px;
  color: #f46416;
  letter-spacing: 0.12em;
  z-index: 2;
}
@media (max-width: 767px) {
  .nm_01.nm01_6 { padding-top: 110px !important; }
  .nm_01.nm01_6::before { font-size: 24px; top: 20px; }
  .nm_01.nm01_6::after { top: 56px; font-size: 13px; }
}


/* ===================================================================
 * Pass 42 — Header logo on the left of #branding_box (SP/Tab only)
 * =================================================================== */
.header_logo_sp { display: none; }

@media (max-width: 1023px) {
  .header_logo_sp {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    position: fixed !important;
    top: 12px;
    left: 14px;
    z-index: 9999;
    padding: 6px 14px 6px 6px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid #36653b;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(54, 101, 59, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .header_logo_sp:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(54, 101, 59, 0.25);
  }

  /* Circular green mark with "稲" character */
  .header_logo_sp__mark {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #36653b 0%, #2a5030 100%);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(54, 101, 59, 0.35);
  }

  /* Text block: JP + EN */
  .header_logo_sp__txt {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 3px;
  }
  .header_logo_sp__jp {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.06em;
    line-height: 1;
  }
  .header_logo_sp__en {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 9px;
    color: #f46416 !important;
    -webkit-text-fill-color: #f46416 !important;
    letter-spacing: 0.12em;
    line-height: 1;
  }
}

/* Smaller on narrow SP */
@media (max-width: 380px) {
  .header_logo_sp { padding: 5px 12px 5px 5px; gap: 8px; }
  .header_logo_sp__mark { width: 26px; height: 26px; font-size: 13px; }
  .header_logo_sp__jp { font-size: 13px; }
  .header_logo_sp__en { font-size: 8px; }
}


/* ===================================================================
 * Pass 43 — Header logo as text only (match TOP MV "稲葉塗装/inaba paint")
 * =================================================================== */
@media (max-width: 1023px) {
  .header_logo_sp {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
    position: fixed !important;
    top: 10px !important;
    left: 14px !important;
    z-index: 9999 !important;
    padding: 6px 14px !important;
    background: rgba(242, 232, 217, 0.92) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(54, 101, 59, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .header_logo_sp:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(54, 101, 59, 0.22);
  }

  /* Hide old mark icon if still present */
  .header_logo_sp__mark,
  .header_logo_sp__txt { display: none !important; }

  /* Main brand text */
  .header_logo_sp__jp {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.16em;
    line-height: 1;
    display: block;
  }
  /* English sub */
  .header_logo_sp__en {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-weight: 600;
    font-size: 10px;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.24em;
    line-height: 1;
    margin-top: 4px;
    align-self: center;
    display: block;
  }
}

/* Smaller on very narrow SP */
@media (max-width: 380px) {
  .header_logo_sp { padding: 5px 12px !important; }
  .header_logo_sp__jp { font-size: 16px !important; letter-spacing: 0.14em !important; }
  .header_logo_sp__en { font-size: 9px !important; letter-spacing: 0.22em !important; }
}


/* ===================================================================
 * Pass 44 — Page hero (about/business/company/works/news/faq/contact/privacy/great)
 *   Same look as TOP SP hero: photo + light white mask + centered text.
 *   PC keeps the original #main_teaser; SP/Tab uses page_hero_sp.
 * =================================================================== */
.page_hero_sp { display: none; }

@media (max-width: 1023px) {
  /* Hide the legacy PC main_teaser on SP/Tab since the new hero takes over */
  body:has(.page_hero_sp) #main_teaser {
    display: none !important;
  }

  .page_hero_sp {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 360px;
    overflow: hidden;
    margin: 0 0 24px;
    background: #f2e8d9;
  }
  .page_hero_sp__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    filter: brightness(0.95) saturate(1.04) contrast(1.02);
    z-index: 0;
  }
  /* Soft white mask, just enough to make text readable */
  .page_hero_sp__mask {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.36);
    z-index: 1;
    pointer-events: none;
  }
  .page_hero_sp__inner {
    position: relative;
    z-index: 2;
    padding: 56px 24px 48px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 360px;
    animation: pageHeroFade 0.8s 0.2s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes pageHeroFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* English eyebrow */
  .page_hero_sp__eyebrow {
    font-family: 'Caveat', 'Georgia', 'Yu Mincho', cursive;
    font-style: italic;
    font-size: 18px;
    color: #c84e0d !important;
    -webkit-text-fill-color: #c84e0d !important;
    margin: 0 0 8px;
    letter-spacing: 0.05em;
    padding-left: 36px;
    position: relative;
    font-weight: 500;
  }
  .page_hero_sp__eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 28px;
    height: 2px;
    background: #f46416;
    border-radius: 1px;
    transform: translateY(-50%);
  }

  /* Japanese big title */
  .page_hero_sp__title {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-size: 40px;
    font-weight: 900;
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
    margin: 0 0 14px;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px rgba(255,255,255,0.4);
    position: relative;
    padding-left: 18px;
  }
  .page_hero_sp__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 10px;
    width: 4px;
    background: linear-gradient(180deg, #f46416 0%, #36653b 100%);
    border-radius: 2px;
  }

  /* Catch copy */
  .page_hero_sp__catch {
    font-family: 'Caveat', cursive;
    font-style: italic;
    font-size: 22px;
    color: #d95108 !important;
    -webkit-text-fill-color: #d95108 !important;
    margin: 6px 0 0;
    letter-spacing: 0.02em;
    transform: rotate(-1deg);
    text-shadow: 0 1px 4px rgba(255,255,255,0.6);
  }

  /* Adjust title size if it's longer than ~6 chars */
  .page_hero_sp__title:has-line-7,
  body[id^="page"] .page_hero_sp__title { /* generic fallback */ }
}

/* Long titles need smaller font */
@media (max-width: 767px) {
  .page_hero_sp__title { font-size: clamp(28px, 8vw, 40px); word-break: keep-all; overflow-wrap: anywhere; }
  .page_hero_sp__catch { font-size: 20px; }
  .page_hero_sp__inner { padding: 48px 22px 40px; min-height: 320px; }
  .page_hero_sp { min-height: 320px; }
}


/* ===================================================================
 * Pass 45 — page_hero_sp image brightness + position to hide baked-in logo
 * =================================================================== */
@media (max-width: 1023px) {
  .page_hero_sp__bg {
    filter: brightness(0.78) saturate(1.0) contrast(1.0) !important;
    object-position: center 65% !important;
    transform: scale(1.05) !important;
  }
  .page_hero_sp__mask {
    background: rgba(245, 240, 225, 0.42) !important;
  }
  /* Ensure title is readable */
  .page_hero_sp__title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.6) !important;
  }
  .page_hero_sp__eyebrow {
    color: #ffd4a8 !important;
    -webkit-text-fill-color: #ffd4a8 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4) !important;
  }
  .page_hero_sp__catch {
    color: #ffe0c2 !important;
    -webkit-text-fill-color: #ffe0c2 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  }
}


/* ===================================================================
 * Pass 46 — Restore left/right margin & padding for entry_post cards
 *   (Pass 39 made margin auto with 24px bottom only)
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post.post_margin {
    margin: 0 16px 28px !important;
    padding: 24px 22px 22px !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(54, 101, 59, 0.10) !important;
  }
  .entry_post.post_margin .text_box,
  .entry_post.post_margin .post_data,
  .entry_post.post_margin p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 767px) {
  .entry_post.post_margin {
    margin: 0 14px 24px !important;
    padding: 22px 18px !important;
    max-width: calc(100% - 28px) !important;
  }
}


/* ===================================================================
 * Pass 47 — Richer SP card UI: decorated headlines, drop-cap, more presence
 * =================================================================== */
@media (max-width: 1023px) {
  /* Headline with green→orange paint stroke underline */
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"],
  .entry_post.post_margin > h3 {
    position: relative !important;
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
    text-align: left !important;
    letter-spacing: 0.08em !important;
    line-height: 1.4 !important;
    padding: 0 0 14px 22px !important;
    margin: 0 0 18px !important;
    border-bottom: 2px dashed rgba(54, 101, 59, 0.22) !important;
    background: none !important;
  }
  .entry_post.post_margin .headline_title::before,
  .entry_post.post_margin > h2::before,
  .entry_post.post_margin > [class*="title"]::before,
  .entry_post.post_margin > h3::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 18px !important;
    width: 6px !important;
    background: linear-gradient(180deg, #f46416 0%, #36653b 100%) !important;
    border-radius: 3px !important;
  }
  /* Drop cap on the first paragraph */
  .entry_post.post_margin .post_data > p:first-of-type::first-letter,
  .entry_post.post_margin .text_box > .post_data > p:first-of-type::first-letter {
    font-family: 'Georgia', 'Yu Mincho', serif;
    font-size: 2.6em;
    line-height: 1;
    color: #36653b;
    float: left;
    padding: 4px 8px 0 0;
    font-weight: 800;
  }
  /* Body paragraphs */
  .entry_post.post_margin .post_data p,
  .entry_post.post_margin .text_box p {
    font-size: 14.5px !important;
    line-height: 1.95 !important;
    color: #2a2f25 !important;
    -webkit-text-fill-color: #2a2f25 !important;
    margin: 0 0 14px !important;
  }
  .entry_post.post_margin .post_data p:last-child,
  .entry_post.post_margin .text_box p:last-child { margin-bottom: 0 !important; }

  /* Decorative paint dot at top-left corner of the card */
  .entry_post.post_margin {
    position: relative !important;
  }
  .entry_post.post_margin::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    left: 20px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f46416 0%, #d95108 100%) !important;
    box-shadow: 0 3px 8px rgba(244, 100, 22, 0.42) !important;
    z-index: 2 !important;
  }
  /* Tiny signature line at bottom right */
  .entry_post.post_margin::after {
    content: "" !important;
    position: absolute !important;
    bottom: 14px !important;
    right: 18px !important;
    width: 32px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #36653b);
    z-index: 1 !important;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"] {
    font-size: 20px !important;
  }
}


/* ===================================================================
 * Pass 48 — Revert Pass 47 rich card decorations
 * =================================================================== */
@media (max-width: 1023px) {
  /* Remove orange dot top + signature line */
  .entry_post.post_margin::before,
  .entry_post.post_margin::after {
    content: none !important;
    display: none !important;
  }
  /* Reset headline to simple */
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"],
  .entry_post.post_margin > h3 {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    text-align: left !important;
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    padding: 0 0 10px 16px !important;
    margin: 0 0 14px !important;
    border-bottom: 2px dotted #f2e8d9 !important;
    background: none !important;
    position: relative !important;
  }
  .entry_post.post_margin .headline_title::before,
  .entry_post.post_margin > h2::before,
  .entry_post.post_margin > [class*="title"]::before,
  .entry_post.post_margin > h3::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    bottom: 14px !important;
    width: 4px !important;
    background: linear-gradient(180deg, #f46416 0%, #36653b 100%) !important;
    border-radius: 2px !important;
  }
  /* Remove drop cap */
  .entry_post.post_margin .post_data > p:first-of-type::first-letter,
  .entry_post.post_margin .text_box > .post_data > p:first-of-type::first-letter {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    float: none !important;
    padding: 0 !important;
    font-weight: inherit !important;
  }
}


/* ===================================================================
 * Pass 49 — Restore line breaks and spacing inside post_data on SP
 * =================================================================== */
@media (max-width: 1023px) {
  /* Bring <br> back inside text body */
  .entry_post.post_margin .post_data p br,
  .entry_post.post_margin .text_box p br {
    display: inline !important;
  }
  /* Slight extra space after each line */
  .entry_post.post_margin .post_data p,
  .entry_post.post_margin .text_box p {
    margin: 0 0 14px !important;
    font-size: 14.5px !important;
    line-height: 2.0 !important;
    color: #1f2920 !important;
    -webkit-text-fill-color: #1f2920 !important;
    letter-spacing: 0.02em;
  }
  /* Don't let the floating "↑TOP" button overlay the last line */
  body { padding-bottom: 96px !important; }
  #float_top_btn {
    bottom: 110px !important;
    right: 12px !important;
  }
}
@media (max-width: 767px) {
  .entry_post.post_margin .post_data p,
  .entry_post.post_margin .text_box p {
    font-size: 14px !important;
    line-height: 1.95 !important;
  }
}


/* ===================================================================
 * Pass 50 — Hide greeting body text on SP only (PC unchanged)
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post.entry_post_1039 {
    display: none !important;
  }
}


/* ===================================================================
 * Pass 51 — Hide only the greeting BODY (paragraphs), keep the headline
 * =================================================================== */
@media (max-width: 1023px) {
  /* Restore the section itself (Pass 50 hid the whole entry_post) */
  .entry_post.entry_post_1039 {
    display: block !important;
  }
  /* Hide only the inner text body, keep headline_title "代表挨拶" visible */
  .entry_post.entry_post_1039 .text_box,
  .entry_post.entry_post_1039 .post_data,
  .entry_post.entry_post_1039 .text_box > *,
  .entry_post.entry_post_1039 .post_data > * {
    display: none !important;
  }
}


/* ===================================================================
 * Pass 52 — about.html greeting body swap with image on SP
 *   PC: text body shown, image hidden
 *   SP/Tab: text body hidden, image shown
 * =================================================================== */
/* PC default */
.greeting_block__image { display: none; }

@media (max-width: 1023px) {
  .greeting_block__body { display: none !important; }
  .greeting_block__image {
    display: block !important;
    text-align: center !important;
    margin: 16px auto !important;
    padding: 0 16px;
    max-width: 380px;
  }
  .greeting_block__image img {
    width: 100% !important;
    height: auto !important;
    max-width: 320px;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
  }
}


/* ===================================================================
 * Pass 53 — Greeting SVG illustration (two houses + 代表挨拶 title)
 * =================================================================== */
@media (max-width: 1023px) {
  .greeting_block__image {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px auto 28px !important;
    padding: 28px 20px !important;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    text-align: center;
  }
  .greeting_houses {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    margin: 0;
  }
  .greeting_house {
    display: block;
  }
  .greeting_house--small { width: 70px; height: 64px; }
  .greeting_house--big   { width: 80px; height: 88px; }
  .greeting_block__title {
    font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 900;
    font-size: 28px;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    letter-spacing: 0.16em;
    margin: 6px 0 0;
    line-height: 1.2;
  }
}


/* ===================================================================
 * Pass 54 — Bigger greeting body text on PC
 * =================================================================== */
@media (min-width: 1024px) {
  .greeting_block {
    text-align: center;
    margin: 0 auto !important;
  }
  .greeting_block__body {
    max-width: 820px;
    margin: 24px auto 0 !important;
    text-align: left;
    padding: 0 24px !important;
  }
  .greeting_block__body p {
    font-size: 17px !important;
    line-height: 2.0 !important;
    color: #1f2920 !important;
    -webkit-text-fill-color: #1f2920 !important;
    letter-spacing: 0.03em;
    margin: 0 !important;
  }
  .greeting_block__body p br {
    display: block !important;
  }
}


/* ===================================================================
 * Pass 55 — SP greeting block: show body text below the SVG + title
 * =================================================================== */
.greeting_block__image_body { display: none; }

@media (max-width: 1023px) {
  .greeting_block__image {
    max-width: 360px !important;
    padding: 24px 18px 22px !important;
  }
  .greeting_block__image_body {
    display: block !important;
    text-align: left !important;
    margin: 14px 0 0 !important;
    width: 100% !important;
  }
  .greeting_block__image_body p {
    font-size: 13.5px !important;
    line-height: 1.9 !important;
    color: #1f2920 !important;
    -webkit-text-fill-color: #1f2920 !important;
    margin: 0 0 10px !important;
    letter-spacing: 0.02em;
  }
  .greeting_block__image_body p:last-child {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767px) {
  .greeting_block__image_body p {
    font-size: 13px !important;
    line-height: 1.85 !important;
  }
}


/* ===================================================================
 * Pass 56 — Vertical margin around bnr_contact CTA block
 * =================================================================== */
.contact_cta_wrap {
  margin: 48px auto !important;
}
@media (max-width: 1023px) {
  .contact_cta_wrap {
    margin: 40px auto 40px !important;
    padding: 0 16px !important;
  }
}
@media (max-width: 767px) {
  .contact_cta_wrap {
    margin: 32px auto 36px !important;
    padding: 0 14px !important;
  }
}


/* ===================================================================
 * Pass 57 — Contact form (iqfm-table) becomes vertical on SP
 *   Labels stack ABOVE input fields, inputs span full width
 * =================================================================== */
@media (max-width: 1023px) {
  table.iqfm-table,
  table.iqfm-table tbody,
  table.iqfm-table tr,
  table.iqfm-table th,
  table.iqfm-table td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  table.iqfm-table tr {
    margin: 0 0 18px !important;
    padding: 0 !important;
  }
  table.iqfm-table th,
  table.iqfm-table td:first-child {
    text-align: left !important;
    padding: 0 0 6px !important;
    background: transparent !important;
    color: #1d3220 !important;
    -webkit-text-fill-color: #1d3220 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  table.iqfm-table td {
    padding: 0 !important;
  }
  /* The cell holding the actual input */
  table.iqfm-table td:last-child,
  table.iqfm-table td:not(:first-child) {
    width: 100% !important;
  }
  /* All input fields full width */
  table.iqfm-table input[type="text"],
  table.iqfm-table input[type="email"],
  table.iqfm-table input[type="tel"],
  table.iqfm-table input[type="number"],
  table.iqfm-table textarea,
  table.iqfm-table select,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #d8c2a4 !important;
    border-radius: 8px !important;
    background: #fffefb !important;
  }
  table.iqfm-table .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
  }
  /* Radio / checkbox spacing */
  table.iqfm-table .wpcf7-list-item {
    display: inline-flex !important;
    margin: 0 14px 6px 0 !important;
  }
}
@media (max-width: 767px) {
  table.iqfm-table tr { margin-bottom: 16px !important; }
}


/* ===================================================================
 * Pass 58 — Form inputs shrink with padding to avoid right-edge clipping
 * =================================================================== */
@media (max-width: 1023px) {
  /* Wrap the entire form to give breathing room */
  .wpcf7 form,
  form.wpcf7-form,
  .wpcf7,
  .iqfm-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Inputs slightly narrower than full width */
  table.iqfm-table input[type="text"],
  table.iqfm-table input[type="email"],
  table.iqfm-table input[type="tel"],
  table.iqfm-table input[type="number"],
  table.iqfm-table textarea,
  table.iqfm-table select,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Make sure the cell holding the input doesn't overflow */
  table.iqfm-table td,
  table.iqfm-table th {
    padding-right: 4px !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }
}
@media (max-width: 767px) {
  .wpcf7 form,
  form.wpcf7-form { padding-left: 14px !important; padding-right: 14px !important; }
}


/* ===================================================================
 * Pass 59 — TEL / FAX 3 inputs stay in one row on SP
 *   (Pass 57 made every td a block; override for the tel/fax cells)
 * =================================================================== */
@media (max-width: 1023px) {
  /* Override the block display from Pass 57 for cells holding tel/fax triplets */
  table.iqfm-table td:has(input[name="tel1"]),
  table.iqfm-table td:has(input[name="fax1"]) {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  table.iqfm-table td:has(input[name="tel1"]) > .wpcf7-form-control-wrap,
  table.iqfm-table td:has(input[name="fax1"]) > .wpcf7-form-control-wrap {
    display: inline-flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }
  table.iqfm-table td:has(input[name="tel1"]) input[type="tel"],
  table.iqfm-table td:has(input[name="fax1"]) input[type="tel"],
  table.iqfm-table td:has(input[name="tel1"]) input,
  table.iqfm-table td:has(input[name="fax1"]) input {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    text-align: center !important;
    font-size: 16px !important;
  }
}


/* ===================================================================
 * Pass 60 — Constrain ".half_sub_entry_title" green title on SP
 * =================================================================== */
@media (max-width: 1023px) {
  .half_sub_entry_title,
  h4.half_sub_entry_title,
  .half_sub_entry_title.title_158 {
    display: block !important;
    width: calc(100% - 32px) !important;
    max-width: 360px !important;
    margin: 24px auto !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    background: linear-gradient(135deg, #36653b 0%, #2a5030 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.4 !important;
  }
  /* Privacy block content also full width inside the page */
  .privacy_block {
    margin: 0 16px !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,0.6);
    border-radius: 8px;
  }
  .privacy_block p { font-size: 13px !important; line-height: 1.85 !important; margin: 0 0 12px !important; }
  .privacy_block ul { padding-left: 20px !important; }
  .privacy_block li { font-size: 12.5px !important; line-height: 1.8 !important; margin: 0 0 6px !important; }
}
@media (max-width: 767px) {
  .half_sub_entry_title { width: calc(100% - 28px) !important; padding: 10px 14px !important; font-size: 14px !important; }
}


/* ===================================================================
 * Pass 61 — privacy_block: enforce wrap so text fits viewport
 * =================================================================== */
@media (max-width: 1023px) {
  .privacy_block {
    margin: 0 16px !important;
    padding: 16px 18px 18px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    background: rgba(255,255,255,0.6) !important;
    border-radius: 8px !important;
  }
  .privacy_block p,
  .privacy_block strong,
  .privacy_block li {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: pretty;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .privacy_block p {
    font-size: 13px !important;
    line-height: 1.9 !important;
    margin: 0 0 12px !important;
  }
  .privacy_block strong {
    display: block;
    font-size: 13.5px !important;
    color: #36653b !important;
    -webkit-text-fill-color: #36653b !important;
    margin: 6px 0 8px !important;
    font-weight: 800 !important;
  }
  .privacy_block ul {
    padding-left: 22px !important;
    margin: 0 !important;
    list-style: square !important;
  }
  .privacy_block li {
    font-size: 12.5px !important;
    line-height: 1.85 !important;
    margin: 0 0 8px !important;
    padding-right: 4px !important;
  }
}
@media (max-width: 767px) {
  .privacy_block {
    margin: 0 14px !important;
    padding: 14px 14px 16px !important;
  }
  .privacy_block ul { padding-left: 18px !important; }
}


/* ===================================================================
 * Pass 62 — Add gap between contact intro paragraph and the form table
 * =================================================================== */
@media (max-width: 1023px) {
  /* The intro paragraph above the form */
  .entry_post.post_margin .post_data {
    margin-bottom: 28px !important;
  }
  .entry_post.post_margin .post_data p:last-of-type {
    margin-bottom: 0 !important;
  }
  /* Top margin on the form itself */
  .wpcf7 form,
  form.wpcf7-form,
  table.iqfm-table {
    margin-top: 24px !important;
  }
  /* First row of the table also gets a bit of space */
  table.iqfm-table tr:first-child {
    margin-top: 8px !important;
  }
}


/* ===================================================================
 * Pass 63 — Bigger gap between entry_post cards on TOP/SP
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post.post_margin {
    margin: 0 16px 40px !important;
  }
  .entry_post.post_margin:last-child {
    margin-bottom: 20px !important;
  }
}
@media (max-width: 767px) {
  .entry_post.post_margin {
    margin: 0 14px 36px !important;
  }
}


/* ===================================================================
 * Pass 64 — Make all headline_title elements wrap properly on SP
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"],
  .entry_post.post_margin > h3,
  .headline_title,
  .entry_title,
  .sub_entry_title,
  .inline_title,
  .half_sub_entry_title,
  h2[class*="title"],
  h3[class*="title"],
  h4[class*="title"] {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 6px !important;
  }
  /* Smaller headings on narrow screens */
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"] {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 767px) {
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"] {
    font-size: 16px !important;
  }
}


/* ===================================================================
 * Pass 65 — Inner padding for LP detail/section body on SP
 * =================================================================== */
@media (max-width: 1023px) {
  .lp_detail,
  .lp_detail__body,
  .lp_section.lp_detail,
  .lp_lead,
  .lp_section.lp_lead,
  .lp_section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .lp_detail__body p,
  .lp_lead__p,
  .lp_lead p,
  .lp_section p {
    font-size: 14.5px !important;
    line-height: 1.95 !important;
    margin: 0 0 14px !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-wrap: pretty;
  }
}
@media (max-width: 767px) {
  .lp_detail,
  .lp_detail__body,
  .lp_section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .lp_detail__body p,
  .lp_lead__p,
  .lp_section p {
    font-size: 14px !important;
  }
}


/* ===================================================================
 * Pass 66 — LP hero overlay: center the elements horizontally
 *   (Keep text inside each element left-aligned, but box is centered)
 * =================================================================== */
@media (max-width: 767px) {
  .lp_hero_overlay {
    align-items: center !important;
    text-align: left !important;
  }
  .lp_hero_overlay__inner {
    align-items: center !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .lp_hero_overlay__eyebrow,
  .lp_hero_overlay__title,
  .lp_hero_overlay__lead {
    text-align: left !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
  .lp_hero_overlay__cta {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 320px !important;
    align-self: center !important;
  }
}


/* ===================================================================
 * Pass 67 — LP hero: vertical center inside main_teaser
 * =================================================================== */
@media (max-width: 767px) {
  .lp_hero_overlay {
    justify-content: center !important;
    align-items: center !important;
    padding: 32px 24px !important;
  }
  .lp_hero_overlay__inner {
    justify-content: center !important;
    align-items: center !important;
  }
}


/* ===================================================================
 * Pass 68 — Better line-balance for short headlines (avoid 1-char widow)
 * =================================================================== */
@media (max-width: 1023px) {
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"],
  .entry_post.post_margin > h3,
  .headline_title,
  .entry_title,
  .sub_entry_title,
  .inline_title,
  .half_sub_entry_title,
  h2[class*="title"],
  h3[class*="title"],
  h4[class*="title"] {
    text-wrap: balance !important;
    -webkit-text-wrap: balance !important;
    word-break: keep-all !important;
    overflow-wrap: anywhere !important;
    line-break: strict !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 767px) {
  .entry_post.post_margin .headline_title,
  .entry_post.post_margin > h2,
  .entry_post.post_margin > [class*="title"] {
    font-size: 15.5px !important;
    letter-spacing: 0 !important;
  }
}