:root {
--mcl-dn: #0B4F6C; --mcl-dn-lt: #4FB0D8; --mcl-navy: #0B2A3C; --mcl-cream: #F4F0E8; --mcl-white: #FFFFFF; --mcl-muted: #3D5866;
--mcl-muted-dk: #B7C6CE;
--mcl-rule: #D5DCE0;
--mcl-rule-dk: #2A4A5E;
--mcl-display: "Sora", "IBM Plex Sans JP", "Hiragino Sans", system-ui, sans-serif;
--mcl-body: "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
--mcl-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
--mcl-r: 16px;
} html body {
background: var(--mcl-cream);
color: var(--mcl-navy);
font-family: var(--mcl-body);
font-size: 15px;
line-height: 1.75;
}
body a { color: var(--mcl-dn); }
body :focus-visible { outline: 2px solid var(--mcl-dn-lt); outline-offset: 2px; } body h1, body h2, body h3, body h4, body h5, body h6 {
font-family: var(--mcl-display);
color: inherit;
text-wrap: balance;
}
body h1 { font-weight: 800; font-size: clamp(30px, 5.2vw, 56px); line-height: 1.1; letter-spacing: -.02em; }
body h2 { font-weight: 800; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; letter-spacing: -.01em; }
body h3 { font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.35; }
body h4 { font-weight: 700; font-size: 16px; line-height: 1.5; } #brx-content .mcl-en,
#brx-content .mcl-features__kicker {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--mcl-mono);
font-size: 11.5px;
font-weight: 500;
line-height: 1.4;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--mcl-dn);
margin-bottom: 10px;
opacity: 1;
min-width: min(360px, 80vw);
}
#brx-content .mcl-en::after,
#brx-content .mcl-features__kicker::after {
content: "";
flex: 1;
min-width: 40px;
height: 1px;
background: linear-gradient(90deg, var(--mcl-dn-lt), transparent);
}
#brx-content .mcl-features .mcl-en,
#brx-content .mcl-features__kicker { color: var(--mcl-dn-lt); } #brx-content h3.brxe-heading:not(.mcl-card__title):not(.brxe-icon + .brxe-heading) {
padding-bottom: 8px;
background: linear-gradient(90deg, var(--mcl-dn-lt) 0 28px, #D5DCE0 28px) left bottom / 100% 2px no-repeat;
}
#brx-content .mcl-features h3.brxe-heading:not(.mcl-card__title):not(.brxe-icon + .brxe-heading) {
background: linear-gradient(90deg, var(--mcl-dn-lt) 0 28px, rgba(255,255,255,.2) 28px) left bottom / 100% 2px no-repeat;
} #brx-content h4 {
font-family: var(--mcl-mono), var(--mcl-body, sans-serif);
font-weight: 500;
font-size: 13px;
letter-spacing: .14em;
color: var(--mcl-dn);
}
#brx-content h4::before { content: "\2014  "; color: var(--mcl-dn-lt); }
#brx-content .mcl-features h4 { color: var(--mcl-dn-lt); } body .brxe-button,
body .bricks-button {
font-family: var(--mcl-display);
font-weight: 700;
border-radius: 999px;
background-color: var(--mcl-dn);
color: var(--mcl-white);
}
body .brxe-button:hover { background-color: var(--mcl-navy); } #brx-header { background: var(--mcl-cream); }
#brx-header .mcl-header {
background: var(--mcl-cream);
padding-top: 14px;
padding-bottom: 16px;
position: relative;
} #brx-header .mcl-header::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
opacity: .3;
pointer-events: none;
background:
repeating-linear-gradient(90deg, var(--mcl-navy) 0 1px, transparent 1px 12px) bottom / 100% 5px no-repeat,
repeating-linear-gradient(90deg, var(--mcl-navy) 0 1px, transparent 1px 60px) bottom / 100% 10px no-repeat;
}
#brx-header .bricks-nav-menu > li > a {
color: var(--mcl-navy);
font-size: 14px;
font-weight: 500;
position: relative;
padding-block: 4px;
}
#brx-header .bricks-nav-menu > li > a:hover { color: var(--mcl-dn); }
#brx-header .bricks-nav-menu > .current-menu-item > a::after,
#brx-header .bricks-nav-menu > .current-menu-ancestor > a::after,
#brx-header .bricks-nav-menu > li > a:hover::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 2px;
border-radius: 2px;
background: var(--mcl-dn);
}
#brx-header .bricks-mobile-menu-toggle { color: var(--mcl-navy); }
#brx-header .bricks-mobile-menu-wrapper { background: var(--mcl-navy); }
#brx-header .bricks-mobile-menu-wrapper a { color: var(--mcl-white); font-family: var(--mcl-display); }
#brx-header .brxe-button { padding: 10px 20px; font-size: 13px; } .mcl-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--mcl-navy); text-decoration: none; }
.mcl-lockup .mcl-mark { width: 44px; height: 44px; flex: none; }
.mcl-lockup__t { display: flex; flex-direction: column; gap: 5px; line-height: 1; }
.mcl-lockup__t b { font-family: var(--mcl-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--mcl-navy); }
.mcl-lockup__t small { font-family: var(--mcl-display); font-weight: 700; font-size: 10px; letter-spacing: .18em; color: var(--mcl-dn); }
.mcl-lockup--white .mcl-lockup__t b { color: var(--mcl-white); }
.mcl-lockup--white .mcl-lockup__t small { color: var(--mcl-dn-lt); }
@media (max-width: 767px) {
.mcl-lockup .mcl-mark { width: 36px; height: 36px; }
.mcl-lockup__t b { font-size: 18px; }
.mcl-lockup__t small { font-size: 9px; }
} .mcl-hero {
position: relative;
overflow: hidden;
color: var(--mcl-white);
isolation: isolate;
} .mcl-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(79, 176, 216, .45) 0%, rgba(11, 79, 108, .62) 38%, rgba(11, 42, 60, .94) 100%);
}
.mcl-hero > .brxe-container {
align-items: flex-start;
text-align: left;
padding-left: clamp(52px, 8vw, 110px);
position: relative;
z-index: 2;
}
.mcl-hero__kicker {
font-family: var(--mcl-mono);
font-size: 12px;
letter-spacing: .12em;
opacity: .9;
}
.mcl-hero h1 { color: var(--mcl-white); max-width: 14em; font-size: clamp(36px, 6.4vw, 76px); }
.mcl-hero h1 em {
font-style: normal;
background: linear-gradient(transparent 72%, rgba(79, 176, 216, .65) 72% 92%, transparent 92%);
}
.mcl-hero__lead { max-width: 44ch; font-size: 15px; opacity: .92; margin: 0; }
.mcl-scale {
position: absolute;
z-index: 1;
left: clamp(12px, 3vw, 40px);
top: 18%;
bottom: 14%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 10px;
border-right: 1px solid rgba(255, 255, 255, .4);
font-family: var(--mcl-mono);
font-size: 11px;
text-align: right;
color: rgba(255, 255, 255, .85);
}
.mcl-scale span { position: relative; }
.mcl-scale span::after { content: ""; position: absolute; right: -14px; top: 50%; width: 8px; height: 1px; background: var(--mcl-white); }
.mcl-scale .is-now { color: var(--mcl-cream); font-weight: 500; }
.mcl-scale .is-now::after { width: 16px; right: -22px; }
.mcl-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mcl-bubbles i {
position: absolute;
bottom: -16px;
border: 1.5px solid rgba(255, 255, 255, .55);
border-radius: 50%;
animation: mcl-rise linear infinite;
}
@keyframes mcl-rise { to { transform: translate(14px, -620px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mcl-bubbles { display: none; } }
@media (max-width: 767px) {
.mcl-hero > .brxe-container { padding-left: 44px; }
.mcl-scale { font-size: 9.5px; left: 8px; }
} .mcl-hero .jet-ajax-search__form {
display: flex;
background: rgba(11, 42, 60, .78);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 14px;
overflow: hidden;
}
.mcl-hero .jet-ajax-search__field {
width: 100%;
background: transparent !important;
border: 0 !important;
color: var(--mcl-white);
font-family: var(--mcl-display);
font-size: 16px;
padding: 14px 18px;
}
.mcl-hero .jet-ajax-search__field-wrapper, .mcl-hero .jet-ajax-search__fields-holder { background: transparent; }
.mcl-hero .jet-ajax-search__field:focus { outline: none; box-shadow: inset 0 -2px 0 var(--mcl-dn-lt); }
.mcl-hero .jet-ajax-search__field::placeholder { color: rgba(255, 255, 255, .6); }
.mcl-hero .jet-ajax-search__submit {
background: var(--mcl-dn-lt);
color: var(--mcl-navy);
border: 0;
border-radius: 0;
font-family: var(--mcl-display);
font-weight: 800;
padding: 0 22px;
}
.mcl-hero .jet-ajax-search__results-area { color: var(--mcl-navy); text-align: left; } .mcl-tiles > a {
background: var(--mcl-white);
border-radius: var(--mcl-r);
color: var(--mcl-navy);
transition: transform .2s, box-shadow .2s;
}
.mcl-tiles > a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(11, 42, 60, .45); }
.mcl-tiles .brxe-icon { color: var(--mcl-dn); fill: var(--mcl-dn); }
.mcl-tiles .brxe-text-basic { font-family: var(--mcl-display); font-weight: 700; color: var(--mcl-navy); } .mcl-card {
background: var(--mcl-white);
border: 0;
border-radius: var(--mcl-r);
}
.mcl-card:hover { box-shadow: 0 14px 30px -18px rgba(11, 42, 60, .5); }
.mcl-card__media img { aspect-ratio: 16 / 10; }
.mcl-card__body { padding: 16px 18px 18px; gap: 10px; }
.mcl-card__terms {
font-family: var(--mcl-mono);
font-size: 11px;
letter-spacing: .08em;
color: var(--mcl-dn);
text-transform: uppercase;
}
.mcl-card__title { font-family: var(--mcl-display); font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.mcl-card__title a { color: var(--mcl-navy); }
.mcl-card__title a:hover { color: var(--mcl-dn); }
.mcl-card__facts { font-size: 12.5px; color: var(--mcl-muted); } .mcl-log {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-block: 1px dashed var(--mcl-rule);
margin-top: 2px;
}
.mcl-log > span { padding: 8px 4px; text-align: center; min-width: 0; display: grid; gap: 1px; }
.mcl-log > span + span { border-left: 1px dashed var(--mcl-rule); }
.mcl-log small { font-size: 10px; color: var(--mcl-muted); letter-spacing: .06em; }
.mcl-log b { font-family: var(--mcl-display); font-size: 16px; color: var(--mcl-navy); font-variant-numeric: tabular-nums; }
.mcl-log b i { font-style: normal; font-size: 11px; margin-left: 1px; color: var(--mcl-muted); }
.mcl-card__fav .jet-data-store-link { box-shadow: 0 2px 8px rgba(11, 42, 60, .18); } .mcl-room, .mcl-step { border-color: var(--mcl-rule); border-radius: var(--mcl-r); }
.mcl-spec { background: var(--mcl-white); }
.mcl-spec b, .mcl-room__facts, .mcl-step__label { color: var(--mcl-dn); }
.mcl-checklist li::before { color: var(--mcl-dn); }
.mcl-badge { background: rgba(79, 176, 216, .16); color: var(--mcl-dn); } #brx-footer { background: var(--mcl-navy); color: var(--mcl-muted-dk); position: relative; overflow: visible; }
#brx-footer .mcl-footer {
position: relative;
background: var(--mcl-navy);
padding-top: 48px;
padding-bottom: 32px;
} #brx-content > :last-child::after { content: ""; display: block; flex: none; width: 100%; height: 56px; } #brx-footer .mcl-footer::before,
#brx-footer .mcl-footer::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: -55px;
height: 56px;
pointer-events: none;
background-repeat: repeat-x;
background-position: 0 100%;
}
#brx-footer .mcl-footer::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 22C200 0 400 0 600 22S1000 44 1200 22V56H0Z' fill='%234FB0D8' fill-opacity='.35'/%3E%3C/svg%3E");
background-size: 1600px 56px;
animation: mcl-wave-back 46s linear infinite;
}
#brx-footer .mcl-footer::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 32C200 10 400 10 600 32S1000 54 1200 32V56H0Z' fill='%230B2A3C'/%3E%3C/svg%3E");
background-size: 1200px 56px;
animation: mcl-wave-front 30s linear infinite;
}
@keyframes mcl-wave-front { to { background-position: 1200px 100%; } }
@keyframes mcl-wave-back { to { background-position: -1600px 100%; } }
@media (prefers-reduced-motion: reduce) {
#brx-footer .mcl-footer::before,
#brx-footer .mcl-footer::after { animation: none; }
}
#brx-footer .mcl-footer__label {
margin: 0 0 10px;
font-family: var(--mcl-mono);
font-weight: 500;
font-size: 11px;
letter-spacing: .14em;
color: var(--mcl-dn-lt);
}
#brx-footer .bricks-nav-menu { flex-direction: column; gap: 6px; padding: 0; margin: 0; }
#brx-footer .bricks-nav-menu li { margin: 0; }
#brx-footer a { color: var(--mcl-muted-dk); }
#brx-footer a:hover { color: var(--mcl-white); }
#brx-footer .mcl-footer__links { display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; margin-bottom: 6px; }
#brx-footer .mcl-footer__links br { display: none; }
#brx-footer .bricks-nav-menu a { color: var(--mcl-muted-dk); font-size: 13.5px; }
#brx-footer .bricks-nav-menu a:hover { color: var(--mcl-white); }
#brx-footer .mcl-footer__tag { font-size: 13px; line-height: 1.7; max-width: 30ch; color: var(--mcl-muted-dk); }
#brx-footer .brxe-social-icons a, #brx-footer .brxe-social-icons i { color: var(--mcl-white); fill: var(--mcl-white); }
#brx-footer .mcl-footer__partners { display: flex; flex-wrap: wrap; gap: 10px; } #brx-footer .mcl-footer__partners > * { display: flex; align-items: center; justify-content: center; height: 76px; padding: 10px 14px; background: #12384E; border: 1px solid rgba(79, 176, 216, .3); border-radius: 12px; }
#brx-footer .mcl-footer__partners img { display: block; max-height: 100%; width: auto; max-width: 100%; border-radius: 6px; }
#brx-footer .mcl-legal {
background: var(--mcl-navy);
border-top: 1px solid var(--mcl-rule-dk);
padding-top: 14px;
padding-bottom: 20px;
position: relative;
}
#brx-footer .mcl-legal p, #brx-footer .mcl-legal a { font-size: 11.5px; color: var(--mcl-muted-dk); margin: 0; } #brx-footer .mcl-legal::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6px;
background: linear-gradient(90deg, #0E7C82 0 12.5%, #C2522B 12.5% 25%, #2F5FB3 25% 37.5%, #4A5D6E 37.5% 50%, #9A6B12 50% 62.5%, #6B48A8 62.5% 75%, #0B4F6C 75% 87.5%, #A33A6A 87.5% 100%);
}  .mcl-features {
position: relative;
overflow: hidden;
isolation: isolate;
padding-top: clamp(56px, 7vw, 88px);
padding-bottom: clamp(56px, 7vw, 88px);
background: linear-gradient(160deg, #0B4F6C 0%, #0B2A3C 78%);
background-color: var(--mcl-navy); color: var(--mcl-white);
} .mcl-features::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(70% 60% at 12% -10%, rgba(79, 176, 216, .35), transparent 60%),
repeating-radial-gradient(circle at 92% 110%, transparent 0 46px, rgba(79, 176, 216, .12) 46px 47px);
}
.mcl-features__kicker {
font-family: var(--mcl-mono);
font-size: 12px;
letter-spacing: .2em;
color: var(--mcl-dn-lt);
}
#brx-content .mcl-features h2.brxe-heading { color: var(--mcl-white); }
.mcl-feature {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 26px 22px 24px;
border-radius: var(--mcl-r);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(79, 176, 216, .28);
transition: transform .25s, background .25s, border-color .25s;
}
.mcl-feature:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); border-color: var(--mcl-dn-lt); }
.mcl-feature .brxe-icon {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--mcl-dn-lt);
color: var(--mcl-navy);
fill: var(--mcl-navy);
box-shadow: 0 0 0 6px rgba(79, 176, 216, .18);
margin-bottom: 6px;
}
#brx-content .mcl-feature h3.brxe-heading { color: var(--mcl-white); font-size: 18px; margin: 0; }
.mcl-feature p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--mcl-muted-dk); } .mcl-steps-sec { background: var(--mcl-white); }
.mcl-steps-sec .brxe-block { border: 1px solid var(--mcl-rule); border-radius: var(--mcl-r) !important; background: var(--mcl-cream) !important; }  .jet-form-builder__submit-wrap { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--mcl-rule); justify-content: center; }
body .jet-form-builder__submit {
display: inline-flex;
align-items: center;
justify-content: center !important;
text-align: center;
gap: 12px;
min-width: min(100%, 360px);
min-height: 60px;
padding: 16px 36px;
border: 0;
border-radius: 999px;
background: var(--mcl-dn);
color: var(--mcl-white);
font-family: var(--mcl-display);
font-size: 17px;
font-weight: 800;
letter-spacing: .04em;
cursor: pointer;
box-shadow: 0 10px 24px -10px rgba(11, 79, 108, .7), 0 0 0 5px rgba(79, 176, 216, .22);
transition: background .2s, transform .2s, box-shadow .2s;
}
body .jet-form-builder__submit::after {
content: "";
width: 18px;
height: 18px;
flex: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .2s;
}
body .jet-form-builder__submit:hover { background: var(--mcl-navy); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(11, 42, 60, .8), 0 0 0 5px rgba(79, 176, 216, .35); }
body .jet-form-builder__submit:hover::after { transform: translateX(4px); }
body .jet-form-builder__submit:focus-visible { outline: 3px solid var(--mcl-dn-lt); outline-offset: 3px; }
body .jet-form-builder__submit:disabled, body .jet-form-builder__submit.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (max-width: 767px) { body .jet-form-builder__submit { width: 100%; } } #brx-header .mcl-header-account {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
margin-left: 4px;
margin-right: 20px; border-radius: 50%;
color: var(--mcl-navy);
transition: background .2s, color .2s;
}
#brx-header .mcl-header-account svg { width: 22px; height: 22px; display: block; }
#brx-header .mcl-header-account span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
#brx-header .mcl-header-account:hover,
#brx-header .mcl-header-account:focus-visible { background: rgba(11, 79, 108, .1); color: var(--mcl-dn); }
#brx-header .mcl-header-account::after {
content: attr(aria-label);
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
border-radius: 6px;
background: var(--mcl-navy);
color: var(--mcl-white);
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
}
#brx-header .mcl-header-account:hover::after,
#brx-header .mcl-header-account:focus-visible::after { opacity: 1; }
@media (max-width: 767px) {
#brx-header .mcl-header-account { margin: 0; width: 36px; height: 36px; }
#brx-header .brxe-container { gap: 8px; }
.mcl-lockup__t small { white-space: nowrap; letter-spacing: .12em; }
}