
:root,
.ya,
.zu,
.yv {
 --brand-paper:#FFFCF7; --brand-ink:#1C1A1E; --brand-muted:#5D574F; --brand-gold:#D2A70A; --brand-grey:#8D877D; --brand-blue:#4B7FE9;
 --brand-heading:"M PLUS 1",sans-serif; --brand-body:"Noto Sans JP",sans-serif;
 --paper:var(--brand-paper); --paper-2:#F4F1EB; --paper2:#F4F1EB; --soft:#F4F1EB; --white:#FFFDF8; --card:#FFFDF8;
 --ink:var(--brand-ink); --ink-deep:var(--brand-ink); --ink2:var(--brand-muted); --muted:var(--brand-muted);
 --gold:var(--brand-gold); --gold-hi:var(--brand-gold); --gold-ink:var(--brand-ink); --usu:var(--brand-grey); --sky:var(--brand-blue);
 --shu:var(--brand-gold); --shu-deep:var(--brand-gold); --navy:var(--brand-ink); --line:#DDD7CD; --rule:#DDD7CD;
 --mincho:var(--brand-heading); --num:var(--brand-heading); --gothic:var(--brand-body);
 --font-display:var(--brand-heading); --font-en:var(--brand-heading); --font-body:var(--brand-body); --font-ui:var(--brand-body);
 --fw-display:400; --fw-body:400; --fw-strong:600;
}
body.brand-rollout {background:var(--brand-paper);color:var(--brand-ink);font-family:var(--brand-body);font-weight:400;font-synthesis:none}
.brand-rollout strong,
.brand-rollout b {font-weight:600}
.brand-rollout button,
.brand-rollout input,
.brand-rollout textarea,
.brand-rollout select,
.brand-rollout .mg-band {font-family:var(--brand-body)}
.brand-rollout svg text {font-family:var(--brand-body)}
.brand-rollout .acc__item summary,
.brand-rollout .brand,
.brand-rollout .brand__text,
.brand-rollout .concept__fullbleed figcaption,
.brand-rollout .concept__vertical,
.brand-rollout .dan__no,
.brand-rollout .dan__one,
.brand-rollout .eyebrow,
.brand-rollout .faq-list summary::after,
.brand-rollout .faq__list summary,
.brand-rollout .faq__list summary::after,
.brand-rollout .flow strong,
.brand-rollout .flow-line__num,
.brand-rollout .footer strong,
.brand-rollout .footer__nav,
.brand-rollout .form__title,
.brand-rollout .fromto p.to,
.brand-rollout .fv-copy h1,
.brand-rollout .fv-eyebrow,
.brand-rollout .fv__promise,
.brand-rollout .get-list li::before,
.brand-rollout .get-list strong,
.brand-rollout .ghost,
.brand-rollout .hero__info-hours strong,
.brand-rollout .learn-list li::before,
.brand-rollout .learn-list strong,
.brand-rollout .lp .page-head h1,
.brand-rollout .marquee__inner,
.brand-rollout .nav,
.brand-rollout .nav-overlay nav,
.brand-rollout .news-list time,
.brand-rollout .next-box .name,
.brand-rollout .no,
.brand-rollout .numbers__grid strong,
.brand-rollout .nums strong,
.brand-rollout .nums strong small,
.brand-rollout .person blockquote,
.brand-rollout .price-table dd,
.brand-rollout .price-table h3,
.brand-rollout .proof-row__num,
.brand-rollout .quote,
.brand-rollout .reads a,
.brand-rollout .screen figcaption strong,
.brand-rollout .scroll-cue,
.brand-rollout .serif,
.brand-rollout .service-card span,
.brand-rollout .service-card strong,
.brand-rollout .service-photo figcaption,
.brand-rollout .steps .name,
.brand-rollout .steps>li::before,
.brand-rollout .style-card__label span,
.brand-rollout .voice__grid blockquote::before,
.brand-rollout .ya b,
.brand-rollout .yakusoku .quality__badge strong,
.brand-rollout .yv .next-box .name,
.brand-rollout .yv .quote,
.brand-rollout .yv .serif,
.brand-rollout .yv .steps .name,
.brand-rollout .yv .steps>li::before,
.brand-rollout .yv h1,
.brand-rollout .yv h2,
.brand-rollout .yv h3,
.brand-rollout .zu-name,
.brand-rollout .zu-t,
.brand-rollout h1,
.brand-rollout h2,
.brand-rollout h3,
.brand-rollout h4,
.brand-rollout h5,
.brand-rollout h6 {font-family:var(--brand-heading)!important;font-weight:400!important}
.brand-rollout .nav,
.brand-rollout .hd__nav,
.brand-rollout .footer__nav,
.brand-rollout .fv-nav,
.brand-rollout .eyebrow,
.brand-rollout .scroll-cue {font-family:var(--brand-body)!important;font-weight:400}
.brand-rollout .hd,
.brand-rollout .site-header {background:rgba(255,252,247,.96)}
.brand-rollout .no {background:var(--brand-gold);color:var(--brand-ink)}
.brand-rollout .ba__card--after {border-color:var(--brand-gold)}
.brand-rollout .tabs__list button {font-weight:600}
.brand-rollout .tabs__list button[aria-selected="true"] {border-bottom-color:var(--brand-gold)}
.brand-rollout .sticky,
.brand-rollout .sticky-cta,
.brand-rollout .head-cta,
.brand-rollout .head-login,
.brand-rollout .fv-btn,
.brand-rollout .btn {
 position:relative;border:2px solid var(--brand-blue);border-radius:4px;background:var(--brand-blue);color:#FFFFFF;
 font-family:var(--brand-body)!important;font-weight:600!important;text-decoration:none;
 box-sizing:border-box;isolation:isolate;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(28,26,30,.12);
 transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s;
 white-space:normal;text-align:center;
}
.brand-rollout .sticky,
.brand-rollout .sticky-cta {position:fixed}
.brand-rollout .sticky::before,
.brand-rollout .sticky-cta::before,
.brand-rollout .head-cta::before,
.brand-rollout .head-login::before,
.brand-rollout .fv-btn::before,
.brand-rollout .btn::before {
 content:"";position:absolute;inset:5px;width:auto;height:auto;border:1px solid rgba(255,255,255,.55);border-radius:1px;
 background:none;opacity:1;transform:none;animation:none;pointer-events:none;z-index:0;
}
.brand-rollout .btn:hover,
.brand-rollout .btn:focus-visible,
.brand-rollout .sticky:hover,
.brand-rollout .sticky:focus-visible,
.brand-rollout .sticky-cta:hover,
.brand-rollout .sticky-cta:focus-visible,
.brand-rollout .head-cta:hover,
.brand-rollout .head-cta:focus-visible,
.brand-rollout .fv-btn:hover,
.brand-rollout .fv-btn:focus-visible,
.brand-rollout .head-login:hover,
.brand-rollout .head-login:focus-visible {
 background:#FFFFFF;color:var(--brand-blue);border-color:var(--brand-blue);transform:translateY(-2px);
 box-shadow:inset 0 1px 0 #FFFFFF,0 3px 9px rgba(75,127,233,.14);
}
.brand-rollout .btn:hover::before,
.brand-rollout .btn:focus-visible::before,
.brand-rollout .sticky:hover::before,
.brand-rollout .sticky:focus-visible::before,
.brand-rollout .sticky-cta:hover::before,
.brand-rollout .sticky-cta:focus-visible::before,
.brand-rollout .head-cta:hover::before,
.brand-rollout .head-cta:focus-visible::before,
.brand-rollout .fv-btn:hover::before,
.brand-rollout .fv-btn:focus-visible::before,
.brand-rollout .head-login:hover::before,
.brand-rollout .head-login:focus-visible::before {border-color:rgba(75,127,233,.3);opacity:1;transform:none;animation:none}
.brand-rollout .btn:active,
.brand-rollout .sticky:active,
.brand-rollout .sticky-cta:active,
.brand-rollout .head-cta:active,
.brand-rollout .fv-btn:active,
.brand-rollout .head-login:active {background:#EDF3FF;color:var(--brand-blue);border-color:var(--brand-blue);transform:none}
.brand-rollout .btn:focus-visible,
.brand-rollout .sticky:focus-visible,
.brand-rollout .sticky-cta:focus-visible,
.brand-rollout .head-cta:focus-visible,
.brand-rollout .fv-btn:focus-visible,
.brand-rollout .head-login:focus-visible {outline:2px solid var(--brand-blue);outline-offset:3px}
.brand-rollout .btn.btn--line,
.brand-rollout .btn.btn--ghost,
.brand-rollout .btn.btn-ghost,
.brand-rollout .btn.ghost,
.brand-rollout .head-login {background:var(--brand-paper);color:var(--brand-ink);border:1px solid var(--brand-ink);box-shadow:0 2px 4px rgba(28,26,30,.08)}
.brand-rollout .btn.btn--line::before,
.brand-rollout .btn.btn--ghost::before,
.brand-rollout .btn.btn-ghost::before,
.brand-rollout .btn.ghost::before,
.brand-rollout .head-login::before {border-color:rgba(28,26,30,.18)}
.brand-rollout .btn.btn--line:hover,
.brand-rollout .btn.btn--line:focus-visible,
.brand-rollout .btn.btn--ghost:hover,
.brand-rollout .btn.btn--ghost:focus-visible,
.brand-rollout .btn.btn-ghost:hover,
.brand-rollout .btn.btn-ghost:focus-visible,
.brand-rollout .btn.ghost:hover,
.brand-rollout .btn.ghost:focus-visible,
.brand-rollout .head-login:hover,
.brand-rollout .head-login:focus-visible {background:#F4F1EB;color:var(--brand-ink);border-color:var(--brand-ink)}
.brand-rollout .btn:hover svg,
.brand-rollout .btn:focus-visible svg {transform:none}
.brand-rollout .btn::after,
.brand-rollout .fv-btn::after {display:none}
@media(prefers-reduced-motion:reduce){
 html {scroll-behavior:auto}
 .brand-rollout .btn,
.brand-rollout .sticky,
.brand-rollout .sticky-cta,
.brand-rollout .head-cta,
.brand-rollout .fv-btn,
.brand-rollout .head-login {transition:none;animation:none}
 .brand-rollout .btn:hover,
.brand-rollout .btn:focus-visible,
.brand-rollout .sticky:hover,
.brand-rollout .sticky:focus-visible,
.brand-rollout .sticky-cta:hover,
.brand-rollout .sticky-cta:focus-visible,
.brand-rollout .head-cta:hover,
.brand-rollout .head-cta:focus-visible,
.brand-rollout .fv-btn:hover,
.brand-rollout .fv-btn:focus-visible,
.brand-rollout .head-login:hover,
.brand-rollout .head-login:focus-visible {transform:none}
}

.brand-rollout p,.brand-rollout li,.brand-rollout dd {font-weight:400}
/* The final approved optical correction for the headline numeral. */
.brand-rollout .fv__title {overflow-wrap:normal}
.brand-rollout .fv__title em {font-size:1.21em;line-height:1;letter-spacing:-.025em}
.brand-rollout .brand-dots {display:block;width:100%;aspect-ratio:55/34;min-height:190px}
.brand-rollout .brand-dots canvas {display:block;width:100%;height:100%}
.brand-rollout .brand-flow {margin-top:48px;padding:28px 0 8px;border-top:1px solid var(--rule)}
.brand-rollout .brand-flow h3 {font-family:var(--brand-heading);font-weight:400;font-size:clamp(21px,2.4vw,30px);margin:0 0 12px}
.brand-rollout .brand-flow svg {display:block;width:100%;height:auto;overflow:visible}
.brand-rollout .brand-flow svg text {font-family:var(--brand-body);font-weight:400;fill:var(--brand-ink)}
.brand-rollout .brand-flow .flow-title {font-family:var(--brand-heading);font-size:23px}
.brand-rollout .brand-flow .flow-note {font-size:14px;fill:var(--brand-muted)}
.brand-rollout .brand-flow .flow-route {stroke:#D2A70A;stroke-width:2;stroke-dasharray:6 24;fill:none;opacity:.7}
.brand-rollout .brand-flow[data-visible=true] .flow-route {animation:brand-flow 5s linear 2}
@keyframes brand-flow {from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.brand-rollout .dan__list li {--grade:#C9B99A;border-top:3px solid var(--grade);transition:box-shadow .2s,transform .2s}
.brand-rollout .dan__list li:nth-child(2) {--grade:#8295A8}
.brand-rollout .dan__list li:nth-child(3) {--grade:#2F3F7A}
.brand-rollout .dan__list li:nth-child(4) {--grade:#C99A2E}
.brand-rollout .dan__list li:nth-child(5) {--grade:#121016}
.brand-rollout .dan__list li:hover {box-shadow:0 8px 22px rgba(28,26,30,.1);transform:translateY(-3px)}
.brand-rollout .dan__list .dan__no {color:var(--grade)}
.brand-rollout .logos-marquee {margin-top:12px}
.brand-rollout .logos-viewport {overflow:hidden;outline-offset:4px}
.brand-rollout .logos-viewport:focus-visible {outline:2px solid var(--brand-blue)}
.brand-rollout .logos-track {display:flex;width:max-content;animation:brand-logos var(--logo-duration,75s) linear infinite;will-change:transform}
.brand-rollout .logos-track .logos {display:flex;flex:none;width:max-content;margin:0;padding:0;border:0;gap:0}
.brand-rollout .logos-track .logos li {flex:0 0 240px;width:240px;height:126px;padding:24px;border:0;background:transparent}
.brand-rollout .logos-track .logos img {max-width:190px;width:auto;max-height:64px;height:auto;object-fit:contain;filter:none;opacity:1}
.brand-rollout .logos-viewport:hover .logos-track,.brand-rollout .logos-viewport:focus-within .logos-track,.brand-rollout .logos-marquee[data-paused=true] .logos-track {animation-play-state:paused}
.brand-rollout .motion-toggle {display:flex;margin:14px 0 0 auto;min-height:36px;font-size:12px}
@keyframes brand-logos {from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:640px){
 .brand-rollout .logos-track .logos li {flex-basis:184px;width:184px;height:104px;padding:18px}
 .brand-rollout .logos-track .logos img {max-width:150px;max-height:56px}
 .brand-rollout .brand-flow {margin-top:32px}
 .brand-rollout .brand-flow .flow-note {font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 .brand-rollout .logos-viewport {overflow:visible}
 .brand-rollout .logos-track {display:block;width:100%;animation:none;transform:none;will-change:auto}
 .brand-rollout .logos-track .logos {display:grid;width:100%;grid-template-columns:repeat(5,minmax(0,1fr))}
 .brand-rollout .logos-track .logos li {width:auto;min-width:0}
 .brand-rollout .logos-track .logos img {max-width:100%}
 .brand-rollout .logos-track .logos[aria-hidden=true],.brand-rollout .motion-toggle {display:none}
 .brand-rollout .brand-flow .flow-route {animation:none}
 .brand-rollout .dan__list li,.brand-rollout .dan__list li:hover {transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:640px){.brand-rollout .logos-track .logos {grid-template-columns:repeat(2,minmax(0,1fr))}}

.brand-rollout .flow-mobile {display:none}
@media(max-width:640px){
 .brand-rollout .brand-flow>svg {display:none}
 .brand-rollout .flow-mobile {display:grid;position:relative;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 12px;margin:24px 0}
 .brand-rollout .flow-mobile>strong {grid-column:1/-1;justify-self:center;border:1px solid #D2A70A;border-radius:50%;padding:18px 8px;color:var(--brand-ink);font-weight:400;background:#FFFAE8}
 .brand-rollout .flow-mobile>span {position:relative;padding:12px 0;text-align:center;border:1px solid var(--rule);border-radius:4px;background:#FFFDF8}
 .brand-rollout .flow-mobile>span::before {content:"";position:absolute;left:50%;height:22px;top:-23px;width:1px;background:#CFC8BD}
 .brand-rollout .flow-mobile::before {content:"";position:absolute;left:16.66%;right:16.66%;top:88px;height:1px;background:#CFC8BD}
}

.brand-rollout .logos-marquee[data-visible=false] .logos-track {animation-play-state:paused}

/* Small phones: keep the headline and header actions inside the viewport. */
@media (max-width:360px) {
 .brand-rollout .fv {min-width:0;grid-template-columns:minmax(0,1fr)}
 .brand-rollout .fv__text {min-width:0}
 .brand-rollout .fv__title {font-size:clamp(44px,14vw,50px)}
 .brand-rollout .hd {padding:10px 12px;gap:8px}
 .brand-rollout .hd__logo {flex:0 0 100px}
 .brand-rollout .hd__logo img {width:100px;height:auto}
 .brand-rollout .hd .btn--sm {flex-shrink:0;margin-left:0;padding:0 8px;font-size:11px;white-space:nowrap;min-height:40px}
 .brand-rollout .hd .hd__login {margin-left:auto}
}
