/* Shared sky-blue brand theme. The reference screenshot samples near RGB(24,188,242).
   Bright blue is for surfaces; darker companion tones keep small text readable. */
@font-face {
  font-family: "Banxian Identity";
  src: url("assets/fonts/banxian-identity.woff2?v=studio-v30") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --accent: #18bcf2;
  --accent-hover: #3bc7f5;
  --accent-soft: #e7f8fe;
  --blue: #087ba5;
  --navy: #153b4e;
  --mist: #f3fafc;
  --text: #294858;
  --muted: #536c7c;
  --line: #d6e8ef;
}

.site-header {border-bottom-color: var(--line); background: #ffffffed}
.brand-name, .footer-brand-text {font-weight: 650}
.header-contact, .menu-toggle {border-radius: 8px}
.header-contact {color: var(--blue); border-color: #bee7f5; background: #f1fbff}
.header-contact:hover {background: var(--accent-soft); border-color: #7bcfe9}
.language-switch {border-color: var(--line); border-radius: 8px; background: #f8fcfe}
.language-switch a {border-radius: 5px}
.language-switch a:hover {color: #075a79; background: var(--accent-soft)}
.language-switch a[aria-current="page"] {color: #075a79; background: #daf4fd}
.button {border-radius: 8px; font-weight: 650}
.primary {background: var(--accent); color: #fff; box-shadow: 0 4px 12px #087ba512}
.primary:hover {background: var(--accent-hover); color: #fff}
.blue-word {color: #18bcf2}
.about-intro h2 > span {color: #0785ad}
.little-line, .wordmark-dot {background-color: var(--accent)}
.wordmark-dot {background-color: transparent; color: var(--accent)}
.hero-image-wrap {clip-path: none; border-radius: 16px; background: #f1f8fc}
.image-top-label {border: 1px solid #dceef5; border-radius: 6px; background: #ffffffef; color: #285b70}
.hero-signature {padding-top: 18px}
.signature-label {color: #627f8d}
.intro-strip {background: #f7fcfe}
.about, .news {background: var(--mist); border-color: var(--line)}
.business-card {border-radius: 12px; border-color: var(--line)}
.business-card:hover {border-color: #91cfe3; box-shadow: 0 8px 24px #153b4e08}
.business-art {border-bottom-color: var(--line)}
.spaces .business-art {background: #e7f8fe; color: #1c627e}
.spaces .business-art-title, .spaces .category {color: #087b9e}
.reading .business-art {background: #f2eef8}
.booklet .business-art {background: #173b4c}
.booklet .business-art-top {color: #c2d6df}
.business-link {border-top-color: var(--line)}
.business-link > span:first-child {color: #5a7483}
.systems-figure {border-radius: 12px; overflow: hidden; background: #173b4c}
.team-photo img {border-radius: 12px}
.team-photo figcaption, .draft-note {color: #637c8c}
.core-member {--profile-color: #087ba5; --profile-fill: #18bcf224; --profile-tag: #e7f8fe; border-radius: 12px}
.core-reading {--profile-color: #795098; --profile-fill: #79509822; --profile-tag: #f2edf7}
.core-badge {border-radius: 5px}
.core-number {color: #627d8d}
.member-chart figcaption {border-top-color: var(--line)}
.radar-grid {stroke: #d6e8ef}
.radar-label {fill: #536c7c}
.news-body a {border-bottom-color: #9bd8ed}
.draft-tag {border-radius: 5px}
.site-footer {background: #143949}
.footer-main .footer-company, .footer-contact h2, .footer-links > div > span {color: #e4f1f7}
.footer-contact address a {color: #eaf8ff}
.footer-contact address a:hover, .footer-links a:hover {color: #7bd9f7}
.footer-bottom {border-color: #ffffff1c; color: #aec5d0}

/* Brand artwork is fixed across locales. Chinese proper names never use a
   Japanese font's partial character coverage or a serif fallback. */
.zh-identity {
  font-family: "Banxian Identity", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
.core-member-name h3 {font-weight: 700}
.brand {flex-shrink: 0}
.brand .brand-lockup {width: 250px; height: auto; display: block}
.footer-brand-lockup .brand-lockup {width: 250px; height: auto; display: block}
.site-footer .footer-main .footer-company, .site-footer .footer-main .footer-tagline {padding-left: 0}
.about-stamp > .zh-identity {margin: 0; color: var(--navy)}
.footer-brand-lockup .brand-lockup {opacity: 1; filter: none; mix-blend-mode: normal}
.smart-home-heading > p {text-align: right; justify-self: end}
.system-icon {position: absolute; left: 0; top: 27px; width: 22px; height: 22px; color: var(--blue)}
.core-member-top {justify-content: flex-start}
@media (max-width: 1100px) {
  .brand .brand-lockup {width: 224px}
}
@media (max-width: 800px) {
  .brand .brand-lockup {width: 210px}
}
@media (max-width: 440px) {
  .brand .brand-lockup {width: 160px}
}
@media (max-width: 360px) {
  .header-inner {gap: 6px}
  .brand .brand-lockup {width: 136px}
  .language-switch a {padding-inline: 3px}
  .menu-toggle {width: 32px}
}

@media (prefers-reduced-motion: reduce) {
  .business-card:hover, .button:hover {transform: none}
}

/* Team philosophy: a shared introduction followed by three equal principles. */
.about .about-grid {grid-template-columns: 1fr 1.1fr; gap: 40px 64px; align-items: start}
.about .about-intro h2 {font-size: 40px; font-weight: 700; line-height: 1.4; letter-spacing: -.8px; margin-bottom: 22px}
.about .about-definition {font-size: 17px; margin-bottom: 22px}
.about .about-brand-signature {margin-top: 24px; gap: 16px}
.about .about-brand-signature > img {width: 28px; height: 56px}
.about .about-detail {padding-top: 46px; min-width: 0}
.about .about-lead {font-size: 23px; font-weight: 650; line-height: 1.65; margin-bottom: 20px}
.about .about-detail > p:not(.about-lead) {font-size: 16px; line-height: 1.9; margin-bottom: 16px}
.about .values {grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 0; border: 0}
.about .values > div {display: block; padding: 24px 24px 0 0; border: 0; border-top: 1px solid #b8dbe8; border-radius: 0; background: transparent}
.about .values > div > span {display: block; padding: 0; font-size: 12px; font-weight: 600; margin-bottom: 12px}
.about .values h3 {font-size: 19px; font-weight: 650; margin-bottom: 8px}
.about .values p {font-size: 15px; line-height: 1.8}
.about .about-intro h2 {font-size: 44px; line-height: 1.45}
.about .about-lead {font-size: 24px; line-height: 1.6}
.about .about-brand-signature {opacity: .85}
@media(max-width:800px) {
  .about .about-grid {grid-template-columns: 1fr; gap: 28px}
  .about .about-intro h2 {font-size: 34px}
  .about .about-detail {padding-top: 0}
  .about .about-lead {font-size: 21px}
  .about .values {gap: 14px}
  .about .values > div {padding: 20px}
  .system-icon {top: 24px}
}
@media(max-width:600px) {
  .about .values {grid-template-columns: 1fr}
  .about .about-intro h2 {font-size: 30px}
}

/* Place the seal beside the hero brand, with readable mobile wrapping. */
.hero-signoff{display:grid;grid-template-columns:22px auto minmax(0,1fr);gap:16px;align-items:center}
.hero-brand-seal{display:block;width:22px;height:44px;object-fit:contain}
@media(max-width:600px){.hero-signoff{grid-template-columns:22px minmax(0,1fr);gap:10px 14px}.hero-signoff>span:last-child{grid-column:2;border-left:0;padding-left:0}}

/* Align system symbols with the title line rather than a fixed top offset. */
.systems-grid>div{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:14px;row-gap:8px;padding-left:0;align-content:start}
.systems-grid .system-icon{position:static;align-self:center;width:22px;height:22px}
.systems-grid h4{margin:0;align-self:center}
.systems-grid p{grid-column:2}
@media(max-width:800px){.systems-grid>div{column-gap:10px}}

.systems-grid .system-icon{transform:translateY(2px)}

/* Responsive polish: readable language rhythm and comfortable touch controls. */
html{scroll-padding-top:124px}
.hero-copy,.hero-visual,.section-head>div,.about-intro,.news-intro{min-width:0}
h1,h2,.business-art-title,.smart-home-heading h3{text-wrap:balance}
.hero-description,.core-bio,.about-detail>p,.news-item summary p{text-wrap:pretty}
html[lang="ja"]{font-family:"Meiryo","Hiragino Kaku Gothic ProN","Yu Gothic","Banxian Identity",sans-serif}
html[lang="ja"] body{font-family:inherit}
html[lang="ja"] .hero-description,html[lang="ja"] .core-bio{line-height:1.9;letter-spacing:0}
.language-switch a{min-height:40px}
.menu-toggle{min-height:44px;min-width:44px}
.member-chart figcaption{align-items:baseline}
.member-chart figcaption>span{flex-shrink:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.footer-links a,.footer-bottom a{min-height:36px;display:inline-flex;align-items:center}
@media(min-width:700px) and (max-width:1100px){
 .business-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
 .business-art{min-height:230px}
 .business-art-title{font-size:30px}
 html[lang="ja"] .business-art-title{font-size:28px}
 html[lang="en"] .business-art-title{font-size:30px}
 .about .about-grid{column-gap:32px}
 .hero-description{line-height:1.85}
}
@media(min-width:801px) and (max-width:1100px){
 .smart-home-heading{grid-template-columns:1fr;gap:20px}
 .smart-home-heading>p{max-width:650px}
 .hero{column-gap:28px}
 .hero .hero-copy h1{font-size:clamp(40px,5.2vw,56px)}
 html[lang="ja"] .hero .hero-copy h1{font-size:38px}
 html[lang="en"] .hero .hero-copy h1{font-size:42px;letter-spacing:-1px}
}
@media(max-width:600px){
 html{scroll-padding-top:132px}
 .site-header{height:112px}
 .header-inner{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:44px 40px;gap:4px 12px;align-content:center}
 .brand{grid-column:1;grid-row:1;justify-self:start}
 .brand .brand-lockup{width:200px;max-width:100%;height:auto}
 .menu-toggle{grid-column:2;grid-row:1;width:44px;height:44px;margin:0}
 .language-switch{grid-column:1 / -1;grid-row:2;justify-self:end;margin:0;padding:0;gap:2px}
 .language-switch a{min-width:44px;min-height:38px;padding:6px 10px;font-size:12px}
 .mobile-nav{top:112px;max-height:calc(100dvh - 112px);padding:8px 20px 16px}
 .mobile-nav a{min-height:48px;display:flex;align-items:center;padding:10px 0}
 .hero{padding-top:32px;gap:28px}
 .hero-description{line-height:1.8;margin-top:24px}
 .hero-signoff{margin-top:24px}
 .image-caption,.systems-figure figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1.7}
 .image-caption>span,.systems-figure figcaption>span:last-child{text-align:left}
 .smart-home-heading>p{font-size:15px;line-height:1.9}
 .core-member{padding:22px 20px 16px}
 .core-member-name{gap:4px 10px}
 .core-bio{font-size:16px;line-height:1.8}
 .member-chart{padding-top:18px}
 .news-item summary{grid-template-columns:38px minmax(0,1fr) 24px;gap:12px}
 .news-body{padding-left:50px;padding-right:0;line-height:1.85}
 .news-item h3{line-height:1.55}
 .footer-links a,.footer-bottom a{min-height:44px}
 .footer-contact address a{display:inline-flex;align-items:center;min-height:44px}
 .footer-bottom{flex-wrap:wrap;gap:4px 16px}
}
@media(max-width:360px){
 .brand .brand-lockup{width:190px}
 .hero .hero-copy h1{font-size:42px}
 html[lang="en"] .hero .hero-copy h1{font-size:35px}
 html[lang="ja"] .hero .hero-copy h1{font-size:30px}
 .smart-home-heading h3{font-size:26px}
}

html[lang="ja"] .hero-description{text-wrap:balance}