/*
 * FUJICOLOR PLAZA Kamishakujii — visual polish v1.4
 * Goal: preserve the existing visual identity while tightening spacing,
 * typographic rhythm and mobile alignment across the whole site.
 */

:root{
  --fc-section-y: clamp(42px, 5vw, 62px);
  --fc-section-y-compact: clamp(28px, 3.6vw, 44px);
  --fc-card-pad: clamp(20px, 2.2vw, 26px);
  --fc-copy-gap: 10px;
  --fc-content-gap: clamp(18px, 2.6vw, 28px);
}

/* ---------- typography rhythm ---------- */
body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main h1,
main h2,
main h3,
main h4{
  text-wrap: balance;
}

main p,
main li,
main dd{
  text-wrap: pretty;
}

body:not(.home-page) .service-kicker,
body:not(.home-page) .mini-label,
body:not(.home-page) .label{
  margin-bottom: 6px !important;
}

body:not(.home-page) .service-block-header{
  margin-bottom: 10px !important;
}

body:not(.home-page) .service-copy-card h2,
body:not(.home-page) .service-copy-card h3,
body:not(.home-page) .service-block h2,
body:not(.home-page) .service-block h3,
body:not(.home-page) .service-block h4,
body:not(.home-page) .card h2,
body:not(.home-page) .card h3{
  line-height: 1.38 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

body:not(.home-page) .service-copy-card p,
body:not(.home-page) .service-block p,
body:not(.home-page) .service-block li,
body:not(.home-page) .card p,
body:not(.home-page) .card li{
  line-height: 1.72 !important;
}

body:not(.home-page) .service-copy-card p:last-child,
body:not(.home-page) .service-block p:last-child,
body:not(.home-page) .card p:last-child{
  margin-bottom: 0 !important;
}

/* ---------- service page vertical rhythm ---------- */
body:not(.home-page):not(.product-detail-page) main > .hero{
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(78px, 7vw, 90px) !important;
  padding-bottom: clamp(66px, 6vw, 82px) !important;
}

body:not(.home-page):not(.product-detail-page) .hero h1{
  margin-bottom: 14px !important;
  line-height: 1.28 !important;
}

body:not(.home-page):not(.product-detail-page) .hero .lead{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.68 !important;
}

body:not(.home-page):not(.product-detail-page) .hero .cta,
body:not(.home-page):not(.product-detail-page) .hero .hero-actions{
  margin-top: 24px !important;
}

body:not(.home-page) main > .service-editorial{
  padding-top: var(--fc-section-y) !important;
  padding-bottom: var(--fc-section-y) !important;
}

/* Sections that are mostly continuation content should not look like a new page. */
body:not(.home-page) main > .service-editorial + .service-editorial{
  padding-top: var(--fc-section-y-compact) !important;
}

body:not(.home-page) .service-intro-grid,
body:not(.home-page) .detail-grid,
body:not(.home-page) .service-sections,
body:not(.home-page) .calendar-block-grid{
  gap: var(--fc-content-gap) !important;
}

/* ---------- cards ---------- */
body:not(.home-page) .service-copy-card,
body:not(.home-page) .service-block,
body:not(.home-page) .card{
  box-sizing: border-box;
}

body:not(.home-page) .service-copy-card,
body:not(.home-page) .service-block{
  padding: var(--fc-card-pad) !important;
  border-radius: 20px !important;
}

body:not(.home-page) .service-price-band{
  margin-top: 14px !important;
  gap: 8px !important;
}

body:not(.home-page) .service-price-chip{
  min-height: 0 !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  line-height: 1.35 !important;
}

body:not(.home-page) .service-note,
body:not(.home-page) .notice{
  margin-top: 14px !important;
}

/* ---------- images ---------- */
body:not(.home-page) figure.service-image,
body:not(.home-page) .service-image{
  margin-left: auto !important;
  margin-right: auto !important;
}

body:not(.home-page) .service-image img,
body:not(.home-page) .product-visual img,
body:not(.home-page) .product-image-card img{
  display: block;
}

/* ---------- tables ---------- */
body:not(.home-page) .table-wrap{
  margin-top: 18px !important;
}

body:not(.home-page) .service-table th,
body:not(.home-page) .service-table td,
body:not(.home-page) .goods-table th,
body:not(.home-page) .goods-table td{
  vertical-align: middle !important;
  line-height: 1.48 !important;
}

/* ---------- related services / footer ---------- */
body:not(.home-page) .related{
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

body:not(.home-page) .related-text-nav{
  margin-top: 12px !important;
}

body:not(.home-page) .service-link-groups{
  margin-top: 16px !important;
}

body:not(.home-page) .service-footer-info{
  margin-top: 14px !important;
}

/* ---------- product detail pages ----------
 * Keep the carefully tuned horizontal hero composition intact.
 * Only tighten content below the hero.
 */
body.product-detail-page .detail-grid{
  gap: clamp(22px, 3vw, 34px) !important;
}

body.product-detail-page .notice,
body.product-detail-page .other,
body.product-detail-page .product-links{
  margin-top: clamp(24px, 3.2vw, 36px) !important;
}

/* ---------- homepage ---------- */



body.home-page .services,
body.home-page .products,
body.home-page .owner,
body.home-page .sns,
body.home-page .access{
  padding-top: clamp(40px, 5vw, 56px) !important;
  padding-bottom: clamp(40px, 5vw, 56px) !important;
}

body.home-page .home-service-hub .title,
body.home-page .products .title,
body.home-page .owner .title,
body.home-page .sns .title,
body.home-page .access .title{
  margin-bottom: 14px !important;
}

body.home-page .home-service-intro{
  margin-top: 0 !important;
  margin-bottom: 30px !important;
}

body.home-page .home-service-category-grid{
  gap: clamp(30px, 4.5vw, 42px) !important;
}

body.home-page .home-service-category-visual{
  margin-bottom: 14px !important;
}

body.home-page .home-service-category-head{
  margin-bottom: 8px !important;
  align-items: flex-start !important;
}

body.home-page .home-service-category-head h3{
  line-height: 1.32 !important;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}

body.home-page .home-service-link-list a{
  min-height: 46px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

body.home-page .products-grid,
body.home-page .owner-grid,
body.home-page .access-grid{
  gap: clamp(18px, 3vw, 28px) !important;
}

body.home-page .product-card{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

body.home-page .store-news-card.cms-news-card{
  padding: 14px 16px !important;
}

body.home-page .cms-news-home-items .store-news-card + .store-news-card{
  margin-top: 10px !important;
}

/* ---------- mobile ---------- */
@media (max-width: 760px){
  :root{
    --fc-section-y: 30px;
    --fc-section-y-compact: 18px;
    --fc-card-pad: 18px;
    --fc-content-gap: 18px;
  }

  main h1,
  main h2,
  main h3,
  main h4{
    letter-spacing: 0 !important;
  }

  body:not(.home-page):not(.product-detail-page) main > .hero{
    padding-top: 68px !important;
    padding-bottom: 54px !important;
  }

  body:not(.home-page):not(.product-detail-page) .hero h1{
    margin-bottom: 11px !important;
    line-height: 1.26 !important;
  }

  body:not(.home-page):not(.product-detail-page) .hero .lead{
    line-height: 1.62 !important;
  }

  body:not(.home-page):not(.product-detail-page) .hero .cta,
  body:not(.home-page):not(.product-detail-page) .hero .hero-actions{
    margin-top: 18px !important;
  }

  body:not(.home-page) main > .service-editorial{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not(.home-page) .service-copy-card,
  body:not(.home-page) .service-block{
    border-radius: 18px !important;
  }

  body:not(.home-page) .service-copy-card h2,
  body:not(.home-page) .service-copy-card h3,
  body:not(.home-page) .service-block h2,
  body:not(.home-page) .service-block h3,
  body:not(.home-page) .service-block h4{
    margin-bottom: 8px !important;
  }

  body:not(.home-page) .service-copy-card p,
  body:not(.home-page) .service-block p,
  body:not(.home-page) .service-block li{
    line-height: 1.68 !important;
  }

  body:not(.home-page) .service-price-band{
    margin-top: 11px !important;
  }

  body:not(.home-page) .service-price-chip{
    padding: 8px 10px !important;
  }

  body:not(.home-page) .table-wrap{
    margin-top: 14px !important;
  }

  body:not(.home-page) .service-table th,
  body:not(.home-page) .service-table td,
  body:not(.home-page) .goods-table th,
  body:not(.home-page) .goods-table td{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body:not(.home-page) .related{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  body:not(.home-page) .service-link-groups{
    margin-top: 12px !important;
  }


  body.home-page .services,
  body.home-page .products,
  body.home-page .owner,
  body.home-page .sns,
  body.home-page .access{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  body.home-page .home-service-intro{
    margin-bottom: 24px !important;
  }

  body.home-page .home-service-category-grid{
    gap: 28px !important;
  }

  body.home-page .home-service-category{
    padding-top: 10px !important;
  }

  body.home-page .home-service-category-visual{
    margin-bottom: 12px !important;
  }

  body.home-page .home-service-category-head{
    margin-bottom: 5px !important;
  }

  body.home-page .home-service-link-list a{
    min-height: 44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body.home-page .product-card{
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  body.home-page .store-news-card.cms-news-card{
    padding: 13px 14px !important;
  }
}

/* ---------- very narrow phones ---------- */
@media (max-width: 390px){
  body:not(.home-page) main > .service-editorial{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body:not(.home-page) .service-copy-card,
  body:not(.home-page) .service-block{
    padding: 16px !important;
  }

}