/* HIMAWARI design system | All ten pages | 2026 final visual alignment
   Deliberately keeps Business, Works and Area Jack editorial identities distinct.
   This file is shared by every JP / EN page. */
:root{--hm-ink:#203b30;--hm-deep:#173d31;--hm-paper:#f6f7f2;--hm-fog:#f2f4ee;--hm-muted:#697a70;--hm-line:#d5ddd4;--hm-gold:#b99c4f;--hm-serif:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;--hm-sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
html{scroll-behavior:smooth}body{color:var(--hm-ink);-webkit-font-smoothing:antialiased}a,button{-webkit-tap-highlight-color:transparent}img{max-width:100%}a:focus-visible,button:focus-visible{outline:2px solid var(--hm-gold);outline-offset:4px}
/* One header language, across the original and independent Business frameworks. */
header.hm-site-header,header.hm-site-header.site-header{height:74px!important;min-height:74px;box-sizing:border-box;padding:0 max(28px,calc((100vw - 1160px)/2))!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;z-index:50!important;position:relative!important}
header.hm-site-header .logo{font-family:Georgia,"Times New Roman",serif!important;font-size:27px!important;font-weight:400!important;letter-spacing:.075em!important;line-height:1.1!important;color:#19372e!important;white-space:nowrap;flex:none}
header.hm-site-header .logo b{font-family:Georgia,serif!important;font-size:13px!important;font-weight:400!important;color:var(--hm-gold)!important;letter-spacing:0!important;position:relative!important;top:-8px!important;margin-left:3px!important;vertical-align:baseline!important}
header.hm-site-header .nav{margin-left:auto!important;gap:clamp(13px,1.9vw,25px)!important}header.hm-site-header .nav a{font-family:var(--hm-sans);font-size:12px;letter-spacing:.035em;color:#40584c}header.hm-site-header .lang-switch{display:flex!important;align-items:center!important;gap:8px!important;flex:none!important;margin:0 0 0 clamp(13px,2vw,28px)!important;font:600 11px/1.4 Arial,sans-serif!important;letter-spacing:.09em!important;white-space:nowrap}header.hm-site-header .lang-switch a{padding:5px 1px}header.hm-site-header .lang-switch a[aria-current=page]{color:var(--hm-deep);opacity:1;border-bottom:1px solid var(--hm-deep)}
header.hm-site-header .menu{color:var(--hm-ink)!important;background:none!important;border:0!important;cursor:pointer!important}
/* The typographic rhythm is common; layouts are purposefully distinct. */
body:not(.en-page){font-family:var(--hm-sans)}.en-page{font-family:Arial,Helvetica,sans-serif}
.business-page{--paper:var(--hm-paper);--deep:var(--hm-deep);--ink:var(--hm-ink);--muted:var(--hm-muted);--rule:var(--hm-line)}
.business-page .intro{background:var(--hm-paper)!important;color:var(--hm-ink)!important;min-height:560px!important;max-width:none!important;padding-top:48px!important;padding-bottom:42px!important}
.business-page .intro-main{max-width:1070px!important;margin:52px auto 40px!important}.business-page .micro{color:var(--hm-muted);letter-spacing:.2em!important}.business-page .intro h1,.business-page .intro-sentence{font-family:var(--hm-serif)!important;font-weight:400!important;color:var(--hm-ink)}.business-page .intro h1{letter-spacing:.055em!important}.business-page .intro-sentence{letter-spacing:.035em!important}.business-page .intro-sentence em{color:#4e7664!important}.business-page .intro-composition{margin-top:65px!important}.business-page .intro-mark{background:#a7b8aa!important;width:65%!important}
.business-page.en-page .intro h1,.business-page.en-page .intro-sentence,.business-page.en-page .practice-heading h2,.business-page.en-page .large-lines,.business-page.en-page .work-link{font-family:Georgia,"Times New Roman",serif!important;letter-spacing:.01em!important}
.business-page .practice{background:var(--hm-deep)!important;padding-top:95px!important;padding-bottom:104px!important}.business-page .practice-heading h2,.business-page .large-lines{font-family:var(--hm-serif)!important;font-weight:400!important}.business-page .closing{background:var(--hm-paper)!important;padding-top:80px!important;padding-bottom:85px!important}
/* The photo-free openings share a gentle plane of color, not a decorative gradient. */
.hero,.company-cover{background:var(--hm-paper)!important;color:var(--hm-ink)!important}.hero::after,.company-cover::after{display:none!important}.hero-identity,.company-cover-mark{color:#87968c!important}.hero h1,.company-cover h1{font-family:var(--hm-serif)!important;color:var(--hm-ink)!important;font-weight:400!important}.hero p{color:#64776a!important}
.hero{min-height:clamp(500px,70svh,685px)!important;height:auto!important}.hero-content{margin:auto!important;max-width:1160px!important;width:100%!important;padding:95px 30px 75px!important}.hero h1{font-size:clamp(35px,4.6vw,63px)!important;letter-spacing:.04em!important;line-height:1.62!important}.hero-content p{line-height:2.1!important}.hero-identity{top:38px!important}
.company-cover{height:clamp(285px,30vw,375px)!important;min-height:0!important}.company-cover .cover-copy{padding-bottom:52px!important}.company-cover h1{letter-spacing:.06em!important}.company-facts{background:#fff!important}
/* A shared measure and line color on editorial introductions. */
.wr-intro{background:var(--hm-paper)!important}.aj-hero{background:var(--hm-paper)!important}.wr-intro h1,.aj-hero h1{color:var(--hm-ink)!important}.wr-intro-lead,.aj-sub{color:var(--hm-ink)!important}
.wr-case,.aj-narrative,.aj-proofs{overflow-wrap:break-word}footer,footer.site-footer{border-top:1px solid var(--hm-line)}
/* One consistent mobile header: brand + menu together, language at opposite edge. */
@media(max-width:719px){
 header.hm-site-header,header.hm-site-header.site-header{height:66px!important;min-height:66px!important;padding:0 22px!important;justify-content:flex-start!important}
 header.hm-site-header .logo{order:0!important;font-size:25px!important;letter-spacing:.065em!important}
 header.hm-site-header .logo b{font-size:12px!important;top:-7px!important}
 header.hm-site-header .menu{display:block!important;order:1!important;position:static!important;transform:none!important;margin:0 0 0 10px!important;padding:6px!important;font-size:23px!important;line-height:1!important;flex:none!important}
 header.hm-site-header .lang-switch{order:2!important;margin:0 0 0 auto!important;font-size:11px!important;gap:7px!important}
 header.hm-site-header .nav{order:3!important;position:absolute!important;top:66px!important;left:0!important;right:0!important;margin:0!important;width:100%!important;display:none!important;z-index:60!important;box-shadow:0 12px 20px #0b291c1a!important;background:#fff!important}
 header.hm-site-header .nav.open{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important}
 header.hm-site-header .nav a{padding:14px 24px!important;font-size:14px!important;border-bottom:1px solid #e7ece5!important}
 .hero{min-height:clamp(485px,70svh,620px)!important}.hero-content{padding:85px 25px 65px!important}.hero h1{font-size:clamp(30px,8.2vw,40px)!important;letter-spacing:.018em!important}.hero-identity{top:35px!important;left:25px!important}
 .company-cover{height:290px!important}.company-cover .cover-copy{padding:25px 25px 50px!important}.company-facts{padding-top:60px!important}
 .business-page .intro{min-height:525px!important;padding:32px 25px 33px!important}.business-page .intro-main{margin:47px auto 38px!important}.business-page .intro h1{font-size:42px!important}.business-page .intro-composition{margin-top:67px!important}.business-page .intro-sentence{font-size:clamp(26px,7.3vw,33px)!important;line-height:1.8!important}.business-page .intro-mark{width:73px!important;margin-bottom:24px!important}.business-page .practice{padding:78px 25px 88px!important}.business-page .closing{padding:70px 25px 77px!important}
}
@media(min-width:720px) and (max-width:970px){header.hm-site-header .nav{gap:11px!important}header.hm-site-header .nav a{font-size:11px!important}header.hm-site-header .logo{font-size:24px!important}}
@media(max-width:365px){header.hm-site-header,header.hm-site-header.site-header{padding-left:16px!important;padding-right:16px!important}header.hm-site-header .logo{font-size:23px!important}header.hm-site-header .menu{margin-left:6px!important}}

/* Explicit placement after retiring the old photo-layout stylesheet. */
.hero{position:relative!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;}
.hero-identity{position:absolute!important;top:38px!important;left:max(28px,calc((100vw - 1100px)/2))!important;right:auto!important;max-width:80%!important;font:500 10px/1.5 Arial,sans-serif!important;letter-spacing:.21em!important;}
.hero-content{position:relative!important;z-index:1!important;flex:none!important;display:block!important;width:min(100%,1100px)!important;max-width:1100px!important;margin:0 auto!important;box-sizing:border-box!important;}
.hero .phrase-heading{max-width:850px!important;}
.hero .phrase-unit{display:block!important;white-space:normal!important;}
.company-cover{position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;}
.company-cover-mark{position:absolute!important;top:37px!important;right:max(30px,calc((100vw - 1100px)/2))!important;left:auto!important;font:500 10px/1.5 Arial,sans-serif!important;letter-spacing:.22em!important;}
.company-cover .cover-copy{position:relative!important;z-index:1!important;width:100%!important;max-width:1160px!important;margin:0 auto!important;box-sizing:border-box!important;}
@media(max-width:719px){.hero-identity{left:25px!important;top:34px!important;max-width:90%!important;font-size:9px!important;letter-spacing:.15em!important}.hero-content{width:100%!important;margin:0!important;padding:96px 25px 55px!important}.hero .phrase-heading{width:100%!important;max-width:100%!important}.hero .phrase-unit{white-space:normal!important}.company-cover-mark{right:25px!important;top:35px!important;font-size:9px!important}}


/* FINAL 2026-10-30 | unified identity, institutional footer, typography and rules.
   Both .footer and .site-footer are intentionally covered; the Business page
   retains its independent editorial composition without a different footer. */
:root{--hm-footer-ink:#203b30;--hm-footer-muted:#697a70;--hm-footer-rule:#d5ddd4}
footer.footer,footer.site-footer{
  box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:flex-start!important;
  gap:0!important;width:100%!important;margin:0!important;
  padding:44px max(28px,calc((100vw - 1160px)/2)) 48px!important;
  border:0!important;border-top:1px solid var(--hm-footer-rule)!important;
  border-radius:0!important;background:#f3f5f0!important;
  color:var(--hm-footer-ink)!important;
  font-family:var(--hm-sans)!important;font-weight:400!important;
  font-size:12px!important;letter-spacing:.015em!important;line-height:1.95!important;
  text-align:left!important;
}
footer.footer .logo,footer.site-footer .logo{
  display:block!important;position:static!important;float:none!important;
  flex:none!important;margin:0 0 16px!important;padding:0!important;
  font-family:Georgia,"Times New Roman",serif!important;font-size:24px!important;
  font-weight:400!important;line-height:1.2!important;letter-spacing:.075em!important;
  text-transform:none!important;color:#19372e!important;white-space:nowrap!important;
}
footer.footer .logo b,footer.site-footer .logo b{
  display:inline!important;position:relative!important;top:-7px!important;
  margin-left:3px!important;padding:0!important;font-family:Georgia,serif!important;
  font-size:11px!important;font-weight:400!important;line-height:1!important;
  letter-spacing:0!important;color:var(--hm-gold)!important;
}
footer.footer p,footer.site-footer p{
  display:block!important;flex:none!important;width:100%!important;max-width:720px!important;
  margin:0!important;padding:0!important;border:0!important;
  font-family:var(--hm-sans)!important;font-size:12px!important;font-weight:400!important;
  line-height:2!important;letter-spacing:.015em!important;color:var(--hm-footer-muted)!important;
  text-align:left!important;overflow-wrap:anywhere!important;
}
footer.footer p.contact-email,footer.site-footer p.contact-email{margin-top:12px!important}
footer.footer .contact-email a,footer.site-footer .contact-email a{
  font:inherit!important;letter-spacing:inherit!important;color:var(--hm-footer-ink)!important;
  text-decoration:none!important;overflow-wrap:anywhere!important;
}
footer.footer .contact-email a:hover,footer.site-footer .contact-email a:hover{text-decoration:underline!important;text-underline-offset:3px!important}
.en-page footer.footer p,.en-page footer.site-footer p,
html[lang="en"] footer.footer p,html[lang="en"] footer.site-footer p{
  font-family:Arial,Helvetica,sans-serif!important;letter-spacing:.018em!important;
}
/* A consistent treatment for hairline rules outside each page's intentionally dark section. */
footer.footer *,footer.site-footer *{box-sizing:border-box!important}
@media(max-width:719px){
 footer.footer,footer.site-footer{padding:35px 25px 39px!important}
 footer.footer .logo,footer.site-footer .logo{font-size:23px!important;margin-bottom:14px!important}
 footer.footer p,footer.site-footer p{font-size:11.5px!important;line-height:2.05!important}
 footer.footer p.contact-email,footer.site-footer p.contact-email{margin-top:11px!important}
}
@media(max-width:365px){footer.footer,footer.site-footer{padding-left:20px!important;padding-right:20px!important}}
