/* =========================================================
   Clear Link v1.11.15 — mobile final QA layer
   Scope: smartphone/tablet portrait only (<= 820px)
   Purpose: requested mobile fixes only; desktop remains untouched.
   ========================================================= */

@media (max-width:820px){
  /* -------------------------------------------------------
     1. FV直下の「画像部分」のみを非表示
     Copy remains; no empty fixed-height image area is left behind.
     ------------------------------------------------------- */
  .bp-design .bp-signature{
    padding:24px 0 12px!important;
    background:transparent!important;
  }
  .bp-design .bp-signature__frame{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:0 16px!important;
    background:transparent!important;
    background-image:none!important;
  }
  .bp-design .bp-signature__copy{
    width:100%!important;
    max-width:720px!important;
    margin:0 auto!important;
    padding:0!important;
    text-align:center!important;
    background:transparent!important;
    color:var(--cl-ink,#1d2923)!important;
  }
  .bp-design .bp-signature__copy small,
  .bp-design .bp-signature__copy h2,
  .bp-design .bp-signature__copy p{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .bp-design .bp-signature__copy p{
    max-width:34em!important;
  }
  .bp-design .bp-signature__visuals,
  .bp-design .bp-signature__image,
  .bp-design .bp-signature__ornament{
    display:none!important;
  }

  /* -------------------------------------------------------
     2. 中央見出し + リード文は同じセンター軸に統一
     Only explanatory lead copy is centered; normal body copy stays readable.
     ------------------------------------------------------- */
  .site-unified-hero .home-hero__lead,
  main section .section-title__lead,
  main section .bp-gallery__lead,
  main section .cf-heading__lead,
  main section .cl-final-cta__lead,
  main section .support-links__lead,
  main section .support-links__lead-copy>p,
  main section :where(.home-section-head,.sf-heading,.pf-heading,.cf-heading,.af-heading,.ftc-heading,.ft-section-head,.ft-consult__head,.ft-promise__heading,.cl-common-faq__heading)>p:not(:first-child),
  main section :where(.sf-heading-grid,.pf-heading-grid)>p,
  main section .bp-section__heading>p:not(:first-child),
  main section .bp-page-title__main>p,
  main section .column-category-heading>p,
  main section .column-featured__heading>p,
  main section .column-latest__heading>p{
    width:min(100%,34em)!important;
    max-width:34em!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
    text-wrap:pretty!important;
  }

  /* -------------------------------------------------------
     3. カードCTAは中央へ
     ------------------------------------------------------- */
  main :where(
    .reform-menu-card,.work-card,.journal-card,.ft-guide-card,.ft-case-card,
    .sf-hub-card,.pf-hub-card,.cf-menu-card,.af-hub-card,.bp-card[href],
    .first-guide__links>a,.find-grid>a,.support-links__grid>a,.related-menu__grid>a,
    .column-guide-card,.column-category-card
  ) .cl-card-action,
  main :where(.sf-water-menu>a,.sf-menu-card,.pf-menu-card) .cl-card-action{
    display:flex!important;
    width:max-content!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    white-space:normal!important;
  }

  /* Generic card CTA fallback: if the card action is a direct child, center it. */
  main :where(article,a)> .cl-card-action,
  main :where(article,a)>div> .cl-card-action{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* -------------------------------------------------------
     4. Accordion / FAQ affordance & 7. FAQ format unification
     ------------------------------------------------------- */
  .faq-home>.container,
  .cl-common-faq__stack,
  .sf-faq>.sf-shell,
  .pf-faq>.pf-shell,
  .bp-faq__wrap,
  .fq-shell{
    width:calc(100% - 32px)!important;
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  .fq-group__grid{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
    width:100%!important;
  }
  .fq-group__heading{
    width:100%!important;
    max-width:760px!important;
    margin:0 auto!important;
    position:static!important;
    text-align:center!important;
  }
  .fq-group__heading>span{
    margin-bottom:16px!important;
  }
  .fq-group__heading .fq-kicker,
  .fq-group__heading h2{
    text-align:center!important;
  }

  .faq-accordion,
  .cl-common-faq__list,
  .sf-faq-list,
  .pf-faq-list,
  .bp-faq__list,
  .fq-list{
    width:100%!important;
    max-width:920px!important;
    margin:0 auto!important;
    border:0!important;
    display:grid!important;
    gap:10px!important;
  }

  .faq-accordion details,
  .cl-common-faq__list details,
  .sf-faq-list details,
  .pf-faq-list details,
  .bp-faq__list details,
  .fq-list details{
    width:100%!important;
    margin:0!important;
    border:1px solid #d4ddd8!important;
    border-radius:12px!important;
    background:#fff!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }

  .faq-accordion summary,
  .cl-common-faq__list summary,
  .sf-faq-list summary,
  .pf-faq-list summary,
  .bp-faq__list summary,
  .fq-list summary{
    list-style:none!important;
    cursor:pointer!important;
    position:relative!important;
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr) 36px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:68px!important;
    margin:0!important;
    padding:15px 14px!important;
    box-sizing:border-box!important;
    color:#203029!important;
    text-align:left!important;
    font-family:var(--cl-serif,Georgia,serif)!important;
    font-size:16px!important;
    font-weight:500!important;
    line-height:1.6!important;
  }
  .faq-accordion summary::-webkit-details-marker,
  .cl-common-faq__list summary::-webkit-details-marker,
  .sf-faq-list summary::-webkit-details-marker,
  .pf-faq-list summary::-webkit-details-marker,
  .bp-faq__list summary::-webkit-details-marker,
  .fq-list summary::-webkit-details-marker{display:none!important}

  .faq-accordion summary>span,
  .cl-common-faq__list summary>span,
  .sf-faq-list summary>span,
  .pf-faq-list summary>span,
  .bp-faq__list summary>span,
  .fq-list summary>span{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:28px!important;
    height:28px!important;
    margin:0!important;
    color:#527565!important;
    font-family:Georgia,serif!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1!important;
  }

  .fq-list summary strong{
    min-width:0!important;
    max-width:100%!important;
    font:inherit!important;
    color:inherit!important;
    line-height:inherit!important;
  }

  .faq-accordion summary i,
  .cl-common-faq__list summary i,
  .sf-faq-list summary i,
  .pf-faq-list summary i,
  .bp-faq__list summary i,
  .fq-list summary i{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:34px!important;
    height:34px!important;
    margin:0!important;
    border:1px solid #9fb3a9!important;
    border-radius:999px!important;
    background:#f3f7f4!important;
    color:#315b49!important;
    font-size:0!important;
    line-height:1!important;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease!important;
  }
  .faq-accordion summary i::before,
  .cl-common-faq__list summary i::before,
  .sf-faq-list summary i::before,
  .pf-faq-list summary i::before,
  .bp-faq__list summary i::before,
  .fq-list summary i::before{
    content:"＋"!important;
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    background:none!important;
    color:inherit!important;
    font-family:Arial,sans-serif!important;
    font-size:19px!important;
    font-weight:400!important;
    line-height:1!important;
    transform:none!important;
  }
  .faq-accordion summary i::after,
  .cl-common-faq__list summary i::after,
  .sf-faq-list summary i::after,
  .pf-faq-list summary i::after,
  .bp-faq__list summary i::after,
  .fq-list summary i::after{content:none!important;display:none!important}

  .faq-accordion details[open] summary i,
  .cl-common-faq__list details[open] summary i,
  .sf-faq-list details[open] summary i,
  .pf-faq-list details[open] summary i,
  .bp-faq__list details[open] summary i,
  .fq-list details[open] summary i{
    background:#315b49!important;
    border-color:#315b49!important;
    color:#fff!important;
  }
  .faq-accordion details[open] summary i::before,
  .cl-common-faq__list details[open] summary i::before,
  .sf-faq-list details[open] summary i::before,
  .pf-faq-list details[open] summary i::before,
  .bp-faq__list details[open] summary i::before,
  .fq-list details[open] summary i::before{content:"−"!important}

  .cl-common-faq__list details>div,
  .sf-faq-list details>div,
  .pf-faq-list details>div,
  .bp-faq__list details>div,
  .fq-answer{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    margin:0!important;
    padding:0 14px 18px!important;
    box-sizing:border-box!important;
    color:#5f6d66!important;
  }
  .cl-common-faq__list details>div>b,
  .sf-faq-list details>div>b,
  .pf-faq-list details>div>b,
  .bp-faq__list details>div>b,
  .fq-answer>b{
    color:#527565!important;
    font-family:Georgia,serif!important;
    font-size:14px!important;
    font-weight:600!important;
    line-height:1.75!important;
  }
  .cl-common-faq__list details>div p,
  .sf-faq-list details>div p,
  .pf-faq-list details>div p,
  .bp-faq__list details>div p,
  .fq-answer p{
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    color:#5f6d66!important;
    font-size:14px!important;
    line-height:1.8!important;
    overflow-wrap:anywhere!important;
  }
  .faq-accordion details>p{
    position:relative!important;
    width:100%!important;
    margin:0!important;
    padding:0 14px 18px 52px!important;
    box-sizing:border-box!important;
    color:#5f6d66!important;
    font-size:14px!important;
    line-height:1.8!important;
  }
  .faq-accordion details>p::before{
    content:"A";
    position:absolute;
    left:14px;
    top:0;
    width:28px;
    color:#527565;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:600;
    text-align:center;
  }

  /* -------------------------------------------------------
     5. Card overflow guard
     ------------------------------------------------------- */
  main :where(
    .reform-menu-card,.work-card,.journal-card,.voice-card,.ft-guide-card,.ft-case-card,
    .sf-card,.pf-card,.cf-card,.af-card,.bp-card,
    .sf-hub-card,.pf-hub-card,.cf-menu-card,.af-hub-card,
    .sf-water-menu>a,.sf-kitchen-flow>article,.sf-bath-grid>article,
    .sf-washroom-flow>article,.sf-plan-grid>article,.sf-door-grid>article,
    .sf-transform-grid>article,.sf-heating-grid>article,.sf-store-flow>article,
    .sf-custom-day>article,.ftc-three>article,.ftc-four>article,
    .ftc-checklist>article,.af-process-list>li,.ftc-timeline>li,
    .find-grid>a,.support-links__grid>a,.service-reasons article,.related-menu__grid>a,
    .bp-service-grid>a,.bp-problem-grid>a,.first-guide__links>a,
    .column-guide-card,.column-category-card
  ){
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    box-sizing:border-box!important;
  }
  main :where(
    .reform-menu-card,.work-card,.journal-card,.voice-card,.ft-guide-card,.ft-case-card,
    .sf-card,.pf-card,.cf-card,.af-card,.bp-card,
    .sf-hub-card,.pf-hub-card,.cf-menu-card,.af-hub-card,
    .sf-water-menu>a,.sf-kitchen-flow>article,.sf-bath-grid>article,
    .sf-washroom-flow>article,.sf-plan-grid>article,.sf-door-grid>article,
    .sf-transform-grid>article,.sf-heating-grid>article,.sf-store-flow>article,
    .sf-custom-day>article,.ftc-three>article,.ftc-four>article,
    .ftc-checklist>article,.af-process-list>li,.ftc-timeline>li,
    .find-grid>a,.support-links__grid>a,.service-reasons article,.related-menu__grid>a,
    .bp-service-grid>a,.bp-problem-grid>a,.first-guide__links>a,
    .column-guide-card,.column-category-card
  ) :where(div,h2,h3,p,span,strong,small){
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  main :where(
    .reform-menu-card,.work-card,.journal-card,.voice-card,.ft-guide-card,.ft-case-card,
    .sf-card,.pf-card,.cf-card,.af-card,.bp-card,
    .sf-hub-card,.pf-hub-card,.cf-menu-card,.af-hub-card,
    .sf-water-menu>a,.sf-kitchen-flow>article,.sf-bath-grid>article,
    .sf-washroom-flow>article,.sf-plan-grid>article,.sf-door-grid>article,
    .sf-transform-grid>article,.sf-heating-grid>article,.sf-store-flow>article,
    .sf-custom-day>article,.ftc-three>article,.ftc-four>article,
    .ftc-checklist>article,.af-process-list>li,.ftc-timeline>li,
    .find-grid>a,.support-links__grid>a,.service-reasons article,.related-menu__grid>a,
    .bp-service-grid>a,.bp-problem-grid>a,.first-guide__links>a,
    .column-guide-card,.column-category-card
  ) p{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* Headings remain readable and do not split arbitrary Japanese phrases. */
  main h1:not(.entry-content h1),
  main h2:not(.entry-content h2),
  main h3:not(.entry-content h3){
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    line-break:strict!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
  @supports (word-break:auto-phrase){
    main h1:not(.entry-content h1),
    main h2:not(.entry-content h2),
    main h3:not(.entry-content h3){word-break:auto-phrase!important}
  }

  /* -------------------------------------------------------
     6. Narrative content blocks: heading and body share the same start axis.
     Card alignment is intentionally left to each existing card design.
     ------------------------------------------------------- */
  main :where(
    .sf-philosophy-grid>div,.sf-check__grid>div,.pf-unsure-grid>div,
    .pf-check-grid>div,.cf-budget__grid>div,.cf-insurance__grid>div,
    .af-philosophy__grid>div,.af-position__grid>div,.page-intro__grid>div,
    .service-concept__grid>div
  ) :where(h2,h3,p){
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }

  /* FAQ section CTAs remain centered too. */
  main :where(.cl-common-faq__action,.sf-faq__action,.pf-faq__action,.bp-faq__action,.home-section-action){
    display:flex!important;
    justify-content:center!important;
    width:100%!important;
  }

  /* -------------------------------------------------------
     8. Forced-break policy support
     Semantic JS handles the actual two-line fit; these are safe fallbacks.
     ------------------------------------------------------- */
  main .cl-heading-line{
    display:block!important;
    width:100%!important;
  }
  main .cl-semantic-two-lines{
    white-space:normal!important;
    text-wrap:balance!important;
  }
  main .cl-semantic-mobile-natural{
    white-space:normal!important;
    text-wrap:balance!important;
    line-break:strict!important;
    overflow-wrap:normal!important;
  }
  @supports (word-break:auto-phrase){
    main .cl-semantic-mobile-natural{word-break:auto-phrase!important}
  }
}

@media (max-width:390px){
  /* Very narrow devices: keep FAQ/card copy inside the viewport without reducing tap size. */
  .faq-accordion summary,
  .cl-common-faq__list summary,
  .sf-faq-list summary,
  .pf-faq-list summary,
  .bp-faq__list summary,
  .fq-list summary{
    grid-template-columns:26px minmax(0,1fr) 34px!important;
    gap:8px!important;
    padding:14px 12px!important;
    font-size:15px!important;
  }
}

/* =========================================================
   Specificity locks for v1.11.15
   Earlier legacy files use !important on global mobile headings/copy.
   These selectors intentionally carry class specificity and are loaded last.
   ========================================================= */
@media (max-width:820px){
  /* Card/body overflow lock. Existing card text alignment is preserved. */
  main .bp-card p,
  main .sf-card p,
  main .pf-card p,
  main .cf-card p,
  main .af-card p,
  main .reform-menu-card p,
  main .work-card p,
  main .journal-card p,
  main .voice-card p,
  main .ft-guide-card p,
  main .ft-case-card p,
  main .sf-hub-card p,
  main .pf-hub-card p,
  main .cf-menu-card p,
  main .af-hub-card p,
  main .column-guide-card p,
  main .column-category-card p,
  main .sf-water-menu>a p,
  main .sf-kitchen-flow>article p,
  main .sf-bath-grid>article p,
  main .sf-washroom-flow>article p,
  main .sf-plan-grid>article p,
  main .sf-door-grid>article p,
  main .sf-transform-grid>article p,
  main .sf-heating-grid>article p,
  main .sf-store-flow>article p,
  main .sf-custom-day>article p,
  main .ftc-three>article p,
  main .ftc-four>article p,
  main .ftc-checklist>article p,
  main .find-grid>a p,
  main .support-links__grid>a p,
  main .service-reasons article p,
  main .related-menu__grid>a p,
  main .bp-service-grid>a p,
  main .bp-problem-grid>a p,
  main .first-guide__links>a p{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  /* Narrative content blocks are not section-title components. */
  main .sf-philosophy-grid h2,
  main .sf-philosophy-grid h3,
  main .sf-check__grid h2,
  main .sf-check__grid h3,
  main .pf-unsure-grid h2,
  main .pf-unsure-grid h3,
  main .pf-check-grid h2,
  main .pf-check-grid h3,
  main .cf-budget__grid h2,
  main .cf-budget__grid h3,
  main .cf-insurance__grid h2,
  main .cf-insurance__grid h3,
  main .af-philosophy__grid h2,
  main .af-philosophy__grid h3,
  main .af-position__grid h2,
  main .af-position__grid h3,
  main .page-intro__grid h2,
  main .page-intro__grid h3,
  main .service-concept__grid h2,
  main .service-concept__grid h3{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  main .sf-philosophy-grid p,
  main .sf-check__grid p,
  main .pf-unsure-grid p,
  main .pf-check-grid p,
  main .cf-budget__grid p,
  main .cf-insurance__grid p,
  main .af-philosophy__grid p,
  main .af-position__grid p,
  main .page-intro__grid p,
  main .service-concept__grid p{
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media (max-width:820px){
  /* Final CTA centering lock for every card family used by the theme. */
  main .reform-menu-card .cl-card-action,
  main .work-card .cl-card-action,
  main .journal-card .cl-card-action,
  main .voice-card .cl-card-action,
  main .ft-guide-card .cl-card-action,
  main .ft-case-card .cl-card-action,
  main .sf-card .cl-card-action,
  main .pf-card .cl-card-action,
  main .cf-card .cl-card-action,
  main .af-card .cl-card-action,
  main .bp-card .cl-card-action,
  main .sf-hub-card .cl-card-action,
  main .pf-hub-card .cl-card-action,
  main .cf-menu-card .cl-card-action,
  main .af-hub-card .cl-card-action,
  main .column-guide-card .cl-card-action,
  main .column-category-card .cl-card-action,
  main .sf-water-menu>a .cl-card-action,
  main .find-grid>a .cl-card-action,
  main .support-links__grid>a .cl-card-action,
  main .related-menu__grid>a .cl-card-action,
  main .bp-service-grid>a .cl-card-action,
  main .bp-problem-grid>a .cl-card-action,
  main .first-guide__links>a .cl-card-action{
    display:flex!important;
    width:max-content!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
  }
}

@media (max-width:820px){
  /* Dedicated FAQ page: keep the same guaranteed side gutters as every other FAQ. */
  .fq-shell.fq-group__grid{
    width:calc(100% - 32px)!important;
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}