/* SEMELIOR brand alignment, all pages (white base, teal accents). CSP: no inline styles.
   Palette: SEMELIOR design-system tokens and the business card colors. Loaded after style.css / top.css / sub.css. */
body{
  --paper:#FFFFFF;--paper-deep:#FFFFFF;--card:#FFFFFF;--rule:#E4E4E4;--rule-deep:#D6D6D6;
  --ink:#34444C;--ink-weak:#556870;
  --teal:#007577;--teal-deep:#00686A;
  --bk-bright:#2CB4B4;--bk-deep:#005252;--bk-tint:#DDF1F1;--bk-silver:#C8D8D8;
  --bk-serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
}
body .site-header{background:rgba(255,255,255,.96)}
body .btn-ghost{background:rgba(255,255,255,.92)}
body .uline::after{background:var(--bk-bright)}
body .ob-ceo,body .org-ceo{background:#FFFFFF}
body .ob-qa{background:#FFFFFF}
body .flow-line,body .stg-rail{background:rgba(0,117,119,.30)}
body .stg-dot{box-shadow:0 0 0 3px rgba(0,117,119,.2)}
body .mod-link:hover,body .mod-link:focus-visible{border-color:rgba(0,117,119,.45)}
body .ripple{background:rgba(0,117,119,.22)}
body .btn-primary::before,body .mod-glow{background:conic-gradient(from var(--angle),transparent 0 62%,#2CB4B4 74%,#8FDADA 86%,transparent 98%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
body .hero{background:#FFFFFF}
@media (max-width:767px){body .hero{background:#FFFFFF}}
/* white base: bands are the same white as the page; sections are separated by a neutral hairline */
body .section.deep,body .sand,body .announce{background:#FFFFFF}
body .section.deep,body .announce{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
body .band-cta.sand{border-top:0;border-bottom:0}
/* accents use teal; the warm orange stays only on the person markers */
body .free-word,body .announce .free-word,body .price-free{color:var(--teal-deep)}
body .amber-dot{background:var(--bk-bright)}
body .req{color:var(--teal-deep)}
body .credit-strong{border-left-color:var(--bk-bright)}
body .card .badge::before{background:var(--bk-bright)}
body .form-status{background:#FFFFFF;border:1px solid var(--rule);border-left:3px solid var(--teal)}
body .sand .arc-dot{background:var(--bk-bright);box-shadow:0 0 0 2px var(--paper-deep)}
body .flow-sig{background:linear-gradient(90deg,rgba(44,180,180,0),#2CB4B4)}
body .flow-ring{border-top-color:var(--bk-bright)}
body .mod-link::before{display:none}
body .cn i{background:var(--bk-bright);box-shadow:0 0 0 3px rgba(44,180,180,.25)}
/* consultation band (top) and call-to-action band (lower pages): deep teal flowing to teal, white text */
body .cband,body .band-cta{background:linear-gradient(115deg,#005252 0%,#00605F 50%,#007577 100%)}
body .facts{background:#004A4C}
body .band-cta{color:#FFFFFF}
body .band-cta .arc,body .band-cta .arc-dot{display:none}
body .band-cta .h2,body .band-cta .body,body .band-cta p{color:#FFFFFF}
body .band-cta .btn-primary{background:#FFFFFF;color:var(--teal-deep);border-color:#FFFFFF}
body .band-cta .btn-primary:hover{background:var(--bk-tint);border-color:var(--bk-tint);color:var(--ink)}
body .band-cta .tlink{color:#FFFFFF}
body .band-cta :focus-visible{outline-color:#FFFFFF}
/* hero: big fan (top right) and a low sweep (bottom edge) */
.bk-corner,.bk-sweep{position:absolute;pointer-events:none;z-index:0}
.bk-corner{top:var(--header-h);right:0;width:min(30vw,430px);height:auto;aspect-ratio:1}
.bk-sweep{left:0;bottom:0;width:min(60vw,860px);height:40px}
.bk-corner .fo{fill:url(#bk-go) #CBE8E9}
.bk-corner .o0{stop-color:#BFE3E4;stop-opacity:1}
.bk-corner .o1{stop-color:#E2F2F2;stop-opacity:.7}
.bk-corner .fc{fill:url(#bk-gc) #0A878C}
.bk-corner .f0{stop-color:#00555A}
.bk-corner .f1{stop-color:#0A878C}
.bk-corner .f2{stop-color:#55B4B9}
.bk-corner .ring{fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-opacity:.95}
.bk-net line{stroke:#FFFFFF;stroke-width:.9;stroke-opacity:.6}
.bk-net circle{fill:#6FE3E3}
.bk-net circle.big{fill:#003B3D}
.bk-sweep .bk-swoosh{display:none}
.bk-sweep .gs0{stop-color:#005252;stop-opacity:.9}
.bk-sweep .gs1{stop-color:#2CB4B4;stop-opacity:.65}
.bk-sweep .gs2{stop-color:#DDF1F1;stop-opacity:0}
.bk-sweep .bk-swline{stroke:#2CB4B4;stroke-width:1;stroke-opacity:.6;vector-effect:non-scaling-stroke}
/* motto lockup: Semper melior. -rule with star- 常に、より良いものへ。 */
.bk-tagline{order:0;display:flex;align-items:center;gap:10px;margin:0 0 20px;font-family:var(--bk-serif);color:var(--ink);line-height:1.4;white-space:nowrap}
.bk-en{font-size:18px;letter-spacing:.12em}
.bk-ja{font-size:16px;letter-spacing:.14em}
.bk-line{flex:none;width:22px;height:1px;background:var(--bk-bright)}
.bk-star{flex:none;width:16px;height:16px;background:var(--bk-bright);clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%)}
@media (max-width:767px){.bk-tagline{gap:8px;margin-bottom:16px;flex-wrap:wrap;row-gap:2px}.bk-ja{flex:0 0 100%}.bk-line2{display:none}.bk-en{font-size:13.5px;letter-spacing:.08em}.bk-ja{font-size:13px;letter-spacing:.1em}.bk-line{width:12px}.bk-star{width:12px;height:12px}
.bk-corner{width:46vw}.bk-sweep{width:100vw;height:28px}}
/* lower pages: a smaller fan under the header, behind the title area; long titles stop before the fan */
@media (min-width:768px){body .page-head .page-title{max-width:80%}}
body.page-sub main{position:relative}
body.page-sub main::before{content:"";position:absolute;z-index:-1;top:var(--header-h);right:0;width:min(24vw,320px);aspect-ratio:1;pointer-events:none;opacity:.9;background:radial-gradient(circle farthest-side at 100% 0,#00555A 0,#0A878C 36%,#55B4B9 69%,#FFFFFF 69.2%,#FFFFFF 71%,#C6E6E7 71.2%,#E4F3F3 98%,rgba(228,243,243,0) 98.4%)}
@media (max-width:767px){body.page-sub main::before{width:36vw}}
/* section labels: short bright-teal rule and a star on the hairline */
body .sec-label{position:relative}
body .sec-label::before{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--bk-bright)}
body .sec-label::after{content:"";position:absolute;left:66px;bottom:-6px;width:11px;height:11px;background:var(--bk-bright);clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%)}
body .cband .sec-label::before,body .cband .sec-label::after{background:#FFFFFF}
body .site-footer{position:relative}
body .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--bk-bright),var(--rule) 35%,transparent)}
/* animation keyframes re-declared with the aligned colors (same timing as top.css) */
@keyframes flow-dot1{0%,18%{background:var(--teal)}26%,100%{background:var(--card)}}
@keyframes flow-dot2{0%,24%{background:var(--card)}28%,50%{background:var(--teal)}58%,100%{background:var(--card)}}
@keyframes flow-dot3{0%,52%{background:var(--card)}56%,92%{background:var(--teal)}100%{background:var(--card)}}
@keyframes flow-l1{0%,22%{color:var(--teal-deep)}30%,100%{color:var(--ink-weak)}}
@keyframes flow-l2{0%,24%{color:var(--ink-weak)}28%,52%{color:var(--teal-deep)}60%,100%{color:var(--ink-weak)}}
@keyframes flow-l3{0%,52%{color:var(--ink-weak)}56%,94%{color:var(--teal-deep)}100%{color:var(--ink-weak)}}
@keyframes ob-lit{0%{box-shadow:0 0 0 0 rgba(0,117,119,0)}30%{box-shadow:0 0 0 3px rgba(0,117,119,.28)}100%{box-shadow:0 0 0 0 rgba(0,117,119,0)}}