:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
outline: 2px solid var(--wp--preset--color--text, #333);
outline-offset: 2px;
border-radius: 2px;
}
body.theme-dark :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
outline-color: #f5f5f5;
}
.um-bp-section {
margin: 0 auto;
padding: var(--wp--preset--spacing--60, 4rem) 0;
}
.um-bp-eyebrow {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.32em;
color: #888;
margin: 0 0 0.6rem;
text-transform: uppercase;
}
.um-bp-h2 {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(1.4rem, 2.6vw, 1.95rem);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.6;
color: #1a1a1a;
margin: 0 0 1.4rem !important;
}
.um-bp-h2--small { font-size: clamp(1.05rem, 1.6vw, 1.2rem); letter-spacing: 0.18em; }
.um-bp-h3 {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.6;
color: #1a1a1a;
margin: 0 0 0.9rem !important;
}
.um-bp-body {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.97rem;
line-height: 2.0;
letter-spacing: 0.04em;
color: #2a2a2a;
margin: 0 0 1.2rem;
}
.um-bp-lead {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
line-height: 2.0;
color: #555;
margin: 0 0 2rem;
}
.um-bp-hero {
position: relative;
min-height: 78vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.um-bp-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.um-bp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
z-index: 1;
}
.um-bp-hero__inner {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
padding: 0 1.5rem;
max-width: 880px;
}
.um-bp-hero__eyebrow {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(0.85rem, 1.2vw, 1rem);
letter-spacing: 0.32em;
color: rgba(255,255,255,0.9);
margin: 0 0 1.3rem;
}
.um-bp-hero__title {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 300;
font-size: clamp(2.2rem, 5.5vw, 4.4rem);
letter-spacing: 0.18em;
line-height: 1.3;
color: #fff;
margin: 0 0 1.4rem !important;
}
.um-bp-hero__sub {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
letter-spacing: 0.14em;
line-height: 1.85;
color: rgba(255,255,255,0.92);
margin: 0;
}
.um-bp-concept__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.5rem;
align-items: center;
max-width: 1040px;
margin: 0 auto;
}
.um-bp-concept__photo {
aspect-ratio: 3 / 4;
background-size: cover;
background-position: center;
border-radius: 2px;
}
.um-bp-pains__head {
text-align: center;
margin-bottom: 3rem;
}
.um-bp-pains__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
max-width: 1100px;
margin: 0 auto;
}
.um-bp-pain-card {
background: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.08);
padding: 1.6rem 1.4rem;
border-radius: 4px;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
line-height: 1.85;
color: #2a2a2a;
font-size: 0.93rem;
}
.um-bp-pain-card p { margin: 0; }
.um-bp-pain-card em { font-style: normal; font-weight: 600; color: #1a1a1a; border-bottom: 1px solid rgba(0,0,0,0.4); padding-bottom: 1px; }
.um-bp-pain-card__num {
display: inline-block;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.22em;
color: #888;
margin-bottom: 0.7rem;
}
.um-bp-solution__head { text-align: center; margin-bottom: 3.5rem; }
.um-bp-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
max-width: 1040px;
margin: 0 auto 4rem;
}
.um-bp-row--reverse > .um-bp-row__photo { order: 2; }
.um-bp-row__photo {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
border-radius: 2px;
}
.um-bp-row__num {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.22em;
color: #888;
margin: 0 0 0.8rem;
}
.um-bp-support__head { text-align: center; margin-bottom: 3rem; }
.um-bp-support__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1040px;
margin: 0 auto;
}
.um-bp-feature {
padding: 2rem 1.6rem;
background: rgba(0,0,0,0.02);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 2px;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-feature__num {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.22em;
color: #888;
display: block;
margin-bottom: 0.7rem;
}
.um-bp-feature__title {
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.06em;
color: #1a1a1a;
margin: 0 0 0.7rem;
}
.um-bp-feature p {
font-size: 0.9rem;
line-height: 1.9;
color: #555;
margin: 0;
}
.um-bp-pricing__head { text-align: center; margin-bottom: 3rem; }
.um-bp-pricing__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.6rem;
max-width: 980px;
margin: 0 auto;
}
.um-bp-plan {
padding: 2.4rem 2rem;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 2px;
background: #fff;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-plan--featured {
background: #1a1a1a;
color: #f1f1f1;
border-color: #1a1a1a;
}
.um-bp-plan__num {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.3em;
color: #888;
margin: 0 0 0.7rem;
}
.um-bp-plan--featured .um-bp-plan__num { color: #aaa; }
.um-bp-plan__title {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.25em;
font-weight: 400;
color: inherit;
margin: 0 0 1rem;
}
.um-bp-plan__price {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.05em;
font-weight: 300;
color: inherit;
margin: 0 0 1.5rem;
}
.um-bp-plan__price span {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
color: #888;
margin-left: 0.4em;
letter-spacing: 0.1em;
}
.um-bp-plan--featured .um-bp-plan__price span { color: #aaa; }
.um-bp-plan__spec { margin: 0 0 1.4rem; }
.um-bp-plan__spec > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-size: 0.92rem;
line-height: 1.6;
}
.um-bp-plan--featured .um-bp-plan__spec > div { border-bottom-color: rgba(255,255,255,0.12); }
.um-bp-plan__spec dt { color: #888; letter-spacing: 0.1em; min-width: 5em; }
.um-bp-plan--featured .um-bp-plan__spec dt { color: #aaa; }
.um-bp-plan__spec dd { margin: 0; color: inherit; text-align: right; }
.um-bp-plan__spec dd small { color: #888; font-size: 0.82em; }
.um-bp-plan__desc {
font-size: 0.92rem;
line-height: 1.95;
color: inherit;
margin: 0;
}
.um-bp-plan--featured .um-bp-plan__desc { color: #d8d8d8; }
.um-bp-included, .um-bp-option { max-width: 760px; }
.um-bp-included__list, .um-bp-option__list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-included__list li {
padding: 0.85rem 0 0.85rem 1.6rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
position: relative;
font-size: 0.93rem;
line-height: 1.85;
color: #2a2a2a;
}
.um-bp-included__list li::before {
content: "";
position: absolute;
left: 0;
top: 1.25em;
width: 0.7rem;
height: 1px;
background: #1a1a1a;
}
.um-bp-option__list > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-size: 0.93rem;
line-height: 1.85;
}
.um-bp-option__list dt { color: #2a2a2a; }
.um-bp-option__list dd { margin: 0; color: #1a1a1a; font-feature-settings: "tnum"; }
.um-bp-gallery__head { text-align: center; margin-bottom: 2.5rem; }
.um-bp-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
max-width: 1200px;
margin: 0 auto;
}
.um-bp-gallery__item {
display: block;
overflow: hidden;
aspect-ratio: 1 / 1;
transition: opacity .25s ease;
}
.um-bp-gallery__item[data-ratio="3-2"] { grid-column: span 2; aspect-ratio: 3 / 2; }
.um-bp-gallery__item[data-ratio="2-1"] { grid-column: span 2; aspect-ratio: 2 / 1; }
.um-bp-gallery__item[data-ratio="2-3"] { aspect-ratio: 2 / 3; }
.um-bp-gallery__item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.um-bp-gallery__item:hover { opacity: 0.85; }
.um-bp-gallery__more {
text-align: center;
margin: 2rem 0 0;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.2em;
}
.um-bp-gallery__more a {
color: #1a1a1a;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.2);
padding-bottom: 2px;
}
.um-bp-flow__head { text-align: center; margin-bottom: 3rem; }
.um-bp-flow__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: 720px;
margin: 0 auto;
counter-reset: flow;
}
.um-bp-flow__step {
text-align: center;
padding: 2.2rem 1.6rem;
border-top: 1px solid rgba(0,0,0,0.12);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-flow__step:last-child {
border-bottom: 1px solid rgba(0,0,0,0.12);
}
.um-bp-flow__num {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.3em;
color: #888;
margin: 0 0 1rem;
}
.um-bp-flow__title {
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.08em;
color: #1a1a1a;
margin: 0 0 0.9rem;
}
.um-bp-flow__step p {
font-size: 0.9rem;
line-height: 1.9;
color: #555;
margin: 0;
}
.um-bp-faq__head { text-align: center; margin-bottom: 2.5rem; }
.um-bp-faq__list {
max-width: 820px;
margin: 0 auto;
border-top: 1px solid rgba(0,0,0,0.1);
}
.um-bp-faq__item {
border-bottom: 1px solid rgba(0,0,0,0.1);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-faq__item summary {
list-style: none;
cursor: pointer;
padding: 1.2rem 2.4rem 1.2rem 1.7rem;
font-size: 0.97rem;
font-weight: 500;
letter-spacing: 0.04em;
color: #1a1a1a;
position: relative;
line-height: 1.7;
}
.um-bp-faq__item summary::-webkit-details-marker { display: none; }
.um-bp-faq__item summary::before {
content: "Q";
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 500;
color: #888;
margin-right: 0.7em;
font-size: 1em;
letter-spacing: 0.1em;
}
.um-bp-faq__item summary::after {
content: "+";
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.4rem;
color: #888;
transition: transform .2s ease;
}
.um-bp-faq__item[open] summary::after { content: "−"; }
.um-bp-faq__item p {
padding: 0 1.7rem 1.4rem 3.3rem;
margin: 0;
font-size: 0.92rem;
line-height: 2.0;
color: #555;
position: relative;
}
.um-bp-faq__item p::before {
content: "A";
position: absolute;
left: 1.7rem;
top: -0.1rem;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 500;
color: #888;
font-size: 1em;
letter-spacing: 0.1em;
}
.um-bp-closing {
background: rgba(0,0,0,0.025);
max-width: none;
padding: 5rem 1.5rem;
}
.um-bp-closing__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-closing__quote {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 4rem;
line-height: 0.6;
color: rgba(0,0,0,0.18);
margin: 0 0 1.5rem;
}
.um-bp-closing__body {
font-size: 0.97rem;
line-height: 2.1;
letter-spacing: 0.04em;
color: #2a2a2a;
margin: 0 0 1.6rem;
text-align: left;
}
.um-bp-closing__sign {
margin: 2.5rem 0 0;
text-align: right;
line-height: 1.5;
}
.um-bp-closing__sign-en {
display: block;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.18em;
color: #1a1a1a;
}
.um-bp-closing__sign-role {
display: block;
font-size: 0.8rem;
letter-spacing: 0.15em;
color: #888;
margin-top: 0.3rem;
}
.um-bp-cta__inner {
max-width: 460px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.um-bp-cta__btn {
display: block;
text-align: center;
padding: 1rem 1.5rem;
background: #1a1a1a;
color: #fff !important;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.25em;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
border: 1px solid #1a1a1a;
transition: opacity .2s ease;
}
.um-bp-cta__btn:hover { opacity: 0.85; }
.um-bp-cta__btn--ghost {
background: transparent;
color: #1a1a1a !important;
}
.um-bp-cta__btn--ghost:hover { background: #1a1a1a; color: #fff !important; opacity: 1; }
.um-bp-back {
max-width: 1080px;
margin: 3rem auto 0;
padding: 1.5rem;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.um-bp-back a {
color: #555;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.2em;
font-family: 'Inter Tight', system-ui, sans-serif;
}
.um-bp-back a:hover { color: #1a1a1a; }
body.theme-dark .um-bp-h2,
body.theme-dark .um-bp-h3,
body.theme-dark .um-bp-feature__title,
body.theme-dark .um-bp-flow__title { color: #f1f1f1; }
body.theme-dark .um-bp-body,
body.theme-dark .um-bp-pain-card,
body.theme-dark .um-bp-included__list li,
body.theme-dark .um-bp-option__list dt,
body.theme-dark .um-bp-closing__body { color: #d8d8d8; }
body.theme-dark .um-bp-pain-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.theme-dark .um-bp-pain-card em { color: #f1f1f1; border-bottom-color: rgba(255,255,255,0.5); }
body.theme-dark .um-bp-feature { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
body.theme-dark .um-bp-feature p,
body.theme-dark .um-bp-flow__step p,
body.theme-dark .um-bp-faq__item p,
body.theme-dark .um-bp-lead { color: #aaa; }
body.theme-dark .um-bp-plan { background: #1a1a1a; color: #f1f1f1; border-color: rgba(255,255,255,0.18); }
body.theme-dark .um-bp-plan--featured { background: #f1f1f1; color: #1a1a1a; border-color: #f1f1f1; }
body.theme-dark .um-bp-plan--featured .um-bp-plan__num,
body.theme-dark .um-bp-plan--featured .um-bp-plan__price span,
body.theme-dark .um-bp-plan--featured .um-bp-plan__spec dt { color: #555; }
body.theme-dark .um-bp-plan--featured .um-bp-plan__spec > div { border-bottom-color: rgba(0,0,0,0.1); }
body.theme-dark .um-bp-plan--featured .um-bp-plan__desc { color: #2a2a2a; }
body.theme-dark .um-bp-included__list li,
body.theme-dark .um-bp-option__list > div,
body.theme-dark .um-bp-flow__step,
body.theme-dark .um-bp-faq__list,
body.theme-dark .um-bp-faq__item { border-color: rgba(255,255,255,0.12); }
body.theme-dark .um-bp-included__list li::before { background: #f1f1f1; }
body.theme-dark .um-bp-option__list dd { color: #f1f1f1; }
body.theme-dark .um-bp-faq__item summary { color: #f1f1f1; }
body.theme-dark .um-bp-closing { background: rgba(255,255,255,0.03); }
body.theme-dark .um-bp-closing__quote { color: rgba(255,255,255,0.15); }
body.theme-dark .um-bp-closing__sign-en { color: #f1f1f1; }
body.theme-dark .um-bp-cta__btn { background: #f1f1f1; color: #1a1a1a !important; border-color: #f1f1f1; }
body.theme-dark .um-bp-cta__btn--ghost { background: transparent; color: #f1f1f1 !important; }
body.theme-dark .um-bp-cta__btn--ghost:hover { background: #f1f1f1; color: #1a1a1a !important; }
body.theme-dark .um-bp-back { border-color: rgba(255,255,255,0.12); }
body.theme-dark .um-bp-back a { color: #aaa; }
body.theme-dark .um-bp-back a:hover { color: #f1f1f1; }
body.theme-dark .um-bp-gallery__more a { color: #f1f1f1; border-bottom-color: rgba(255,255,255,0.3); }
@media (max-width: 900px) {
.um-bp-section { padding: 3rem 1.25rem; }
.um-bp-hero { min-height: 65vh; }
.um-bp-concept__grid,
.um-bp-row { grid-template-columns: 1fr; gap: 2rem; }
.um-bp-row--reverse > .um-bp-row__photo { order: 0; }
.um-bp-row { margin-bottom: 3rem; }
.um-bp-support__grid { grid-template-columns: 1fr; gap: 1rem; }
.um-bp-flow__list { grid-template-columns: 1fr; gap: 0; }
.um-bp-pricing__grid { grid-template-columns: 1fr; }
.um-bp-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.um-bp-gallery__item[data-ratio="3-2"],
.um-bp-gallery__item[data-ratio="2-1"] { grid-column: span 2; }
.um-bp-closing { padding: 3rem 1.25rem; }
.um-bp-closing__sign { text-align: center; }
}
:root {
--um-page-bg: #ffffff;
--um-transition-bg: #f4f4f4;
}
body.theme-dark {
--um-page-bg: #0f0f0f;
--um-transition-bg: #181818;
}
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100%;
margin: 0 !important;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--um-page-bg) !important;
position: relative;
}
.wp-site-blocks,
body.has-side-nav main {
overflow-x: clip;
max-width: 100vw;
}
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > * + * {
margin-block-start: 0 !important;
}
.wp-site-blocks {
background-color: var(--um-page-bg);
width: 100%;
}
body:not(.home) > .wp-site-blocks > main.wp-block-group,
body:not(.home) main.wp-block-group {
background-color: var(--um-page-bg);
}
body.um-onb-visible .um-side-nav,
body.um-onb-visible .um-site-logo--fixed {
display: none !important;
}
.um-onboarding {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
opacity: 0;
transform: translateY(0);
will-change: transform, opacity;
transition:
background-color 1.0s ease,
opacity 0.85s ease,
transform 1.1s cubic-bezier(.05, .85, .2, 1);
color: #1a1a1a;
}
.um-onboarding[data-state="visible"],
.um-onboarding[data-state="closing"] {
display: flex;
}
.um-onboarding[data-state="visible"] {
opacity: 1;
}
.um-onboarding[data-state="closing"] {
opacity: 0;
}
.um-onboarding__panel {
width: 100%;
max-width: 480px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2.25rem;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
text-align: center;
}
.um-onboarding__main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.um-onboarding__logo {
display: block;
width: 152px;
height: 36px;
margin: 0 auto 0.25rem;
background-color: currentColor;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
.um-onboarding__group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
width: 100%;
}
.um-onboarding__label {
display: inline-block;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: currentColor;
opacity: 0.7;
}
.um-onboarding__label-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.um-onboarding__info-desc {
margin: 0;
font-size: 0.75rem;
line-height: 1.7;
letter-spacing: 0.04em;
color: currentColor;
opacity: 0.6;
max-width: 360px;
}
.um-onboarding__lang,
.um-onboarding__theme {
display: inline-flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.um-onb-btn {
appearance: none;
background: transparent;
border: 1px solid currentColor;
color: currentColor;
padding: 0.45rem 1.1rem;
font: inherit;
font-size: 0.75rem;
letter-spacing: 0.18em;
cursor: pointer;
border-radius: 999px;
opacity: 0.55;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.um-onb-btn:hover { opacity: 0.85; }
.um-onb-btn.is-active {
opacity: 1;
background: #1a1a1a;
color: #ffffff;
border-color: #1a1a1a;
}
body.theme-dark .um-onb-btn.is-active {
background: #f5f5f5;
color: #0f0f0f;
border-color: #f5f5f5;
}
.um-onb-theme {
appearance: none;
background: transparent;
border: 1px solid currentColor;
color: currentColor;
padding: 0.45rem 0.95rem;
font: inherit;
font-size: 0.75rem;
letter-spacing: 0.18em;
cursor: pointer;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
opacity: 0.55;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.um-onb-theme:hover { opacity: 0.85; }
.um-onb-theme.is-active { opacity: 1; }
.um-onb-theme__swatch {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid currentColor;
}
.um-onb-theme__swatch--light { background: #ffffff; }
.um-onb-theme__swatch--dark  { background: #111111; }
.um-onboarding__group--genre {
gap: 0.6rem;
}
.um-onboarding__genre {
width: 100%;
display: flex;
justify-content: center;
}
.um-onboarding__genre .um-dropdown {
width: 100%;
max-width: 320px;
}
.um-onboarding__genre .um-dropdown.is-shake {
animation: um-onb-shake 0.45s ease;
}
@keyframes um-onb-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.um-onboarding__continue {
align-self: center;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid currentColor;
background: transparent;
color: currentColor;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.um-onboarding__continue:hover:not(:disabled) {
background: #1a1a1a;
color: #ffffff;
border-color: #1a1a1a;
transform: translateX(2px);
}
body.theme-dark .um-onboarding__continue:hover:not(:disabled) {
background: #f5f5f5;
color: #0f0f0f;
border-color: #f5f5f5;
}
.um-onboarding__continue:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.um-onboarding__continue svg {
width: 22px;
height: 22px;
}
.um-onboarding__hint {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
color: currentColor;
opacity: 0.55;
}
.um-onboarding__hint-diagram {
width: 120px;
height: auto;
}
.um-onboarding__hint-text {
margin: 0;
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.um-onboarding__info {
appearance: none;
background: transparent;
border: 1px solid currentColor;
color: currentColor;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 0.625rem;
line-height: 1;
cursor: pointer;
opacity: 0.6;
}
.um-onboarding__info:hover { opacity: 1; }
.um-onboarding__splash {
display: none;
}
.um-onboarding { overflow-y: auto; }
.um-onboarding__panel { transition: max-width 0.5s cubic-bezier(.2,.7,.25,1); }
.um-onboarding[data-step="2"] .um-onboarding__panel { max-width: 540px; }
.um-onb-progress { display: inline-flex; gap: 0.5rem; justify-content: center; }
.um-onb-progress__dot {
width: 7px; height: 7px; border-radius: 50%;
border: 1px solid currentColor; opacity: 0.4;
transition: opacity .25s ease, background-color .25s ease, transform .25s ease;
}
.um-onb-progress__dot.is-done   { opacity: 0.7; background: currentColor; }
.um-onb-progress__dot.is-active { opacity: 1;   background: currentColor; transform: scale(1.25); }
.um-onb-steps { width: 100%; }
.um-onb-step { display: none; flex-direction: column; align-items: center; gap: 1.75rem; width: 100%; }
.um-onb-step.is-active { display: flex; animation: um-onb-step-in .45s ease both; }
@keyframes um-onb-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.um-onb-step__head { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.um-onb-step__title {
margin: 0;
font-size: 1.12rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.4;
color: currentColor;
}
.um-onb-genre-cards { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; }
.um-onb-genre-cards.is-shake { animation: um-onb-shake 0.45s ease; }
.um-onb-genre-card {
appearance: none; cursor: pointer; padding: 0; text-align: left;
width: 100%; max-width: none;
position: relative; overflow: hidden; border-radius: 14px;
aspect-ratio: 5 / 2; min-height: 120px;
background: #d9d4cc center / cover no-repeat;
color: #fff;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 10px 30px -18px rgba(0,0,0,0.5);
transition: transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .35s ease, outline-color .2s ease;
}
.um-onb-genre-card[data-value="branding-profile"]:not(.has-img) { background: linear-gradient(150deg, #3b414e, #1e2228); }
.um-onb-genre-card[data-value="wedding"]:not(.has-img)          { background: linear-gradient(150deg, #c8a7a1, #7c5a55); }
.um-onb-genre-card[data-value="life-moments"]:not(.has-img)     { background: linear-gradient(150deg, #b9ab8d, #6f6450); }
.um-onb-genre-card__marquee { position: absolute; inset: 0; overflow: hidden; }
.um-onb-genre-card__track {
display: flex; align-items: stretch; height: 100%; width: max-content;
animation: um-onb-strip-scroll var(--um-onb-strip-dur, 32s) linear infinite;
will-change: transform;
}
.um-onb-genre-card:hover .um-onb-genre-card__track { animation-play-state: paused; }
.um-onb-genre-card__shot { flex: 0 0 auto; height: 100%; width: auto; margin-right: 6px; }
.um-onb-genre-card__shot img {
height: 100%; width: auto; max-width: none; object-fit: cover; display: block;
}
@keyframes um-onb-strip-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.um-onb-genre-card__track { animation: none; }
}
.um-onb-genre-card.has-photo { background-image: none; }
.um-onb-genre-card__media {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0.04) 100%);
}
.um-onb-genre-card__icon {
position: absolute; top: 13px; left: 13px; width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.75); border-radius: 50%; color: #fff;
}
.um-onb-genre-card__icon svg { width: 16px; height: 16px; }
.um-onb-genre-card__body {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.um-onb-genre-card__title { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; line-height: 1.25; }
.um-onb-genre-card__desc {
font-size: 0.7rem; line-height: 1.5; opacity: 0.88;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.um-onb-genre-card__check {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 26px; height: 26px; border-radius: 50%;
background: #fff; color: #111;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(0.6); transition: opacity .25s ease, transform .25s ease;
}
.um-onb-genre-card__check svg { width: 15px; height: 15px; }
.um-onb-genre-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(0,0,0,0.6); }
.um-onb-genre-card.is-active {
outline: 2px solid #fff; outline-offset: -2px;
box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 16px 36px -16px rgba(0,0,0,0.6);
}
.um-onb-genre-card.is-active .um-onb-genre-card__check { opacity: 1; transform: scale(1); }
.um-onb-nav {
display: flex; align-items: center; justify-content: space-between;
width: 100%; max-width: 360px; margin: 0 auto; gap: 1rem;
}
.um-onboarding[data-step="2"] .um-onb-nav { max-width: 540px; }
.um-onb-back {
appearance: none; background: transparent; border: 0; color: currentColor;
font: inherit; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
opacity: 0.6; cursor: pointer; padding: 0.4rem 0.2rem;
transition: opacity .2s ease;
}
.um-onb-back:hover { opacity: 1; }
.um-onb-back.is-hidden { visibility: hidden; }
.um-onb-next {
margin-left: auto;
appearance: none; cursor: pointer; color: currentColor;
background: transparent; border: 1px solid currentColor; border-radius: 999px;
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.6rem 1.3rem; font: inherit; font-size: 0.72rem;
letter-spacing: 0.2em; text-transform: uppercase;
transition: background-color .25s ease, color .25s ease, opacity .25s ease, transform .25s ease;
}
.um-onb-next svg { width: 18px; height: 18px; }
.um-onb-next:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; transform: translateX(2px); }
body.theme-dark .um-onb-next:hover { background: #f5f5f5; color: #0f0f0f; border-color: #f5f5f5; }
.um-onb-next.is-disabled { opacity: 0.35; }
@media (max-width: 720px) {
.um-onboarding[data-step="2"] .um-onboarding__panel { max-width: 92vw; }
.um-onb-genre-card { aspect-ratio: 16 / 7; min-height: 116px; }
.um-onb-genre-card__body { padding: 0.8rem 0.95rem 0.9rem; }
.um-onb-nav, .um-onboarding[data-step="2"] .um-onb-nav { max-width: 92vw; }
}
body.theme-dark .um-onboarding {
background: rgba(15, 15, 15, 0.96);
color: #f5f5f5;
}
html.um-pre-dark .um-onboarding {
background: rgba(15, 15, 15, 0.96);
color: #f5f5f5;
}
.um-gallery-menu,
.um-about-menu,
.um-news-menu {
position: relative;
}
.um-gallery-menu__popup,
.um-about-menu__popup,
.um-news-menu__popup {
writing-mode: horizontal-tb;
text-orientation: mixed;
position: fixed;
right: calc(56px + 12px);
top: 50vh;
transform: translate(8px, -50%);
width: 420px;
background: #ffffff;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
padding: 14px;
box-shadow: 0 26px 60px -20px rgba(0, 0, 0, 0.25);
max-height: calc(100vh - 24px);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
pointer-events: none;
z-index: 1010;
display: flex;
flex-direction: column;
gap: 0;
text-align: left;
}
.um-gallery-menu__preview {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 3px;
width: 100%;
aspect-ratio: 5 / 2;
border-radius: 4px;
overflow: hidden;
background: #f4f4f4;
}
.um-gallery-menu__preview-cell {
display: block;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.um-gallery-menu__lead {
margin: 14px 0 12px !important;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.03em;
color: #444;
}
.um-gallery-menu__lead-logo {
display: inline-block;
vertical-align: -0.18em;
width: 76px;
height: 18px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
}
body.theme-dark .um-gallery-menu__lead-logo { background-color: #f1f1f1; }
.um-gallery-menu__divider {
height: 1px;
background: var(--wp--preset--color--line, rgba(0,0,0,0.08));
margin: 4px 0 6px;
}
.um-gallery-menu__popup::before,
.um-about-menu__popup::before,
.um-news-menu__popup::before {
content: '';
position: absolute;
right: -16px;
top: 0;
bottom: 0;
width: 16px;
background: transparent;
}
.um-gallery-menu.is-popup-open .um-gallery-menu__popup,
.um-gallery-menu:hover .um-gallery-menu__popup,
.um-gallery-menu:focus-within .um-gallery-menu__popup,
.um-gallery-menu__popup:hover,
.um-gallery-menu__trigger[aria-expanded="true"] + .um-gallery-menu__popup,
.um-about-menu.is-popup-open .um-about-menu__popup,
.um-about-menu:hover .um-about-menu__popup,
.um-about-menu:focus-within .um-about-menu__popup,
.um-about-menu__popup:hover,
.um-about-menu__trigger[aria-expanded="true"] + .um-about-menu__popup,
.um-news-menu.is-popup-open .um-news-menu__popup,
.um-news-menu:hover .um-news-menu__popup,
.um-news-menu:focus-within .um-news-menu__popup,
.um-news-menu__popup:hover,
.um-news-menu__trigger[aria-expanded="true"] + .um-news-menu__popup {
opacity: 1;
visibility: visible;
transform: translate(0, -50%);
pointer-events: auto;
}
.um-gallery-menu__option,
.um-about-menu__option,
.um-news-menu__option {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 4px;
text-decoration: none;
color: #1a1a1a;
transition: background .2s ease;
}
.um-gallery-menu__option:hover,
.um-about-menu__option:hover,
.um-news-menu__option:hover { background: rgba(0, 0, 0, 0.04); }
.um-gallery-menu__option-icon,
.um-about-menu__option-icon,
.um-news-menu__option-icon {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
}
.um-gallery-menu__option-icon svg,
.um-about-menu__option-icon svg,
.um-news-menu__option-icon svg { width: 22px; height: 22px; }
.um-gallery-menu__option-text,
.um-about-menu__option-text,
.um-news-menu__option-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.um-gallery-menu__option-title,
.um-about-menu__option-title,
.um-news-menu__option-title {
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.16em;
color: #1a1a1a;
}
.um-gallery-menu__option-desc,
.um-about-menu__option-desc,
.um-news-menu__option-desc {
font-size: 0.8125rem;
letter-spacing: 0.03em;
color: #888;
}
.um-about-menu__portraits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
width: 100%;
aspect-ratio: 16 / 11;
border-radius: 4px;
overflow: hidden;
background: #f4f4f4;
}
.um-about-menu__portraits--single {
grid-template-columns: 1fr;
aspect-ratio: 1920 / 1101;
}
.um-about-menu__portrait {
display: block;
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.um-about-menu__portraits--single .um-about-menu__portrait {
background-position: center center;
}
.um-about-menu__lead {
margin: 14px 0 12px !important;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.03em;
color: #444;
}
.um-about-menu__lead strong {
font-weight: 600;
color: #1a1a1a;
}
.um-about-menu__lead-logo {
display: inline-block;
vertical-align: -0.18em;
width: 76px;
height: 18px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
}
.um-about-menu__divider {
height: 1px;
background: var(--wp--preset--color--line, rgba(0,0,0,0.08));
margin: 4px 0 6px;
}
.um-news-menu__marquee {
width: 100%;
overflow: hidden;
border-radius: 4px;
background: #f4f4f4;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.um-news-menu__track {
display: flex;
width: max-content;
will-change: transform;
animation: um-news-menu-scroll 32s linear infinite;
}
.um-news-menu__group {
display: flex;
gap: 0;
padding-right: 0;
margin: 0;
list-style: none;
flex-shrink: 0;
line-height: 0;
}
.um-news-menu__item { display: block; line-height: 0; }
.um-news-menu__card {
display: block;
height: 300px;
overflow: hidden;
text-decoration: none;
transition: transform .25s cubic-bezier(.2, .6, .2, 1);
}
.um-news-menu__card:hover { transform: scale(1.04); }
.um-news-menu__img {
display: block;
width: auto;
height: 100%;
object-fit: contain;
object-position: center;
}
.um-news-menu__placeholder {
display: block;
width: 340px;
height: 100%;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}
.um-news-menu__lead {
margin: 14px 0 12px !important;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.03em;
color: #444;
}
.um-news-menu__divider {
height: 1px;
background: var(--wp--preset--color--line, rgba(0,0,0,0.08));
margin: 4px 0 6px;
}
.um-news-menu__empty {
text-align: center;
color: #888;
font-size: 0.875rem;
padding: 1rem 0;
}
@keyframes um-news-menu-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.um-news-menu__track { animation: none; }
}
.um-about-menu__option-title--logo {
display: inline-flex;
align-items: center;
line-height: 1;
}
.um-about-menu__option-logo {
display: block;
width: 84px;
height: 20px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
}
body.theme-dark .um-about-menu__option-logo { background-color: #f1f1f1; }
body.theme-dark .um-gallery-menu__popup,
body.theme-dark .um-about-menu__popup,
body.theme-dark .um-news-menu__popup {
background: #1a1a1a;
border-color: #2a2a2a;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
}
body.theme-dark .um-gallery-menu__option,
body.theme-dark .um-about-menu__option,
body.theme-dark .um-news-menu__option { color: #e5e5e5; }
body.theme-dark .um-gallery-menu__option:hover,
body.theme-dark .um-about-menu__option:hover,
body.theme-dark .um-news-menu__option:hover { background: rgba(255, 255, 255, 0.06); }
body.theme-dark .um-gallery-menu__option-title,
body.theme-dark .um-about-menu__option-title,
body.theme-dark .um-news-menu__option-title { color: #e5e5e5; }
body.theme-dark .um-gallery-menu__option-desc,
body.theme-dark .um-about-menu__option-desc,
body.theme-dark .um-news-menu__option-desc { color: #999; }
body.theme-dark .um-gallery-menu__option-icon,
body.theme-dark .um-about-menu__option-icon,
body.theme-dark .um-news-menu__option-icon { color: #e5e5e5; }
body.theme-dark .um-gallery-menu__lead,
body.theme-dark .um-about-menu__lead,
body.theme-dark .um-news-menu__lead { color: #ccc; }
body.theme-dark .um-about-menu__lead strong { color: #f1f1f1; }
body.theme-dark .um-about-menu__lead-logo { background-color: #f1f1f1; }
body.theme-dark .um-gallery-menu__preview,
body.theme-dark .um-about-menu__portraits,
body.theme-dark .um-news-menu__marquee { background: #2a2a2a; }
body.theme-dark .um-gallery-menu__divider,
body.theme-dark .um-about-menu__divider,
body.theme-dark .um-news-menu__divider { background: rgba(255,255,255,0.1); }
@media (max-width: 600px) {
.um-gallery-menu__popup,
.um-about-menu__popup,
.um-news-menu__popup {
position: fixed;
right: 1rem;
left: auto;
top: auto;
bottom: 1rem;
margin-right: 0;
transform: translateY(8px);
width: calc(100vw - 2rem - 56px);
max-width: 360px;
}
.um-gallery-menu:hover .um-gallery-menu__popup,
.um-gallery-menu:focus-within .um-gallery-menu__popup,
.um-gallery-menu__popup:hover,
.um-gallery-menu__trigger[aria-expanded="true"] + .um-gallery-menu__popup,
.um-about-menu:hover .um-about-menu__popup,
.um-about-menu:focus-within .um-about-menu__popup,
.um-about-menu__popup:hover,
.um-about-menu__trigger[aria-expanded="true"] + .um-about-menu__popup,
.um-news-menu:hover .um-news-menu__popup,
.um-news-menu:focus-within .um-news-menu__popup,
.um-news-menu__popup:hover,
.um-news-menu__trigger[aria-expanded="true"] + .um-news-menu__popup {
transform: translateY(0);
}
}
@media (max-width: 600px) {
.um-ig__popup--header {
position: fixed;
right: 1rem;
left: auto;
top: auto;
bottom: 1rem;
width: calc(100vw - 2rem);
max-width: 320px;
}
}
.um-side-nav__theme {
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.04);
}
.um-side-nav__theme-btn {
width: 16px;
height: 16px;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.um-side-nav__theme-btn[data-theme="light"] { background: #fff; }
.um-side-nav__theme-btn[data-theme="dark"]  { background: #1a1a1a; border-color: rgba(0,0,0,0.6); }
.um-side-nav__theme-btn.is-active { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
.um-side-nav__lang {
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
}
.um-side-nav__lang-btn {
border: 0;
background: transparent;
color: #888;
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.4;
padding: 1px 4px;
cursor: pointer;
border-radius: 4px;
transition: color .2s ease, background .2s ease;
font-family: inherit;
}
.um-side-nav__lang-btn:hover { color: #333; }
.um-side-nav__lang-btn.is-active {
color: #fff;
background: #1a1a1a;
}
body.theme-dark {
background: #0f0f0f;
color: #e5e5e5;
}
body.theme-dark .um-side-nav {
background: rgba(15, 15, 15, 0.7);
}
body.theme-dark .um-side-nav .um-side-nav__menu a { color: #e5e5e5; }
body.theme-dark .um-side-nav .um-side-nav__menu a:hover { color: #999; }
body.theme-dark .um-side-nav__social a,
body.theme-dark .um-side-nav__social .um-ig__trigger { color: #f5f5f5; }
body.theme-dark .um-side-nav__social a:hover,
body.theme-dark .um-side-nav__social .um-ig__trigger:hover { color: #aaa; }
body.theme-dark .um-side-nav__theme {
background: rgba(255, 255, 255, 0.08);
}
body.theme-dark .um-side-nav__theme-btn {
border-color: rgba(255, 255, 255, 0.35);
}
body.theme-dark .um-side-nav__theme-btn.is-active {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-side-nav__lang-btn { color: #888; }
body.theme-dark .um-side-nav__lang-btn:hover { color: #ddd; }
body.theme-dark .um-side-nav__lang-btn.is-active {
color: #1a1a1a;
background: #f5f5f5;
}
.um-side-nav__settings {
background: transparent;
border: 1px solid rgba(0,0,0,0.18);
color: #1a1a1a;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
padding: 0;
margin-top: 0.4rem;
}
.um-side-nav__settings:hover {
background: rgba(0,0,0,0.05);
border-color: rgba(0,0,0,0.32);
transform: rotate(30deg);
}
body.theme-dark .um-side-nav__settings {
color: #f5f5f5;
border-color: rgba(255,255,255,0.25);
}
body.theme-dark .um-side-nav__settings:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.45);
}
.um-side-tip {
position: fixed;
z-index: 10100;
pointer-events: none;
max-width: 280px;
min-width: 180px;
padding: 0.7rem 0.95rem 0.75rem;
background: rgba(255, 255, 255, 0.96);
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.06);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
line-height: 1.45;
opacity: 0;
transform: translateX(8px);
transition: opacity .22s ease, transform .26s cubic-bezier(.2, .6, .2, 1);
}
.um-side-tip.is-visible {
opacity: 1;
transform: translateX(0);
}
.um-side-tip__title {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
color: #888;
margin-bottom: 0.25rem;
}
.um-side-tip__desc {
display: block;
font-size: 0.85rem;
font-weight: 400;
color: #1a1a1a;
}
.um-side-tip::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(0, 0, 0, 0.08);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-dark .um-side-tip {
background: rgba(22, 22, 22, 0.94);
color: #f1f1f1;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.6),
0 3px 8px rgba(0, 0, 0, 0.4);
}
body.theme-dark .um-side-tip__title { color: #999; }
body.theme-dark .um-side-tip__desc  { color: #f1f1f1; }
body.theme-dark .um-side-tip::after {
background: rgba(22, 22, 22, 0.94);
border-right-color: rgba(255, 255, 255, 0.08);
border-top-color:  rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
.um-side-tip { display: none !important; }
}
.um-back-to-top {
position: fixed;
right: 76px;
bottom: 24px;
width: 44px;
height: 44px;
z-index: 999;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.78);
color: #1a1a1a;
cursor: pointer;
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.18),
0 2px 6px rgba(0, 0, 0, 0.06);
opacity: 0;
transform: translateY(8px) scale(0.95);
pointer-events: none;
transition: opacity .35s ease,
transform .35s cubic-bezier(.2, .6, .2, 1),
background .25s ease,
color .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.um-back-to-top.is-visible {
opacity: 0.65;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.um-back-to-top:hover,
.um-back-to-top:focus-visible {
opacity: 1;
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35),
0 3px 8px rgba(0, 0, 0, 0.12);
outline: none;
}
.um-back-to-top svg {
width: 18px;
height: 18px;
display: block;
}
body.theme-dark .um-back-to-top {
background: rgba(22, 22, 22, 0.78);
border-color: rgba(255, 255, 255, 0.1);
color: #f5f5f5;
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6),
0 2px 6px rgba(0, 0, 0, 0.3);
}
body.theme-dark .um-back-to-top:hover,
body.theme-dark .um-back-to-top:focus-visible {
background: #f5f5f5;
color: #1a1a1a;
border-color: #f5f5f5;
}
@media (max-width: 768px) {
.um-back-to-top {
right: 14px;
bottom: 16px;
width: 40px;
height: 40px;
}
.um-back-to-top svg { width: 16px; height: 16px; }
}
.um-settings-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.32);
z-index: 9000;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s ease;
}
.um-settings-backdrop[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.um-settings-panel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9100;
background: #fff;
color: #1a1a1a;
box-shadow: 0 -20px 50px -10px rgba(0,0,0,0.18);
border-top-left-radius: 18px;
border-top-right-radius: 18px;
padding: 1rem 1.75rem 2.5rem;
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(.32, .72, .25, 1);
max-width: 720px;
margin: 0 auto;
will-change: transform;
}
.um-settings-panel[aria-hidden="false"] {
transform: translateY(0);
}
.um-settings-panel__handle {
width: 44px;
height: 4px;
background: rgba(0,0,0,0.18);
border-radius: 2px;
margin: 0 auto 1rem;
}
.um-settings-panel__close {
position: absolute;
top: 0.85rem;
right: 1rem;
background: transparent;
border: 0;
color: #555;
font-size: 24px;
line-height: 1;
width: 32px;
height: 32px;
cursor: pointer;
border-radius: 50%;
transition: background 0.2s ease;
}
.um-settings-panel__close:hover { background: rgba(0,0,0,0.06); }
.um-settings-panel__inner {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.um-settings-panel .um-settings-section {
text-align: center;
}
.um-settings-panel .um-settings-section__label-row {
justify-content: center;
width: 100%;
display: flex;
}
.um-settings-panel .um-settings-section__row {
justify-content: center;
}
.um-settings-panel__title {
font-size: 0.78rem;
letter-spacing: 0.32em;
color: #888;
margin: 0 0 0.3rem;
text-align: center;
font-weight: 500;
}
.um-settings-section__label {
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.18em;
color: #555;
margin: 0 0 0.7rem;
}
body.theme-dark .um-settings-section__label { color: #ddd; }
.um-settings-section__label-row {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.7rem;
}
.um-settings-section__label-row .um-settings-section__label { margin-bottom: 0; }
.um-settings-section__row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.um-settings-panel .um-side-nav__lang-btn {
background: transparent;
color: #555;
font-size: 0.85rem;
letter-spacing: 0.12em;
padding: 0.6rem 1rem;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 6px;
min-width: 60px;
text-align: center;
line-height: 1;
}
.um-settings-panel .um-side-nav__lang-btn:hover {
background: rgba(0,0,0,0.04);
color: #1a1a1a;
}
.um-settings-panel .um-side-nav__lang-btn.is-active {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
.um-settings-panel .um-side-nav__genre-btn {
background: transparent;
color: #555;
font-size: 0.78rem;
letter-spacing: 0.18em;
padding: 0.6rem 1rem;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 6px;
text-align: center;
line-height: 1;
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.um-settings-panel .um-side-nav__genre-btn:hover {
background: rgba(0,0,0,0.04);
color: #1a1a1a;
}
.um-settings-panel .um-side-nav__genre-btn.is-active {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
body.theme-dark .um-settings-panel .um-side-nav__genre-btn {
color: #ccc;
border-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-settings-panel .um-side-nav__genre-btn:hover {
background: rgba(255,255,255,0.06);
color: #fff;
}
body.theme-dark .um-settings-panel .um-side-nav__genre-btn.is-active {
background: #f5f5f5;
color: #1a1a1a;
border-color: #f5f5f5;
}
.um-settings-panel .um-side-nav__theme-btn {
width: auto;
height: auto;
padding: 0.6rem 1rem;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.18);
background: transparent;
box-shadow: none;
color: #555;
font-size: 0.78rem;
letter-spacing: 0.18em;
display: inline-flex;
align-items: center;
gap: 0.55rem;
line-height: 1;
}
.um-settings-panel .um-side-nav__theme-btn:hover {
background: rgba(0,0,0,0.04);
color: #1a1a1a;
}
.um-settings-panel .um-side-nav__theme-btn.is-active {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
box-shadow: none;
}
.um-settings-theme-swatch {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.25);
}
.um-settings-theme-swatch--light { background: #fff; }
.um-settings-theme-swatch--dark  { background: #1a1a1a; }
body.um-settings-open { overflow: hidden; }
body.theme-dark .um-settings-panel {
background: #161616;
color: #f5f5f5;
box-shadow: 0 -20px 50px -10px rgba(0,0,0,0.6);
}
body.theme-dark .um-settings-panel__handle { background: rgba(255,255,255,0.2); }
body.theme-dark .um-settings-panel__close  { color: #aaa; }
body.theme-dark .um-settings-panel__close:hover { background: rgba(255,255,255,0.08); }
body.theme-dark .um-settings-panel__title  { color: #888; }
body.theme-dark .um-settings-section__label { color: #777; }
body.theme-dark .um-settings-panel .um-side-nav__lang-btn,
body.theme-dark .um-settings-panel .um-side-nav__theme-btn {
color: #ccc;
border-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-settings-panel .um-side-nav__lang-btn:hover,
body.theme-dark .um-settings-panel .um-side-nav__theme-btn:hover {
background: rgba(255,255,255,0.06);
color: #fff;
}
body.theme-dark .um-settings-panel .um-side-nav__lang-btn.is-active,
body.theme-dark .um-settings-panel .um-side-nav__theme-btn.is-active {
background: #f5f5f5;
color: #1a1a1a;
border-color: #f5f5f5;
}
body.theme-dark .um-settings-theme-swatch--light { border-color: rgba(255,255,255,0.4); }
body.theme-dark .um-settings-theme-swatch--dark  { border-color: rgba(255,255,255,0.18); }
.um-loader {
position: fixed;
inset: 0;
z-index: 99000;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0s linear 0s;
}
body.is-loaded .um-loader {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
html.um-onb-pre .um-loader,
body.um-onb-visible .um-loader {
display: none !important;
}
html.um-onb-pre .wp-site-blocks,
html.um-onb-pre .um-breadcrumb,
html.um-onb-pre .um-mb-toggle,
html.um-onb-pre .um-top-header,
html.um-onb-pre .um-top-header__menu-zone,
html.um-onb-pre .um-info-ticker--fixed {
visibility: hidden !important;
}
html.um-onb-pre.um-pre-light,
html.um-onb-pre.um-pre-light body { background: #ffffff !important; }
html.um-onb-pre.um-pre-dark,
html.um-onb-pre.um-pre-dark body { background: #0f0f0f !important; }
.um-loader__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.4rem;
}
.um-loader__anniv {
display: inline-flex;
align-items: center;
gap: 0.9rem;
margin-bottom: -0.4rem;
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
font-size: 0.75rem;
letter-spacing: 0.38em;
color: #b8a48a;
text-transform: uppercase;
opacity: 0.85;
}
.um-loader__anniv-ornament {
font-size: 0.55rem;
letter-spacing: normal;
opacity: 0.45;
}
.um-loader__anniv-text {
font-weight: 400;
}
.um-loader__since {
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.42em;
color: #aaa;
text-transform: uppercase;
margin-top: -0.6rem;
opacity: 0.75;
}
body.theme-dark .um-loader__anniv { color: #c7b290; opacity: 0.8; }
body.theme-dark .um-loader__since { color: #8a8a8a; }
@media (max-width: 768px) {
.um-loader__anniv { font-size: 0.66rem; letter-spacing: 0.3em; gap: 0.6rem; }
.um-loader__since { font-size: 0.58rem; letter-spacing: 0.32em; }
}
.um-loader__logo {
display: block;
width: 184px;
height: 40px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
animation: um-loader-logo-fade 1.6s ease-in-out infinite;
}
@keyframes um-loader-logo-fade {
0%, 100% { opacity: 0.6; }
50%      { opacity: 1; }
}
.um-loader__gauge {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0;
}
.um-loader__bar {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(0, 0, 0, 0.08);
}
.um-loader__bar-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: #1a1a1a;
}
.um-loader__marker {
position: absolute;
left: 1.5rem;
bottom: 1.2rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.6rem;
color: #1a1a1a;
white-space: nowrap;
}
.um-loader__loading {
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.28em;
font-weight: 400;
opacity: 0.8;
}
body.theme-dark .um-loader__loading { color: #f5f5f5; }
.um-loader__cam {
display: inline-flex;
width: 28px;
height: 28px;
opacity: 0.9;
animation: um-nav-cam-pulse 1.2s ease-in-out infinite;
}
.um-loader__cam svg { width: 100%; height: 100%; display: block; }
.um-loader__pct {
position: absolute;
right: 1.5rem;
bottom: 1.2rem;
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
color: #1a1a1a;
line-height: 1;
}
.um-loader__pct-sym {
font-size: 0.7em;
margin-left: 0.06em;
opacity: 0.6;
}
body.theme-dark .um-loader {
background: #0f0f0f;
}
body.theme-dark .um-loader__logo {
background-color: #f5f5f5;
}
body.theme-dark .um-loader__marker { color: #f5f5f5; }
body.theme-dark .um-loader__pct { color: #f5f5f5; }
body.theme-dark .um-loader__bar { background: rgba(255, 255, 255, 0.12); }
body.theme-dark .um-loader__bar-fill { background: #f5f5f5; }
@media (prefers-reduced-motion: reduce) {
.um-loader__cam { animation: none !important; }
.um-loader__marker { transition: none !important; }
}
.um-curtain { display: none; }
html.um-curtain-pre .um-curtain {
display: block;
position: fixed;
inset: 0;
z-index: 99600;
overflow: hidden;
pointer-events: auto;
}
html.um-curtain-pre .um-curtain.is-entering { animation: um-curtain-enter 0.5s ease both; }
@keyframes um-curtain-enter { from { opacity: 0; } to { opacity: 1; } }
.um-curtain__panel {
position: absolute;
left: 0; right: 0;
height: 50.5%;
background: #0c0c0c;
overflow: hidden;
}
.um-curtain__panel--top    { top: 0;    transform: translateY(0); }
.um-curtain__panel--bottom { bottom: 0; transform: translateY(0); }
.um-curtain__panel::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 100vh;
background: linear-gradient(rgba(10,10,10,0.42), rgba(10,10,10,0.42)), url('../img/open-bg.jpg') center center / cover no-repeat;
opacity: 0;
will-change: opacity;
}
.um-curtain__panel--top::after    { top: 0; }
.um-curtain__panel--bottom::after { bottom: 0; }
@keyframes um-curtain-photo {
0%   { opacity: 0; }
57%  { opacity: 1; }
86%  { opacity: 1; }
96%  { opacity: 0; }
100% { opacity: 0; }
}
html.um-curtain-pre .um-curtain.is-active .um-curtain__panel::after {
animation: um-curtain-photo 2.8s ease forwards;
}
.um-curtain__stage {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.1rem, 3.4vh, 2.1rem);
z-index: 2;
}
.um-curtain__draw {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(54vw, 360px);
height: auto;
overflow: visible;
}
.um-curtain__glyph {
fill: #f3f1ea;
fill-opacity: 0;
stroke: #f3f1ea;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
will-change: stroke-dashoffset, fill-opacity;
}
@keyframes um-curtain-trace { to { stroke-dashoffset: 0; } }
@keyframes um-curtain-fill  { to { fill-opacity: 1; } }
html.um-curtain-pre .um-curtain.is-active .um-curtain__glyph--um {
animation: um-curtain-trace 0.85s cubic-bezier(.65,.02,.35,1) 0.15s forwards,
um-curtain-fill  0.55s ease-out 0.92s forwards;
}
html.um-curtain-pre .um-curtain.is-active .um-curtain__glyph--dot {
animation: um-curtain-trace 0.30s ease-out 0.92s forwards,
um-curtain-fill  0.30s ease-out 1.08s forwards;
}
html.um-curtain-pre .um-curtain.is-active .um-curtain__glyph--studio {
animation: um-curtain-trace 0.95s cubic-bezier(.65,.02,.35,1) 0.55s forwards,
um-curtain-fill  0.60s ease-out 1.28s forwards;
}
.um-curtain__tagline {
position: absolute;
left: 0; right: 0;
top: calc(50% + clamp(48px, 7.5vh, 74px));
margin: 0;
text-align: center;
color: #f3f1ea;
font-family: 'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;
font-size: clamp(0.9rem, 2.3vw, 1.32rem);
font-weight: 400;
letter-spacing: 0.32em;
text-indent: 0.32em;
opacity: 0;
transform: translateY(7px);
pointer-events: none;
will-change: opacity, transform;
}
@keyframes um-curtain-text-in {
from { opacity: 0; transform: translateY(7px); }
to   { opacity: 1; transform: translateY(0); }
}
html.um-curtain-pre .um-curtain.is-active .um-curtain__tagline {
animation: um-curtain-text-in 0.9s cubic-bezier(.22,.61,.36,1) 1.1s forwards;
}
.um-curtain__welcome {
position: absolute;
left: 0; right: 0;
top: 50%;
margin: 0;
text-align: center;
color: #f3f1ea;
font-family: 'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;
font-size: clamp(1.05rem, 3vw, 1.6rem);
font-weight: 600;
letter-spacing: 0.26em;
text-indent: 0.26em;
opacity: 0;
transform: translateY(-50%);
z-index: 2;
pointer-events: none;
will-change: opacity;
}
html.um-curtain-pre .um-curtain.is-welcome .um-curtain__draw,
html.um-curtain-pre .um-curtain.is-welcome .um-curtain__tagline {
opacity: 0;
animation: none;
transition: opacity .34s ease;
}
html.um-curtain-pre .um-curtain.is-welcome .um-curtain__welcome {
opacity: 1;
transition: opacity .5s ease .12s;
}
html.um-curtain-pre--reduced .um-curtain__glyph { stroke-dashoffset: 0; fill-opacity: 1; animation: none; }
html.um-curtain-pre--reduced .um-curtain__tagline { opacity: 1; transform: none; animation: none; }
html.um-curtain-pre--reduced .um-curtain__welcome { opacity: 0; }
.um-curtain__slice {
position: absolute;
left: 0; right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%) scaleX(0);
transform-origin: center;
background: linear-gradient(90deg, rgba(243,241,234,0) 0%, rgba(243,241,234,0.9) 18%, #ffffff 50%, rgba(243,241,234,0.9) 82%, rgba(243,241,234,0) 100%);
box-shadow: 0 0 14px rgba(255,255,255,0.85), 0 0 4px rgba(255,255,255,0.95);
opacity: 0;
z-index: 3;
will-change: transform, opacity;
pointer-events: none;
}
html.um-curtain-pre .um-curtain.is-slicing .um-curtain__slice {
animation: um-curtain-slice 0.52s cubic-bezier(.5,0,.1,1) forwards;
}
@keyframes um-curtain-slice {
0%   { transform: translateY(-50%) scaleX(0); opacity: 0; }
22%  { opacity: 1; }
52%  { transform: translateY(-50%) scaleX(1); opacity: 1; }
100% { transform: translateY(-50%) scaleX(1); opacity: 0; }
}
html.um-curtain-pre .um-curtain.is-slicing .um-curtain__draw {
opacity: 0;
transition: opacity .26s ease;
}
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__panel--top {
transform: translateY(-100.5%);
transition: transform .72s cubic-bezier(.76,0,.24,1);
}
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__panel--bottom {
transform: translateY(100.5%);
transition: transform .72s cubic-bezier(.76,0,.24,1);
}
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__slice,
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__draw,
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__tagline {
opacity: 0;
transition: opacity .3s ease;
}
html.um-curtain-pre .um-curtain.is-slicing .um-curtain__welcome {
animation: um-curtain-welcome-blink 0.6s ease-in-out forwards;
}
@keyframes um-curtain-welcome-blink {
0%   { opacity: 1; }
25%  { opacity: .35; }
50%  { opacity: 1; }
75%  { opacity: .35; }
100% { opacity: 1; }
}
html.um-curtain-pre .um-curtain.is-revealing .um-curtain__welcome {
animation: none;
opacity: 0;
transition: opacity .28s ease .42s;
}
html.um-curtain-pre--reduced .um-curtain.is-revealing {
opacity: 0;
transition: opacity .38s ease;
}
html.um-curtain-pre--reduced .um-curtain.is-revealing .um-curtain__panel--top,
html.um-curtain-pre--reduced .um-curtain.is-revealing .um-curtain__panel--bottom {
transform: none;
}
html.um-curtain-pre .um-curtain.is-done {
visibility: hidden;
pointer-events: none;
transition: visibility 0s linear .85s;
}
html.um-curtain-pre .um-loader { display: none !important; }
@media (prefers-reduced-motion: reduce) {
html.um-curtain-pre .um-curtain__glyph {
animation: none !important;
stroke-dashoffset: 0 !important;
fill-opacity: 1 !important;
}
html.um-curtain-pre .um-curtain.is-revealing {
opacity: 0;
transition: opacity .4s ease;
}
html.um-curtain-pre .um-curtain.is-done { transition: visibility 0s linear .4s; }
}
html.um-bg-hidden *,
html.um-bg-hidden *::before,
html.um-bg-hidden *::after {
animation-play-state: paused !important;
}
body.theme-dark .um-section,
body.theme-dark main {
background: transparent;
}
body.theme-dark h1.wp-block-heading,
body.theme-dark h2.wp-block-heading,
body.theme-dark h3.wp-block-heading,
body.theme-dark h4.wp-block-heading,
body.theme-dark p {
color: #e5e5e5 !important;
}
body.theme-dark .um-section__head { border-bottom-color: #2a2a2a; }
body.theme-dark .um-news-item { border-bottom-color: #2a2a2a !important; }
body.theme-dark .um-next-page-wrap { border-color: #2a2a2a !important; }
body.theme-dark .um-plan-card {
background: #1a1a1a;
border-color: #2a2a2a;
}
body.theme-dark .um-plan-card__excerpt { color: #999; }
body.theme-dark .um-plan-card__more { color: #e5e5e5; border-bottom-color: #e5e5e5; }
body.theme-dark .um-plan-card-detail { border-color: #2a2a2a !important; }
body.theme-dark .um-plan-spec__row { border-bottom-color: #2a2a2a; }
body.theme-dark .um-plan-spec__row dd { color: #e5e5e5; }
body.theme-dark .um-plan-option__row { border-bottom-color: #2a2a2a; }
body.theme-dark .um-gallery-filter { border-bottom-color: #2a2a2a; }
body.theme-dark .um-gallery-filter__btn.is-active { background: rgba(255,255,255,0.08); color: #f5f5f5; }
body.theme-dark .um-view-more { color: #e5e5e5; }
body.theme-dark .um-view-more::after { background: #e5e5e5; }
body.theme-dark .um-contact-form input,
body.theme-dark .um-contact-form select,
body.theme-dark .um-contact-form textarea {
background: #1a1a1a;
border-color: #2a2a2a;
color: #e5e5e5;
}
.um-side-nav {
position: fixed;
top: 0;
right: 0;
width: auto;
min-width: 80px;
height: 100vh;
z-index: 90;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem 0.5rem 5.5rem;
pointer-events: none;
color: #1a1a1a;
gap: 0 !important;
}
.um-side-nav > * {
pointer-events: auto;
}
.um-side-nav .um-side-nav__menu {
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.um-side-nav__bottom {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
margin: 0;
padding: 0;
}
.um-side-nav__bottom .um-side-nav__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
body.theme-dark .um-side-nav { color: #f1f1f1; }
.um-ig {
position: relative;
display: inline-flex;
}
.um-ig__trigger {
background: transparent;
border: 0;
padding: 0.4rem;
color: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: opacity 0.2s;
}
.um-ig__trigger:hover { opacity: 0.6; }
.um-ig__popup {
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
margin-right: 0.6rem;
min-width: 220px;
padding: 0.8rem 0;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s ease, visibility 0.18s ease;
z-index: 200;
}
.um-ig:hover .um-ig__popup,
.um-ig__popup:hover,
.um-ig__trigger[aria-expanded="true"] + .um-ig__popup {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.theme-dark .um-ig__popup {
background: #1a1a1a;
border-color: rgba(255, 255, 255, 0.08);
}
.um-side-nav .um-side-nav__logo {
margin: 0;
padding: 0;
}
.um-side-nav .um-side-nav__logo-text {
margin: 0;
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
color: #1a1a1a;
}
.um-side-nav .um-side-nav__logo-text a {
color: inherit;
text-decoration: none;
}
.um-side-nav .um-side-nav__menu {
list-style: none;
margin: 0;
padding: 0;
writing-mode: vertical-rl;
text-orientation: mixed;
display: flex;
flex-direction: row;
align-items: center;
gap: 0;
}
.um-side-nav .um-side-nav__menu li {
margin: 0;
padding: 0;
}
.um-side-nav .um-side-nav__menu a {
letter-spacing: 0.1em;
font-weight: 300;
font-size: 0.875rem;
color: #666666;
text-decoration: none;
position: relative;
display: inline-flex;
align-items: center;
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 1em 0.7em;
transform: none;
transition:
color .3s ease,
background .3s ease,
transform .35s cubic-bezier(.2, .7, .25, 1),
box-shadow .3s ease;
}
.um-side-nav .um-side-nav__menu a:hover {
color: #1a1a1a;
}
.um-side-nav .um-side-nav__menu .is-current a {
color: #1a1a1a;
font-weight: 500;
letter-spacing: 0.14em;
background: transparent;
box-shadow: none;
position: relative;
z-index: 0;
}
.um-side-nav .um-side-nav__menu .is-current a::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -26px;
background: var(--um-page-bg);
border-radius: 0 8px 8px 0;
box-shadow:
inset -1px 0 0 rgba(0, 0, 0, 0.05),
10px 4px 14px -4px rgba(0, 0, 0, 0.08);
z-index: -1;
pointer-events: none;
}
.um-side-nav .um-side-nav__menu .is-current a:hover {
color: #000000;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
margin: 0 !important;
writing-mode: vertical-rl;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #06C755 !important;
padding: 1em 0.55em;
border: 1.5px solid #06C755;
border-radius: 999px;
font-weight: 500;
letter-spacing: 0.22em;
animation: um-nav-cta-breath 2.8s ease-in-out infinite;
transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}
@keyframes um-nav-cta-breath {
0%, 100% {
border-color: #06C755;
box-shadow: 0 0 0 0 rgba(6, 199, 85, 0);
}
50% {
border-color: #08d65d;
box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.14);
}
}
@media (prefers-reduced-motion: reduce) {
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a {
animation: none;
}
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a:hover {
background: #06C755;
color: #fff !important;
border-color: #06C755;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta.is-current a {
background: #06C755;
color: #fff !important;
border-color: #06C755;
animation: none;
box-shadow: 0 2px 12px rgba(6, 199, 85, 0.25);
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta.is-current a::before {
display: none;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--sns {
margin-top: 0.6em;
}
body.admin-bar .um-side-nav {
top: 32px;
height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
body.admin-bar .um-side-nav {
top: 46px;
height: calc(100vh - 46px);
}
}
body.theme-dark .um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #06C755 !important;
border-color: #06C755;
}
body.theme-dark .um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a:hover {
background: #06C755;
color: #fff !important;
}
body.theme-dark .um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta.is-current a {
background: #06C755;
color: #fff !important;
border-color: #06C755;
}
.um-sns-page {
background: var(--um-page-bg, #fafaf7);
color: var(--um-bp2-text, #1a1a1a);
min-height: 60vh;
}
.um-sns-hero {
max-width: 760px;
margin: 0 auto;
padding: clamp(4rem, 8vw, 7rem) 1.5rem 2.4rem;
text-align: center;
}
.um-sns-hero__crumb {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.28em;
color: var(--um-bp2-muted, #9a958c);
margin: 0 0 1.4rem;
text-transform: uppercase;
}
.um-sns-hero__title {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(2rem, 4.2vw, 3rem);
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.3;
margin: 0 0 1.4rem;
color: var(--um-bp2-text, #1a1a1a);
}
.um-sns-hero__lead {
font-size: 0.95rem;
line-height: 2;
color: var(--um-bp2-text-soft, #5a5a55);
margin: 0;
}
.um-sns-grid-section {
max-width: 940px;
margin: clamp(2rem, 4vw, 3rem) auto 0;
padding: 0 1.5rem clamp(3rem, 6vw, 5rem);
}
.um-sns-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
}
@media (max-width: 880px) {
.um-sns-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.um-sns-grid { grid-template-columns: 1fr; }
}
.um-sns-grid__card {
background: #fff;
border: 1px solid var(--um-bp2-line, #d8d2c4);
border-radius: 6px;
padding: 1.5rem 1.3rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
text-decoration: none;
color: var(--um-bp2-text, #1a1a1a);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.um-sns-grid__card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
border-color: var(--um-bp2-text, #1a1a1a);
}
.um-sns-grid__head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.15rem;
}
.um-sns-grid__icon {
width: 28px;
height: 28px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.um-sns-grid__icon svg { width: 24px; height: 24px; fill: currentColor; }
.um-sns-grid__icon--youtube   { color: #FF0000; }
.um-sns-grid__icon--instagram { color: #E1306C; }
.um-sns-grid__icon--facebook  { color: #1877F2; }
.um-sns-grid__icon--note      { color: #41C9B4; }
.um-sns-grid__label {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.6rem;
letter-spacing: 0.28em;
color: var(--um-bp2-muted, #9a958c);
text-transform: uppercase;
}
.um-sns-grid__handle {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--um-bp2-text, #1a1a1a);
}
.um-sns-grid__handle-id {
font-size: 0.8em;
font-weight: 400;
color: var(--wp--preset--color--muted, #888);
margin-left: 0.4em;
letter-spacing: 0.02em;
}
body.theme-dark .um-sns-grid__handle-id { color: #888; }
.um-sns-grid__followers {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--um-bp2-muted, #9a958c);
}
.um-sns-grid__desc {
font-size: 0.78rem;
line-height: 1.7;
color: var(--um-bp2-text-soft, #5a5a55);
margin: 0.4rem 0 0;
}
.um-sns-grid__card.is-coming {
border-style: dashed;
opacity: 1;
background: var(--um-page-bg, #fafaf7);
pointer-events: none;
}
.um-sns-grid__card.is-coming .um-sns-grid__handle { color: var(--um-bp2-muted, #9a958c); }
.um-sns-grid__card.is-coming .um-sns-grid__desc { color: var(--um-bp2-muted, #9a958c); }
.um-sns-grid__coming {
display: inline-block;
font-size: 0.55rem;
letter-spacing: 0.2em;
background: var(--um-bp2-muted, #9a958c);
color: #fff;
padding: 0.18rem 0.5rem;
border-radius: 999px;
margin-left: 0.4rem;
vertical-align: middle;
}
body.theme-dark .um-sns-grid__card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.08);
color: #f1f1f1;
}
body.theme-dark .um-sns-grid__card:hover {
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
body.theme-dark .um-sns-grid__handle    { color: #f1f1f1; }
body.theme-dark .um-sns-grid__desc      { color: #aaa; }
body.theme-dark .um-sns-grid__label     { color: #888; }
body.theme-dark .um-sns-grid__followers { color: #888; }
body.theme-dark .um-sns-grid__card.is-coming { background: rgba(255, 255, 255, 0.02); }
body.theme-dark .um-side-nav {
background: #181818;
border-left-color: rgba(255, 255, 255, 0.06);
}
body.theme-dark .um-side-nav .um-side-nav__menu a {
color: #999999;
background: transparent;
box-shadow: none;
}
body.theme-dark .um-side-nav .um-side-nav__menu a:hover {
color: #f5f5f5;
}
body.theme-dark .um-side-nav .um-side-nav__menu .is-current a {
color: #ffffff;
background: #0f0f0f;
box-shadow:
inset -1px 0 0 rgba(255, 255, 255, 0.08),
5px 2px 12px rgba(0, 0, 0, 0.7);
}
body.theme-dark .um-side-nav .um-side-nav__menu .is-current a:hover {
background: #0f0f0f;
color: #ffffff;
}
.um-side-nav .um-side-nav__social {
gap: 0.75rem;
}
.um-side-nav .um-side-nav__social .wp-block-social-link {
background: transparent !important;
margin: 0;
width: 22px;
height: 22px;
}
.um-side-nav .um-side-nav__social .wp-block-social-link a {
color: #333333 !important;
background: transparent !important;
padding: 0;
}
.um-side-nav .um-side-nav__social .wp-block-social-link svg {
width: 18px;
height: 18px;
fill: #333333;
}
.um-side-nav .um-side-nav__social .wp-block-social-link:hover svg {
fill: #888888;
}
body.has-side-nav main {
padding-right: calc(var(--wp--preset--spacing--50) + 80px) !important;
padding-top: calc(var(--wp--preset--spacing--70) + 48px) !important;
}
body.admin-bar.has-side-nav main {
padding-top: calc(var(--wp--preset--spacing--70) + 48px + 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar.has-side-nav main {
padding-top: calc(var(--wp--preset--spacing--70) + 48px + 46px) !important;
}
}
body.has-side-nav main > h1.wp-block-heading:first-of-type,
body.has-side-nav main > .wp-block-heading + p,
body.has-side-nav main > p:first-of-type {
padding-top: 0;
}
@media (min-width: 1024px) and (max-width: 1700px) {
main.wp-block-group {
padding-left: 5rem !important;
padding-right: 5rem !important;
}
:root {
--wp--style--global--content-size: 1100px !important;
}
}
.um-site-logo {
display: inline-block;
text-decoration: none;
line-height: 0;
color: inherit;
}
.um-site-logo--fixed {
position: fixed;
top: 1.6rem;
left: 1.75rem;
z-index: 9000;
padding: 0;
background: transparent;
color: #1a1a1a;
transition: color 0.45s ease, opacity 0.6s ease 0.1s;
}
.um-site-logo--fixed:hover { opacity: 0.7; }
body.theme-dark .um-site-logo--fixed { color: #f5f5f5; }
.um-site-logo__mask {
display: inline-block;
width: 124px;
height: 28px;
background-color: currentColor;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background-color 0.45s ease;
}
@media (max-width: 768px) {
.um-site-logo--fixed { top: 1rem; left: 1rem; }
.um-site-logo__mask { width: 102px; height: 24px; }
}
body.has-side-nav .alignfull,
body.has-side-nav .wp-block-cover.alignfull {
width: calc(100vw - 80px) !important;
max-width: calc(100vw - 80px) !important;
margin-left: calc(50% - 50vw) !important;
margin-right: 0 !important;
}
body.has-side-nav .alignwide {
max-width: calc(100vw - 80px - var(--wp--preset--spacing--50) * 2) !important;
}
body.has-side-nav .wp-site-blocks > footer.wp-block-group,
body.has-side-nav footer.wp-block-group.has-background {
width: calc(100vw - 80px) !important;
margin-left: calc(50% - 50vw) !important;
margin-right: 0 !important;
}
.um-header { display: none !important; }
body.is-leaving main,
body.is-pre-arriving main,
body.is-arriving main,
html.um-pre-arriving body main {
will-change: transform, opacity;
}
body {
transition: background-color 0.45s ease;
}
body.is-leaving,
html.um-pre-arriving body,
body.is-leaving .wp-site-blocks,
html.um-pre-arriving body .wp-site-blocks {
background-color: var(--um-transition-bg) !important;
transition: none;
}
body.is-leaving main,
html.um-pre-arriving body main {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);
}
body.is-leaving .um-site-logo--fixed,
body.is-leaving .um-breadcrumb,
html.um-pre-arriving body .um-site-logo--fixed,
html.um-pre-arriving body .um-breadcrumb {
opacity: 0 !important;
pointer-events: none;
transition: opacity 0.45s ease;
}
body.is-leaving .um-breadcrumb,
html.um-pre-arriving body .um-breadcrumb {
animation: none !important;
}
body.theme-dark.is-leaving main,
body.theme-dark html.um-pre-arriving body main,
html.um-pre-arriving body.theme-dark main {
box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
body.is-leaving main {
transform: none;
}
body.is-leaving .um-side-nav__menu .is-current a {
color: #666666 !important;
font-weight: 300 !important;
letter-spacing: 0.1em !important;
transition:
color 0.2s ease,
font-weight 0.2s ease,
letter-spacing 0.2s ease !important;
}
body.is-leaving .um-side-nav__menu .is-current a::before {
animation: um-tab-slide-out 0.28s cubic-bezier(.45, 0, .2, 1) forwards;
}
@keyframes um-tab-slide-out {
from { transform: translateX(0); }
to   { transform: translateX(-105vw); }
}
html.um-pre-arriving body main {
animation: um-page-arrive 0.36s cubic-bezier(.2, .8, .2, 1) both;
}
html.um-pre-arriving body .um-side-nav__menu .is-current a::before {
animation: um-page-arrive 0.36s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes um-page-arrive {
from { transform: translateX(-105vw); }
to   { transform: translateX(0); }
}
.um-nav-cover {
position: fixed;
inset: 0;
z-index: 99500;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: hidden;
visibility: hidden;
pointer-events: none;
transition: visibility 0s linear 0.6s;
}
.um-nav-cover.is-visible {
visibility: visible;
pointer-events: auto;
transition: visibility 0s linear 0s;
}
.um-nav-cover__curtain {
position: absolute;
left: 0;
right: 0;
height: 50.5%;
background: #e8e6e2;
z-index: 0;
will-change: transform;
transition: transform 0.55s cubic-bezier(.76, 0, .24, 1);
}
html.um-pre-dark .um-nav-cover__curtain,
body.theme-dark .um-nav-cover__curtain { background: #242424; }
.um-nav-cover__curtain--top    { top: 0;    transform: translateY(-100.5%); }
.um-nav-cover__curtain--bottom { bottom: 0; transform: translateY(100.5%); }
.um-nav-cover.is-visible .um-nav-cover__curtain--top,
.um-nav-cover.is-visible .um-nav-cover__curtain--bottom { transform: translateY(0); }
.um-nav-cover__inner { position: relative; z-index: 2; }
.um-nav-cover__gauge { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
.um-nav-cover__curtain { transition: none; }
}
@view-transition { navigation: auto; }
::view-transition-group(um-morph-hero) {
animation-duration: 0.55s;
animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
.um-nav-cover__inner { text-align: center; padding: 0 1.5rem; }
.um-nav-cover__name {
display: inline-block;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(2.2rem, 7vw, 4.6rem);
letter-spacing: 0.22em;
font-weight: 500;
color: #1a1a1a;
margin: 0;
opacity: 0;
transform: translateY(22px) scale(0.96);
transition:
opacity 0.55s 0.08s ease,
transform 0.7s 0.08s cubic-bezier(.22,.7,.22,1);
}
html.um-pre-dark .um-nav-cover__name,
body.theme-dark .um-nav-cover__name { color: #ffffff; }
.um-nav-cover.is-visible .um-nav-cover__name {
opacity: 1;
transform: translateY(0) scale(1);
}
.um-nav-cover__logo {
display: none;
width: 200px;
max-width: 60vw;
height: 46px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
opacity: 0;
transform: translateY(22px) scale(0.96);
transition:
opacity 0.55s 0.08s ease,
transform 0.7s 0.08s cubic-bezier(.22, .7, .22, 1);
}
html.um-pre-dark .um-nav-cover__logo,
body.theme-dark .um-nav-cover__logo { background-color: #f5f5f5; }
.um-nav-cover.is-home .um-nav-cover__logo { display: block; }
.um-nav-cover.is-home.is-visible .um-nav-cover__logo {
opacity: 1;
transform: translateY(0) scale(1);
}
.um-nav-cover.is-home .um-nav-cover__name { display: none; }
.um-nav-cover__gauge {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 0;
opacity: 0;
transition: opacity 0.5s 0.18s ease;
}
.um-nav-cover.is-visible .um-nav-cover__gauge { opacity: 1; }
.um-nav-cover__bar {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(0, 0, 0, 0.08);
}
html.um-pre-dark .um-nav-cover__bar,
body.theme-dark .um-nav-cover__bar { background: rgba(255, 255, 255, 0.12); }
.um-nav-cover__bar-fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0;
background: #1a1a1a;
}
html.um-pre-dark .um-nav-cover__bar-fill,
body.theme-dark .um-nav-cover__bar-fill { background: #ffffff; }
.um-nav-cover__marker {
position: absolute;
left: 1.5rem;
bottom: 1.2rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.6rem;
color: #1a1a1a;
white-space: nowrap;
}
.um-nav-cover__loading {
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.28em;
font-weight: 400;
opacity: 0.8;
}
html.um-pre-dark .um-nav-cover__marker,
body.theme-dark .um-nav-cover__marker { color: #ffffff; }
.um-nav-cover__cam {
display: inline-flex;
width: 28px; height: 28px;
opacity: 0.9;
}
.um-nav-cover__cam svg { width: 100%; height: 100%; display: block; }
.um-nav-cover.is-loading .um-nav-cover__cam {
animation: um-nav-cam-pulse 1.2s ease-in-out infinite;
}
@keyframes um-nav-cam-pulse {
0%, 100% { opacity: 0.9; transform: scale(1)    rotate(0deg); }
50%      { opacity: 0.5; transform: scale(0.9)  rotate(-4deg); }
}
.um-nav-cover__pct {
position: absolute;
right: 1.5rem;
bottom: 1.2rem;
color: #1a1a1a;
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
font-size: 1rem;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
font-weight: 400;
line-height: 1;
}
html.um-pre-dark .um-nav-cover__pct,
body.theme-dark .um-nav-cover__pct { color: #ffffff; }
.um-nav-cover__pct-sym { opacity: 0.6; margin-left: 0.06em; font-size: 0.7em; }
html.um-nav-arriving .wp-site-blocks { opacity: 0; }
html.um-nav-arriving .um-loader { display: none !important; }
.wp-site-blocks { transition: opacity 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
.um-nav-cover,
.um-nav-cover__name,
.um-nav-cover__gauge,
.um-nav-cover__marker,
.um-nav-cover__cam,
.um-nav-cover__bar-fill {
transition: none !important;
animation: none !important;
}
}
.um-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--um-header-h);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem 0 2.25rem;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
}
body.admin-bar .um-header {
top: 32px;
}
body.admin-bar.has-top-nav main {
padding-top: calc(var(--um-header-h) + 32px + var(--wp--preset--spacing--50));
}
@media (max-width: 782px) {
body.admin-bar .um-header {
top: 46px;
}
body.admin-bar.has-top-nav main {
padding-top: calc(var(--um-header-h) + 46px + var(--wp--preset--spacing--40));
}
}
@media (max-width: 600px) {
body.admin-bar .um-header {
position: fixed;
}
}
.um-header.is-scrolled {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body:not(.is-loaded) .um-header {
opacity: 0;
pointer-events: none;
}
.um-header {
transition: opacity 0.6s ease 0.1s, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.um-header {
color: var(--um-header-color, #1a1a1a);
transition: color 0.45s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease 0.1s;
}
.um-header__logo {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
flex: 0 0 auto;
transition: color 0.45s ease, opacity 0.25s ease;
}
.um-header__logo:hover { opacity: 0.55; }
.um-header__logo .um-site-logo__mask {
width: 132px;
height: 30px;
background-color: currentColor;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transition: background-color 0.4s ease;
}
.um-header__nav {
display: flex;
align-items: center;
gap: 2rem;
flex: 1 1 auto;
justify-content: flex-end;
}
.um-header__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 1.75rem;
}
.um-header__menu li { margin: 0; padding: 0; }
.um-header__menu a {
color: inherit;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 400;
letter-spacing: 0.18em;
transition: color 0.45s ease, opacity 0.2s ease;
}
.um-header__menu a:hover { opacity: 0.55; }
.um-header__tools {
display: flex;
align-items: center;
gap: 1.25rem;
}
.um-header__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.um-header__social li { margin: 0; }
.um-header__social a,
.um-header__social .um-ig__trigger {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
transition: color 0.45s ease, opacity 0.2s ease;
}
.um-header__social a:hover,
.um-header__social .um-ig__trigger:hover { opacity: 0.55; }
.um-ig__popup--header {
right: 0;
left: auto;
top: calc(100% + 10px);
bottom: auto;
transform: translateY(-6px);
}
.um-ig__popup--header::before {
right: auto;
left: 0;
top: -10px;
bottom: auto;
width: 100%;
height: 10px;
}
.um-ig:hover .um-ig__popup--header,
.um-ig__popup--header:hover,
.um-ig__trigger[aria-expanded="true"] + .um-ig__popup--header {
transform: translateY(0);
}
.um-header__theme {
display: inline-flex;
flex-direction: row;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.04);
}
.um-header__lang {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 2px;
}
.um-header__burger {
display: none;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
position: relative;
margin-left: auto;
color: inherit;
transition: color 0.45s ease;
}
.um-header__burger span {
position: absolute;
left: 9px;
right: 9px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.um-header__burger span:nth-child(1) { top: 13px; }
.um-header__burger span:nth-child(2) { top: 19px; }
.um-header__burger span:nth-child(3) { top: 25px; }
.um-header.is-open .um-header__burger span:nth-child(1) {
top: 19px;
transform: rotate(45deg);
}
.um-header.is-open .um-header__burger span:nth-child(2) {
opacity: 0;
}
.um-header.is-open .um-header__burger span:nth-child(3) {
top: 19px;
transform: rotate(-45deg);
}
body.um-no-scroll {
overflow: hidden;
}
body.theme-dark .um-header,
body.theme-dark .um-header.is-scrolled {
background: transparent;
border-bottom-color: transparent;
}
body.theme-dark .um-header__theme { background: rgba(255, 255, 255, 0.08); }
@media (max-width: 768px) {
:root {
--um-header-h: 56px;
}
.um-header {
padding: 0 1rem;
}
.um-header__logo .um-site-logo__mask {
width: 110px;
height: 26px;
}
.um-header__burger {
display: inline-block;
}
.um-header__nav {
position: fixed;
top: var(--um-header-h);
left: 0;
right: 0;
max-height: calc(100vh - var(--um-header-h));
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: 1.25rem 1.5rem 2rem;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
overflow-y: auto;
}
.um-header.is-open .um-header__nav {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.um-header__menu {
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
.um-header__menu li {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.um-header__menu a {
display: block;
padding: 1rem 0.25rem;
font-size: 0.9375rem;
letter-spacing: 0.22em;
}
.um-header__tools {
margin-top: 1.25rem;
gap: 1.25rem;
flex-wrap: wrap;
align-items: center;
}
.um-ig__popup--header {
position: fixed;
right: 1rem;
left: auto;
top: auto;
bottom: 1rem;
width: calc(100vw - 2rem);
max-width: 320px;
}
body.theme-dark .um-header__nav {
background: rgba(15, 15, 15, 0.96);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .um-header__menu li {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
}
.um-footer__nav {
list-style: none;
display: flex;
justify-content: center;
gap: 2rem;
margin: 0;
padding: 0;
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.um-footer__nav li { margin: 0; }
.um-footer__nav a {
color: #ffffff;
text-decoration: none;
opacity: 0.85;
transition: opacity .2s ease;
}
.um-footer__nav a:hover { opacity: 1; }
.has-display-letter-spacing {
letter-spacing: 0.2em;
text-transform: uppercase;
}
.um-section__head {
align-items: center;
border-bottom: 1px solid var(--wp--preset--color--line);
padding-bottom: 1rem;
margin-bottom: 0;
}
.um-news-controls {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.um-news-list {
display: flex;
flex-direction: column;
}
.um-news-list__item {
display: flex;
align-items: center;
gap: 1.25rem;
padding: var(--wp--preset--spacing--40) 0;
border-bottom: 1px solid var(--wp--preset--color--line);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.um-news-list__item.is-hidden {
display: none !important;
}
.um-news-list__thumb {
flex: 0 0 auto;
width: 96px;
height: 96px;
overflow: hidden;
border-radius: 2px;
background: #ececec;
display: block;
}
.um-news-list__img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.um-news-list__item:hover .um-news-list__img {
transform: scale(1.04);
}
.um-news-list__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.um-news-list__cat {
display: inline-block;
align-self: flex-start;
font-size: 0.625rem;
letter-spacing: 0.2em;
color: #888;
border: 1px solid var(--wp--preset--color--line);
padding: 2px 8px;
border-radius: 2px;
margin-bottom: 0.25rem;
}
.um-news-list__date {
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #888;
}
.um-news-list__title {
margin: 0;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.5;
}
.um-news-list__title a {
color: #333;
text-decoration: none;
transition: color .2s ease;
}
.um-news-list__title a:hover { color: #888; }
.um-news-list__empty {
text-align: center;
color: #888;
font-size: 0.875rem;
padding: 2rem 0;
}
.um-news-list__header {
display: flex;
align-items: baseline;
gap: 0.55rem;
padding: 1.25rem 0 0.75rem;
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
color: #1a1a1a;
}
.um-news-list__header:first-child {
padding-top: 0;
}
.um-news-list__header-month {
font-size: 1.85rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.um-news-list__header-key {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.28em;
color: #888;
}
.um-news-list__header-arrow {
font-size: 1.05rem;
color: #888;
margin-left: 0.1rem;
}
.um-news-list__header-year {
margin-left: auto;
font-size: 0.75rem;
letter-spacing: 0.18em;
color: #aaa;
font-variant-numeric: tabular-nums;
}
body.theme-dark .um-news-list__header { border-bottom-color: rgba(255,255,255,0.1); color: #f1f1f1; }
body.theme-dark .um-news-list__header-key,
body.theme-dark .um-news-list__header-arrow { color: #aaa; }
body.theme-dark .um-news-list__header-year { color: #777; }
.um-news-list__header.is-hidden { display: none !important; }
.um-news-list[data-view="grid"] .um-news-list__header {
grid-column: 1 / -1;
padding: 0.75rem 0 0.5rem;
}
.um-news-list[data-view="grid"] .um-news-list__header:first-child {
padding-top: 0;
}
@media (max-width: 600px) {
.um-news-list__header { padding: 1rem 0 0.6rem; gap: 0.4rem; }
.um-news-list__header-month { font-size: 1.4rem; }
.um-news-list__header-key { font-size: 0.8rem; letter-spacing: 0.22em; }
.um-news-list__header-arrow { font-size: 0.95rem; }
.um-news-list__header-year { font-size: 0.7rem; }
}
body.theme-dark .um-news-list__item { border-bottom-color: #2a2a2a; }
body.theme-dark .um-news-list__cat {
color: #aaa;
border-color: #2a2a2a;
}
body.theme-dark .um-news-list__date { color: #888; }
body.theme-dark .um-news-list__title a { color: #e5e5e5; }
body.theme-dark .um-news-list__title a:hover { color: #999; }
body.theme-dark .um-news-list__thumb { background: #2a2a2a; }
@media (max-width: 600px) {
.um-news-list__item { gap: 0.875rem; }
.um-news-list__thumb { width: 72px; height: 72px; }
.um-news-list__title { font-size: 0.875rem; }
}
.um-news-view-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 999px;
background: transparent;
}
.um-news-view-toggle__label {
font-size: 0.6875rem;
letter-spacing: 0.25em;
color: #888;
padding: 0 0.6rem 0 0.7rem;
}
.um-news-view-toggle__btn {
width: 32px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
color: #888;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, color 0.18s ease;
font-family: inherit;
}
.um-news-view-toggle__btn svg { width: 16px; height: 16px; }
.um-news-view-toggle__btn:hover {
background: rgba(0,0,0,0.05);
color: #1a1a1a;
}
.um-news-view-toggle__btn.is-active {
background: #1a1a1a;
color: #fff;
}
body.theme-dark .um-news-view-toggle { border-color: #2a2a2a; }
body.theme-dark .um-news-view-toggle__label { color: #888; }
body.theme-dark .um-news-view-toggle__btn { color: #888; }
body.theme-dark .um-news-view-toggle__btn:hover {
background: rgba(255,255,255,0.06);
color: #f5f5f5;
}
body.theme-dark .um-news-view-toggle__btn.is-active {
background: #f5f5f5;
color: #1a1a1a;
}
.um-news-list[data-view="grid"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
flex-direction: initial;
}
.um-news-list[data-view="grid"] .um-news-list__item {
flex-direction: column;
gap: 0;
padding: 0;
border-bottom: 0;
align-items: stretch;
position: relative;
overflow: hidden;
}
.um-news-list[data-view="grid"] .um-news-list__thumb {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
border-radius: 0;
}
.um-news-list[data-view="grid"] .um-news-list__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.um-news-list[data-view="grid"] .um-news-list__body { display: none; }
.um-news-list[data-view="grid"] .um-news-list__item::after {
content: attr(data-title);
position: absolute;
inset: auto 0 0 0;
padding: 0.6rem 0.75rem;
background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
color: #fff;
font-size: 0.7rem;
letter-spacing: 0.06em;
line-height: 1.4;
text-align: left;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.um-news-list[data-view="grid"] .um-news-list__item:hover::after { opacity: 1; }
@media (max-width: 1024px) {
.um-news-list[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.um-news-list[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.um-news-item {
align-items: center !important;
gap: 1.25rem;
}
.um-news-item__thumb {
flex: 0 0 auto;
margin: 0 !important;
overflow: hidden;
border-radius: 2px;
}
.um-news-item__thumb a,
.um-news-item__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.um-news-item:hover .um-news-item__thumb img {
transform: scale(1.04);
}
.um-news-item__thumb:empty,
.um-news-item__thumb:not(:has(img)) {
background: #ececec;
}
.um-news-item__body {
flex: 1 1 auto;
min-width: 0;
gap: 0.25rem !important;
}
.um-news-item__body .wp-block-post-date {
margin: 0 !important;
}
.um-news-item__body .wp-block-post-title {
margin: 0 !important;
}
.um-news-item__meta {
gap: 0.6rem !important;
align-items: center;
margin: 0 !important;
}
.um-news-item__cat {
font-size: 0.625rem !important;
letter-spacing: 0.2em !important;
color: #888 !important;
border: 1px solid var(--wp--preset--color--line);
padding: 2px 7px;
border-radius: 2px;
line-height: 1;
}
.um-news-item__cat a {
color: inherit !important;
text-decoration: none !important;
pointer-events: none;
}
body.theme-dark .um-news-item__cat {
color: #aaa !important;
border-color: #2a2a2a;
}
.um-news-item .wp-block-post-title a {
color: #333;
text-decoration: none;
transition: color .2s ease;
}
.um-news-item .wp-block-post-title a:hover { color: #888; }
body.theme-dark .um-news-item__thumb:not(:has(img)) {
background: #2a2a2a;
}
body.theme-dark .um-news-item .wp-block-post-title a { color: #e5e5e5; }
body.theme-dark .um-news-item .wp-block-post-title a:hover { color: #999; }
@media (max-width: 600px) {
.um-news-item { gap: 1rem; }
.um-news-item__thumb {
width: 60px !important;
height: 60px !important;
}
}
.um-news-marquee {
width: 100%;
overflow: hidden;
position: relative;
}
.um-news-marquee__track {
display: flex;
width: max-content;
will-change: transform;
animation: um-news-marquee-scroll 45s linear infinite;
}
.um-news-marquee__group {
display: flex;
gap: 0;
padding-right: 0;
margin: 0;
list-style: none;
flex-shrink: 0;
}
.um-news-marquee__item { display: block; line-height: 0; }
.um-news-marquee__label-item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 1.5rem;
line-height: 1;
}
.um-news-marquee__label {
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
color: #1a1a1a;
white-space: nowrap;
}
.um-news-marquee__label-month {
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
}
.um-news-marquee__label-key {
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.28em;
color: #333;
line-height: 1;
}
.um-news-marquee__label-arrow {
font-size: 1.1rem;
color: #333;
margin-left: 0.15rem;
line-height: 1;
}
body.theme-dark .um-news-marquee__label { color: #ffffff; }
body.theme-dark .um-news-marquee__label-key,
body.theme-dark .um-news-marquee__label-arrow { color: #ffffff; }
@media (max-width: 768px) {
.um-news-marquee__label-item { padding: 0 1rem; }
.um-news-marquee__label-month { font-size: 1.25rem; }
.um-news-marquee__label-key { font-size: 0.8rem; letter-spacing: 0.22em; }
.um-news-marquee__label-arrow { font-size: 0.95rem; }
}
.um-news-marquee__card {
position: relative;
display: block;
height: 440px;
overflow: hidden;
background: linear-gradient(135deg, #f2f2f2 0%, #e4e4e4 100%);
text-decoration: none;
color: inherit;
transition: transform .35s cubic-bezier(.2,.6,.2,1),
box-shadow .35s ease;
}
body.theme-dark .um-news-marquee__card {
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}
.um-news-marquee__card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.28);
z-index: 2;
}
.um-news-marquee__img {
display: block;
height: 100%;
width: auto;
object-fit: contain;
object-position: center;
transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
.um-news-marquee__card:hover .um-news-marquee__img {
transform: scale(1.04);
}
.um-news-marquee__placeholder {
display: block;
height: 100%;
width: 280px;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}
.um-news-marquee__placeholder {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}
.um-news-marquee__caption {
position: absolute;
inset: auto 0 0 0;
padding: 0.6rem 0.8rem;
background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
color: #fff;
font-size: 0.75rem;
line-height: 1.4;
letter-spacing: 0.05em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0;
transform: translateY(6px);
transition: opacity .35s ease, transform .35s cubic-bezier(.2, .6, .2, 1);
pointer-events: none;
}
.um-news-marquee__card:hover .um-news-marquee__caption,
.um-news-marquee__card:focus-visible .um-news-marquee__caption {
opacity: 1;
transform: translateY(0);
}
body.theme-dark .um-news-marquee__card:hover {
box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
}
@keyframes um-news-marquee-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.um-news-marquee__card { height: 300px; }
.um-news-marquee__placeholder { width: 240px; }
.um-news-marquee__caption { font-size: 0.7rem; padding: 0.5rem 0.65rem; }
.um-news-marquee__track { animation-duration: 32s; }
}
@media (prefers-reduced-motion: reduce) {
.um-news-marquee__track { animation: none; }
}
.um-studio-page {
max-width: 760px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.um-studio-intro__title {
margin: 0 !important;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}
.um-studio-intro__subtitle {
margin: 0.5rem 0 0 !important;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 600;
}
.um-studio-intro__hero {
margin: 0 !important;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.um-studio-intro__hero-logo {
display: block;
width: 300px;
height: 70px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.theme-dark .um-studio-intro__hero-logo { background-color: #f1f1f1; }
@media (max-width: 600px) {
.um-studio-intro__hero-logo { width: 220px; height: 52px; }
}
.um-studio-intro__divider {
border: 0;
border-top: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.1));
margin: 0;
width: 100%;
max-width: 60px;
margin-left: auto;
margin-right: auto;
}
body.theme-dark .um-studio-intro__divider { border-top-color: rgba(255,255,255,0.18); }
.um-studio-intro {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1rem;
line-height: 2.05;
letter-spacing: 0.04em;
color: #1a1a1a;
}
.um-studio-intro p {
margin: 0 0 1.5rem;
}
.um-studio-intro__lead {
font-size: 1.1rem;
letter-spacing: 0.06em;
margin-bottom: 1.8rem !important;
}
.um-studio-intro__sign {
margin-top: 2rem !important;
color: #444;
font-size: 0.95rem;
}
body.theme-dark .um-studio-intro { color: #e5e5e5; }
body.theme-dark .um-studio-intro__lead { color: #f1f1f1; }
body.theme-dark .um-studio-intro__sign { color: #aaa; }
.um-studio-intro-cta { gap: 12px; }
.um-only-mobile { display: none; }
@media (max-width: 600px) {
.um-only-mobile { display: inline; }
.um-studio-page { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.um-studio-intro { font-size: 0.9375rem; line-height: 1.95; }
.um-studio-intro__lead { font-size: 1rem; }
}
.um-studio-block {
max-width: 720px;
margin: 0 auto;
padding: 1.6rem 0;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
line-height: 2.05;
letter-spacing: 0.04em;
color: #1a1a1a;
}
.um-studio-block p {
margin: 0 0 1.2rem;
}
.um-studio-block__heading {
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.18em;
margin: 0 0 1.4rem;
color: #1a1a1a;
}
.um-studio-block__lead {
font-size: 1.05rem;
margin-bottom: 1.4rem !important;
}
.um-studio-block__divider {
border: 0;
border-top: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.1));
width: 60px;
max-width: 60px;
margin: 1.6rem auto;
}
body.theme-dark .um-studio-block { color: #e5e5e5; }
body.theme-dark .um-studio-block__heading { color: #f1f1f1; }
body.theme-dark .um-studio-block__divider { border-top-color: rgba(255,255,255,0.18); }
.um-studio-block--mvv {
text-align: center;
}
.um-studio-block--mvv p {
text-align: left;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.um-studio-block__label {
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.78rem;
letter-spacing: 0.32em;
color: #888;
margin: 0 0 1.6rem !important;
}
.um-studio-block__title {
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 2.1rem;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.4;
margin: 0 0 0.8rem;
color: #1a1a1a;
}
.um-studio-block__title small {
display: inline-block;
font-size: 0.5em;
letter-spacing: 0.18em;
color: #888;
margin-left: 0.3em;
vertical-align: middle;
}
.um-studio-block--mvv .um-studio-block__title:lang(ja) {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-studio-block__subtitle {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.1em;
color: #333;
margin: 0 0 1.8rem !important;
}
body.theme-dark .um-studio-block__title { color: #f1f1f1; }
body.theme-dark .um-studio-block__title small { color: #aaa; }
body.theme-dark .um-studio-block__subtitle { color: #d8d8d8; }
body.theme-dark .um-studio-block__label { color: #aaa; }
.um-studio-value-list {
display: grid;
grid-template-columns: 1fr;
gap: 1.6rem;
margin-top: 1rem;
text-align: left;
}
.um-studio-value-item {
padding: 1.2rem 1.4rem;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 4px;
background: rgba(255,255,255,0.5);
}
.um-studio-value-item__title {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.12em;
margin: 0 0 0.6rem;
color: #1a1a1a;
}
.um-studio-value-item__lead {
font-size: 0.95rem;
color: #444;
margin: 0 0 0.5rem !important;
font-weight: 500;
}
.um-studio-value-item p {
margin: 0 !important;
font-size: 0.9rem;
line-height: 1.95;
color: #333;
}
body.theme-dark .um-studio-value-item {
background: rgba(30,30,30,0.4);
border-color: rgba(255,255,255,0.12);
}
body.theme-dark .um-studio-value-item__title { color: #f1f1f1; }
body.theme-dark .um-studio-value-item__lead { color: #d8d8d8; }
body.theme-dark .um-studio-value-item p { color: #c8c8c8; }
.um-studio-closing {
text-align: center;
max-width: 720px;
margin: 2.4rem auto 0;
padding: 1.6rem 0 0;
border-top: 1px solid rgba(0,0,0,0.08);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-studio-closing__lead {
font-size: 1.15rem;
letter-spacing: 0.12em;
color: #1a1a1a;
margin: 0 0 0.8rem;
font-weight: 500;
}
.um-studio-closing__sign {
font-size: 0.9rem;
letter-spacing: 0.06em;
color: #555;
margin: 0;
}
body.theme-dark .um-studio-closing {
border-top-color: rgba(255,255,255,0.12);
}
body.theme-dark .um-studio-closing__lead { color: #f1f1f1; }
body.theme-dark .um-studio-closing__sign { color: #aaa; }
@media (max-width: 700px) {
.um-studio-block {
font-size: 0.9rem;
line-height: 1.95;
padding: 1.2rem 0;
}
.um-studio-block__heading { font-size: 1.1rem; letter-spacing: 0.14em; }
.um-studio-block__title { font-size: 1.6rem; letter-spacing: 0.06em; }
.um-studio-block__title small { font-size: 0.55em; }
.um-studio-block__subtitle { font-size: 0.95rem; }
.um-studio-value-item { padding: 1rem 1.1rem; }
.um-studio-value-item__title { font-size: 1rem; }
.um-studio-value-item__lead { font-size: 0.9rem; }
.um-studio-value-item p { font-size: 0.85rem; }
.um-studio-closing__lead { font-size: 1rem; }
.um-studio-closing__sign { font-size: 0.82rem; }
}
.um-essence {
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.um-essence > .um-profile-tabs,
.um-essence > .wp-block-buttons,
.um-essence > .wp-block-spacer {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.um-essence__breadcrumb {
margin: 0 0 0.5rem !important;
}
.um-essence__title {
margin: 0 !important;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
}
.um-essence__subtitle {
margin: 0.5rem 0 0 !important;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-weight: 500;
}
.um-essence__body {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.0625rem;
line-height: 2.05;
letter-spacing: 0.04em;
color: #1a1a1a;
}
.um-essence__body p {
margin: 0 0 1.65rem;
}
.um-essence__lead {
font-size: 1.15rem;
letter-spacing: 0.06em;
color: #1a1a1a;
}
.um-essence__quote {
border-left: 2px solid #1a1a1a;
padding-left: 1rem;
margin: 2rem 0 !important;
font-size: 1.1rem;
color: #1a1a1a;
font-weight: 500;
}
.um-essence__dash {
letter-spacing: -0.02em;
margin: 0 0.05em;
}
.um-essence__tagline {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-weight: 600;
font-size: 1.05em;
letter-spacing: 0.04em;
}
.um-essence__sign {
margin-top: 2.5rem !important;
font-size: 1rem;
color: #444;
letter-spacing: 0.05em;
}
ruby.um-essence__ruby rt { font-size: 0.5em; letter-spacing: 0.05em; }
body.theme-dark .um-essence__body { color: #e5e5e5; }
body.theme-dark .um-essence__lead { color: #f1f1f1; }
body.theme-dark .um-essence__quote {
border-left-color: #e5e5e5;
color: #f1f1f1;
}
body.theme-dark .um-essence__sign { color: #aaa; }
.um-essence-cta-stack {
gap: 12px;
}
.um-essence__article {
color: #2a2a2a;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.0625rem;
line-height: 2.05;
letter-spacing: 0.04em;
}
.um-essence__article p { margin: 0 0 1.6rem; }
.um-essence__wrap {
max-width: 720px;
margin: 0 auto;
padding: 0 1.5rem;
}
.um-essence-hero {
min-height: calc(100vh - 220px);
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 1.5rem 4rem;
}
.um-essence-hero__inner {
text-align: center;
max-width: 760px;
}
.um-essence-hero__en {
font-family: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(2.4rem, 6vw, 4.5rem);
letter-spacing: 0.08em;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 1.6rem !important;
}
.um-essence-hero__ja {
font-size: clamp(1rem, 1.4vw, 1.2rem);
letter-spacing: 0.12em;
color: #888;
line-height: 1.9;
margin: 0 !important;
}
.um-essence-hero__scroll {
display: block;
width: 1px;
height: 56px;
background: rgba(0,0,0,0.22);
margin: 4rem auto 0;
}
.um-essence-block {
padding: 3rem 0;
}
.um-essence-block p { margin: 0 0 2rem !important; }
.um-essence-block p:last-child { margin-bottom: 0 !important; }
.um-essence-pull {
margin: 5rem 0;
padding: 2rem 1.5rem;
text-align: center;
}
.um-essence-pull__inner {
max-width: 760px;
margin: 0 auto;
}
.um-essence-pull p {
font-size: clamp(1.25rem, 2.4vw, 1.65rem);
line-height: 1.95;
letter-spacing: 0.06em;
font-weight: 500;
color: #1a1a1a;
margin: 0 !important;
}
.um-essence-climax {
margin: 7rem 0;
padding: 4.5rem 1.5rem;
text-align: center;
border-top: 1px solid rgba(0,0,0,0.12);
border-bottom: 1px solid rgba(0,0,0,0.12);
}
.um-essence-climax__inner {
max-width: 820px;
margin: 0 auto;
}
.um-essence-climax__main {
font-size: clamp(1.55rem, 3vw, 2.15rem);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.7;
color: #1a1a1a;
margin: 0 0 1.8rem !important;
}
.um-essence-climax__sub {
font-size: clamp(1rem, 1.4vw, 1.15rem);
letter-spacing: 0.06em;
color: #444;
font-weight: 400;
line-height: 1.8;
margin: 0 !important;
}
.um-essence-reprise {
margin: 6rem 0 4rem;
padding: 0 1.5rem;
text-align: center;
}
.um-essence-reprise__inner {
max-width: 760px;
margin: 0 auto;
}
.um-essence-reprise__en {
font-family: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(1.85rem, 4.5vw, 3.4rem);
letter-spacing: 0.08em;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 1.2rem !important;
}
.um-essence-reprise__ja {
font-size: clamp(0.92rem, 1.2vw, 1.05rem);
letter-spacing: 0.12em;
color: #888;
line-height: 1.9;
margin: 0 !important;
}
.um-essence-closing {
padding: 3rem 0 6rem;
}
.um-essence-closing p { margin: 0 0 2rem !important; }
.um-essence-closing__final {
margin-top: 3rem !important;
text-align: center;
}
.um-essence-closing__final em {
font-style: italic;
font-size: 1.12em;
letter-spacing: 0.05em;
color: #2a2a2a;
}
body.theme-dark .um-essence__article { color: #d8d8d8; }
body.theme-dark .um-essence-hero__en { color: #f1f1f1; }
body.theme-dark .um-essence-hero__ja { color: #aaa; }
body.theme-dark .um-essence-hero__scroll { background: rgba(255,255,255,0.25); }
body.theme-dark .um-essence-pull p { color: #f1f1f1; }
body.theme-dark .um-essence-climax {
border-top-color: rgba(255,255,255,0.18);
border-bottom-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-essence-climax__main { color: #f5f5f5; }
body.theme-dark .um-essence-climax__sub { color: #bbb; }
body.theme-dark .um-essence-reprise__en { color: #f1f1f1; }
body.theme-dark .um-essence-reprise__ja { color: #aaa; }
body.theme-dark .um-essence-closing__final em { color: #e8e8e8; }
@media (max-width: 700px) {
.um-essence__article { font-size: 1rem; line-height: 1.95; }
.um-essence__wrap { padding: 0 1.25rem; }
.um-essence-hero {
min-height: calc(100vh - 160px);
padding: 4rem 1.25rem 3rem;
}
.um-essence-hero__en { letter-spacing: 0.05em; }
.um-essence-hero__scroll { margin-top: 2.8rem; height: 44px; }
.um-essence-block { padding: 2rem 0; }
.um-essence-block p { margin-bottom: 1.5rem !important; }
.um-essence-pull {
margin: 3rem 0;
padding: 1.5rem 1rem;
}
.um-essence-pull p { letter-spacing: 0.04em; }
.um-essence-climax {
margin: 4rem 0;
padding: 2.8rem 1.25rem;
}
.um-essence-climax__main { letter-spacing: 0.06em; }
.um-essence-reprise { margin: 4rem 0 2.5rem; }
.um-essence-reprise__en { letter-spacing: 0.05em; }
.um-essence-closing { padding: 2rem 0 4rem; }
.um-essence-closing__final { margin-top: 2rem !important; }
}
.um-section--essence-teaser {
text-align: center;
}
.um-section--essence-teaser .um-section-cta--essence {
display: inline-block;
text-decoration: none;
color: inherit;
margin: 0 auto 1.5rem;
cursor: pointer;
transition: opacity 0.2s ease;
}
.um-section--essence-teaser .um-section-cta--essence:hover {
opacity: 0.7;
}
.um-essence-teaser__headline {
text-align: center;
margin: 0.5rem 0 2.6rem;
padding: 0 1rem;
}
.um-essence-teaser__headline-en {
font-family: 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif;
font-style: normal;
font-weight: 500;
font-size: clamp(1.35rem, 2.6vw, 2rem);
letter-spacing: 0.05em;
line-height: 1.3;
color: #1a1a1a;
margin: 0 0 0.7rem !important;
text-transform: none;
}
.um-essence-teaser__headline-ja {
font-family: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
font-size: clamp(0.85rem, 1.05vw, 0.95rem);
letter-spacing: 0.12em;
color: #888;
line-height: 1.8;
margin: 0 !important;
}
body.theme-dark .um-essence-teaser__headline-en { color: #f1f1f1; }
body.theme-dark .um-essence-teaser__headline-ja { color: #aaa; }
@media (max-width: 700px) {
.um-essence-teaser__headline { margin: 0.4rem 0 1.8rem; }
.um-essence-teaser__headline-en { letter-spacing: 0.04em; }
.um-essence-teaser__headline-ja { letter-spacing: 0.08em; }
}
.um-essence-teaser__breadcrumb {
font-size: 0.75rem;
letter-spacing: 0.32em;
color: #888;
margin: 0 0 0.6rem;
}
.um-essence-teaser__title {
font-family: 'Aozora Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
font-size: 1.85rem;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.5;
margin: 0 0 0.4rem;
color: #1a1a1a;
}
.um-essence-teaser__sub {
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.95rem;
letter-spacing: 0.22em;
color: #888;
margin: 0 0 2.2rem;
}
.um-essence-teaser__body {
max-width: 640px;
margin: 0 auto;
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: 0.95rem;
line-height: 2.05;
letter-spacing: 0.06em;
color: #333;
}
.um-essence-teaser__body p {
margin: 0 0 1.1rem;
}
.um-essence-teaser__lead {
font-size: 1rem;
color: #1a1a1a;
}
.um-essence-teaser__climax {
margin: 3.2rem auto !important;
padding: 2.4rem 1rem;
text-align: center;
border-top: 1px solid rgba(0,0,0,0.12);
border-bottom: 1px solid rgba(0,0,0,0.12);
max-width: 720px;
}
.um-essence-teaser__climax-main {
font-size: clamp(1.05rem, 4.6vw, 1.6rem);
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.7;
color: #1a1a1a;
margin: 0 0 1.1rem !important;
white-space: nowrap;
overflow-wrap: normal;
}
.um-essence-teaser__climax-sub {
font-size: 0.95rem;
letter-spacing: 0.05em;
color: #444;
line-height: 1.8;
margin: 0 !important;
}
body.theme-dark .um-essence-teaser__climax {
border-top-color: rgba(255,255,255,0.18);
border-bottom-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-essence-teaser__climax-main { color: #f5f5f5; }
body.theme-dark .um-essence-teaser__climax-sub { color: #bbb; }
@media (max-width: 700px) {
.um-essence-teaser__climax { margin: 2.2rem auto !important; padding: 1.8rem 0.5rem; }
.um-essence-teaser__climax-main { letter-spacing: 0.04em; font-size: clamp(1rem, 5vw, 1.4rem); }
}
@media (max-width: 400px) {
.um-essence-teaser__climax-main { letter-spacing: 0.02em; font-size: 4.6vw; }
}
.um-essence-teaser__quote {
margin-top: 1.5rem !important;
font-size: 1.05rem;
letter-spacing: 0.12em;
color: #1a1a1a;
font-weight: 500;
}
body.theme-dark .um-essence-teaser__title { color: #f1f1f1; }
body.theme-dark .um-essence-teaser__sub { color: #aaa; }
body.theme-dark .um-essence-teaser__body { color: #d8d8d8; }
body.theme-dark .um-essence-teaser__lead { color: #f1f1f1; }
body.theme-dark .um-essence-teaser__quote { color: #f1f1f1; }
@media (max-width: 700px) {
.um-essence-teaser__title { font-size: 1.4rem; letter-spacing: 0.14em; }
.um-essence-teaser__sub { font-size: 0.8rem; margin-bottom: 1.6rem; }
.um-essence-teaser__body { font-size: 0.9rem; line-height: 1.95; }
.um-essence-teaser__lead { font-size: 0.95rem; }
.um-essence-teaser__quote { font-size: 0.95rem; }
}
.um-essence-intro {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
padding: 2.2rem 2.2rem 1.4rem;
margin: 3rem auto 0;
max-width: 760px;
border: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.08));
background: rgba(255, 255, 255, 0.5);
text-align: left;
transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.um-essence-intro:hover {
opacity: 0.95;
transform: translateY(-1px);
border-color: rgba(0, 0, 0, 0.22);
}
.um-essence-intro__grid {
display: grid;
grid-template-columns: 220px 1fr;
gap: 2.6rem;
align-items: center;
}
.um-essence-intro__hint {
display: block;
margin-top: 1.4rem;
padding-top: 1.1rem;
border-top: 1px solid rgba(0, 0, 0, 0.06);
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.8rem;
letter-spacing: 0.22em;
color: #888;
text-align: right;
transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.um-essence-intro:hover .um-essence-intro__hint {
color: #1a1a1a;
letter-spacing: 0.26em;
}
body.theme-dark .um-essence-intro__hint {
border-top-color: rgba(255, 255, 255, 0.1);
color: #aaa;
}
body.theme-dark .um-essence-intro:hover .um-essence-intro__hint {
color: #f1f1f1;
}
.um-essence-intro__logo {
display: flex;
justify-content: center;
align-items: center;
}
.um-essence-intro__logo-mark {
display: block;
width: 200px;
height: 130px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.um-essence-intro__text {
display: block;
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: 0.9rem;
line-height: 2;
letter-spacing: 0.05em;
color: #333;
}
body.theme-dark .um-essence-intro {
background: rgba(30, 30, 30, 0.4);
border-color: rgba(255, 255, 255, 0.12);
}
body.theme-dark .um-essence-intro:hover {
border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-essence-intro__logo-mark { background-color: #f1f1f1; }
body.theme-dark .um-essence-intro__text { color: #d8d8d8; }
@media (max-width: 700px) {
.um-essence-intro {
padding: 1.8rem 1.4rem 1.2rem;
margin-top: 2.2rem;
}
.um-essence-intro__grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 1.4rem;
text-align: center;
}
.um-essence-intro__logo {
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-dark .um-essence-intro__logo {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.um-essence-intro__logo-mark { width: 170px; height: 110px; }
.um-essence-intro__text { font-size: 0.88rem; line-height: 1.95; text-align: center; }
.um-essence-intro__hint { text-align: center; font-size: 0.78rem; }
}
.um-profile-tabs {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0;
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
margin: 0;
padding: 0;
position: sticky;
top: calc(1.25rem + 38px + 0.6rem);
z-index: 200;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
}
body.theme-dark .um-profile-tabs {
background: rgba(15, 15, 15, 0.88);
}
body.admin-bar .um-profile-tabs {
top: calc(1.25rem + 38px + 0.6rem + 32px);
}
@media (max-width: 782px) {
body.admin-bar .um-profile-tabs {
top: calc(0.875rem + 28px + 0.5rem + 46px);
}
}
@media (max-width: 768px) {
.um-profile-tabs {
top: calc(0.875rem + 28px + 0.5rem);
}
}
button.um-profile-tabs__tab,
button.um-profile-tabs__brand {
background: transparent;
border: none;
cursor: pointer;
font: inherit;
}
button.um-profile-tabs__tab + .um-profile-tabs__tab,
button.um-profile-tabs__brand + .um-profile-tabs__tab,
button.um-profile-tabs__tab + .um-profile-tabs__brand {
border-left: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.06));
}
.um-tab-panel {
opacity: 0;
transform: translateY(6px);
transition: opacity .3s ease, transform .35s cubic-bezier(.2, .6, .2, 1);
overflow: visible;
}
body.page main:has(.um-profile-tabs) {
overflow: visible !important;
}
.um-tab-panel.is-active {
opacity: 1;
transform: translateY(0);
}
.um-tab-panel[hidden] {
display: none;
}
.um-profile-tabs__tab {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
padding: 1rem 1.2rem 1.1rem;
text-decoration: none;
color: inherit;
position: relative;
opacity: 0.42;
transition: opacity .35s ease, background .25s ease;
}
.um-profile-tabs__tab + .um-profile-tabs__tab,
.um-profile-tabs__tab + .um-profile-tabs__brand,
.um-profile-tabs__brand + .um-profile-tabs__tab {
border-left: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.06));
}
.um-profile-tabs__brand {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.85rem 1.4rem 0.95rem;
text-align: center;
text-decoration: none;
color: inherit;
user-select: none;
position: relative;
transition: background .25s ease, opacity .35s ease;
}
.um-profile-tabs__brand-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
line-height: 1;
}
.um-profile-tabs__brand-suffix {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.08em;
color: #1a1a1a;
white-space: nowrap;
}
body.theme-dark .um-profile-tabs__brand-suffix { color: #f1f1f1; }
.um-profile-tabs__brand:hover,
.um-profile-tabs__brand:focus-visible {
background: rgba(0,0,0,0.03);
outline: none;
}
.um-profile-tabs__brand:hover .um-profile-tabs__brand-logo {
opacity: 0.78;
}
.um-profile-tabs__brand-logo {
transition: opacity .25s ease;
}
body.theme-dark .um-profile-tabs__brand:hover,
body.theme-dark .um-profile-tabs__brand:focus-visible {
background: rgba(255,255,255,0.05);
}
.um-profile-tabs__brand-logo {
display: block;
width: 110px;
height: 26px;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
}
.um-profile-tabs__brand-en {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-size: 0.7rem;
font-style: italic;
letter-spacing: 0.16em;
color: #555;
line-height: 1.3;
}
.um-profile-tabs__brand-ja {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.1em;
color: #888;
line-height: 1.3;
}
body.theme-dark .um-profile-tabs__brand-logo { background-color: #f1f1f1; }
body.theme-dark .um-profile-tabs__brand-en { color: #bbb; }
body.theme-dark .um-profile-tabs__brand-ja { color: #999; }
.um-profile-tabs__tab:hover {
opacity: 0.78;
background: rgba(0,0,0,0.02);
}
.um-profile-tabs__tab.is-active {
opacity: 1;
}
.um-profile-tabs__tab::after,
.um-profile-tabs__brand::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: #1a1a1a;
transform: scaleX(0);
transform-origin: left center;
transition: transform .55s cubic-bezier(.2, .6, .2, 1);
}
.um-profile-tabs__tab.is-active::after,
.um-profile-tabs__brand.is-active::after {
transform: scaleX(1);
}
.um-profile-tabs__tab:hover:not(.is-active)::after,
.um-profile-tabs__brand:hover:not(.is-active)::after {
transform: scaleX(0.35);
}
body.theme-dark .um-profile-tabs__brand::after { background: #f1f1f1; }
.um-profile-tabs__title {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.2em;
color: #1a1a1a;
line-height: 1;
transition: letter-spacing .35s ease;
}
.um-profile-tabs__tab.is-active .um-profile-tabs__title {
letter-spacing: 0.24em;
}
.um-profile-tabs__sub {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.12em;
color: #888;
line-height: 1.4;
}
body.theme-dark .um-profile-tabs { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-profile-tabs__tab + .um-profile-tabs__tab { border-left-color: rgba(255,255,255,0.08); }
body.theme-dark .um-profile-tabs__tab:hover { background: rgba(255,255,255,0.04); }
body.theme-dark .um-profile-tabs__title { color: #f1f1f1; }
body.theme-dark .um-profile-tabs__sub { color: #aaa; }
body.theme-dark .um-profile-tabs__tab::after { background: #f1f1f1; }
@media (max-width: 768px) {
.um-profile-tabs__tab { padding: 0.85rem 0.85rem 0.95rem; }
.um-profile-tabs__title { font-size: 1.15rem; letter-spacing: 0.18em; }
.um-profile-tabs__tab.is-active .um-profile-tabs__title { letter-spacing: 0.22em; }
.um-profile-tabs__sub { font-size: 0.7rem; }
.um-profile-tabs__brand { padding: 0.65rem 0.6rem; gap: 0.2rem; }
.um-profile-tabs__brand-row { gap: 0.35rem; }
.um-profile-tabs__brand-logo { width: 78px; height: 18px; }
.um-profile-tabs__brand-suffix { font-size: 0.85rem; letter-spacing: 0.05em; }
}
.um-profile-essence-link {
display: block;
text-decoration: none;
color: inherit;
border: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
padding: 1.4rem 1.6rem;
transition: transform .35s cubic-bezier(.2,.6,.2,1),
border-color .25s ease,
box-shadow .35s ease;
}
.um-profile-essence-link:hover,
.um-profile-essence-link:focus-visible {
transform: translateY(-2px);
border-color: rgba(0,0,0,0.25);
box-shadow: 0 12px 28px -14px rgba(0,0,0,0.18);
outline: none;
}
.um-profile-essence-link__inner {
display: grid;
grid-template-columns: minmax(160px, 32%) 1fr auto;
gap: 1.5rem;
align-items: center;
}
.um-profile-essence-link__head {
display: flex;
flex-direction: column;
gap: 0.35rem;
border-right: 1px solid rgba(0,0,0,0.08);
padding-right: 1.2rem;
}
.um-profile-essence-link__title {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.18em;
color: #1a1a1a;
transition: letter-spacing .35s ease;
}
.um-profile-essence-link:hover .um-profile-essence-link__title {
letter-spacing: 0.22em;
}
.um-profile-essence-link__sub {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.8125rem;
letter-spacing: 0.12em;
color: #888;
}
.um-profile-essence-link__excerpt {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.875rem;
line-height: 1.85;
color: #555;
letter-spacing: 0.04em;
}
.um-profile-essence-link__teaser {
position: relative;
display: block;
min-height: 2.6em;
line-height: 1.85;
overflow: hidden;
}
.um-profile-essence-link__quote {
position: absolute;
inset: 0;
display: flex;
align-items: center;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
color: #444;
letter-spacing: 0.04em;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .6, .2, 1);
pointer-events: none;
}
.um-profile-essence-link__quote.is-active {
opacity: 1;
transform: translateY(0);
}
.um-profile-essence-link__quote em {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-weight: 600;
font-size: 1.05em;
letter-spacing: 0.04em;
color: #1a1a1a;
}
.um-profile-essence-link:hover .um-profile-essence-link__teaser,
.um-profile-essence-link:focus-visible .um-profile-essence-link__teaser {
}
.um-profile-essence-link__arrow {
font-size: 1.1rem;
color: #888;
transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.um-profile-essence-link:hover .um-profile-essence-link__arrow {
transform: translateX(6px);
color: #1a1a1a;
}
body.theme-dark .um-profile-essence-link { border-color: rgba(255,255,255,0.1); }
body.theme-dark .um-profile-essence-link:hover { border-color: rgba(255,255,255,0.3); }
body.theme-dark .um-profile-essence-link__head { border-right-color: rgba(255,255,255,0.1); }
body.theme-dark .um-profile-essence-link__title { color: #f1f1f1; }
body.theme-dark .um-profile-essence-link__sub { color: #aaa; }
body.theme-dark .um-profile-essence-link__excerpt { color: #ccc; }
body.theme-dark .um-profile-essence-link__quote { color: #ddd; }
body.theme-dark .um-profile-essence-link__quote em { color: #f1f1f1; }
body.theme-dark .um-profile-essence-link__arrow { color: #aaa; }
body.theme-dark .um-profile-essence-link:hover .um-profile-essence-link__arrow { color: #f1f1f1; }
@media (max-width: 768px) {
.um-profile-essence-link { padding: 1.1rem 1.2rem; }
.um-profile-essence-link__inner {
grid-template-columns: 1fr;
gap: 0.85rem;
}
.um-profile-essence-link__head {
flex-direction: row;
align-items: baseline;
gap: 0.85rem;
border-right: 0;
padding-right: 0;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
body.theme-dark .um-profile-essence-link__head {
border-bottom-color: rgba(255,255,255,0.1);
}
.um-profile-essence-link__arrow {
align-self: flex-end;
}
}
@media (max-width: 768px) {
.um-essence { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.um-essence__body { font-size: 1rem; line-height: 1.95; }
.um-essence__lead { font-size: 1.0625rem; }
.um-essence__quote { font-size: 1.025rem; padding-left: 0.85rem; margin: 1.5rem 0 !important; }
}
.um-section-cta {
display: block;
color: inherit;
text-decoration: none;
transition: opacity .25s ease, transform .35s cubic-bezier(.2,.6,.2,1);
}
.um-section-cta:hover,
.um-section-cta:focus-visible {
opacity: 0.78;
outline: none;
}
.um-section-cta__title {
margin: 0 !important;
transition: letter-spacing .35s ease;
}
.um-section-cta:hover .um-section-cta__title,
.um-section-cta:focus-visible .um-section-cta__title {
letter-spacing: 0.3em;
}
.um-section-cta__lead {
margin: 0.6rem 0 0 !important;
color: #888888;
font-size: 0.875rem;
letter-spacing: 0.08em;
line-height: 1.8;
}
body.theme-dark .um-section-cta__lead { color: #aaaaaa; }
.um-top-contact-cta {
display: flex;
justify-content: center;
margin-top: 1.8rem;
}
.um-top-contact-cta__btn {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 2.4rem;
background: #1a1a1a;
color: #fff;
text-decoration: none;
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.92rem;
letter-spacing: 0.22em;
border: 1px solid #1a1a1a;
transition: background 0.28s ease, color 0.28s ease, letter-spacing 0.32s ease;
}
.um-top-contact-cta__btn:hover {
background: transparent;
color: #1a1a1a;
letter-spacing: 0.26em;
}
.um-top-contact-cta__arrow {
display: inline-block;
transition: transform 0.32s cubic-bezier(.2,.6,.2,1);
}
.um-top-contact-cta__btn:hover .um-top-contact-cta__arrow {
transform: translateX(6px);
}
body.theme-dark .um-top-contact-cta__btn {
background: #f1f1f1;
color: #111;
border-color: #f1f1f1;
}
body.theme-dark .um-top-contact-cta__btn:hover {
background: transparent;
color: #f1f1f1;
}
@media (max-width: 600px) {
.um-top-contact-cta__btn {
padding: 0.85rem 1.8rem;
font-size: 0.82rem;
letter-spacing: 0.18em;
}
}
.um-pickup {
width: 100%;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.um-pickup__track {
display: flex;
width: max-content;
will-change: transform;
animation: um-pickup-marquee 60s linear infinite;
}
.um-pickup__track[data-row="0"] { animation-duration: 65s; }
.um-pickup__track[data-row="1"] { animation-duration: 80s; }
.um-pickup__group {
display: flex;
gap: 12px;
padding-right: 12px;
margin: 0;
list-style: none;
flex-shrink: 0;
}
.um-pickup__item { display: block; }
.um-pickup__tile {
position: relative;
display: block;
height: 220px;
aspect-ratio: 3 / 4;
overflow: hidden;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
text-decoration: none;
transition: transform .35s cubic-bezier(.2,.6,.2,1),
box-shadow .35s ease;
}
.um-pickup__tile[data-orient="land"] {
aspect-ratio: 3 / 2;
}
.um-pickup__tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
.um-pickup__tile:hover {
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.um-pickup__tile:hover img {
transform: scale(1.04);
}
body.theme-dark .um-pickup__tile:hover {
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
}
@keyframes um-pickup-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
.um-pickup { gap: 8px; }
.um-pickup__tile { height: 150px; }
.um-pickup__track[data-row="0"] { animation-duration: 50s; }
.um-pickup__track[data-row="1"] { animation-duration: 62s; }
}
@media (prefers-reduced-motion: reduce) {
.um-pickup__track { animation: none; }
}
.um-profile__photo {
aspect-ratio: 4 / 5;
background: linear-gradient(160deg, #3a3a3a 0%, #1a1a1a 100%);
width: 100%;
}
@media (max-width: 768px) {
.um-profile__photo { aspect-ratio: 4 / 3; }
}
.um-dropdown {
position: relative;
display: inline-block;
}
.um-dropdown__trigger {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 1px solid var(--wp--preset--color--line);
padding: 0.55rem 0.85rem 0.55rem 0.95rem;
border-radius: 999px;
cursor: pointer;
font-family: inherit;
color: #1a1a1a;
transition: border-color .2s ease, background .2s ease;
min-width: 180px;
}
.um-dropdown__trigger:hover { border-color: #1a1a1a; }
.um-dropdown__label {
font-size: 0.625rem;
letter-spacing: 0.3em;
color: #888;
}
.um-dropdown__current {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1;
}
.um-dropdown__current-stack {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
min-width: 0;
}
.um-dropdown__current-text {
font-size: 0.8125rem;
letter-spacing: 0.15em;
color: #1a1a1a;
white-space: nowrap;
}
.um-dropdown__current-desc {
font-size: 0.66rem;
color: #888;
letter-spacing: 0.05em;
margin-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 14em;
}
.um-dropdown__current-desc:empty { display: none; }
body.theme-dark .um-dropdown__current-desc { color: #aaa; }
.um-dropdown__current-stack:has(.um-dropdown__current-desc:not(:empty)) {
padding: 0;
}
.um-dropdown__icon {
width: 16px;
height: 16px;
color: #1a1a1a;
}
.um-dropdown__chevron {
width: 10px;
height: 10px;
color: #888;
transition: transform .25s ease;
}
.um-dropdown__trigger[aria-expanded="true"] .um-dropdown__chevron {
transform: rotate(-180deg);
}
.um-dropdown__menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 280px;
background: #ffffff;
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
padding: 6px;
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index: 2000;
display: flex;
flex-direction: column;
gap: 2px;
}
.um-dropdown__trigger[aria-expanded="true"] + .um-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.um-dropdown__option {
display: flex;
align-items: center;
gap: 14px;
padding: 0.7rem 0.85rem;
background: transparent;
border: 0;
border-radius: 6px;
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition: background .2s ease;
width: 100%;
}
.um-dropdown__option:hover { background: rgba(0,0,0,0.04); }
.um-dropdown__option.is-active { background: rgba(0,0,0,0.06); }
.um-dropdown__option-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--wp--preset--color--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
}
.um-dropdown__option-icon svg {
width: 18px;
height: 18px;
}
.um-dropdown__option-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.um-dropdown__option-title {
font-size: 0.8125rem;
letter-spacing: 0.12em;
font-weight: 500;
color: #1a1a1a;
}
.um-dropdown__option-desc {
font-size: 0.6875rem;
letter-spacing: 0.05em;
color: #888;
line-height: 1.4;
}
.um-dropdown__option.is-active .um-dropdown__option-icon {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
.um-dropdown__menu--rich { min-width: 420px; }
.um-dropdown__menu--rich .um-dropdown__option { gap: 14px; padding: 0.7rem 0.75rem; align-items: center; }
.um-dropdown__option-thumb {
flex: 0 0 156px;
width: 156px;
height: 100px;
border-radius: 9px;
overflow: hidden;
background: #efece6 center / cover no-repeat;
border: 1px solid var(--wp--preset--color--line);
display: inline-flex;
align-items: center;
justify-content: center;
color: #6a6a6a;
position: relative;
}
.um-dropdown__option-thumb-icon { width: 32px; height: 32px; opacity: 0.5; }
.um-dropdown__option-thumb.has-img .um-dropdown__option-thumb-icon { display: none; }
.um-dropdown__option-thumb--map { background: #eef1f4; color: #5b6b7a; }
.um-vt-cards {
display: flex; gap: 6px; width: 100%; height: 100%;
align-items: center; justify-content: center;
padding: 8px; box-sizing: border-box; background: #f3f1ea;
}
.um-vt-card {
flex: 1 1 0; min-width: 0; height: 78%;
background: center / cover no-repeat #ddd;
border-radius: 3px; border: 1.5px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.22);
}
.um-vt-card:nth-child(1) { transform: rotate(-3deg); }
.um-vt-card:nth-child(3) { transform: rotate(3deg); }
.um-vt-mosaic {
display: grid; width: 100%; height: 100%;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 2px;
}
.um-vt-cell { background: center / cover no-repeat #ddd; }
.um-dropdown__menu--rich .um-dropdown__option-title { font-size: 0.92rem; letter-spacing: 0.1em; }
.um-dropdown__menu--rich .um-dropdown__option-desc { font-size: 0.72rem; white-space: normal; line-height: 1.5; }
.um-dropdown__menu--rich .um-dropdown__option.is-active .um-dropdown__option-thumb {
border-color: #c8a36b;
box-shadow: 0 0 0 2px rgba(200,163,107,0.45);
}
body.theme-dark .um-dropdown__option-thumb { border-color: #2a2a2a; background-color: #232323; color: #cfcfcf; }
body.theme-dark .um-dropdown__option-thumb--map { background-color: #1f242a; }
body.theme-dark .um-vt-cards { background: #2a2723; }
body.theme-dark .um-vt-card { border-color: #3a3631; }
@media (max-width: 600px) {
.um-dropdown__menu--rich { min-width: 300px; max-width: calc(100vw - 50px); }
.um-dropdown__option-thumb { flex-basis: 120px; width: 120px; height: 78px; }
}
.um-dropdown[data-dropdown="filter"] .um-dropdown__menu--rich {
min-width: 340px;
max-height: 70vh;
overflow-y: auto;
}
.um-dropdown[data-dropdown="filter"] .um-dropdown__menu--rich .um-dropdown__option { gap: 11px; padding: 0.45rem 0.6rem; }
.um-dropdown[data-dropdown="filter"] .um-dropdown__option-thumb { flex-basis: 80px; width: 80px; height: 54px; border-radius: 7px; }
.um-dropdown[data-dropdown="filter"] .um-dropdown__menu--rich .um-dropdown__option-title { font-size: 0.82rem; letter-spacing: 0.08em; }
.um-dropdown[data-dropdown="filter"] .um-dropdown__menu--rich .um-dropdown__option-desc { font-size: 0.68rem; line-height: 1.45; }
@media (max-width: 600px) {
.um-dropdown[data-dropdown="filter"] .um-dropdown__menu--rich { min-width: 280px; }
.um-dropdown[data-dropdown="filter"] .um-dropdown__option-thumb { flex-basis: 66px; width: 66px; height: 46px; }
}
body.theme-dark .um-dropdown__trigger { color: #f5f5f5; border-color: #2a2a2a; }
body.theme-dark .um-dropdown__trigger:hover { border-color: #f5f5f5; }
body.theme-dark .um-dropdown__current-text { color: #f5f5f5; }
body.theme-dark .um-dropdown__icon { color: #f5f5f5; }
body.theme-dark .um-dropdown__menu {
background: #1a1a1a;
border-color: #2a2a2a;
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.5);
}
body.theme-dark .um-dropdown__option-title { color: #f5f5f5; }
body.theme-dark .um-dropdown__option:hover { background: rgba(255,255,255,0.06); }
body.theme-dark .um-dropdown__option.is-active { background: rgba(255,255,255,0.08); }
body.theme-dark .um-dropdown__option-icon { border-color: #2a2a2a; color: #f5f5f5; }
body.theme-dark .um-dropdown__option.is-active .um-dropdown__option-icon {
background: #f5f5f5; color: #1a1a1a; border-color: #f5f5f5;
}
@media (max-width: 600px) {
.um-dropdown__trigger { min-width: 0; }
.um-dropdown__menu { min-width: 240px; max-width: calc(100vw - 80px); }
}
.um-settings-panel .um-dropdown__menu {
top: auto;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(6px);
max-height: min(60vh, calc(100vh - 220px));
overflow-y: auto;
overscroll-behavior: contain;
}
.um-settings-panel .um-dropdown__trigger[aria-expanded="true"] + .um-dropdown__menu {
transform: translateX(-50%) translateY(0);
}
.um-settings-panel .um-dropdown__menu--two-pane {
max-width: calc(100vw - 48px);
}
@media (max-width: 600px) {
.um-settings-panel .um-dropdown__menu {
max-width: calc(100vw - 32px);
}
}
.um-gallery-map {
display: none;
width: 100%;
height: 70vh;
min-height: 480px;
border: 1px solid var(--wp--preset--color--line);
border-radius: 4px;
overflow: hidden;
background: #f0f0f0;
}
body[data-gallery-view="map"] .um-gallery-map {
display: block;
}
body[data-gallery-view="map"]:not(.um-person-page) .um-gallery-grid,
body[data-gallery-view="map"]:not(.um-person-page) .um-gallery-size {
display: none;
}
.um-gallery-album { display: none; }
body[data-gallery-view="album"] .um-gallery-album { display: block; }
body[data-gallery-view="album"]:not(.um-person-page) .um-gallery-grid,
body[data-gallery-view="album"]:not(.um-person-page) .um-gallery-map {
display: none;
}
body[data-gallery-view="album"] .um-dropdown__type-tab[data-type="movie"],
body[data-gallery-view="album"] .um-dropdown__option[data-type="movie"] {
display: none;
}
body.page-id-7:not([data-gallery-view]):not(.um-person-page) .um-gallery-album { display: block; }
body.page-id-7:not([data-gallery-view]):not(.um-person-page) .um-gallery-grid,
body.page-id-7:not([data-gallery-view]):not(.um-person-page) .um-gallery-map {
display: none;
}
body.um-person-page .um-gallery-controls,
body.um-person-page .um-info-ticker:not(.um-person__info),
body.um-person-page .um-info-ticker--fixed,
body.um-person-page .um-gallery-map,
body.um-person-page .um-gallery-album,
body.um-person-page .um-gallery-grid:not(.um-person__grid):not(.um-person__strip) {
display: none !important;
}
.um-album-people {
display: grid;
--um-album-cw: 280px;
grid-template-columns: repeat(auto-fill, var(--um-album-cw));
justify-content: center;
gap: 12px;
transition: gap .3s ease;
}
@media (max-width: 600px) {
.um-album-people {
grid-template-columns: repeat(var(--um-album-cols, 2), 1fr);
gap: 8px;
}
.um-album-people[data-cols="4"] { gap: 6px; }
.um-album-people[data-cols="4"] .um-album-card__sign { display: none; }
.um-album-people[data-cols="4"] .um-album-card__frame {
border-width: 5px;
border-bottom-width: 14px;
}
.um-album-people[data-cols="3"] .um-album-card__frame {
border-width: 6px;
border-bottom-width: 20px;
}
.um-album-card__bubble { display: none !important; }
}
.um-album-card {
position: relative;
display: block;
text-decoration: none;
overflow: visible;
transition: transform .35s cubic-bezier(.22,.7,.22,1);
}
.um-album-card:hover { transform: translateY(-6px); z-index: 40; }
.um-album-people.is-priming .um-album-card { opacity: 0; }
.um-album-card.is-smash-in {
animation-duration: .24s;
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-fill-mode: backwards;
animation-delay: var(--smash-delay, 0ms);
transform-origin: center center;
will-change: transform;
}
.um-album-people.dir-rtl .um-album-card.is-smash-in { animation-name: um-album-slide-rtl; }
.um-album-people.dir-ltr .um-album-card.is-smash-in { animation-name: um-album-slide-ltr; }
.um-album-card.is-smash-in { animation-name: um-album-slide-rtl; }
@keyframes um-album-slide-rtl {
0%   { opacity: 0; transform: translateX(var(--smash-from-x, 40px)); }
12%  { opacity: 1; }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes um-album-slide-ltr {
0%   { opacity: 0; transform: translateX(-40px) scale(.98); }
70%  { opacity: 1; transform: translateX(4px)   scale(1); }
100% { opacity: 1; transform: translateX(0)     scale(1); }
}
.um-gallery-album { overflow-x: clip; }
html.um-anim-ok .um-gallery-grid__item.is-smash-in {
animation-name: um-album-slide-rtl;
animation-duration: .24s;
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
animation-fill-mode: backwards;
animation-delay: var(--smash-delay, 0ms);
will-change: transform;
}
.um-gallery-grid { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
.um-album-card.is-smash-in,
.um-gallery-grid__item.is-smash-in { animation: none; opacity: 1; transform: none; }
}
.um-album-card__frame {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #fcfbf7;
border: 8px solid #fcfbf7;
border-bottom-width: 28px;
border-radius: 2px;
box-sizing: border-box;
box-shadow: 0 2px 6px rgba(0,0,0,.16), 0 10px 22px -14px rgba(0,0,0,.4);
transform: scale(1);
transition: box-shadow .5s ease, transform .5s ease;
will-change: transform;
backface-visibility: hidden;
}
body.theme-dark .um-album-card__frame { background: #f3f1ea; border-color: #f3f1ea; }
.um-album-card__cover {
position: absolute;
inset: 0;
background-position: var(--um-focal, center);
background-size: cover;
background-repeat: no-repeat;
transform: scale(var(--um-zoom, 1));
transform-origin: var(--um-focal, center);
}
.um-album-card__cover.is-empty {
background: repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 10px, #1f1f1f 10px, #1f1f1f 20px);
}
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame {
transform: scale(1.05);
}
html.vt-person-forward .um-album-card__frame,
html.vt-person-back .um-album-card__frame {
transform: none !important;
transition: none !important;
}
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame {
animation: um-album-glow 2s ease-in-out infinite alternate;
}
@keyframes um-album-glow {
0%   { box-shadow: 0 0 0 1.5px rgba(200,163,107,0.40), 0 0 8px 0 rgba(200,163,107,0.20); }
100% { box-shadow: 0 0 0 2.5px rgba(200,163,107,0.98), 0 0 20px 2px rgba(200,163,107,0.52); }
}
.um-album-card__bubble {
position: absolute;
left: 50%;
z-index: 30;
min-width: max-content;
max-width: 220px;
padding: 0.7rem 0.95rem;
background: rgba(16,16,16,0.92);
border: 1px solid rgba(200,163,107,0.75);
box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
color: #fff;
text-align: center;
pointer-events: none;
opacity: 0;
font-family: 'Inter Tight', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
transition: opacity .3s ease, transform .42s cubic-bezier(.2,.7,.25,1);
}
.um-album-card.is-bubble-below .um-album-card__bubble {
top: calc(100% + 10px);
transform: translate(calc(-50% + var(--um-bubble-shift, 0px)), -6px);
}
.um-album-card.is-bubble-above .um-album-card__bubble {
bottom: calc(100% + 10px);
transform: translate(calc(-50% + var(--um-bubble-shift, 0px)), 6px);
}
.um-album-card__bubble::after {
content: '';
position: absolute;
left: 50%;
width: 0; height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
transform: translateX(calc(-50% - var(--um-bubble-shift, 0px)));
}
.um-album-card.is-bubble-below .um-album-card__bubble::after {
bottom: 100%;
border-bottom: 7px solid rgba(200,163,107,0.75);
}
.um-album-card.is-bubble-above .um-album-card__bubble::after {
top: 100%;
border-top: 7px solid rgba(200,163,107,0.75);
}
.um-album-card:hover .um-album-card__bubble,
.um-album-card:focus-visible .um-album-card__bubble {
opacity: 1;
transform: translate(calc(-50% + var(--um-bubble-shift, 0px)), 0);
transition-duration: .26s;
}
.um-album-card__name {
display: block;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.25;
color: #fff;
}
.um-album-card__meta {
display: block;
margin-top: 0.3rem;
font-size: 0.58rem;
letter-spacing: 0.22em;
color: #c8a36b;
text-transform: uppercase;
}
.um-album-card__num { font-variant-numeric: tabular-nums; }
.um-album-card__cats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3rem;
margin-top: 0.45rem;
}
.um-album-card__cat {
font-size: 0.54rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c8a36b;
border: 1px solid rgba(200,163,107,0.6);
padding: 0.18rem 0.5rem;
white-space: nowrap;
}
@media (hover: none) {
.um-album-card { transform: none !important; }
.um-album-card__bubble {
position: static;
opacity: 1;
transform: none;
margin-top: 0.55rem;
max-width: none;
min-width: 0;
background: transparent;
border: 0;
padding: 0;
text-align: left;
color: #1a1a1a;
}
.um-album-card__bubble::after { display: none; }
.um-album-card__name {
color: #1a1a1a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(0.92rem * 1.25 * 2);
}
body.theme-dark .um-album-card__bubble,
body.theme-dark .um-album-card__name { color: #f5f5f5; }
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame { animation: none; }
.um-album-card__frame,
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame { transform: none; transition: none; }
.um-album-card__cats { justify-content: flex-start; margin-top: 0.4rem; }
.um-album-card__cat { color: #8f6a1e; }
body.theme-dark .um-album-card__cat { color: #c8a36b; }
}
@media (prefers-reduced-motion: reduce) {
.um-album-card { transition: none; }
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame {
animation: none;
box-shadow: 0 0 0 1px rgba(200,163,107,0.7);
}
.um-album-card__frame,
.um-album-card:hover .um-album-card__frame,
.um-album-card:focus-visible .um-album-card__frame { transform: none; transition: none; }
.um-album-card__bubble { transition: opacity .25s ease; }
.um-album-card.is-bubble-below .um-album-card__bubble,
.um-album-card.is-bubble-above .um-album-card__bubble { transform: translate(-50%, 0); }
.um-album-card:hover .um-album-card__bubble,
.um-album-card:focus-visible .um-album-card__bubble { transform: translate(-50%, 0); }
}
.um-person { max-width: 1180px; margin: 0 auto; }
.um-person__info {
margin: 0 0 1.4rem;
flex-wrap: nowrap;
}
.um-person__info .um-info-ticker__label {
display: inline-flex;
align-items: center;
}
.um-person__info .um-info-ticker__track { animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) {
.um-person__info .um-info-ticker__track { animation: none; transform: none; }
}
@media (hover: none) {
.um-person__info .is-pc-only { display: none; }
}
body.um-person-page .um-person {
padding-top: calc(var(--um-header-h, 65px) - 0.85rem);
}
body.um-person-page .um-person__hero { padding-top: 0; }
@media (max-width: 768px) {
body.um-person-page .um-person {
padding-top: 0;
}
}
@media (min-width: 769px) {
body.logged-in.admin-bar.page-id-7.um-person-page main.wp-block-group {
padding-top: 32px !important;
}
}
html.vt-person-forward .um-person__cover-wrap {
view-transition-name: um-person-cover;
}
::view-transition-group(um-person-cover) {
animation-duration: 460ms;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.vt-person-forward::view-transition-old(root),
html.vt-person-forward::view-transition-new(root),
html.vt-person-back::view-transition-old(root),
html.vt-person-back::view-transition-new(root) {
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.um-person__hero {
text-align: left;
padding: 0.8rem 0 0.4rem;
max-width: 1080px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: clamp(2rem, 4vw, 3.5rem);
}
.um-person__cover-wrap {
margin: 0;
flex: 0 0 auto;
align-self: center;
width: 40%;
max-width: 410px;
--cheki-rot: 0deg;
background: none;
padding: 0;
box-sizing: border-box;
border-radius: 6px;
box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 22px 46px -26px rgba(0,0,0,.4);
transform: none;
transition: transform .35s cubic-bezier(.22,.7,.22,1), box-shadow .35s ease;
overflow: hidden;
}
body.theme-dark .um-person__cover-wrap { background: none; }
body.um-person-animate-in .um-person__cover-wrap.is-dropping {
animation: um-person-cover-in .5s cubic-bezier(.22,.7,.22,1) both;
}
@keyframes um-person-cover-in {
0%   { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
.um-person__cover-sign { display: none !important; }
.um-person__cover-sign--legacy-unused {
position: absolute;
left: 0; right: 0;
bottom: 5px;
text-align: center;
font-family: 'Sacramento', 'Caveat', 'Cormorant Garamond', cursive;
font-weight: 400;
text-transform: lowercase;
font-size: clamp(1.0rem, 3.4vw, 1.34rem);
line-height: 1;
color: #4a463f;
opacity: 0.9;
letter-spacing: 0.01em;
pointer-events: none;
white-space: nowrap;
overflow: visible;
padding: 0 10px;
box-sizing: border-box;
}
body.theme-dark .um-person__cover-sign { color: #5a554c; }
.um-person__cover-wrap.is-portrait .um-person__cover-sign {
font-size: clamp(0.82rem, 2.5vw, 1.02rem);
padding: 0 8px;
}
.um-album-card__sign {
position: absolute;
left: 0; right: 0;
bottom: 4px;
text-align: center;
font-family: 'Sacramento', 'Caveat', 'Cormorant Garamond', cursive;
font-weight: 400;
text-transform: lowercase;
font-size: clamp(0.94rem, 1.9vw, 1.28rem);
line-height: 1;
color: #4a463f;
opacity: 0.9;
letter-spacing: 0.01em;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 6px;
box-sizing: border-box;
z-index: 2;
}
body.theme-dark .um-album-card__sign { color: #5a554c; }
.um-person__cover-wrap.is-portrait {
width: auto;
max-width: none;
}
.um-person__cover-wrap.is-portrait:hover { transform: rotate(0deg); }
.um-person__cover {
background-color: #111;
background-repeat: no-repeat;
background-size: contain;
background-position: center top;
border-radius: 0;
box-shadow: none;
}
.um-person__cover-wrap:not(.is-portrait) .um-person__cover {
width: 100%;
max-height: 38vh;
aspect-ratio: 3 / 2;
}
.um-person__cover-wrap.is-portrait .um-person__cover {
height: 38vh;
width: auto;
}
.um-person__cover-wrap.is-forced-portrait .um-person__cover {
background-size: cover;
background-position: var(--um-focal, center);
background-color: transparent;
}
body.theme-dark .um-person__cover { box-shadow: none; }
.um-person__hero.is-nocover { display: block; padding-top: 2.6rem; }
.um-person__intro { flex: 1 1 0; min-width: 0; margin: 0; text-align: left; }
@media (max-width: 768px) {
.um-person__hero {
flex-direction: column;
align-items: stretch;
gap: 1.8rem;
max-width: 880px;
}
.um-person__cover-wrap:not(.is-portrait) { width: 74%; max-width: 74%; align-self: center; margin: 0 auto; }
.um-person__cover-wrap:not(.is-portrait) .um-person__cover { max-height: 32vh; }
.um-person__cover-wrap.is-portrait {
width: auto;
max-width: 100%;
align-self: center;
margin: 0 auto;
}
.um-person__cover-wrap.is-portrait .um-person__cover {
height: 32vh;
width: auto;
max-width: 62vw;
}
}
.um-person__eyebrow {
display: block;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0.32em;
color: #c8a36b;
margin-bottom: 0.7rem;
}
.um-person__name {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
font-weight: 400;
letter-spacing: 0.15em;
line-height: 1.2;
color: #1a1a1a;
margin: 0;
}
body.theme-dark .um-person__name { color: #f5f5f5; }
body.um-person-page .um-person__name:not(.um-area__title) {
position: relative;
font-family: 'Inter Tight', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
font-weight: 700;
font-size: clamp(1.5rem, 3.2vw, 2.15rem);
letter-spacing: 0.04em;
line-height: 1.18;
isolation: isolate;
}
body.um-person-page .um-person__name:not(.um-area__title)::before {
content: attr(data-name);
position: absolute;
left: 0;
right: 0;
width: 100%;
top: 50%;
z-index: -1;
transform: translateY(-50%) rotate(-5deg);
transform-origin: left center;
font-family: 'Sacramento', 'Caveat', 'Cormorant Garamond', cursive;
font-weight: 400;
font-size: 1.65em;
line-height: 1;
text-transform: lowercase;
white-space: nowrap;
overflow: hidden;
color: #141414;
opacity: 0.07;
pointer-events: none;
}
body.theme-dark.um-person-page .um-person__name:not(.um-area__title)::before { color: #f5f5f5; }
body.um-person-page .um-person__intro { overflow: visible; }
.um-person__role {
margin: 0.5rem 0 0;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.7rem;
letter-spacing: 0.13em;
line-height: 1.6;
color: #6b6b6b;
}
body.theme-dark .um-person__role { color: #aaa; }
.um-person__bio {
max-width: 560px;
margin: 1.1rem 0 0;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.88rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: #333;
}
body.theme-dark .um-person__bio { color: #ddd; }
.um-person__tagline {
margin: 0.55rem 0 0;
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: 1.15rem;
line-height: 1.55;
letter-spacing: 0.06em;
font-weight: 500;
color: #1a1a1a;
}
.um-person__description { color: #858585; }
body.theme-dark .um-person__description { color: #a6a6a6; }
body.theme-dark .um-person__tagline { color: #f5f5f5; }
.um-person__sns {
list-style: none;
margin: 1.2rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.um-person__sns-item { margin: 0; }
.um-person__sns-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.16);
color: #333;
text-decoration: none;
transition: color .25s ease, border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.um-person__sns-link:hover,
.um-person__sns-link:focus-visible {
color: #fff;
background: #1a1a1a;
border-color: #1a1a1a;
transform: translateY(-2px);
outline: none;
}
.um-person__sns-link svg { display: block; width: 20px; height: 20px; }
body.theme-dark .um-person__sns-link { border-color: rgba(255, 255, 255, 0.22); color: #ddd; }
body.theme-dark .um-person__sns-link:hover,
body.theme-dark .um-person__sns-link:focus-visible {
color: #111;
background: #f5f5f5;
border-color: #f5f5f5;
}
.um-person__meta {
margin: 1.6rem 0 0;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.64rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #888;
}
.um-person__meta-num {
color: #c8a36b;
font-variant-numeric: tabular-nums;
margin-right: 0.35em;
}
.um-person__navrow {
display: flex;
align-items: center;
gap: 1rem;
margin: 0.6rem 0 0;
min-width: 0;
}
.um-person__navrow .um-person__party { min-width: 0; }
.um-person__topbar {
position: fixed;
top: calc(var(--um-header-h, 65px) + 6px);
left: 20px;
right: 20px;
z-index: 900;
padding: 0;
margin: 0;
pointer-events: none;
display: flex;
align-items: center;
gap: 0.8rem;
}
.um-person__party {
pointer-events: auto;
display: flex;
align-items: center;
gap: 0.4rem;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 14px 6px;
min-width: 0;
box-sizing: border-box;
height: 66px;
}
.um-person__party::-webkit-scrollbar { display: none; }
.um-person__party-item {
flex: 0 0 auto;
display: block;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
border: 1px solid rgba(200, 163, 107, 0.45);
background: rgba(255,255,255,0.7);
transition: width .26s ease, height .26s ease, margin .26s ease,
transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .25s ease, filter .25s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.um-person__party-face {
display: block;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #ddd;
background-size: 0 0;
}
.um-person__party-face::before {
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-repeat: no-repeat;
background-size: cover;
background-position: var(--um-focal, center);
transform: scale(var(--um-zoom, 1));
transform-origin: var(--um-focal, center);
}
.um-person__party-item:not(.is-selected) {
opacity: 0.55;
filter: grayscale(1);
}
.um-person__party-item:hover,
.um-person__party-item:focus-visible {
transform: translateY(-2px);
border-color: #a8842f;
opacity: 1;
filter: grayscale(0);
}
.um-person__party-item:focus-visible { outline: 2px solid rgba(200,163,107,0.7); outline-offset: 2px; }
.um-person__party-item.is-selected {
border-color: #c8a36b;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c8a36b;
opacity: 1;
filter: grayscale(0);
transform: none;
z-index: 2;
animation: um-party-breathe 2s ease-in-out infinite alternate;
}
.um-person__party-item.is-selected:hover { transform: translateY(-2px); }
.um-person__party-item.is-current { cursor: default; }
@keyframes um-party-breathe {
from { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(200,163,107,0.55); }
to   { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(200,163,107,1),
0 0 8px 2px rgba(200,163,107,0.45); }
}
body.theme-dark .um-person__party-item { background: rgba(26,26,26,0.7); border-color: rgba(200,163,107,0.4); }
body.theme-dark .um-person__party-item.is-selected { box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px #c8a36b; }
@keyframes um-party-breathe-dark {
from { box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px rgba(200,163,107,0.5); }
to   { box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px rgba(200,163,107,1),
0 0 8px 2px rgba(200,163,107,0.4); }
}
body.theme-dark .um-person__party-item.is-selected { animation-name: um-party-breathe-dark; }
@media (prefers-reduced-motion: reduce) {
.um-person__party-item.is-selected { animation: none; }
}
.um-person__body { transition: opacity .28s ease; }
.um-person__body.is-swapping { opacity: 0; }
.um-person__body.is-swapped-in { animation: um-person-body-in .42s ease both; }
@keyframes um-person-body-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.um-person__body, .um-person__body.is-swapping, .um-person__body.is-swapped-in { transition: none; animation: none; opacity: 1; }
}
html.vt-person-forward .um-person__party,
html.vt-person-back .um-person__party { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
.um-person__party-item { width: 32px; height: 32px; }
}
body.um-person-page .um-person__hero { scroll-margin-top: calc(var(--um-header-h, 64px) + 64px); }
.um-person__back-btn {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(200, 163, 107, 0.55);
background: rgba(255, 255, 255, 0.92);
color: #888;
text-decoration: none;
transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.um-person__back-btn:hover,
.um-person__back-btn:focus-visible {
color: #a8842f;
border-color: #a8842f;
background: rgba(255, 255, 255, 1);
transform: translateX(-2px);
}
.um-person__back-btn:focus-visible {
outline: 2px solid rgba(200, 163, 107, 0.6);
outline-offset: 2px;
}
.um-person__back-icon { display: block; }
body.theme-dark .um-person__back-btn {
background: rgba(26, 26, 26, 0.85);
color: #aaa;
border-color: rgba(200, 163, 107, 0.45);
}
body.theme-dark .um-person__back-btn:hover,
body.theme-dark .um-person__back-btn:focus-visible {
color: #c8a36b;
border-color: #c8a36b;
background: rgba(26, 26, 26, 0.95);
}
@media (max-width: 600px) {
.um-person__topbar { top: calc(var(--um-header-h, 56px) + 4px); left: 12px; }
.um-person__back-btn { width: 34px; height: 34px; }
}
html.vt-person-forward .um-person__topbar,
html.vt-person-back .um-person__topbar {
opacity: 0;
pointer-events: none;
}
.um-person__topbar { transition: opacity .2s ease; }
.um-person__cats {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 1.4rem 0 0;
padding: 0;
}
.um-person__cat {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1a1a1a;
border: 1px solid #c8a36b;
padding: 0.35rem 0.85rem;
border-radius: 0;
}
body.theme-dark .um-person__cat { color: #f5f5f5; border-color: #c8a36b; }
.um-person__genre-en {
margin: 0.55rem 0 0;
font-family: 'Inter Tight', 'Noto Sans JP', system-ui, sans-serif;
font-size: 0.84rem;
letter-spacing: 0.22em;
text-transform: uppercase;
line-height: 1.5;
font-weight: 600;
color: #5f5f5f;
}
.um-person__genre-en:empty { display: none; }
.um-person__genre-en-sep { margin: 0 0.5em; color: #c8a36b; font-weight: 400; }
body.theme-dark .um-person__genre-en { color: #b0b0b0; }
.um-person__genre-jp {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-start;
gap: 0;
margin: 0.5rem 0 0;
padding: 0;
}
.um-person__genre-chip {
font-family: 'Inter Tight', 'Noto Sans JP', system-ui, sans-serif;
font-weight: 300;
font-size: 0.98rem;
letter-spacing: 0.06em;
color: #3a3a3a;
padding: 0;
}
.um-person__genre-chip:not(:last-child)::after {
content: " / ";
white-space: pre;
margin: 0;
color: #b0b0b0;
font-weight: 300;
}
body.theme-dark .um-person__genre-chip { color: #ddd; }
body.theme-dark .um-person__genre-chip:not(:last-child)::after { color: #6a6a6a; }
.um-person__genre-jp--above { margin: 0 0 0.45rem; }
.um-person__biz {
max-width: 600px;
margin: 1.6rem auto 0;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.92rem;
line-height: 2.05;
letter-spacing: 0.02em;
color: #444;
}
body.theme-dark .um-person__biz { color: #c4c4c4; }
.um-person__sessions {
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--wp--preset--color--line);
}
.um-person__session { margin-top: 2.2rem; }
.um-person__session:first-child { margin-top: 0; }
.um-person__session:not(:first-child) {
content-visibility: auto;
contain-intrinsic-size: auto 360px;
}
@media (max-width: 900px) {
.um-person__session:not(:first-child) { contain-intrinsic-size: auto 320px; }
}
@media (max-width: 560px) {
.um-person__session:not(:first-child) { contain-intrinsic-size: auto 340px; }
}
.um-person__session-head { text-align: left; margin: 0 0 0.9rem; }
.um-person__session-rule { display: block; width: 44px; height: 1px; background: #c8a36b; margin: 0 0 0.8rem; }
.um-person__session-genre {
margin: 0 0 0.5rem;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1rem;
letter-spacing: 0.12em;
color: #a8842f;
}
body.theme-dark .um-person__session-genre { color: #c8a36b; }
.um-person__session-metarow {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.12rem;
margin: 0 0 0.35rem;
}
.um-person__session-metarow--stack {
display: flex;
flex-flow: row wrap;
align-items: baseline;
column-gap: 1.1em;
row-gap: 0.1rem;
}
.um-person__session-metarow--stack .um-person__session-meta-line--genre {
order: 1;
}
.um-person__session-meta-line {
display: block;
margin: 0;
font-family: 'Inter Tight', system-ui, sans-serif;
text-transform: uppercase;
line-height: 1.55;
}
.um-person__session-meta-line--nth {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
color: #6b6b6b;
}
body.theme-dark .um-person__session-meta-line--nth { color: #f0f0f0; }
.um-person__session-meta-nth { font-weight: 600; }
.um-person__session-meta-line--date,
.um-person__session-meta-line--genre,
.um-person__session-meta-line--loc {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.08em;
color: #888;
}
body.theme-dark .um-person__session-meta-line--date,
body.theme-dark .um-person__session-meta-line--genre,
body.theme-dark .um-person__session-meta-line--loc { color: #999; }
.um-person__session-meta-genre { color: #8f6a1e; }
body.theme-dark .um-person__session-meta-genre { color: #c8a36b; }
.um-person__session-meta-sep { color: #b3b3b3; margin: 0 0.45em; white-space: nowrap; }
body.theme-dark .um-person__session-meta-sep { color: #777; }
.um-person__session-meta-date { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.um-person__session-loc {
display: inline;
white-space: nowrap;
margin: 0;
font-family: 'Inter Tight', system-ui, sans-serif;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #8a8a8a;
vertical-align: middle;
}
.um-person__session-loc-flag {
display: inline-block;
vertical-align: middle;
margin-right: 0.35em;
font-size: 0.95rem;
line-height: 0;
letter-spacing: 0;
}
.um-person__session-loc-flag img { vertical-align: middle; height: 1em; width: auto; }
.um-flag {
display: inline-block;
height: 0.82em;
width: auto;
vertical-align: middle;
border-radius: 2px;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
object-fit: cover;
}
.um-flag--area { height: 0.72em; border-radius: 3px; }
.um-breadcrumb__current .um-flag--crumb { height: 0.78em; margin-right: 0.15em; }
.um-person__session-loc-text { color: #888; vertical-align: middle; }
body.theme-dark .um-person__session-loc { color: #999; }
body.theme-dark .um-person__session-loc-text { color: #aaa; }
a.um-person__session-loc--link { text-decoration: none; transition: color .2s ease; cursor: pointer; }
a.um-person__session-loc--link:hover .um-person__session-loc-text,
a.um-person__session-loc--link:focus-visible .um-person__session-loc-text {
color: #a8842f;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
body.theme-dark a.um-person__session-loc--link:hover .um-person__session-loc-text,
body.theme-dark a.um-person__session-loc--link:focus-visible .um-person__session-loc-text { color: #c8a36b; }
a.um-person__session-loc--link:focus-visible { outline: 2px solid rgba(200,163,107,0.6); outline-offset: 2px; }
.um-area__hero { padding-bottom: 0.4rem; }
.um-area__eyebrow {
margin: 0 0 0.5rem;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0.32em;
color: #b08a3a;
text-transform: none;
}
body.theme-dark .um-area__eyebrow { color: #cda85f; }
.um-area__title { display: flex; align-items: center; gap: 0.4em; }
.um-area__flag { font-size: 1.3em; line-height: 1; }
.um-area__title-text { letter-spacing: 0.1em; }
.um-area-page .um-person__session-loc,
.um-area-page .um-person__session-loc + .um-person__session-meta-sep { display: none; }
.um-area-page .um-person__session-meta-genre { white-space: nowrap; }
@media (min-width: 768px) {
.um-area-page .um-person__session {
display: flex;
align-items: flex-start;
gap: 1.6rem;
}
.um-area-page .um-person__session-head {
flex: 0 0 220px;
width: 220px;
padding-top: 0.15rem;
}
.um-area-page .um-person__strip-wrap {
flex: 0 1 auto;
min-width: 0;
max-width: calc(100% - 220px - 1.6rem);
}
.um-area-page .um-person__strip { width: -moz-max-content; width: max-content; max-width: 100%; }
}
.um-person__session-title {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
font-weight: 400;
letter-spacing: 0.02em;
color: #1a1a1a;
margin: 0;
line-height: 1.2;
}
body.theme-dark .um-person__session-title { color: #f5f5f5; }
.um-person__strip-wrap {
position: relative;
width: 100%;
margin: 0;
}
.um-person__strip-wrap::after { content: none; display: none; }
body.um-person-page .um-person__strip {
display: block !important;
grid-template-columns: none !important;
column-count: 3;
column-gap: clamp(16px, 2.2vw, 30px);
max-width: none;
margin: 0;
overflow: visible;
padding-bottom: 0;
}
.um-person__strip:focus-visible { outline: 2px solid #c8a36b; outline-offset: 4px; }
.um-person__strip .um-gallery-grid__item {
display: block;
position: static;
width: 100%;
height: auto;
margin: 0 0 clamp(16px, 2.2vw, 30px);
background: none;
overflow: hidden;
border-radius: 4px;
cursor: zoom-in;
aspect-ratio: auto;
break-inside: avoid;
-webkit-column-break-inside: avoid;
transition: box-shadow .3s ease, transform .3s ease;
}
.um-person__strip .um-gallery-grid__item::before {
display: none !important;
content: none !important;
padding: 0 !important;
}
.um-person__strip .um-gallery-grid__item img {
position: static;
width: 100%;
height: auto;
max-width: none;
object-fit: contain;
display: block;
transition: transform .5s ease, opacity .3s ease;
}
.um-person__strip .um-gallery-grid__item:hover {
transform: translateY(-4px);
box-shadow: 0 0 0 1px rgba(200,163,107,.6), 0 18px 34px -18px rgba(0,0,0,.42);
}
.um-person__strip .um-gallery-grid__item:hover img { transform: scale(1.04); }
.um-person__strip .um-gallery-grid__item:focus-visible { outline: 2px solid #c8a36b; outline-offset: 2px; }
@media (max-width: 900px) {
body.um-person-page .um-person__strip { column-count: 2; }
}
@media (max-width: 560px) {
body.um-person-page .um-person__strip {
column-count: 2;
column-gap: 12px;
}
.um-person__strip .um-gallery-grid__item { margin-bottom: 12px; }
.um-person__strip-wrap::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.um-person__strip .um-gallery-grid__item:hover { transform: none; }
.um-person__strip .um-gallery-grid__item:hover img { transform: none; }
}
body.um-person-page .um-person__strip.is-marquee {
overflow-x: auto;
scroll-snap-type: none;
scrollbar-width: none;
padding-bottom: 0;
}
.um-person__strip.is-marquee::-webkit-scrollbar { display: none; }
.um-person__strip .um-marquee-track {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
gap: 14px;
width: max-content;
}
@keyframes um-person-rise {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: translateY(0); }
}
body.um-person-animate-in .um-person__intro > * {
opacity: 0;
transform: translateY(10px);
animation: um-person-rise .7s cubic-bezier(.2,.7,.25,1) both;
}
body.um-person-animate-in .um-person__intro > *:nth-child(1) { animation-delay: 0ms; }
body.um-person-animate-in .um-person__intro > *:nth-child(2) { animation-delay: 90ms; }
body.um-person-animate-in .um-person__intro > *:nth-child(3) { animation-delay: 180ms; }
body.um-person-animate-in .um-person__intro > *:nth-child(n+4) { animation-delay: 240ms; }
body.um-person-animate-in .um-person__session:first-child {
opacity: 0;
transform: translateY(10px);
animation: um-person-rise .7s cubic-bezier(.2,.7,.25,1) both;
animation-delay: 300ms;
}
.um-person__cover {
animation: um-person-kenburns 20s ease-in-out infinite alternate;
will-change: transform;
transform-origin: center top;
}
@keyframes um-person-kenburns {
from { transform: scale(1.0); }
to   { transform: scale(1.04); }
}
html.vt-person-forward .um-person__cover { animation: none; }
@media (max-width: 600px) {
@keyframes um-person-kenburns {
from { transform: scale(1.0); }
to   { transform: scale(1.02); }
}
}
@media (prefers-reduced-motion: reduce) {
body.um-person-animate-in .um-person__intro > *,
body.um-person-animate-in .um-person__session {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.um-person__cover { animation: none !important; }
.um-person__cover-wrap { transition: none; }
.um-person__cover-wrap.is-dropping { animation: none !important; opacity: 1; transform: none; }
}
.um-person__back {
text-align: center;
margin: 3.4rem 0 1rem;
padding-top: 2rem;
border-top: 1px solid var(--wp--preset--color--line);
}
.um-person__back a {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.8rem;
letter-spacing: 0.18em;
color: #888;
text-decoration: none;
transition: color .2s;
}
.um-person__back a:hover,
.um-gold-link { color: #a8842f; }
.um-gold-link { text-decoration: none; transition: color .2s; }
.um-gold-link:hover { color: #c8a36b; }
body.theme-dark .um-person__back a:hover,
body.theme-dark .um-gold-link { color: #c8a36b; }
body.theme-dark .um-gold-link:hover { color: #d8b888; }
.leaflet-popup-content-wrapper {
border-radius: 4px;
box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.25);
}
.um-map-popup {
width: 200px;
}
.um-map-popup__thumb {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
background-size: cover;
background-position: center;
margin-bottom: 0.5rem;
border-radius: 2px;
}
.um-map-popup__title {
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.04em;
margin: 0 0 0.2rem;
}
.um-map-popup__meta {
font-size: 0.6875rem;
letter-spacing: 0.18em;
color: #888;
text-transform: uppercase;
}
body.theme-dark .um-gallery-map { background: #0a0a0a; border-color: #2a2a2a; }
body.theme-dark .leaflet-container { background: #0a0a0a; }
body.theme-dark .leaflet-popup-content-wrapper,
body.theme-dark .leaflet-popup-tip {
background: #1a1a1a;
color: #f5f5f5;
}
body.theme-dark .um-map-popup__title { color: #f5f5f5; }
body.theme-dark .um-map-popup__meta { color: #888; }
.um-map-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.18);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 1500;
}
body.um-sheet-open .um-map-backdrop {
opacity: 1;
visibility: visible;
}
.um-map-sheet {
position: fixed;
left: 0;
right: 56px;
bottom: 0;
height: 64vh;
min-height: 360px;
max-height: 80vh;
background: #ffffff;
border-radius: 18px 18px 0 0;
box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, 0.18);
transform: translateY(100%);
transition: transform 0.45s cubic-bezier(.2, .7, .2, 1);
z-index: 1600;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.um-sheet-open .um-map-sheet {
transform: translateY(0);
}
.um-map-sheet__handle {
width: 38px;
height: 4px;
background: rgba(0, 0, 0, 0.18);
border-radius: 4px;
margin: 10px auto 6px;
}
.um-map-sheet__close {
position: absolute;
top: 12px;
right: 14px;
width: 30px;
height: 30px;
border: 0;
background: transparent;
color: #1a1a1a;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
border-radius: 50%;
transition: background .2s ease;
font-family: inherit;
}
.um-map-sheet__close:hover { background: rgba(0,0,0,0.05); }
.um-map-sheet__header {
padding: 0.25rem 1.5rem 1rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.um-map-sheet__category {
font-size: 0.6875rem;
letter-spacing: 0.3em;
color: #888;
margin: 0 0 0.4rem;
}
.um-map-sheet__title {
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 0.2em;
margin: 0;
color: #1a1a1a;
}
.um-map-sheet__city {
font-size: 0.8125rem;
letter-spacing: 0.05em;
color: #555;
margin: 0.25rem 0 0;
}
.um-map-sheet__body {
flex: 1 1 auto;
overflow: hidden;
padding: 1.25rem 0;
}
.um-map-sheet__scroller {
height: 100%;
overflow-x: auto;
overflow-y: hidden;
display: flex;
gap: 14px;
padding: 0 1.5rem 0.5rem;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.um-map-sheet__scroller::-webkit-scrollbar { height: 6px; }
.um-map-sheet__scroller::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }
.um-map-photo {
flex: 0 0 auto;
width: 220px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
gap: 0.5rem;
animation: um-map-photo-in 0.5s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: var(--um-anim-delay, 0s);
}
.um-map-photo__img {
aspect-ratio: 3 / 4;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 4px;
transition: transform .35s cubic-bezier(.2,.6,.2,1);
}
.um-gallery-sentinel {
width: 100%;
height: 1px;
margin: 0;
pointer-events: none;
}
.um-gallery-loader {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
padding: 2rem 0;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.um-gallery-loader.is-active { opacity: 1; }
.um-gallery-loader__cam {
display: inline-flex;
width: 26px;
height: 26px;
color: var(--um-fg, #888);
opacity: 0.85;
animation: um-nav-cam-pulse 1.2s ease-in-out infinite;
}
.um-gallery-loader__cam svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
.um-gallery-loader__cam { animation: none !important; }
}
.um-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(8, 8, 8, 0.96);
opacity: 0;
pointer-events: none;
transition:
opacity 0.2s cubic-bezier(.2,.6,.2,1),
background 0.3s ease,
background-image 0.3s ease;
overflow: hidden;
background-image: radial-gradient(ellipse at center, rgba(40,40,40,0.6) 0%, rgba(0,0,0,0.96) 70%);
touch-action: pan-x;
-ms-touch-action: pan-x;
overscroll-behavior: contain;
-webkit-user-select: none;
user-select: none;
}
.um-lightbox * {
touch-action: pan-x;
}
body.theme-light .um-lightbox {
background: #ffffff;
background-image: none;
}
.um-lightbox[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.um-lightbox--flipping .um-lightbox__slide:not([data-pos="center"]),
.um-lightbox--flipping .um-lightbox__close,
.um-lightbox--flipping .um-lightbox__nav,
.um-lightbox--flipping .um-lightbox__autoplay,
.um-lightbox--flipping .um-lightbox__caption,
.um-lightbox--flipping .um-lightbox__person,
.um-lightbox--flipping .um-lightbox__dots {
opacity: 0 !important;
pointer-events: none;
transition: opacity 0.1s ease;
}
.um-lightbox-ghost {
position: fixed;
z-index: 12100;
margin: 0;
border: 0;
padding: 0;
pointer-events: none;
object-fit: cover;
object-position: center;
will-change: top, left, width, height;
transition:
top 0.34s cubic-bezier(.22,.7,.22,1),
left 0.34s cubic-bezier(.22,.7,.22,1),
width 0.34s cubic-bezier(.22,.7,.22,1),
height 0.34s cubic-bezier(.22,.7,.22,1),
opacity 0.24s ease;
}
.um-lightbox__flow {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
perspective: 1600px;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
.um-lightbox__slide {
position: absolute;
top: 50%;
left: 50%;
transition:
transform 0.40s cubic-bezier(.25, 1, .35, 1),
opacity   0.35s ease,
filter    0.35s ease,
z-index   0s linear 0.20s;
transform-style: preserve-3d;
will-change: transform, opacity;
cursor: pointer;
pointer-events: auto;
backface-visibility: hidden;
transform: translate(-50%, -50%);
}
.um-lightbox__flow {
will-change: transform;
}
.um-lightbox.is-flowing .um-lightbox__slide {
transition:
transform 0.05s linear,
opacity   0.05s linear,
filter    0.05s linear,
z-index   0s linear 0s;
}
.um-lightbox__slide img {
max-width: 70vw;
max-height: 80vh;
width: auto;
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
border-radius: 8px;
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.75),
0 12px 24px -8px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
body.theme-light .um-lightbox__slide img {
background: transparent;
box-shadow:
0 24px 48px -16px rgba(0, 0, 0, 0.18),
0 10px 20px -10px rgba(0, 0, 0, 0.12);
}
.um-lightbox__slide[data-pos="center"] {
transform: translate(-50%, -50%) translate3d(0, 0, 0) rotateY(0deg) scale(1);
z-index: 50;
opacity: 1;
filter: none;
transition-delay: 0s, 0s, 0s, 0s;
}
.um-lightbox__slide[data-pos="l1"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -1), 0, 0) rotateY(0deg) scale(1); z-index: 110; opacity: 0.50; }
.um-lightbox__slide[data-pos="l2"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -2), 0, 0) rotateY(0deg) scale(1); z-index: 105; opacity: 0.20; }
.um-lightbox__slide[data-pos="l3"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -3), 0, 0) rotateY(0deg) scale(1); z-index: 100; opacity: 0.08; }
.um-lightbox__slide[data-pos="l4"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -4), 0, 0) rotateY(0deg) scale(1); z-index: 95;  opacity: 0.03; }
.um-lightbox__slide[data-pos="l5"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -5), 0, 0) rotateY(0deg) scale(1); z-index: 90;  opacity: 0; }
.um-lightbox__slide[data-pos="l6"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * -6), 0, 0) rotateY(0deg) scale(1); z-index: 85;  opacity: 0; }
.um-lightbox__slide[data-pos="r1"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 1), 0, 0) rotateY(0deg) scale(1); z-index: 110; opacity: 0.50; }
.um-lightbox__slide[data-pos="r2"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 2), 0, 0) rotateY(0deg) scale(1); z-index: 105; opacity: 0.20; }
.um-lightbox__slide[data-pos="r3"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 3), 0, 0) rotateY(0deg) scale(1); z-index: 100; opacity: 0.08; }
.um-lightbox__slide[data-pos="r4"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 4), 0, 0) rotateY(0deg) scale(1); z-index: 95;  opacity: 0.03; }
.um-lightbox__slide[data-pos="r5"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 5), 0, 0) rotateY(0deg) scale(1); z-index: 90;  opacity: 0; }
.um-lightbox__slide[data-pos="r6"] { transform: translate(-50%, -50%) translate3d(calc(var(--um-lb-step, 75vw) * 6), 0, 0) rotateY(0deg) scale(1); z-index: 85;  opacity: 0; }
@media (min-width: 769px) {
.um-lightbox__slide img { max-width: 52vw; max-height: 78vh; }
.um-lightbox { --um-lb-step: 60vw; }
}
body.theme-light .um-lightbox__slide[data-pos="l1"],
body.theme-light .um-lightbox__slide[data-pos="r1"] { filter: none; }
body.theme-light .um-lightbox__slide[data-pos="l2"],
body.theme-light .um-lightbox__slide[data-pos="r2"] { filter: none; }
body.theme-light .um-lightbox__slide[data-pos="l3"],
body.theme-light .um-lightbox__slide[data-pos="r3"] { filter: none; }
body.theme-light .um-lightbox__slide[data-pos="l4"],
body.theme-light .um-lightbox__slide[data-pos="r4"] { filter: none; }
.um-lightbox__dots {
position: absolute;
left: 50%;
bottom: 2.75rem;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.35);
transition: background 0.3s ease, border-color 0.3s ease;
z-index: 200;
max-width: 70vw;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.um-lightbox__dots::-webkit-scrollbar { display: none; }
.um-lightbox__dots:hover {
background: rgba(0, 0, 0, 0.32);
border-color: rgba(255, 255, 255, 0.26);
}
.um-lightbox__dot {
flex: 0 0 auto;
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.42);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.um-lightbox__dot:hover { background: rgba(255, 255, 255, 0.7); }
.um-lightbox__dot.is-active {
background: #fff;
transform: scale(1.4);
}
body.theme-light .um-lightbox__dots {
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.14);
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.18);
}
body.theme-light .um-lightbox__dots:hover {
background: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.22);
}
body.theme-light .um-lightbox__dot { background: rgba(0, 0, 0, 0.32); }
body.theme-light .um-lightbox__dot:hover { background: rgba(0, 0, 0, 0.55); }
body.theme-light .um-lightbox__dot.is-active { background: #1a1a1a; }
@media (max-width: 768px) {
.um-lightbox__dots {
bottom: calc(env(safe-area-inset-bottom, 0px) + 0.4rem);
gap: 8px;
padding: 6px 12px;
}
.um-lightbox__dot { width: 6px; height: 6px; }
}
.um-lightbox__caption {
position: absolute;
left: 50%;
bottom: calc(2.75rem + 30px);
transform: translateX(-50%);
color: #ddd;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-align: center;
margin: 0;
min-height: 1em;
pointer-events: none;
}
@media (max-width: 768px) {
.um-lightbox__caption {
bottom: calc(env(safe-area-inset-bottom, 0px) + 0.4rem + 24px);
font-size: 0.72rem;
}
.um-lightbox__slide img {
max-height: 70vh;
max-width: 88vw;
}
}
body.theme-light .um-lightbox__caption {
color: #444;
}
.um-lightbox__close,
.um-lightbox__nav {
position: absolute;
background: rgba(255, 255, 255, 0.06);
border: none;
color: #fff;
cursor: pointer;
font-size: 28px;
line-height: 1;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, transform 0.2s ease;
z-index: 200;
}
.um-lightbox__close:hover,
.um-lightbox__nav:hover {
background: rgba(255, 255, 255, 0.16);
}
body.theme-light .um-lightbox__close,
body.theme-light .um-lightbox__nav {
background: rgba(0, 0, 0, 0.06);
color: #1a1a1a;
}
body.theme-light .um-lightbox__close:hover,
body.theme-light .um-lightbox__nav:hover {
background: rgba(0, 0, 0, 0.14);
}
.um-lightbox__close { top: 1.25rem; font-size: 24px; }
.um-lightbox__close--tl { left: 1.25rem; }
.um-lightbox__close--tr { right: 1.25rem; }
.um-lightbox__nav--prev { left: 1.25rem;  top: 50%; transform: translateY(-50%); }
.um-lightbox__nav--next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.um-lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.06); }
.um-lightbox__nav--next:hover { transform: translateY(-50%) scale(1.06); }
.um-lightbox__autoplay {
position: absolute;
top: 1.25rem;
right: 1.25rem;
z-index: 200;
display: flex;
align-items: center;
gap: 0.5em;
height: 38px;
padding: 0 0.95rem;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
cursor: pointer;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
line-height: 1;
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.um-lightbox__autoplay:hover { background: rgba(255, 255, 255, 0.16); }
.um-lightbox__autoplay.is-active {
background: #fff;
color: #111;
}
.um-lightbox__autoplay-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
letter-spacing: -0.08em;
}
.um-lightbox__autoplay.is-active .um-lightbox__autoplay-icon { letter-spacing: 0.04em; }
body.theme-light .um-lightbox__autoplay {
background: rgba(0, 0, 0, 0.06);
color: #1a1a1a;
}
body.theme-light .um-lightbox__autoplay:hover { background: rgba(0, 0, 0, 0.14); }
body.theme-light .um-lightbox__autoplay.is-active {
background: #1a1a1a;
color: #fff;
}
body.um-lightbox-open .um-lightbox__autoplay {
top: 1.25rem;
}
@media (max-width: 768px) {
.um-lightbox__autoplay { height: 34px; padding: 0 0.8rem; font-size: 10px; }
body.um-lightbox-open .um-lightbox__autoplay { top: 1rem; }
}
.um-lightbox__fs {
position: absolute;
top: 1.25rem;
right: 7.5rem;
z-index: 200;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
color: #fff;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.um-lightbox__fs:hover,
.um-lightbox__fs:focus-visible {
background: rgba(255, 255, 255, 0.14);
border-color: #c8a36b;
color: #c8a36b;
}
.um-lightbox__fs:focus-visible { outline: 2px solid rgba(200,163,107,0.7); outline-offset: 2px; }
body.theme-light .um-lightbox__fs {
background: rgba(0, 0, 0, 0.06);
color: #1a1a1a;
border-color: rgba(0, 0, 0, 0.16);
}
body.theme-light .um-lightbox__fs:hover,
body.theme-light .um-lightbox__fs:focus-visible {
background: rgba(0, 0, 0, 0.12);
border-color: #a8842f;
color: #a8842f;
}
body.um-lightbox-open .um-lightbox__fs { top: 1.25rem; }
.um-lightbox__fs-icon { display: block; }
.um-lightbox__fs-icon--exit { display: none; }
.um-lightbox.is-fullscreen .um-lightbox__fs-icon--enter { display: none; }
.um-lightbox.is-fullscreen .um-lightbox__fs-icon--exit { display: block; }
.um-lightbox--flipping .um-lightbox__fs { opacity: 0; pointer-events: none; }
@media (max-width: 768px) {
.um-lightbox__fs { width: 34px; height: 34px; right: 6.4rem; }
body.um-lightbox-open .um-lightbox__fs { top: 1rem; }
}
.um-lightbox:fullscreen {
width: 100vw;
height: 100vh;
background: #000;
}
.um-lightbox:-webkit-full-screen {
width: 100vw;
height: 100vh;
background: #000;
}
.um-lightbox:fullscreen .um-lightbox__fs,
.um-lightbox:fullscreen .um-lightbox__autoplay { top: 1.25rem; }
.um-lightbox:fullscreen .um-lightbox__close { top: 1.25rem; }
body.um-lightbox-open { overflow: hidden; }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.um-section--news,
.um-section--sns {
padding-bottom: calc(var(--wp--preset--spacing--60, 4rem) + env(safe-area-inset-bottom, 0px));
}
footer.wp-block-group {
padding-bottom: calc(var(--wp--preset--spacing--60, 4rem) + env(safe-area-inset-bottom, 0px)) !important;
}
}
body.um-lightbox-open .um-top-header,
body.um-lightbox-open .um-top-header__logo,
body.um-lightbox-open .um-top-header__nav,
body.um-lightbox-open .um-mb-toggle,
body.um-lightbox-open .um-breadcrumb {
opacity: 0 !important;
pointer-events: none !important;
}
body.um-lightbox-open .um-lightbox__close--tl {
top: 1.25rem !important;
left: 1.25rem !important;
}
@media (max-width: 768px) {
body.um-lightbox-open .um-lightbox__close--tl {
top: 1rem !important;
left: 1rem !important;
}
}
body.um-lightbox-open .um-lightbox__close,
body.um-lightbox-open .um-lightbox__autoplay,
body.um-lightbox-open .um-lightbox__fs {
background: rgba(255,255,255,.12) !important;
border: 1px solid rgba(255,255,255,.5) !important;
color: #fff !important;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
body.um-lightbox-open .um-lightbox__close:hover,
body.um-lightbox-open .um-lightbox__close:focus-visible,
body.um-lightbox-open .um-lightbox__autoplay:hover,
body.um-lightbox-open .um-lightbox__autoplay:focus-visible,
body.um-lightbox-open .um-lightbox__fs:hover,
body.um-lightbox-open .um-lightbox__fs:focus-visible {
background: rgba(255,255,255,.92) !important;
border-color: #fff !important;
color: #111 !important;
}
body.um-lightbox-open .um-site-logo--fixed { opacity: 0 !important; pointer-events: none !important; }
body.um-lightbox-open .um-side-nav         { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 768px) {
.um-lightbox__slide img { max-width: 88vw; max-height: 70vh; }
.um-lightbox__slide[data-pos="l1"] { transform: translate(-50%, -50%) translate3d(-44vw, 0, -180px) rotateY(45deg)  scale(0.78); }
.um-lightbox__slide[data-pos="l2"] { transform: translate(-50%, -50%) translate3d(-66vw, 0, -300px) rotateY(52deg)  scale(0.66); opacity: 0.45; }
.um-lightbox__slide[data-pos="l3"],
.um-lightbox__slide[data-pos="l4"],
.um-lightbox__slide[data-pos="l5"],
.um-lightbox__slide[data-pos="l6"] { display: none; }
.um-lightbox__slide[data-pos="r1"] { transform: translate(-50%, -50%) translate3d( 44vw, 0, -180px) rotateY(-45deg) scale(0.78); }
.um-lightbox__slide[data-pos="r2"] { transform: translate(-50%, -50%) translate3d( 66vw, 0, -300px) rotateY(-52deg) scale(0.66); opacity: 0.45; }
.um-lightbox__slide[data-pos="r3"],
.um-lightbox__slide[data-pos="r4"],
.um-lightbox__slide[data-pos="r5"],
.um-lightbox__slide[data-pos="r6"] { display: none; }
.um-lightbox__nav  { width: 40px; height: 40px; font-size: 22px; }
.um-lightbox__close { width: 40px; height: 40px; font-size: 20px; top: 0.75rem; }
.um-lightbox__close--tl { left: 0.75rem; }
.um-lightbox__close--tr { right: 0.75rem; }
.um-lightbox__nav--prev { left: 0.5rem; }
.um-lightbox__nav--next { right: 0.5rem; }
}
.um-map-photo[data-ratio="1-1"] .um-map-photo__img { aspect-ratio: 1 / 1; }
.um-map-photo[data-ratio="3-4"] .um-map-photo__img { aspect-ratio: 3 / 4; }
.um-map-photo[data-ratio="2-3"] .um-map-photo__img { aspect-ratio: 2 / 3; }
.um-map-photo[data-ratio="4-5"] .um-map-photo__img { aspect-ratio: 4 / 5; }
.um-map-photo[data-ratio="3-2"] .um-map-photo__img { aspect-ratio: 3 / 2; }
.um-map-photo[data-ratio="4-3"] .um-map-photo__img { aspect-ratio: 4 / 3; }
.um-map-photo[data-ratio="2-1"] .um-map-photo__img { aspect-ratio: 2 / 1; }
.um-map-photo[data-ratio="16-9"] .um-map-photo__img { aspect-ratio: 16 / 9; }
.um-map-photo[data-ratio="3-2"],
.um-map-photo[data-ratio="4-3"] { width: 300px; }
.um-map-photo[data-ratio="2-1"],
.um-map-photo[data-ratio="16-9"] { width: 360px; }
.um-map-photo:hover .um-map-photo__img {
transform: translateY(-3px) scale(1.02);
}
.um-map-photo__label {
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #555;
margin: 0;
}
@keyframes um-map-photo-in {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
body.theme-dark .um-map-backdrop { background: rgba(0, 0, 0, 0.4); }
body.theme-dark .um-map-sheet {
background: #1a1a1a;
box-shadow: 0 -18px 40px -12px rgba(0, 0, 0, 0.6);
}
body.theme-dark .um-map-sheet__handle { background: rgba(255,255,255,0.18); }
body.theme-dark .um-map-sheet__close { color: #f5f5f5; }
body.theme-dark .um-map-sheet__close:hover { background: rgba(255,255,255,0.06); }
body.theme-dark .um-map-sheet__header { border-bottom-color: #2a2a2a; }
body.theme-dark .um-map-sheet__title { color: #f5f5f5; }
body.theme-dark .um-map-sheet__category { color: #888; }
body.theme-dark .um-map-sheet__city { color: #aaa; }
body.theme-dark .um-map-photo__label { color: #aaa; }
@media (max-width: 768px) {
.um-map-sheet {
right: 44px;
height: 70vh;
}
.um-map-photo { width: 70vw; max-width: 280px; }
}
.um-map-pin {
position: relative;
cursor: pointer;
}
.um-map-pin__dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #1a1a1a;
border: 2px solid #ffffff;
border-radius: 50%;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.25);
animation: um-pin-pulse 2.4s infinite;
cursor: pointer;
transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.um-map-pin:hover .um-map-pin__dot {
transform: scale(1.15);
}
.um-map-pin__dot[data-count="0"] { opacity: 0.45; }
@keyframes um-pin-pulse {
0%   { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.25); }
70%  { box-shadow: 0 0 0 14px rgba(26, 26, 26, 0),   0 4px 10px -2px rgba(0, 0, 0, 0.25); }
100% { box-shadow: 0 0 0 0 rgba(26, 26, 26, 0),      0 4px 10px -2px rgba(0, 0, 0, 0.25); }
}
body.theme-dark .um-map-pin__dot {
background: #f5f5f5;
border-color: #1a1a1a;
color: #1a1a1a;
box-shadow: 0 0 0 0 rgba(245, 245, 245, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.6);
animation-name: um-pin-pulse-dark;
}
@keyframes um-pin-pulse-dark {
0%   { box-shadow: 0 0 0 0 rgba(245, 245, 245, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.6); }
70%  { box-shadow: 0 0 0 14px rgba(245, 245, 245, 0),  0 4px 10px -2px rgba(0, 0, 0, 0.6); }
100% { box-shadow: 0 0 0 0 rgba(245, 245, 245, 0),     0 4px 10px -2px rgba(0, 0, 0, 0.6); }
}
.um-gallery-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 12px;
border-bottom: 1px solid var(--wp--preset--color--line);
padding: 0.7rem 0;
}
.um-gallery-controls .um-dropdown__current-desc { display: none !important; }
.um-gallery-controls .um-dropdown__trigger { padding: 0.45rem 0.65rem; gap: 0.35rem; }
.um-gallery-controls .um-dropdown__label { font-size: 0.55rem; letter-spacing: 0.12em; margin: 0; }
.um-gallery-controls .um-dropdown__current-text { font-size: 0.78rem; }
.um-gallery-controls .um-dropdown__icon { width: 15px; height: 15px; }
.um-gallery-controls .um-gallery-size { gap: 0.35rem; }
.um-gallery-controls .um-gallery-size__label { font-size: 0.55rem; letter-spacing: 0.14em; margin-right: 0.25rem; }
.um-gallery-controls .um-gallery-size__range { width: 120px; }
.um-dropdown__menu--two-pane {
display: flex;
align-items: stretch;
min-width: 360px;
padding: 0 !important;
overflow: hidden;
}
.um-dropdown__pane-left {
display: flex;
flex-direction: column;
background: rgba(0, 0, 0, 0.035);
border-right: 1px solid var(--wp--preset--color--line, rgba(0, 0, 0, 0.08));
padding: 0.4rem 0;
min-width: 110px;
flex-shrink: 0;
}
.um-dropdown__pane-right {
flex: 1;
padding: 0.4rem 0;
min-width: 0;
max-height: 60vh;
overflow-y: auto;
}
.um-dropdown__type-tab {
appearance: none;
border: 0;
background: transparent;
text-align: left;
padding: 0.7rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.78rem;
letter-spacing: 0.2em;
color: #888;
cursor: pointer;
border-left: 2px solid transparent;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.um-dropdown__type-tab svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.um-dropdown__type-tab:hover {
background: rgba(0, 0, 0, 0.05);
color: #1a1a1a;
}
.um-dropdown__type-tab.is-active {
background: #fff;
color: #1a1a1a;
border-left-color: #1a1a1a;
}
body.theme-dark .um-dropdown__pane-left {
background: rgba(255, 255, 255, 0.04);
border-right-color: rgba(255, 255, 255, 0.12);
}
body.theme-dark .um-dropdown__type-tab { color: #aaa; }
body.theme-dark .um-dropdown__type-tab:hover {
background: rgba(255, 255, 255, 0.06);
color: #f1f1f1;
}
body.theme-dark .um-dropdown__type-tab.is-active {
background: #1a1a1a;
color: #f1f1f1;
border-left-color: #f1f1f1;
}
@media (max-width: 600px) {
.um-dropdown__menu--two-pane { min-width: 280px; }
.um-dropdown__pane-left { min-width: 92px; }
.um-dropdown__type-tab { padding: 0.6rem 0.7rem; font-size: 0.72rem; letter-spacing: 0.16em; }
}
.um-dropdown__menu--two-pane { min-width: 470px; }
.um-dropdown__menu--two-pane .um-dropdown__pane-right { padding: 6px; }
.um-dropdown__menu--two-pane .um-dropdown__option { gap: 12px; align-items: center; padding: 0.55rem 0.6rem; }
.um-dropdown__menu--two-pane .um-dropdown__option-thumb { flex: 0 0 118px; width: 118px; height: 76px; }
.um-dropdown__menu--two-pane .um-dropdown__option-title { font-size: 0.86rem; letter-spacing: 0.08em; }
.um-dropdown__menu--two-pane .um-dropdown__option-desc { font-size: 0.7rem; white-space: normal; line-height: 1.5; }
.um-dropdown__menu--two-pane .um-dropdown__option.is-active .um-dropdown__option-thumb {
border-color: #c8a36b;
box-shadow: 0 0 0 2px rgba(200,163,107,0.45);
}
.um-dropdown__option-thumb--movie { background: #15181c; color: rgba(255,255,255,0.88); }
.um-dropdown__option-thumb--movie .um-dropdown__option-thumb-icon { opacity: 0.9; }
@media (max-width: 600px) {
.um-dropdown__menu--two-pane { min-width: 300px; max-width: calc(100vw - 40px); }
.um-dropdown__menu--two-pane .um-dropdown__option-thumb { flex-basis: 92px; width: 92px; height: 60px; }
}
.um-gallery-type {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.12));
border-radius: 4px;
overflow: hidden;
background: rgba(255,255,255,0.6);
height: 38px;
}
.um-gallery-type__btn {
appearance: none;
border: 0;
background: transparent;
padding: 0 0.95rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: 'Marcellus', 'Cormorant Garamond', serif;
font-size: 0.78rem;
letter-spacing: 0.22em;
color: #888;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.um-gallery-type__btn + .um-gallery-type__btn {
border-left: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.12));
}
.um-gallery-type__btn:hover {
color: #1a1a1a;
}
.um-gallery-type__btn.is-active {
background: #1a1a1a;
color: #fff;
}
.um-gallery-type__icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
body.theme-dark .um-gallery-type {
background: rgba(40,40,40,0.5);
border-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-gallery-type__btn { color: #aaa; }
body.theme-dark .um-gallery-type__btn:hover { color: #f1f1f1; }
body.theme-dark .um-gallery-type__btn.is-active {
background: #f1f1f1;
color: #1a1a1a;
}
body.theme-dark .um-gallery-type__btn + .um-gallery-type__btn {
border-left-color: rgba(255,255,255,0.18);
}
@media (max-width: 600px) {
.um-gallery-type { height: 34px; }
.um-gallery-type__btn { padding: 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.18em; }
}
body.um-gallery-stuck .um-gallery-controls {
position: fixed;
top: calc(1.25rem + 38px + 0.6rem);
left: var(--wp--preset--spacing--50, 1.5rem);
right: calc(56px + var(--wp--preset--spacing--50, 1.5rem));
z-index: 200;
margin: 0;
padding: 0.4rem 0.75rem;
border-radius: 3px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
box-shadow: 0 4px 14px -12px rgba(0,0,0,0.15);
animation: um-controls-fixed-in 0.25s ease both;
opacity: 0.35;
transition: opacity 0.35s ease;
}
body.um-gallery-stuck .um-gallery-controls:hover,
body.um-gallery-stuck .um-gallery-controls:focus-within {
opacity: 1;
}
body.theme-dark.um-gallery-stuck .um-gallery-controls {
background: rgba(15, 15, 15, 0.65);
box-shadow: 0 4px 14px -12px rgba(0,0,0,0.4);
}
body.um-gallery-stuck .um-info-ticker--fixed.is-visible {
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
body.um-gallery-stuck:has(.um-gallery-controls:hover) .um-info-ticker--fixed.is-visible,
body.um-gallery-stuck:has(.um-gallery-controls:focus-within) .um-info-ticker--fixed.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
@keyframes um-controls-fixed-in {
from { opacity: 0; transform: translateY(-6px); }
to   { opacity: 1; transform: translateY(0); }
}
body.um-gallery-stuck .um-gallery-controls-placeholder {
display: block;
}
.um-gallery-controls-placeholder { display: none; }
body.admin-bar.um-gallery-stuck .um-gallery-controls {
top: calc(1.25rem + 38px + 0.6rem + 32px);
}
@media (max-width: 782px) {
body.admin-bar.um-gallery-stuck .um-gallery-controls {
top: calc(0.875rem + 28px + 0.5rem + 46px);
}
}
@media (max-width: 768px) {
body.um-gallery-stuck .um-gallery-controls {
top: calc(0.875rem + 28px + 0.5rem);
left: 1rem;
right: calc(44px + 1rem);
}
}
.um-gallery-controls .um-gallery-size {
margin-left: auto;
}
@media (max-width: 768px) {
.um-gallery-controls .um-gallery-size {
margin-left: 0;
}
}
.um-gallery-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.um-gallery-filter__btn {
background: transparent;
border: 0;
padding: 0.55rem 0.85rem;
font-size: 0.75rem;
letter-spacing: 0.2em;
color: #888;
cursor: pointer;
font-family: inherit;
border-radius: 999px;
transition: color 0.25s ease, background 0.25s ease;
}
.um-gallery-filter__btn:hover {
color: #333;
}
.um-gallery-filter__btn.is-active {
color: #1a1a1a;
background: rgba(26, 26, 26, 0.06);
}
.um-gallery-size {
display: flex;
align-items: center;
gap: 0.55rem;
}
.um-gallery-size__label {
font-size: 0.6875rem;
letter-spacing: 0.25em;
color: #888;
margin-right: 0.4rem;
}
.um-gallery-size__icon {
display: inline-block;
background: currentColor;
color: #1a1a1a;
border-radius: 1px;
flex: 0 0 auto;
}
.um-gallery-size__icon--big   { width: 11px; height: 11px; }
.um-gallery-size__icon--small { width: 4px;  height: 4px; }
.um-gallery-size__range {
-webkit-appearance: none;
appearance: none;
width: 200px;
height: 22px;
background: transparent;
cursor: pointer;
margin: 0;
padding: 0;
}
.um-gallery-size__range:focus { outline: none; }
.um-gallery-size__range::-webkit-slider-runnable-track {
height: 2px;
background: rgba(0,0,0,0.18);
border-radius: 2px;
}
.um-gallery-size__range::-moz-range-track {
height: 2px;
background: rgba(0,0,0,0.18);
border-radius: 2px;
}
.um-gallery-size__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #1a1a1a;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
margin-top: -5px;
cursor: grab;
transition: transform 0.15s ease;
}
.um-gallery-size__range::-webkit-slider-thumb:active {
transform: scale(1.18);
cursor: grabbing;
}
.um-gallery-size__range::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #1a1a1a;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
cursor: grab;
}
.um-gallery-size__value {
min-width: 14px;
font-size: 0.7rem;
color: #888;
letter-spacing: 0.08em;
text-align: right;
font-variant-numeric: tabular-nums;
}
body.theme-dark .um-gallery-size__icon { color: #f5f5f5; }
body.theme-dark .um-gallery-size__label { color: #888; }
body.theme-dark .um-gallery-size__range::-webkit-slider-runnable-track { background: rgba(255,255,255,0.18); }
body.theme-dark .um-gallery-size__range::-moz-range-track             { background: rgba(255,255,255,0.18); }
body.theme-dark .um-gallery-size__range::-webkit-slider-thumb { background: #f5f5f5; border-color: #1a1a1a; }
body.theme-dark .um-gallery-size__range::-moz-range-thumb     { background: #f5f5f5; border-color: #1a1a1a; }
body.theme-dark .um-gallery-size__value { color: #888; }
@media (max-width: 600px) {
body.page-id-7:not(.home):not(.um-person-page) main.wp-block-group {
padding-top: calc(88px + 32px + 0.5rem) !important;
padding-bottom: 1.5rem !important;
}
body.page-id-7.um-person-page main.wp-block-group {
padding-top: 74px !important;
}
body.admin-bar.page-id-7.um-person-page main.wp-block-group {
padding-top: calc(74px + 46px) !important;
}
body.page-id-7 .wp-block-spacer[style*="--wp--preset--spacing--40"] {
height: 0.75rem !important;
}
body.page-id-7 .wp-block-spacer[style*="--wp--preset--spacing--70"] {
height: 1.5rem !important;
}
body.page-id-7:not(.home) main > *:first-child {
padding-top: 0 !important;
}
}
.um-person__intro,
.um-person__session {
transition: opacity .3s ease;
}
.um-person.is-scrubbing .um-person__intro,
.um-person.is-scrubbing .um-person__session {
opacity: 0 !important;
pointer-events: none;
transition: opacity .22s ease;
}
@media (prefers-reduced-motion: reduce) {
.um-person__intro,
.um-person__session,
.um-person.is-scrubbing .um-person__intro,
.um-person.is-scrubbing .um-person__session {
transition: none;
}
}
body.um-person-page main > .wp-block-spacer { display: none !important; }
body.um-person-page main > .um-person { margin-top: 0 !important; }
.um-gallery-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 14px;
transition: gap .3s ease;
}
.um-gallery-section {
grid-column: 1 / -1;
text-align: center;
margin: 2.4rem 0 0.4rem;
}
.um-gallery-section:first-child { margin-top: 0; }
.um-gallery-section.is-hidden { display: none; }
.um-gallery-section__rule {
display: block;
width: 48px;
height: 1px;
background: #c8a36b;
margin: 0 auto 1rem;
}
.um-gallery-section__title {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(1.1rem, 1.8vw, 1.45rem);
font-weight: 400;
letter-spacing: 0.28em;
color: #1a1a1a;
margin: 0;
line-height: 1.5;
}
body.theme-dark .um-gallery-section__title { color: #f5f5f5; }
.um-gallery-empty { font-family: 'Inter Tight', system-ui, sans-serif; }
main.wp-block-group:has(.um-gallery-grid),
body[class*="gallery"] main.wp-block-group {
max-width: 100vw !important;
width: 100% !important;
padding-left: calc(1.5rem + 12px) !important;
padding-right: calc(1.5rem + 12px) !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (min-width: 601px) {
body.page-id-7:not(.home) main.wp-block-group {
padding-top: 0 !important;
}
body.page-id-7:not(.home) main > .um-gallery-controls {
padding-top: calc(1.25rem + 38px + 0.6rem) !important;
}
body.admin-bar.page-id-7:not(.home) main > .um-gallery-controls {
padding-top: calc(1.25rem + 38px + 0.6rem + 32px) !important;
}
}
main.wp-block-group:has(.um-gallery-grid) > *,
main.wp-block-group:has(.um-gallery-grid) > .wp-block-group,
main.wp-block-group:has(.um-gallery-grid) > .wp-block-heading,
main.wp-block-group:has(.um-gallery-grid) > p,
main.wp-block-group:has(.um-gallery-grid) > div,
body[class*="gallery"] main.wp-block-group > *,
body[class*="gallery"] main.wp-block-group > .wp-block-group,
body[class*="gallery"] main.wp-block-group > .wp-block-heading,
body[class*="gallery"] main.wp-block-group > p,
body[class*="gallery"] main.wp-block-group > div {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.um-gallery-grid,
.um-gallery-controls,
.um-info-ticker,
.um-gallery-map {
max-width: 100% !important;
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
main.wp-block-group:has(.um-gallery-grid) > h1,
main.wp-block-group:has(.um-gallery-grid) > p,
body[class*="gallery"] main.wp-block-group > h1,
body[class*="gallery"] main.wp-block-group > p,
main.wp-block-group:has(.um-gallery-grid) .um-gallery-controls,
body[class*="gallery"] .um-gallery-controls {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (max-width: 768px) {
main.wp-block-group:has(.um-gallery-grid),
body[class*="gallery"] main.wp-block-group {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (min-aspect-ratio: 2/1) and (min-width: 1400px) {
main.wp-block-group:has(.um-gallery-map) .um-gallery-map { height: 60vh; }
}
.um-gallery-grid[data-size="1"] { grid-template-columns: 1fr;                          gap: 0;    }
.um-gallery-grid[data-size="2"] { grid-template-columns: repeat(2, minmax(0, 1fr));    gap: 16px; }
.um-gallery-grid[data-size="3"] { grid-template-columns: repeat(3, minmax(0, 1fr));    gap: 14px; }
.um-gallery-grid[data-size="4"] { grid-template-columns: repeat(4, minmax(0, 1fr));    gap: 10px; }
.um-gallery-grid[data-size="5"] { grid-template-columns: repeat(5, minmax(0, 1fr));    gap: 8px;  }
.um-gallery-grid[data-size="6"]  { grid-template-columns: repeat(6,  minmax(0, 1fr)); gap: 6px;  }
.um-gallery-grid[data-size="7"]  { grid-template-columns: repeat(7,  minmax(0, 1fr)); gap: 5px;  }
.um-gallery-grid[data-size="8"]  { grid-template-columns: repeat(8,  minmax(0, 1fr)); gap: 4px;  }
.um-gallery-grid[data-size="9"]  { grid-template-columns: repeat(9,  minmax(0, 1fr)); gap: 4px;  }
.um-gallery-grid[data-size="10"] { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px;  }
.um-gallery-grid[data-size="11"] { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px;  }
.um-gallery-grid[data-size="12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px;  }
.um-gallery-grid[data-size="13"] { grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px;  }
.um-gallery-grid[data-size="14"] { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px;  }
.um-gallery-grid[data-size="15"] { grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 2px;  }
.um-gallery-grid[data-size="16"] { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px;  }
.um-gallery-grid[data-size="17"] { grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="18"] { grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="19"] { grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="20"] { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="21"] { grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="22"] { grid-template-columns: repeat(22, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="23"] { grid-template-columns: repeat(23, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="24"] { grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px;  }
.um-gallery-grid[data-size="25"] { grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 0;    }
.um-gallery-grid[data-size="26"] { grid-template-columns: repeat(26, minmax(0, 1fr)); gap: 0;    }
.um-gallery-grid[data-size="27"] { grid-template-columns: repeat(27, minmax(0, 1fr)); gap: 0;    }
.um-gallery-grid[data-size="28"] { grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 0;    }
.um-gallery-grid[data-size="29"] { grid-template-columns: repeat(29, minmax(0, 1fr)); gap: 0;    }
.um-gallery-grid[data-size="30"] { grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 0;    }
@media (max-width: 768px) {
.um-gallery-grid,
.um-gallery-grid[data-size] {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.um-gallery-grid[data-size="1"] {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
}
@media (max-width: 480px) {
.um-gallery-grid,
.um-gallery-grid[data-size] {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.um-gallery-grid[data-size="1"] {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
}
.um-gallery-grid__item {
display: block;
width: 100%;
break-inside: avoid;
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
border-radius: 0;
transition: transform .35s cubic-bezier(.2,.6,.2,1), opacity .25s ease, box-shadow .35s ease;
text-decoration: none;
position: relative;
overflow: hidden;
z-index: 0;
opacity: 1;
}
html.um-anim-ok .um-gallery-grid__item {
animation: um-gallery-fade 0.5s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: var(--um-anim-delay, 0s);
}
.um-gallery-grid__item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: opacity .35s ease;
}
.um-gallery-grid__item--movie {
cursor: pointer;
}
.um-gallery-grid__item--movie::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
transition: background 0.3s ease;
z-index: 1;
}
.um-gallery-grid__item--movie:hover::after {
background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.28) 100%);
}
.um-gallery-grid__play {
position: absolute;
top: 50%;
left: 50%;
width: 22%;
max-width: 80px;
min-width: 44px;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%) scale(0.85);
color: #fff;
pointer-events: none;
z-index: 2;
transition: transform 0.32s cubic-bezier(.2,.6,.2,1), opacity 0.28s ease;
filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
opacity: 0;
}
.um-gallery-grid__play svg {
width: 100%;
height: 100%;
display: block;
}
.um-gallery-grid__item--movie:hover .um-gallery-grid__play,
.um-gallery-grid__item--movie:focus-visible .um-gallery-grid__play {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
@media (hover: none) {
.um-gallery-grid__play {
opacity: 0.92;
transform: translate(-50%, -50%) scale(1);
}
}
.um-movie-modal {
position: fixed;
inset: 0;
z-index: 12000;
background: rgba(0, 0, 0, 0.92);
display: flex;
align-items: center;
justify-content: center;
padding: 4vh 4vw;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.26s cubic-bezier(.2,.6,.2,1),
visibility 0s linear 0.26s;
}
.um-movie-modal.is-open {
opacity: 1;
visibility: visible;
transition:
opacity 0.26s cubic-bezier(.2,.6,.2,1),
visibility 0s linear 0s;
}
.um-movie-modal__inner {
position: relative;
width: 100%;
max-width: 1280px;
aspect-ratio: 16 / 9;
background: #000;
box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);
pointer-events: auto;
opacity: 0;
transition: opacity 0.22s ease;
}
.um-movie-modal.is-revealed .um-movie-modal__inner {
opacity: 1;
}
.um-movie-modal__player {
width: 100%;
height: 100%;
}
.um-movie-modal__player iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
.um-movie-modal__close {
position: absolute;
top: 1.4rem;
left: 1.4rem;
width: 46px;
height: 46px;
border: 0;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.um-movie-modal__close:hover {
background: rgba(255, 255, 255, 0.28);
transform: rotate(90deg);
}
body.um-movie-open {
overflow: hidden;
}
@media (max-width: 700px) {
.um-movie-modal { padding: 0; }
.um-movie-modal__inner { box-shadow: none; }
.um-movie-modal__close {
top: 1rem;
left: 1rem;
width: 40px;
height: 40px;
font-size: 1.4rem;
}
}
.um-gallery-grid__item[data-ratio="3-2"],
.um-gallery-grid__item[data-ratio="4-3"],
.um-gallery-grid__item[data-ratio="2-1"],
.um-gallery-grid__item[data-ratio="16-9"] {
grid-column: span 2;
}
.um-gallery-grid[data-size="1"] .um-gallery-grid__item[data-ratio="3-2"],
.um-gallery-grid[data-size="1"] .um-gallery-grid__item[data-ratio="4-3"],
.um-gallery-grid[data-size="1"] .um-gallery-grid__item[data-ratio="2-1"],
.um-gallery-grid[data-size="1"] .um-gallery-grid__item[data-ratio="16-9"] {
grid-column: span 1;
}
@keyframes um-gallery-fade {
from { transform: translateY(8px); }
to   { transform: translateY(0) scale(1); }
}
.um-gallery-grid[data-flip="1"] .um-gallery-grid__item {
animation: none !important;
}
.um-gallery-grid__item:hover {
opacity: 0.95;
transform: scale(1.02);
z-index: 2;
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.35);
}
body.theme-dark .um-gallery-grid__item:hover {
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.7);
}
.um-gallery-grid__item[data-ratio="1-1"]::before {
content: ""; display: block; padding-top: 100%;
}
.um-gallery-grid__item[data-ratio="3-4"]::before {
content: ""; display: block; padding-top: 133.33%;
}
.um-gallery-grid__item[data-ratio="2-3"]::before {
content: ""; display: block; padding-top: 150%;
}
.um-gallery-grid__item[data-ratio="4-5"]::before {
content: ""; display: block; padding-top: 125%;
}
.um-gallery-grid__item[data-ratio="3-2"]::before {
content: ""; display: block; padding-top: 66.67%;
}
.um-gallery-grid__item[data-ratio="4-3"]::before {
content: ""; display: block; padding-top: 75%;
}
.um-gallery-grid__item[data-ratio="2-1"]::before {
content: ""; display: block; padding-top: 50%;
}
.um-gallery-grid__item[data-ratio="16-9"]::before {
content: ""; display: block; padding-top: 56.25%;
}
.um-gallery-grid__item.is-hidden {
display: none;
}
@media (max-width: 1400px) {
.um-gallery-grid[data-size="30"],
.um-gallery-grid[data-size="29"],
.um-gallery-grid[data-size="28"],
.um-gallery-grid[data-size="27"],
.um-gallery-grid[data-size="26"],
.um-gallery-grid[data-size="25"],
.um-gallery-grid[data-size="24"],
.um-gallery-grid[data-size="23"],
.um-gallery-grid[data-size="22"],
.um-gallery-grid[data-size="21"],
.um-gallery-grid[data-size="20"],
.um-gallery-grid[data-size="19"],
.um-gallery-grid[data-size="18"],
.um-gallery-grid[data-size="17"],
.um-gallery-grid[data-size="16"],
.um-gallery-grid[data-size="15"],
.um-gallery-grid[data-size="14"],
.um-gallery-grid[data-size="13"],
.um-gallery-grid[data-size="12"],
.um-gallery-grid[data-size="11"],
.um-gallery-grid[data-size="10"],
.um-gallery-grid[data-size="9"]  { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
}
@media (max-width: 1024px) {
.um-gallery-grid[data-size="8"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.um-gallery-grid[data-size="7"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.um-gallery-grid[data-size="6"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.um-gallery-grid[data-size="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.um-gallery-grid[data-size="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.um-gallery-grid[data-size="1"]  { grid-template-columns: 1fr;                          gap: 0;    }
.um-gallery-grid[data-size="2"]  { grid-template-columns: repeat(2,  minmax(0, 1fr));   gap: 12px; }
.um-gallery-grid[data-size="3"]  { grid-template-columns: repeat(2,  minmax(0, 1fr));   gap: 6px;  }
.um-gallery-grid[data-size="4"]  { grid-template-columns: repeat(3,  minmax(0, 1fr));   gap: 8px;  }
.um-gallery-grid[data-size="5"]  { grid-template-columns: repeat(3,  minmax(0, 1fr));   gap: 4px;  }
.um-gallery-grid[data-size="6"]  { grid-template-columns: repeat(4,  minmax(0, 1fr));   gap: 6px;  }
.um-gallery-grid[data-size="7"]  { grid-template-columns: repeat(4,  minmax(0, 1fr));   gap: 3px;  }
.um-gallery-grid[data-size="8"]  { grid-template-columns: repeat(5,  minmax(0, 1fr));   gap: 5px;  }
.um-gallery-grid[data-size="9"]  { grid-template-columns: repeat(5,  minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="10"] { grid-template-columns: repeat(6,  minmax(0, 1fr));   gap: 4px;  }
.um-gallery-grid[data-size="11"] { grid-template-columns: repeat(6,  minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="12"] { grid-template-columns: repeat(7,  minmax(0, 1fr));   gap: 3px;  }
.um-gallery-grid[data-size="13"] { grid-template-columns: repeat(7,  minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="14"] { grid-template-columns: repeat(8,  minmax(0, 1fr));   gap: 3px;  }
.um-gallery-grid[data-size="15"] { grid-template-columns: repeat(8,  minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="16"] { grid-template-columns: repeat(9,  minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="17"] { grid-template-columns: repeat(10, minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="18"] { grid-template-columns: repeat(11, minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="19"] { grid-template-columns: repeat(12, minmax(0, 1fr));   gap: 2px;  }
.um-gallery-grid[data-size="20"] { grid-template-columns: repeat(13, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="21"] { grid-template-columns: repeat(14, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="22"] { grid-template-columns: repeat(15, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="23"] { grid-template-columns: repeat(16, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="24"] { grid-template-columns: repeat(18, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="25"] { grid-template-columns: repeat(20, minmax(0, 1fr));   gap: 1px;  }
.um-gallery-grid[data-size="26"] { grid-template-columns: repeat(22, minmax(0, 1fr));   gap: 0;    }
.um-gallery-grid[data-size="27"] { grid-template-columns: repeat(24, minmax(0, 1fr));   gap: 0;    }
.um-gallery-grid[data-size="28"] { grid-template-columns: repeat(26, minmax(0, 1fr));   gap: 0;    }
.um-gallery-grid[data-size="29"] { grid-template-columns: repeat(28, minmax(0, 1fr));   gap: 0;    }
.um-gallery-grid[data-size="30"] { grid-template-columns: repeat(30, minmax(0, 1fr));   gap: 0;    }
.um-gallery-controls {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.um-gallery-controls > * { flex: 0 0 auto; }
.um-gallery-controls > .um-dropdown {
flex: 1 1 0;
min-width: 0;
}
.um-gallery-controls > .um-dropdown[data-dropdown="view"] {
flex: 0 0 auto;
}
.um-gallery-controls > .um-dropdown .um-dropdown__trigger {
width: 100%;
justify-content: space-between;
}
.um-gallery-controls .um-dropdown__current { min-width: 0; }
.um-gallery-controls .um-dropdown__current-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.um-gallery-controls .um-gallery-size {
flex: 1 0 100%;
margin-top: 2px;
}
.um-gallery-controls .um-gallery-size__range {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.um-gallery-grid[data-size="3"] .um-gallery-grid__item[data-ratio="3-2"],
.um-gallery-grid[data-size="3"] .um-gallery-grid__item[data-ratio="4-3"],
.um-gallery-grid[data-size="3"] .um-gallery-grid__item[data-ratio="2-1"],
.um-gallery-grid[data-size="3"] .um-gallery-grid__item[data-ratio="16-9"] {
grid-column: span 2;
}
}
.um-plan-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.um-plan-card {
display: grid;
grid-template-columns: minmax(160px, 26%) 1fr;
align-items: stretch;
text-decoration: none;
color: inherit;
border: 1px solid var(--wp--preset--color--line);
background: #fff;
transition: transform 0.4s cubic-bezier(.2,.6,.2,1), box-shadow 0.4s ease;
overflow: hidden;
cursor: pointer;
}
.um-plan-card__more {
color: #1a1a1a;
text-decoration: none;
}
.um-plan-card__more:hover {
color: #888;
}
.um-plan-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -22px rgba(0,0,0,0.18);
}
.um-plan-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f5f5f5;
position: relative;
align-self: start;
width: 100%;
}
.um-plan-card__media--placeholder {
background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
}
.um-plan-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(.2,.6,.2,1);
}
.um-plan-card:hover .um-plan-card__img {
transform: scale(1.04);
}
.um-plan-card__media--mosaic {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 2px;
background: #1a1a1a;
}
.um-plan-card__tile {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.4s ease;
}
.um-plan-card__media--slides {
position: relative;
background: #1a1a1a;
overflow: hidden;
}
.um-plan-card__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.7s ease;
}
.um-plan-card__slide.is-active { opacity: 1; }
.um-plan-card[data-genre] .um-plan-card__media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
z-index: 2;
pointer-events: none;
}
.um-plan-card[data-genre] .um-plan-card__media::after {
position: absolute;
left: 14px; bottom: 12px;
z-index: 3;
color: #fff;
font-family: 'Inter Tight', sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
padding: 0.32rem 0.7rem 0.32rem 0.55rem;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
pointer-events: none;
white-space: nowrap;
}
.um-plan-card[data-genre="branding-profile"] .um-plan-card__media::after,
.um-plan-card[data-genre="wedding"] .um-plan-card__media::after,
.um-plan-card[data-genre="ceremony"] .um-plan-card__media::after {
content: "◉  PHOTO";
}
.um-plan-card[data-genre="branding-profile-movie"] .um-plan-card__media::after {
content: "▶  MOVIE";
}
.um-plan-card[data-genre="other"] .um-plan-card__media::before,
.um-plan-card[data-genre="other"] .um-plan-card__media::after {
content: none;
background: none;
}
.um-plan-card__body {
padding: 0.9rem 1.4rem 0.85rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.um-plan-card__title {
margin: 0 0 0.2rem;
font-size: 1.1rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.um-plan-card__subtitle {
margin: 0 0 0.6rem;
font-size: 0.78rem;
line-height: 1.5;
letter-spacing: 0.08em;
color: #888;
}
.um-plan-card__subtitle:empty { display: none; }
body.theme-dark .um-plan-card__subtitle { color: #aaa; }
.um-plan-card__excerpt {
margin: 0 0 0.7rem;
font-size: 0.8125rem;
line-height: 1.7;
color: #666;
}
.um-plan-card__more {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1a1a1a;
border-bottom: 1px solid #1a1a1a;
padding-bottom: 2px;
align-self: flex-start;
}
.um-hero {
position: absolute !important;
top: 0;
left: 0;
right: 80px;
width: auto !important;
max-width: none !important;
height: 100vh;
height: 100lvh;
min-height: 100vh !important;
min-height: 100lvh !important;
--um-urlbar: calc(100lvh - 100dvh);
margin: 0 !important;
overflow: hidden;
background: #0a0a0a;
z-index: 0;
opacity: 1 !important;
}
.um-news-ticker {
opacity: 0;
animation: um-news-bar-in 1.0s cubic-bezier(.2, .7, .25, 1) 1.5s forwards;
}
@keyframes um-news-bar-in {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.um-hero,
.um-news-ticker {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
body.admin-bar .um-hero {
top: -32px;
}
@media (max-width: 782px) {
body.admin-bar .um-hero {
top: -46px;
}
}
@media (max-width: 768px) {
.um-hero { right: 44px; }
}
body.home main {
padding-top: 100vh !important;
padding-top: 100lvh !important;
}
body.admin-bar.home main {
padding-top: calc(100lvh - 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar.home main {
padding-top: calc(100lvh - 46px) !important;
}
}
body.home main {
position: relative;
}
@media (max-width: 768px) {
html:has(body.home) {
scroll-snap-type: y proximity;
scroll-padding-top: 0;
}
body.home .um-hero {
scroll-snap-align: start;
scroll-snap-stop: always;
}
body.home .um-section--about {
scroll-snap-align: start;
scroll-snap-stop: always;
scroll-margin-top: 0;
}
}
.um-hero__nav--hidden {
display: none !important;
}
.um-hero__scroll-hint {
display: none !important;
}
.um-hero__caption {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: calc(2.75rem + 36px + 36px + var(--um-urlbar, 0px)) !important;
display: flex !important;
align-items: center;
gap: 0.5rem;
padding: 5px 14px;
min-height: 22px;
background: rgba(0, 0, 0, 0.42);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
color: #fff !important;
font-size: 0.7rem;
letter-spacing: 0.18em;
line-height: 1;
white-space: nowrap;
pointer-events: none;
transition: opacity 0.4s ease;
z-index: 4;
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.35);
}
.um-hero__caption:has(.um-hero__caption-loc:empty):has(.um-hero__caption-plan:empty) {
opacity: 0;
}
.um-hero__caption-loc {
font-weight: 500;
color: #fff;
}
.um-hero__caption-plan { color: rgba(255,255,255,0.78); }
.um-hero__caption-sep {
color: rgba(255,255,255,0.5);
margin: 0 -0.05em;
font-size: 0.85em;
}
@media (max-width: 768px) {
.um-hero__caption {
bottom: calc(1.75rem + 32px + 28px + var(--um-urlbar, 0px)) !important;
font-size: 0.625rem;
letter-spacing: 0.14em;
padding: 3px 10px;
gap: 0.35rem;
}
}
.um-hero__nav {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
bottom: 2.75rem !important;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.35);
transition: background 0.3s ease, border-color 0.3s ease;
}
.um-hero__nav:hover {
background: rgba(0, 0, 0, 0.32);
border-color: rgba(255, 255, 255, 0.26);
}
.um-hero__scroll {
right: 1.25rem !important;
bottom: 2.75rem !important;
}
@media (max-width: 768px) {
.um-hero__nav { bottom: 1.75rem !important; }
.um-hero__scroll { right: 0.875rem !important; bottom: 1.75rem !important; }
}
.um-news-ticker {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 36px;
z-index: 7;
display: flex;
align-items: stretch;
background: #ffffff;
color: #1a1a1a;
text-decoration: none;
overflow: hidden;
cursor: pointer;
border-top: 1px solid rgba(0, 0, 0, 0.06);
transition: background 0.3s ease;
}
.um-news-ticker:hover {
background: #f6f6f6;
}
.um-news-ticker__label {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0 1.1rem;
background: #ffffff;
color: #1a1a1a;
border-right: 1px solid rgba(26, 26, 26, 0.18);
font-size: 0.625rem;
letter-spacing: 0.3em;
font-weight: 600;
}
.um-news-ticker__viewport {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: block;
position: relative;
height: 100%;
}
.um-news-ticker__track {
display: inline-flex;
align-items: center;
gap: 0;
padding-left: 1.25rem;
height: 100%;
white-space: nowrap;
animation: um-news-ticker-slide 26s linear infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
}
.um-news-ticker__item {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-size: 0.75rem;
letter-spacing: 0.05em;
line-height: 1;
padding-right: 1.5rem;
}
.um-news-ticker__date {
color: rgba(26, 26, 26, 0.82);
font-size: 0.6875rem;
letter-spacing: 0.1em;
flex-shrink: 0;
}
.um-news-ticker__title {
color: #1a1a1a;
}
.um-news-ticker__cat {
color: #1a1a1a;
font-size: 0.625rem;
letter-spacing: 0.2em;
border: 1px solid rgba(26, 26, 26, 0.3);
padding: 2px 7px;
border-radius: 2px;
flex-shrink: 0;
line-height: 1;
}
.um-news-ticker__sep {
color: rgba(26, 26, 26, 0.5);
padding-left: 1.5rem;
}
body.theme-dark .um-news-ticker {
background: #161616;
color: #ffffff;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
body.theme-dark .um-news-ticker:hover {
background: #1f1f1f;
}
body.theme-dark .um-news-ticker__label {
background: #161616;
color: #ffffff;
border-right-color: rgba(255, 255, 255, 0.22);
}
body.theme-dark .um-news-ticker__date {
color: rgba(255, 255, 255, 0.88);
}
body.theme-dark .um-news-ticker__title {
color: #ffffff;
}
body.theme-dark .um-news-ticker__cat {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.4);
}
body.theme-dark .um-news-ticker__sep {
color: rgba(255, 255, 255, 0.55);
}
@keyframes um-news-ticker-slide {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.um-news-ticker {
bottom: calc(var(--um-urlbar, 0px) + env(safe-area-inset-bottom, 0px));
}
.um-info-ticker {
position: relative;
display: flex;
align-items: stretch;
height: 32px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid var(--wp--preset--color--line);
border-radius: 2px;
overflow: hidden;
color: #555;
margin: 0;
}
.um-info-ticker--fixed {
position: fixed;
top: calc(1.25rem + 38px + 0.6rem);
left: calc(1.5rem + 12px);
right: calc(56px + 12px);
height: 32px;
z-index: 999;
border-radius: 3px;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.12);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition:
opacity 0.9s cubic-bezier(.4, 0, .2, 1),
transform 0.9s cubic-bezier(.4, 0, .2, 1);
}
.um-info-ticker--fixed.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
body.is-leaving .um-info-ticker--fixed {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition:
opacity 0.45s cubic-bezier(.4, 0, .2, 1),
transform 0.45s cubic-bezier(.4, 0, .2, 1);
}
.um-info-ticker--fixed .um-info-ticker__label {
width: auto;
padding: 0 0.85rem;
box-sizing: border-box;
}
@media (max-width: 768px) {
.um-info-ticker--fixed .um-info-ticker__label {
padding: 0 0.7rem;
}
}
body.theme-dark .um-info-ticker--fixed {
background: rgba(15, 15, 15, 0.78);
box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.5);
}
body.admin-bar .um-info-ticker--fixed {
top: calc(1.25rem + 38px + 0.6rem + 32px);
}
@media (max-width: 782px) {
body.admin-bar .um-info-ticker--fixed {
top: calc(0.875rem + 28px + 0.5rem + 46px);
}
}
@media (max-width: 768px) {
.um-info-ticker--fixed {
top: calc(0.875rem + 28px + 0.5rem);
left: 1rem;
right: calc(44px + 0.75rem);
height: 28px;
}
}
@keyframes um-info-fadein {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.um-info-ticker--fixed {
opacity: 1;
animation: none;
transform: none;
}
}
.um-breadcrumb {
position: fixed;
top: var(--um-hdr-top);
left: calc(1.5rem + 4.5px + 110px + 0.9rem);
height: var(--um-hdr-h);
z-index: 999;
display: inline-flex;
align-items: center;
padding-bottom: 0;
gap: 0.7em;
font-size: 0.9375rem;
line-height: 1;
letter-spacing: 0.16em;
color: #888;
pointer-events: auto;
opacity: 0;
animation:
um-breadcrumb-in   1.0s cubic-bezier(.2, .7, .25, 1) 0.6s forwards,
um-breadcrumb-loop 5.0s ease-in-out 1.6s infinite;
}
@keyframes um-breadcrumb-in {
from { opacity: 0; transform: translateY(-4px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes um-breadcrumb-loop {
0%, 100% { opacity: 1; }
50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.um-breadcrumb {
opacity: 1;
animation: none;
transform: none;
}
}
@media (max-width: 768px) {
.um-breadcrumb {
top: calc(2.9rem + var(--um-hdr-top));
left: 0;
right: 0;
display: flex;
justify-content: center;
height: 24px;
font-size: 0.75rem;
letter-spacing: 0.12em;
gap: 0.55em;
align-items: center;
}
}
.um-breadcrumb__link {
color: #888;
text-decoration: none;
transition: color .2s ease;
}
.um-breadcrumb__link:hover { color: #1a1a1a; }
body.theme-dark .um-breadcrumb { color: #aaa; }
body.theme-dark .um-breadcrumb__link { color: #aaa; }
body.theme-dark .um-breadcrumb__link:hover { color: #fff; }
.um-breadcrumb__sep {
color: rgba(0, 0, 0, 0.25);
font-weight: 200;
}
body.theme-dark .um-breadcrumb__sep { color: rgba(255, 255, 255, 0.25); }
.um-breadcrumb__current {
color: #1a1a1a;
font-weight: 400;
}
body.theme-dark .um-breadcrumb__current { color: #f5f5f5; }
body:not(.is-loaded) .um-breadcrumb {
opacity: 0 !important;
animation: none !important;
pointer-events: none;
}
body.theme-dark .um-info-ticker--fixed {
background: rgba(15, 15, 15, 0.78);
}
body.theme-dark .um-info-ticker {
background: rgba(255, 255, 255, 0.04);
border-color: #2a2a2a;
color: #aaa;
}
.um-info-ticker__label {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0 1rem;
background: rgba(0, 0, 0, 0.06);
color: #888;
font-size: 0.625rem;
letter-spacing: 0.3em;
font-weight: 400;
}
body.theme-dark .um-info-ticker__label {
background: rgba(255, 255, 255, 0.06);
color: #888;
}
.um-info-ticker__viewport {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
display: block;
position: relative;
height: 100%;
}
.um-info-ticker__track {
display: inline-flex;
align-items: center;
gap: 0;
padding-left: 1.25rem;
height: 100%;
white-space: nowrap;
animation: um-news-ticker-slide 28s linear infinite;
will-change: transform;
}
.um-info-ticker__item {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.75rem;
letter-spacing: 0.05em;
line-height: 1;
padding-right: 1.5rem;
}
.um-info-ticker__key {
font-size: 0.625rem;
letter-spacing: 0.2em;
border: 1px solid currentColor;
padding: 2px 7px;
border-radius: 2px;
opacity: 0.7;
flex-shrink: 0;
}
.um-info-ticker__sep {
color: rgba(0, 0, 0, 0.25);
padding-left: 1.5rem;
padding-right: 0.5rem;
}
body.theme-dark .um-info-ticker__sep {
color: rgba(255, 255, 255, 0.25);
}
@media (max-width: 600px) {
.um-info-ticker { height: 28px; }
.um-info-ticker__label { padding: 0 0.7rem; font-size: 0.5625rem; }
.um-info-ticker__item { font-size: 0.6875rem; }
.um-info-ticker__key { font-size: 0.5625rem; padding: 1px 5px; }
}
@media (prefers-reduced-motion: reduce) {
.um-info-ticker__track {
animation: none;
transform: translateX(0);
}
}
.um-news-ticker ~ .um-hero__scroll,
.um-news-ticker ~ .um-hero__nav {
}
.um-hero__scroll {
bottom: calc(2.75rem + 36px + var(--um-urlbar, 0px)) !important;
}
.um-hero__nav {
bottom: calc(2.75rem + 36px + var(--um-urlbar, 0px)) !important;
}
@media (max-width: 768px) {
.um-news-ticker {
height: 32px;
}
.um-news-ticker__label {
padding: 0 0.8rem;
font-size: 0.5625rem;
}
.um-news-ticker__item {
font-size: 0.6875rem;
}
.um-news-ticker__date {
font-size: 0.625rem;
}
.um-hero__scroll { bottom: calc(1.75rem + 32px + var(--um-urlbar, 0px)) !important; }
.um-hero__nav    { bottom: calc(1.75rem + 32px + var(--um-urlbar, 0px)) !important; }
}
@media (prefers-reduced-motion: reduce) {
.um-news-ticker__track {
animation: none;
transform: translateX(0);
}
}
.um-hero__slides {
position: absolute;
inset: 0;
z-index: 0;
}
.um-hero__slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
z-index: 0;
transform: none;
}
.um-hero__slide.is-active,
.um-hero__slide.was-active {
will-change: opacity, transform;
}
.um-hero:not(.is-hero-ready) .um-hero__slide:first-child {
opacity: 1 !important;
z-index: 1;
}
.um-hero__slide--solo {
object-fit: initial;
overflow: hidden;
}
.um-hero__slide--solo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.um-hero__slide--pair {
display: flex;
flex-direction: row;
object-fit: initial;
background: #000;
overflow: hidden;
}
.um-hero__slide--pair img {
flex: 1 1 0;
width: 50%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 768px) {
.um-hero__slide--pair {
flex-direction: column;
}
.um-hero__slide--pair img {
width: 100%;
height: 50%;
}
}
.um-hero__slide--trio {
display: flex;
flex-direction: row;
object-fit: initial;
background: #000;
overflow: hidden;
}
.um-hero__slide--trio img {
flex: 1 1 0;
width: 33.3333%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
@media (max-width: 768px) {
.um-hero__slide--trio {
flex-direction: column;
}
.um-hero__slide--trio img {
width: 100%;
height: 33.3333%;
}
}
.um-hero__slide--quad {
display: flex;
flex-direction: row;
object-fit: initial;
background: #000;
overflow: hidden;
}
.um-hero__slide--quad img {
flex: 1 1 0;
width: 25%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.um-hero__slide.was-active {
opacity: 1;
z-index: 1;
transition: none;
animation: umHeroKenBurns 6s ease-out forwards;
}
.um-hero__slide.is-active {
opacity: 1;
z-index: 2;
transition: opacity 1.6s ease;
animation: umHeroKenBurns 6s ease-out forwards;
}
@keyframes umHeroKenBurns {
from { transform: scale(1.06); }
to   { transform: scale(1.00); }
}
@media (prefers-reduced-motion: reduce) {
.um-hero__slide,
.um-hero__slide.is-active,
.um-hero__slide.was-active {
animation: none;
transform: none;
}
}
.um-hero__scroll {
position: absolute;
right: 1.75rem;
bottom: 1.75rem;
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: var(--um-hero-scroll-color, #fff);
text-decoration: none;
opacity: 0.9;
transition: opacity 0.25s ease, color 0.6s ease;
}
.um-hero__scroll:hover { opacity: 1; }
.um-hero__scroll-label {
font-size: 0.625rem;
letter-spacing: 0.45em;
font-weight: 400;
padding-left: 0.45em;
}
.um-hero__scroll-line {
position: relative;
width: 1px;
height: 56px;
background: color-mix(in srgb, currentColor 35%, transparent);
overflow: hidden;
border-radius: 1px;
transition: background 0.6s ease;
}
.um-hero__scroll-line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40%;
background: currentColor;
transform: translateY(-100%);
animation: um-hero-scroll 1.8s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes um-hero-scroll {
0%   { transform: translateY(-100%); }
60%  { transform: translateY(250%); }
100% { transform: translateY(250%); }
}
@media (max-width: 768px) {
.um-hero__scroll { right: 1rem; bottom: 1rem; gap: 0.6rem; }
.um-hero__scroll-line { height: 44px; }
.um-hero__scroll-label { font-size: 0.5625rem; letter-spacing: 0.4em; }
}
@media (prefers-reduced-motion: reduce) {
.um-hero__scroll-line::after { animation: none; transform: translateY(0); height: 100%; opacity: 0.5; }
}
.um-hero__nav {
position: absolute;
left: 1.75rem;
bottom: 1.75rem;
z-index: 3;
display: flex;
align-items: center;
gap: 10px;
}
.um-hero__dot {
width: 7px;
height: 7px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
transition: background 0.3s ease, width 0.3s ease, transform 0.3s ease;
position: relative;
}
.um-hero__dot::before {
content: '';
position: absolute;
inset: -8px;
}
.um-hero__dot:hover {
background: #ffffff;
width: 14px;
transform: scale(1.1);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.08),
0 0 12px rgba(255, 255, 255, 0.55);
}
.um-hero__dot.is-active {
background: #fff;
width: 22px;
border-radius: 999px;
}
@media (max-width: 768px) {
.um-hero__nav { left: 1rem; bottom: 1rem; gap: 8px; }
.um-hero__dot { width: 6px; height: 6px; }
.um-hero__dot.is-active { width: 18px; }
}
body.home,
body.home html {
touch-action: pan-x pan-y;
}
.um-hero__scroll-hint {
position: absolute;
right: 1.5rem;
bottom: calc(32px + 1.25rem);
z-index: 3;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0.5rem 0.85rem 0.55rem;
background: rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 999px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
opacity: 0;
animation: um-hero-hint-fadein 1.0s ease-out 1.4s forwards;
transition: opacity 0.25s ease, background 0.25s ease;
}
.um-hero__scroll-hint:hover {
background: rgba(0, 0, 0, 0.28);
}
.um-hero__scroll-hint-label {
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.42em;
line-height: 1;
padding-left: 0.42em;
}
.um-hero__scroll-hint-arrow {
display: inline-flex;
line-height: 0;
animation: um-hero-hint-bounce 2.0s ease-in-out 2.4s infinite;
}
@keyframes um-hero-hint-fadein {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes um-hero-hint-bounce {
0%, 100% { transform: translateY(0);    opacity: 0.7; }
50%      { transform: translateY(4px);  opacity: 1; }
}
@media (max-width: 768px) {
.um-hero__scroll-hint {
right: 1rem;
bottom: calc(32px + 1rem);
padding: 0.45rem 0.8rem 0.5rem;
}
.um-hero__scroll-hint-label {
font-size: 0.625rem;
letter-spacing: 0.4em;
}
}
@media (prefers-reduced-motion: reduce) {
.um-hero__scroll-hint-arrow { animation: none; }
}
.um-hero__scroll-swipe {
display: none;
}
.um-hero__scroll {
padding: 0.75rem 0.9rem 0.85rem;
background: rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 999px;
opacity: 1;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.um-hero__scroll-label {
font-size: 0.75rem;
letter-spacing: 0.42em;
font-weight: 500;
}
@media (max-width: 768px) {
.um-hero__scroll {
right: 1rem;
bottom: 1.25rem;
gap: 0.55rem;
padding: 0.7rem 0.85rem 0.85rem;
}
.um-hero__scroll-swipe {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 0.45rem;
opacity: 0;
animation: um-hero-guide-fadein 0.9s ease-out 1.3s forwards;
}
.um-hero__scroll-swipe-label {
font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.35em;
line-height: 1;
padding-left: 0.35em;
color: #ffffff;
}
.um-hero__scroll-swipe-arrow {
display: inline-flex;
line-height: 0;
opacity: 0.85;
color: #ffffff;
}
.um-hero__scroll-swipe-arrow svg {
width: 14px;
height: 14px;
}
.um-hero__scroll-swipe-arrow--left {
animation: um-hero-guide-arrow-left 2.2s ease-in-out 2.2s infinite;
}
.um-hero__scroll-swipe-arrow--right {
animation: um-hero-guide-arrow-right 2.2s ease-in-out 2.2s infinite;
}
.um-hero__scroll-label {
font-size: 0.75rem !important;
letter-spacing: 0.4em !important;
font-weight: 600;
}
.um-hero__scroll-line {
height: 36px;
width: 1.5px;
}
}
@keyframes um-hero-guide-fadein {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes um-hero-guide-arrow-left {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50%      { transform: translateX(-5px); opacity: 1; }
}
@keyframes um-hero-guide-arrow-right {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50%      { transform: translateX(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.um-hero__scroll-swipe-arrow--left,
.um-hero__scroll-swipe-arrow--right { animation: none; }
}
body.um-theme-transitioning,
body.um-theme-transitioning *:not(.um-loader):not(.um-onboarding):not(.um-onboarding *) {
transition:
background-color 0.6s ease,
background 0.6s ease,
color 0.6s ease,
border-color 0.6s ease,
fill 0.6s ease,
stroke 0.6s ease,
opacity 0.6s ease,
box-shadow 0.6s ease
!important;
}
.um-bp-subhead {
font-size: 1.05rem;
font-weight: 400;
letter-spacing: 0.08em;
color: #555;
margin: 0 0 1.6rem;
line-height: 1.7;
}
.um-bp-body--accent {
border-left: 2px solid #1a1a1a;
padding-left: 1.2rem;
margin: 1.6rem 0;
color: #1a1a1a;
}
body.theme-dark .um-bp-subhead { color: #aaa; }
body.theme-dark .um-bp-body--accent { border-left-color: #f1f1f1; color: #f1f1f1; }
.um-bp-cta__btn {
display: inline-block;
padding: 0.95rem 2.2rem;
background: #1a1a1a;
color: #fff !important;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.18em;
transition: background 0.2s;
border: 1px solid #1a1a1a;
}
.um-bp-cta__btn:hover { background: #444; }
body.theme-dark .um-bp-cta__btn {
background: #f1f1f1;
color: #1a1a1a !important;
border-color: #f1f1f1;
}
body.theme-dark .um-bp-cta__btn:hover { background: #ddd; }
.um-bp-why__head { text-align: center; margin-bottom: 3rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.um-bp-why__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.6rem;
max-width: 880px;
margin: 0 auto;
}
.um-bp-why__item {
padding: 2.2rem 1.8rem;
border-top: 1px solid rgba(0,0,0,0.12);
border-bottom: 1px solid rgba(0,0,0,0.12);
}
.um-bp-why__num {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.32em;
color: #888;
margin: 0 0 0.9rem;
}
.um-bp-why__credits {
list-style: none;
padding: 0;
margin: 0.6rem 0 0;
line-height: 2.1;
color: #444;
}
.um-bp-why__credits li {
padding-left: 1em;
text-indent: -1em;
}
.um-bp-why__credits li::before {
content: '—';
margin-right: 0.6em;
color: #aaa;
}
.um-bp-why__close {
text-align: center;
font-size: 0.95rem;
line-height: 2;
color: #555;
margin: 3rem auto 0;
max-width: 720px;
}
body.theme-dark .um-bp-why__item { border-color: rgba(255,255,255,0.18); }
body.theme-dark .um-bp-why__credits { color: #bbb; }
body.theme-dark .um-bp-why__close { color: #aaa; }
.um-bp-hearing { background: rgba(0,0,0,0.02); }
.um-bp-hearing__head { text-align: center; margin-bottom: 2.4rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.um-bp-hearing__body { max-width: 760px; margin: 0 auto; }
.um-bp-hearing__topics {
list-style: none;
padding: 1.4rem 0 1.4rem 1.4rem;
margin: 1.4rem 0;
border-left: 2px solid rgba(0,0,0,0.18);
}
.um-bp-hearing__topics li {
padding: 0.5rem 0;
color: #333;
font-size: 0.95rem;
line-height: 1.9;
}
.um-bp-hearing__cta {
margin: 3rem auto 0;
max-width: 600px;
padding: 2.2rem 1.6rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
text-align: center;
}
.um-bp-cta-card__lead { margin: 0 0 0.6rem; line-height: 1.9; font-size: 0.95rem; }
.um-bp-cta-card__sub { font-size: 0.82rem; color: #777; margin: 0 0 1.4rem; line-height: 1.8; }
body.theme-dark .um-bp-hearing { background: rgba(255,255,255,0.02); }
body.theme-dark .um-bp-hearing__topics { border-left-color: rgba(255,255,255,0.18); }
body.theme-dark .um-bp-hearing__topics li { color: #bbb; }
body.theme-dark .um-bp-hearing__cta { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
body.theme-dark .um-bp-cta-card__sub { color: #999; }
.um-bp-studio__head { text-align: center; margin-bottom: 2.4rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.um-bp-studio__body { max-width: 760px; margin: 0 auto 2.4rem; }
.um-bp-studio__access {
max-width: 600px;
margin: 0 auto 2.4rem;
padding: 1.4rem 0;
border-top: 1px solid rgba(0,0,0,0.12);
border-bottom: 1px solid rgba(0,0,0,0.12);
}
.um-bp-studio__access > div {
display: grid;
grid-template-columns: 6em 1fr;
gap: 0.4rem 1.4rem;
padding: 0.5rem 0;
}
.um-bp-studio__access dt {
font-size: 0.78rem;
letter-spacing: 0.24em;
color: #888;
margin: 0;
padding-top: 0.2rem;
}
.um-bp-studio__access dd {
margin: 0;
font-size: 0.95rem;
color: #333;
}
.um-bp-studio__note {
max-width: 760px;
margin: 0 auto;
padding: 1.6rem 1.6rem;
background: rgba(0,0,0,0.02);
border-left: 2px solid #1a1a1a;
}
body.theme-dark .um-bp-studio__access { border-color: rgba(255,255,255,0.18); }
body.theme-dark .um-bp-studio__access dt { color: #999; }
body.theme-dark .um-bp-studio__access dd { color: #ccc; }
body.theme-dark .um-bp-studio__note { background: rgba(255,255,255,0.04); border-left-color: #f1f1f1; }
.um-bp-finishing { background: rgba(0,0,0,0.02); }
.um-bp-finishing__head { text-align: center; margin-bottom: 2.4rem; max-width: 720px; margin-left: auto; margin-right: auto; }
.um-bp-finishing__body { max-width: 760px; margin: 0 auto; }
body.theme-dark .um-bp-finishing { background: rgba(255,255,255,0.02); }
.um-bp-plan__catch {
font-size: 1.15rem;
letter-spacing: 0.06em;
color: #1a1a1a;
margin: 0 0 1.2rem;
line-height: 1.5;
font-weight: 500;
}
.um-bp-plan--featured .um-bp-plan__catch { color: #1a1a1a; }
.um-bp-plan__price span {
font-size: 0.78rem;
font-weight: 400;
color: #777;
margin-left: 0.4em;
letter-spacing: 0.16em;
}
.um-bp-plan__badge {
position: absolute;
top: -0.7rem;
right: 1.6rem;
background: #fff;
color: #1a1a1a;
font-size: 0.7rem;
letter-spacing: 0.32em;
padding: 0.4rem 0.9rem;
border: 1px solid #1a1a1a;
margin: 0;
z-index: 2;
}
.um-bp-plan { position: relative; }
.um-bp-plan__use,
.um-bp-plan__target {
font-size: 0.85rem;
color: #555;
margin: 0 0 0.6rem;
line-height: 1.8;
}
.um-bp-plan__use strong,
.um-bp-plan__target strong {
display: inline-block;
width: 6em;
color: #888;
font-weight: 500;
letter-spacing: 0.16em;
font-size: 0.78rem;
}
.um-bp-plan--featured .um-bp-plan__use,
.um-bp-plan--featured .um-bp-plan__target { color: #444; }
.um-bp-plan--featured .um-bp-plan__use strong,
.um-bp-plan--featured .um-bp-plan__target strong { color: #888; }
body.theme-dark .um-bp-plan__catch { color: #f1f1f1; }
body.theme-dark .um-bp-plan--featured .um-bp-plan__catch { color: #1a1a1a; }
body.theme-dark .um-bp-plan__use,
body.theme-dark .um-bp-plan__target { color: #aaa; }
.um-bp-first-step { background: transparent; padding-top: 0; }
.um-bp-first-step__inner {
max-width: 720px;
margin: 0 auto;
padding: 2.4rem 1.8rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.um-bp-first-step__inner .um-bp-eyebrow { margin-bottom: 0.8rem; }
.um-bp-first-step__inner .um-bp-h2 { margin-bottom: 1.2rem; }
.um-bp-first-step__inner .um-bp-body { margin-bottom: 1.6rem; }
body.theme-dark .um-bp-first-step__inner {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
}
.um-bp-rules {
max-width: 720px;
margin: 0 auto;
padding: 1rem 1.4rem !important;
background: transparent;
color: #555;
font-size: 0.85rem;
}
.um-bp-rules summary {
cursor: pointer;
font-size: 0.85rem;
letter-spacing: 0.12em;
color: #777;
padding: 0.6rem 0;
list-style: none;
}
.um-bp-rules summary::-webkit-details-marker { display: none; }
.um-bp-rules summary::before {
content: '▸ ';
color: #aaa;
}
.um-bp-rules[open] summary::before { content: '▾ '; }
.um-bp-rules ul { margin: 0.6rem 0 0; padding-left: 1.4em; line-height: 1.9; }
body.theme-dark .um-bp-rules { color: #aaa; }
body.theme-dark .um-bp-rules summary { color: #999; }
.um-bp-faq__group { margin: 0 0 2.4rem; }
.um-bp-faq__cat {
font-size: 0.85rem;
letter-spacing: 0.24em;
color: #888;
margin: 0 0 0.8rem;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
font-weight: 500;
}
.um-bp-faq__cancel {
padding: 0 0.4rem 1.2rem;
}
.um-bp-faq__cancel-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0 0;
font-size: 0.92rem;
}
.um-bp-faq__cancel-table th,
.um-bp-faq__cancel-table td {
text-align: left;
padding: 0.7rem 0.6rem;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.um-bp-faq__cancel-table th { color: #444; font-weight: 400; width: 50%; }
.um-bp-faq__cancel-table td { color: #1a1a1a; }
body.theme-dark .um-bp-faq__cat { color: #aaa; border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-bp-faq__cancel-table th,
body.theme-dark .um-bp-faq__cancel-table td { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-bp-faq__cancel-table th { color: #ccc; }
body.theme-dark .um-bp-faq__cancel-table td { color: #f1f1f1; }
@media (max-width: 700px) {
.um-bp-why__item { padding: 1.6rem 1rem; }
.um-bp-studio__access > div { grid-template-columns: 5em 1fr; gap: 0.3rem 1rem; }
.um-bp-plan__badge { right: 1rem; padding: 0.3rem 0.7rem; font-size: 0.65rem; }
.um-bp-first-step__inner { padding: 1.8rem 1.2rem; }
}
.um-profile-photos {
display: flex;
gap: 1.2rem;
width: 100%;
max-width: 880px;
margin: 0 auto;
}
.um-profile-photos--single { justify-content: center; }
.um-profile-photo {
flex: 1 1 0;
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
background-color: #eee;
border-radius: 4px;
aspect-ratio: 4 / 5;
width: 100%;
max-width: 520px;
}
.um-profile-photos--single .um-profile-photo {
aspect-ratio: 4 / 3;
max-width: 100%;
object-fit: cover;
object-position: center 28%;
}
.um-profile-photo--1 {
background-image: url('../images/profile/1.jpg');
}
.um-profile-photo--2 {
background-image: url('../images/profile/2.jpg');
}
body.theme-dark .um-profile-photo { background-color: #1f1f1f; }
.um-profile-bio {
max-width: 720px;
margin: 0;
color: #333;
}
body.theme-dark .um-profile-bio { color: #ddd; }
.um-profile-social {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
gap: 0.9rem;
}
.um-profile-social li {
display: inline-flex;
margin: 0;
padding: 0;
position: relative;
}
.um-profile-social__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--wp--preset--color--line, #e5e5e5);
background: transparent;
color: #1a1a1a;
cursor: pointer;
text-decoration: none;
transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
padding: 0;
}
.um-profile-social__btn:hover {
color: #fff;
background: #1a1a1a;
border-color: #1a1a1a;
transform: translateY(-1px);
}
.um-profile-social__btn svg { display: block; }
.um-profile-social__ig { position: relative; }
body.theme-dark .um-profile-social__btn {
color: #f5f5f5;
border-color: rgba(255,255,255,0.18);
}
body.theme-dark .um-profile-social__btn:hover {
color: #1a1a1a;
background: #f5f5f5;
border-color: #f5f5f5;
}
.um-ig__popup--profile {
left: 0;
right: auto;
top: calc(100% + 10px);
transform: translateY(-4px);
}
.um-ig:hover .um-ig__popup--profile,
.um-ig__popup--profile:hover,
.um-ig__trigger[aria-expanded="true"] + .um-ig__popup--profile {
transform: translateY(0);
}
.um-profile-section {
max-width: 720px;
color: #333;
line-height: 2;
font-size: 0.95rem;
}
.um-profile-section p {
margin: 0 0 1rem;
}
.um-profile-section p:last-child { margin-bottom: 0; }
body.theme-dark .um-profile-section { color: #ddd; }
.um-profile-list {
list-style: none;
margin: 0;
padding: 0;
max-width: 720px;
color: #333;
}
.um-profile-list li {
display: flex;
align-items: baseline;
gap: 1.4rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
font-size: 0.95rem;
line-height: 1.7;
}
.um-profile-list li:last-child { border-bottom: 0; }
.um-profile-list__year {
flex: 0 0 auto;
min-width: 4em;
font-size: 0.78rem;
letter-spacing: 0.18em;
color: #888;
font-weight: 500;
}
.um-profile-list--business li { display: block; }
.um-profile-list a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: opacity .2s ease;
}
.um-profile-list a:hover { opacity: 0.65; }
body.theme-dark .um-profile-list { color: #ddd; }
body.theme-dark .um-profile-list li { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-profile-list__year { color: #aaa; }
.um-profile-gear {
margin: 0;
max-width: 720px;
color: #333;
}
.um-profile-gear__row {
display: grid;
grid-template-columns: 7em 1fr;
gap: 0.4rem 1.6rem;
padding: 0.95rem 0;
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
align-items: start;
}
.um-profile-gear__row:last-child { border-bottom: 0; }
.um-profile-gear dt {
font-size: 0.78rem;
letter-spacing: 0.24em;
color: #888;
margin: 0;
padding-top: 0.25rem;
font-weight: 500;
}
.um-profile-gear dd {
margin: 0;
font-size: 0.92rem;
line-height: 1.85;
color: #1a1a1a;
}
body.theme-dark .um-profile-gear { color: #ddd; }
body.theme-dark .um-profile-gear__row { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-profile-gear dt { color: #aaa; }
body.theme-dark .um-profile-gear dd { color: #f1f1f1; }
.um-partners {
display: flex;
flex-wrap: wrap;
gap: 1.4rem 2.2rem;
align-items: center;
max-width: 720px;
}
.um-partners__item {
display: inline-flex;
align-items: center;
justify-content: center;
color: #1a1a1a;
text-decoration: none;
transition: opacity .2s ease, transform .2s ease;
line-height: 0;
}
.um-partners__item:hover { opacity: 0.7; transform: translateY(-1px); }
.um-partners__logo {
display: block;
max-height: 40px;
width: auto;
object-fit: contain;
}
.um-partners__mask {
display: inline-block;
height: 40px;
width: 120px;
background-color: currentColor;
-webkit-mask-image: var(--um-partner-mask);
mask-image: var(--um-partner-mask);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color 0.4s ease;
}
.um-partners__mask--bni      { width: 76px;  height: 36px; }
.um-partners__mask--kizunaya { width: 130px; height: 32px; }
.um-partners__mask--nolla    { width: 96px;  height: 28px; }
.um-partners__placeholder {
display: inline-block;
padding: 0.4rem 1rem;
border: 1px solid var(--wp--preset--color--line, #e5e5e5);
border-radius: 999px;
font-size: 0.78rem;
letter-spacing: 0.16em;
color: #555;
}
.um-partners__name {
margin-left: 0.6rem;
font-size: 0.85rem;
letter-spacing: 0.1em;
color: #555;
}
body.theme-dark .um-partners__item { color: #f5f5f5; }
body.theme-dark .um-partners__placeholder {
border-color: rgba(255,255,255,0.18);
color: #ccc;
}
body.theme-dark .um-partners__name { color: #aaa; }
@media (max-width: 700px) {
.um-profile-photos { gap: 0.6rem; }
.um-profile-gear__row { grid-template-columns: 5.5em 1fr; gap: 0.3rem 1rem; }
.um-partners { gap: 1rem 1.4rem; }
.um-partners__mask--bni      { width: 64px;  height: 30px; }
.um-partners__mask--kizunaya { width: 108px; height: 26px; }
.um-partners__mask--nolla    { width: 80px;  height: 24px; }
}
.um-contact-form {
max-width: 640px;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.um-contact-form__row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.um-contact-form__row label {
font-size: 0.78rem;
letter-spacing: 0.18em;
color: #555;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.um-required {
color: #c8553d;
font-size: 0.7rem;
letter-spacing: 0;
font-weight: 400;
}
.um-contact-form input[type="text"],
.um-contact-form input[type="email"],
.um-contact-form select,
.um-contact-form textarea {
width: 100%;
background: #fff;
border: 1px solid var(--wp--preset--color--line, #e5e5e5);
border-radius: 6px;
padding: 0.75rem 0.9rem;
font-family: inherit;
font-size: 0.95rem;
line-height: 1.5;
color: #1a1a1a;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
box-sizing: border-box;
}
.um-contact-form input[type="text"]:hover,
.um-contact-form input[type="email"]:hover,
.um-contact-form select:hover,
.um-contact-form textarea:hover {
border-color: #bbb;
}
.um-contact-form input[type="text"]:focus,
.um-contact-form input[type="email"]:focus,
.um-contact-form select:focus,
.um-contact-form textarea:focus {
outline: none;
border-color: #1a1a1a;
box-shadow: 0 0 0 3px rgba(26,26,26,0.06);
}
.um-contact-form input::placeholder,
.um-contact-form textarea::placeholder {
color: #767676;
opacity: 1;
}
body.theme-dark .um-contact-form input::placeholder,
body.theme-dark .um-contact-form textarea::placeholder {
color: #9a9a9a;
}
.um-contact-form textarea {
resize: vertical;
min-height: 160px;
font-family: inherit;
}
.um-contact-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5'><polyline points='2 4.5 6 8.5 10 4.5'/></svg>");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 12px 12px;
padding-right: 2.2rem;
cursor: pointer;
}
.um-contact-form__actions {
margin-top: 0.6rem;
}
.um-contact-form__submit {
background: #1a1a1a;
color: #fff;
border: 1px solid #1a1a1a;
padding: 0.95rem 2.6rem;
font-family: inherit;
font-size: 0.85rem;
letter-spacing: 0.28em;
font-weight: 500;
border-radius: 999px;
cursor: pointer;
transition: background .2s ease, color .2s ease, transform .2s ease;
display: inline-block;
}
.um-contact-form__submit:hover {
background: #fff;
color: #1a1a1a;
transform: translateY(-1px);
}
.um-contact-form__submit:active {
transform: translateY(0);
}
.um-contact-form__submit:disabled,
.um-contact-form__submit[disabled] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.um-contact-form__submit:disabled:hover,
.um-contact-form__submit[disabled]:hover {
background: #1a1a1a;
color: #fff;
transform: none;
}
.um-contact-direct {
margin: 0;
max-width: 640px;
color: #333;
}
.um-contact-direct__row {
display: grid;
grid-template-columns: 8em 1fr;
gap: 0.4rem 1.6rem;
padding: 0.95rem 0;
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
align-items: baseline;
}
.um-contact-direct__row:last-child { border-bottom: 0; }
.um-contact-direct dt {
font-size: 0.78rem;
letter-spacing: 0.24em;
color: #888;
margin: 0;
font-weight: 500;
}
.um-contact-direct dd {
margin: 0;
font-size: 0.95rem;
line-height: 1.7;
color: #1a1a1a;
}
.um-contact-direct dd a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: opacity .2s ease;
}
.um-contact-direct dd a:hover { opacity: 0.65; }
body.theme-dark .um-contact-form__row label { color: #aaa; }
body.theme-dark .um-required { color: #e87a64; }
body.theme-dark .um-contact-form input[type="text"]:hover,
body.theme-dark .um-contact-form input[type="email"]:hover,
body.theme-dark .um-contact-form select:hover,
body.theme-dark .um-contact-form textarea:hover {
border-color: #444;
}
body.theme-dark .um-contact-form input[type="text"]:focus,
body.theme-dark .um-contact-form input[type="email"]:focus,
body.theme-dark .um-contact-form select:focus,
body.theme-dark .um-contact-form textarea:focus {
border-color: #f5f5f5;
box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}
body.theme-dark .um-contact-form select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23aaa' stroke-width='1.5'><polyline points='2 4.5 6 8.5 10 4.5'/></svg>");
}
body.theme-dark .um-contact-form__submit {
background: #f5f5f5;
color: #1a1a1a;
border-color: #f5f5f5;
}
body.theme-dark .um-contact-form__submit:hover {
background: transparent;
color: #f5f5f5;
}
body.theme-dark .um-contact-direct { color: #ddd; }
body.theme-dark .um-contact-direct__row { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-contact-direct dt { color: #aaa; }
body.theme-dark .um-contact-direct dd { color: #f1f1f1; }
@media (max-width: 600px) {
.um-contact-form { gap: 1.2rem; }
.um-contact-form__submit { width: 100%; padding: 0.95rem 1rem; }
.um-contact-direct__row { grid-template-columns: 6.5em 1fr; gap: 0.3rem 1rem; }
}
.um-section__head {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.um-section__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.32em;
color: #c8a36b;
font-weight: 500;
margin: 0 0 0.6rem;
text-transform: none;
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
}
.um-section__title {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: 1.85rem;
letter-spacing: 0.32em;
font-weight: 400;
color: #1a1a1a;
margin: 0;
line-height: 1.4;
}
.um-section__title--en {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-section__title-link {
text-decoration: none;
color: inherit;
display: inline-block;
transition: opacity 0.25s ease;
}
.um-section__title-link:hover { opacity: 0.65; }
.um-section__rule {
display: block;
width: 56px;
height: 1px;
background: #c8a36b;
margin: 1.2rem auto 1.4rem;
}
.um-section__sub {
font-size: 0.9rem;
line-height: 1.95;
letter-spacing: 0.08em;
color: #666;
margin: 0;
}
.um-section__cta-wrap {
display: flex;
justify-content: center;
margin-top: 2.4rem;
}
.um-section__cta-btn {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.95rem 2.2rem;
border: 1px solid #1a1a1a;
border-radius: 999px;
color: #1a1a1a;
text-decoration: none;
font-size: 0.82rem;
letter-spacing: 0.22em;
font-weight: 500;
background: transparent;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.um-section__cta-btn:hover {
background: #1a1a1a;
color: #fff;
transform: translateY(-1px);
}
.um-section__cta-arrow {
transition: transform 0.25s ease;
}
.um-section__cta-btn:hover .um-section__cta-arrow {
transform: translateX(3px);
}
body.theme-dark .um-section__title { color: #f5f5f5; }
body.theme-dark .um-section__sub { color: #aaa; }
body.theme-dark .um-section__cta-btn { color: #f5f5f5; border-color: #f5f5f5; }
body.theme-dark .um-section__cta-btn:hover { background: #f5f5f5; color: #1a1a1a; }
.um-section--services { background: rgba(0, 0, 0, 0.02); }
body.theme-dark .um-section--services { background: rgba(255, 255, 255, 0.02); }
.um-services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.6rem;
margin: 3rem auto 0;
max-width: 1100px;
}
.um-service-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.2, .7, .25, 1), box-shadow 0.35s ease;
}
.um-service-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.18);
}
.um-service-card__media {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: #eee;
}
.um-service-card__media-inner {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.6s cubic-bezier(.2, .7, .25, 1);
}
.um-service-card:hover .um-service-card__media-inner { transform: scale(1.05); }
.um-service-card__body {
display: flex;
flex-direction: column;
padding: 1.5rem 1.5rem 1.8rem;
gap: 0.45rem;
}
.um-service-card__en {
font-family: 'Cormorant Garamond', 'Times New Roman', serif;
font-style: italic;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: #c8a36b;
}
.um-service-card__ja {
font-size: 1.15rem;
letter-spacing: 0.22em;
font-weight: 400;
color: #1a1a1a;
line-height: 1.4;
}
.um-service-card__desc {
font-size: 0.82rem;
line-height: 1.85;
letter-spacing: 0.04em;
color: #666;
margin-top: 0.4rem;
}
.um-service-card__more {
margin-top: 0.8rem;
font-size: 0.72rem;
letter-spacing: 0.22em;
color: #1a1a1a;
transition: color 0.25s ease, letter-spacing 0.25s ease;
}
.um-service-card:hover .um-service-card__more {
letter-spacing: 0.3em;
}
body.theme-dark .um-service-card {
background: #1a1a1a;
border-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .um-service-card__ja { color: #f5f5f5; }
body.theme-dark .um-service-card__desc { color: #aaa; }
body.theme-dark .um-service-card__more { color: #f5f5f5; }
@media (max-width: 900px) {
.um-services-grid { grid-template-columns: 1fr; gap: 1.2rem; max-width: 520px; }
.um-service-card { flex-direction: row; }
.um-service-card__media { flex: 0 0 40%; aspect-ratio: 1 / 1; }
.um-service-card__body { padding: 1rem 1.2rem; flex: 1; }
}
@media (max-width: 480px) {
.um-service-card { flex-direction: column; }
.um-service-card__media { flex: none; aspect-ratio: 3 / 2; }
}
.um-follow-grid {
display: flex;
justify-content: center;
gap: 1.2rem;
margin: 3rem auto 0;
flex-wrap: wrap;
max-width: 720px;
}
.um-follow-card {
flex: 0 1 240px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding: 1.8rem 1.4rem;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
color: #1a1a1a;
text-decoration: none;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.um-follow-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.18);
}
.um-follow-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.04);
color: #1a1a1a;
transition: background 0.25s ease, color 0.25s ease;
}
.um-follow-card:hover .um-follow-card__icon {
background: #1a1a1a;
color: #fff;
}
.um-follow-card__label {
font-size: 0.92rem;
letter-spacing: 0.18em;
font-weight: 500;
color: #1a1a1a;
}
.um-follow-card__sub {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: #888;
}
body.theme-dark .um-follow-card {
background: #1a1a1a;
border-color: rgba(255, 255, 255, 0.08);
color: #f5f5f5;
}
body.theme-dark .um-follow-card__icon {
background: rgba(255, 255, 255, 0.05);
color: #f5f5f5;
}
body.theme-dark .um-follow-card:hover .um-follow-card__icon {
background: #f5f5f5;
color: #1a1a1a;
}
body.theme-dark .um-follow-card__label { color: #f5f5f5; }
body.theme-dark .um-follow-card__sub { color: #aaa; }
@media (max-width: 480px) {
.um-follow-grid { flex-direction: column; align-items: center; gap: 0.8rem; }
.um-follow-card { flex-basis: 100%; max-width: 320px; width: 100%; }
}
[data-reveal] {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.95s cubic-bezier(.2, .7, .25, 1) var(--um-reveal-delay, 0s),
transform 0.95s cubic-bezier(.2, .7, .25, 1) var(--um-reveal-delay, 0s);
will-change: opacity, transform;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
.um-about-essence {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.um-about-essence .um-essence-teaser__breadcrumb {
margin-top: 0;
}
.um-about-essence::before {
content: '';
display: block;
width: 56px;
height: 1px;
background: #c8a36b;
margin: 0 auto 2rem;
opacity: 0.7;
}
body.theme-dark .um-about-essence::before { background: rgba(255,255,255,0.25); }
.um-mb-toggle,
.um-mb-backdrop,
.um-mb-drawer {
display: none;
}
@media (max-width: 768px), (max-height: 700px) {
.um-side-nav { display: none !important; }
body.has-side-nav main {
padding-right: var(--wp--preset--spacing--50) !important;
}
.um-hero { right: 0 !important; }
body.has-side-nav .alignfull,
body.has-side-nav .wp-block-cover.alignfull,
body.has-side-nav .wp-site-blocks > footer.wp-block-group,
body.has-side-nav footer.wp-block-group.has-background {
width: 100vw !important;
max-width: 100vw !important;
}
main.wp-block-group:has(.um-gallery-grid),
body[class*="gallery"] main.wp-block-group {
padding-right: 1rem !important;
}
.um-mb-toggle {
position: fixed;
top: 0.75rem;
right: 1rem;
z-index: 9500;
height: 32px;
box-sizing: border-box;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 999px;
padding: 0 0.7rem;
cursor: pointer;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.45rem;
color: #555;
transition: opacity 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.um-mb-toggle:hover {
border-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.04);
color: #1a1a1a;
}
.um-mb-toggle__icon {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
width: 18px;
height: 12px;
flex: 0 0 auto;
}
.um-mb-toggle__label {
font-size: 0.72rem;
letter-spacing: 0.28em;
line-height: 1;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
max-width: 100px;
opacity: 1;
transition: max-width 0.35s cubic-bezier(.2,.7,.25,1), opacity 0.4s ease;
}
.um-mb-toggle__bar {
display: block;
width: 100%;
height: 1.5px;
background: currentColor;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
body.um-mb-open .um-mb-toggle__bar:nth-child(1) {
transform: translateY(5.25px) rotate(45deg);
}
body.um-mb-open .um-mb-toggle__bar:nth-child(2) {
opacity: 0;
}
body.um-mb-open .um-mb-toggle__bar:nth-child(3) {
transform: translateY(-5.25px) rotate(-45deg);
}
body.um-mb-open .um-mb-toggle__label {
max-width: 0;
opacity: 0;
}
body.um-mb-open .um-mb-toggle {
z-index: 9600;
color: #1a1a1a !important;
border-color: transparent;
background: transparent;
padding: 0 0.25rem;
}
body.theme-dark.um-mb-open .um-mb-toggle {
color: #f5f5f5 !important;
}
body.theme-dark .um-mb-toggle {
color: #f5f5f5;
border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-mb-toggle:hover {
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.um-mb-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 9300;
transition: opacity 0.3s ease;
}
.um-mb-backdrop[aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.um-mb-drawer {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(280px, 82vw);
background: #ffffff;
z-index: 9400;
box-shadow: -16px 0 40px -12px rgba(0, 0, 0, 0.18);
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(.32, .72, .25, 1);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
padding: 4.5rem 1.5rem 1.25rem;
overflow-y: auto;
overscroll-behavior: contain;
}
.um-mb-drawer[aria-hidden="false"] {
transform: translateX(0);
}
.um-mb-drawer__nav {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}
.um-mb-drawer__menu {
list-style: none;
margin: 0;
padding: 0;
writing-mode: horizontal-tb;
text-orientation: mixed;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0.1rem;
width: 100%;
}
.um-mb-drawer__menu li {
margin: 0;
padding: 0;
display: block;
}
.um-mb-drawer__menu a {
display: flex;
align-items: center;
padding: 0.85rem 0.4rem;
font-size: 0.95rem;
letter-spacing: 0.16em;
font-weight: 400;
color: #555;
text-decoration: none;
background: transparent;
position: relative;
transition: color .3s ease, padding-left .3s ease;
}
.um-mb-drawer__menu a:hover {
color: #1a1a1a;
padding-left: 0.7rem;
}
.um-mb-drawer__menu .is-current a {
color: #1a1a1a;
font-weight: 600;
letter-spacing: 0.18em;
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
}
.um-mb-drawer__menu .is-current a::before { display: none !important; }
.um-mb-drawer__menu .um-side-nav__menu-item--cta.is-current a {
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
}
.um-mb-drawer__bottom {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.85rem;
margin: 1.5rem 0 0;
padding: 1rem 0.4rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
width: 100%;
}
body.theme-dark .um-mb-drawer__bottom {
border-top-color: rgba(255, 255, 255, 0.12);
}
.um-mb-drawer__social {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
}
.um-mb-drawer__social li { margin: 0; padding: 0; }
.um-mb-drawer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: #1a1a1a;
background: transparent;
border: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
line-height: 0;
}
.um-mb-drawer__social a svg {
width: 18px;
height: 18px;
}
.um-mb-drawer__social a:hover {
opacity: 0.6;
}
.um-mb-drawer__settings {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.18);
background: transparent;
color: #1a1a1a;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
padding: 0;
margin-top: 0.4rem;
}
.um-mb-drawer__settings svg {
width: 16px;
height: 16px;
}
.um-mb-drawer__settings:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.32);
transform: rotate(30deg);
}
body.um-mb-open {
overflow: hidden;
}
body.theme-dark .um-mb-drawer {
background: #0f0f0f;
box-shadow: -16px 0 40px -12px rgba(0, 0, 0, 0.6);
}
body.theme-dark .um-mb-drawer__menu a { color: #aaa; }
body.theme-dark .um-mb-drawer__menu a:hover { color: #f5f5f5; }
body.theme-dark .um-mb-drawer__menu .is-current a { color: #f5f5f5; }
body.theme-dark .um-mb-drawer__social a { color: #f5f5f5; }
body.theme-dark .um-mb-drawer__settings {
color: #f5f5f5;
border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-mb-drawer__settings:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.45);
}
.um-mb-drawer__menu .um-side-nav__menu-item--cta {
margin: 0 !important;
}
.um-mb-drawer__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #06C755 !important;
padding: 0.85rem 0.4rem;
border: 0;
border-radius: 0;
font-weight: 400;
letter-spacing: 0.16em;
gap: 0.6rem;
justify-content: flex-start;
animation: none;
transition: color .3s ease, padding-left .3s ease;
}
.um-mb-drawer__menu .um-side-nav__menu-item--cta a:hover {
background: transparent;
color: #04A247 !important;
border-color: transparent;
padding-left: 0.7rem;
}
.um-mb-drawer__menu .um-side-nav__menu-item--cta.is-current a {
background: transparent;
color: #06C755 !important;
border-color: transparent;
font-weight: 600;
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
box-shadow: none;
}
.um-mb-drawer__menu .um-side-nav__menu-item--cta.is-current a::before {
display: none;
}
body.theme-dark .um-mb-drawer__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #2AD36E !important;
border-color: transparent;
}
body.theme-dark .um-mb-drawer__menu .um-side-nav__menu-item--cta a:hover {
background: transparent;
color: #4FE08A !important;
}
body.theme-dark .um-mb-drawer__menu .um-side-nav__menu-item--cta.is-current a {
background: transparent;
color: #2AD36E !important;
border-color: transparent;
}
}
@media (min-width: 769px) and (min-height: 701px) and (max-height: 1000px) {
.um-side-nav .um-side-nav__menu a {
padding: 0.7em 0.45em;
letter-spacing: 0.14em;
font-size: 0.82rem;
}
.um-side-nav .um-side-nav__menu .is-current a {
letter-spacing: 0.16em;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta {
top: 0.5rem;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta a {
padding: 0.7em 0.45em;
letter-spacing: 0.16em;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--cta + li {
margin-inline-start: 1.2em;
}
.um-side-nav .um-side-nav__menu .um-side-nav__menu-item--sns {
margin-top: 0.3em;
}
}
@media (max-width: 768px) {
.um-section__title {
font-size: 1.45rem;
letter-spacing: 0.22em;
}
.um-section__eyebrow {
font-size: 0.7rem;
letter-spacing: 0.22em;
}
.um-section__sub {
font-size: 0.875rem;
line-height: 1.85;
}
.um-section__cta-btn {
padding: 0.85rem 1.4rem;
font-size: 0.78rem;
min-height: 44px;
}
.um-services-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
max-width: 100%;
margin-top: 2rem;
}
.um-section--about .um-profile-photo,
.um-section--about .um-profile-photo--top {
min-height: 220px;
}
.um-essence-teaser__quote br,
.um-essence-teaser__lead br,
.um-essence-teaser__body br,
.um-essence-teaser__body p br {
display: none;
}
.um-profile-photos--single .um-profile-photo {
aspect-ratio: 4 / 5;
}
.um-profile-social {
gap: 0.4rem;
}
.um-profile-social__btn,
.um-profile-social .um-ig__trigger {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.um-profile-list li {
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.85rem 0;
}
.um-profile-list__year {
min-width: auto;
font-size: 0.7rem;
letter-spacing: 0.18em;
opacity: 0.6;
}
.um-profile-gear__row {
grid-template-columns: 1fr;
gap: 0.3rem 0;
padding: 0.85rem 0;
}
.um-profile-gear dt {
padding-top: 0;
opacity: 0.85;
}
.um-next-page-wrap {
padding: 1.5rem 1rem !important;
}
.um-next-page-wrap p {
letter-spacing: 0.15em !important;
}
}
.um-bp-for-you {
max-width: 760px;
margin: 0 auto;
padding: 2.4rem 0 0;
}
.um-bp-for-you__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.um-bp-for-you__list li {
position: relative;
padding: 1.15rem 0 1.15rem 2rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
line-height: 1.95;
letter-spacing: 0.04em;
color: #2a2a2a;
}
.um-bp-for-you__list li:first-child {
border-top: 1px solid rgba(0,0,0,0.08);
}
.um-bp-for-you__list li::before {
content: "";
position: absolute;
left: 0;
top: 1.55em;
width: 0.95rem;
height: 1px;
background: #c8a36b;
}
body.theme-dark .um-bp-for-you__list li {
color: #d8d8d8;
border-bottom-color: rgba(255,255,255,0.1);
}
body.theme-dark .um-bp-for-you__list li:first-child { border-top-color: rgba(255,255,255,0.1); }
.um-bp-beforeafter {
max-width: 1080px;
margin: 2.4rem auto 0;
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
}
.um-bp-beforeafter__case {
padding: 1.8rem 1.6rem;
background: rgba(0,0,0,0.025);
border: 1px solid rgba(0,0,0,0.06);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-beforeafter__label {
display: inline-block;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.3em;
color: #888;
margin: 0 0 0.6rem;
text-transform: uppercase;
}
.um-bp-beforeafter__label--before { color: #b08a5a; }
.um-bp-beforeafter__label--after  { color: #1a1a1a; }
.um-bp-beforeafter__text {
font-size: 0.94rem;
line-height: 1.95;
letter-spacing: 0.04em;
color: #2a2a2a;
margin: 0;
}
.um-bp-beforeafter__arrow {
text-align: center;
font-size: 0.85rem;
letter-spacing: 0.32em;
color: #c8a36b;
margin: 0.4rem 0;
}
body.theme-dark .um-bp-beforeafter__case {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.08);
}
body.theme-dark .um-bp-beforeafter__text { color: #d8d8d8; }
body.theme-dark .um-bp-beforeafter__label--after { color: #f1f1f1; }
@media (min-width: 768px) {
.um-bp-beforeafter {
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 1.2rem;
}
.um-bp-beforeafter__arrow {
align-self: center;
margin: 0;
}
}
.um-bp-voice {
max-width: 1100px;
margin: 2.4rem auto 0;
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
}
.um-bp-voice__card {
padding: 2rem 1.8rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
display: flex;
flex-direction: column;
gap: 1rem;
}
.um-bp-voice__quote {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 2.4rem;
line-height: 0.6;
color: rgba(0,0,0,0.16);
margin: 0;
}
.um-bp-voice__text {
font-size: 0.93rem;
line-height: 2.0;
letter-spacing: 0.04em;
color: #2a2a2a;
margin: 0;
flex: 1;
}
.um-bp-voice__name {
font-size: 0.82rem;
letter-spacing: 0.18em;
color: #1a1a1a;
font-weight: 500;
margin: 0;
padding-top: 0.8rem;
border-top: 1px solid rgba(0,0,0,0.08);
}
.um-bp-voice__name small {
display: block;
font-size: 0.72rem;
letter-spacing: 0.1em;
color: #888;
margin-top: 0.3rem;
font-weight: 400;
}
body.theme-dark .um-bp-voice__card {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.1);
}
body.theme-dark .um-bp-voice__quote { color: rgba(255,255,255,0.18); }
body.theme-dark .um-bp-voice__text { color: #d8d8d8; }
body.theme-dark .um-bp-voice__name { color: #f1f1f1; border-top-color: rgba(255,255,255,0.1); }
@media (min-width: 768px) {
.um-bp-voice { grid-template-columns: repeat(3, 1fr); }
}
.um-bp-pricing__grid--four {
grid-template-columns: 1fr;
max-width: 1200px;
}
@media (min-width: 640px) {
.um-bp-pricing__grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.um-bp-pricing__grid--four { grid-template-columns: repeat(4, 1fr); }
}
.um-bp-plan--partner {
border-style: dashed;
border-color: rgba(0,0,0,0.28);
background: rgba(200, 163, 107, 0.04);
}
.um-bp-plan--partner .um-bp-plan__num { color: #c8a36b; }
.um-bp-plan--partner .um-bp-plan__title {
border-bottom: 1px solid rgba(200,163,107,0.4);
padding-bottom: 0.6rem;
}
body.theme-dark .um-bp-plan--partner {
border-color: rgba(200,163,107,0.5);
background: rgba(200,163,107,0.06);
}
.um-bp-pricing__cta {
max-width: 540px;
margin: 2.8rem auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
text-align: center;
}
.um-bp-pricing__cta p {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.88rem;
line-height: 1.95;
letter-spacing: 0.08em;
color: #555;
margin: 0 0 0.6rem;
}
body.theme-dark .um-bp-pricing__cta p { color: #aaa; }
.um-bp-final-cta {
background: #1a1a1a;
color: #f1f1f1;
padding: 5rem 1.5rem;
text-align: center;
}
.um-bp-final-cta__inner {
max-width: 720px;
margin: 0 auto;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-bp-final-cta__eyebrow {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.32em;
color: #c8a36b;
margin: 0 0 1.2rem;
text-transform: uppercase;
}
.um-bp-final-cta__title {
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 300;
letter-spacing: 0.14em;
line-height: 1.5;
color: #fff;
margin: 0 0 1.4rem !important;
}
.um-bp-final-cta__body {
font-size: 0.97rem;
line-height: 2.0;
letter-spacing: 0.04em;
color: #d8d8d8;
margin: 0 0 2.4rem;
}
.um-bp-final-cta__buttons {
display: flex;
flex-direction: column;
gap: 0.8rem;
max-width: 380px;
margin: 0 auto;
}
.um-bp-final-cta .um-bp-cta__btn {
background: #f1f1f1;
color: #1a1a1a !important;
border-color: #f1f1f1;
}
.um-bp-final-cta .um-bp-cta__btn:hover { opacity: 0.88; }
.um-bp-final-cta .um-bp-cta__btn--ghost {
background: transparent;
color: #f1f1f1 !important;
border-color: rgba(255,255,255,0.5);
}
.um-bp-final-cta .um-bp-cta__btn--ghost:hover {
background: #f1f1f1;
color: #1a1a1a !important;
}
@media (min-width: 640px) {
.um-bp-final-cta__buttons { flex-direction: row; justify-content: center; max-width: none; }
.um-bp-final-cta__buttons .um-bp-cta__btn { min-width: 200px; }
}
.um-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.58) 100%);
z-index: 1;
pointer-events: none;
}
.um-hero__copy {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1.5rem;
pointer-events: none;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
color: #fff;
font-weight: 300;
font-size: clamp(1.8rem, 5.5vw, 4rem);
letter-spacing: 0.22em;
line-height: 1.35;
text-shadow: 0 2px 16px rgba(0,0,0,0.25);
margin: 0;
}
.um-hero__sub {
position: absolute;
z-index: 2;
left: 50%;
bottom: clamp(5rem, 12vh, 8rem);
transform: translateX(-50%);
width: calc(100% - 3rem);
max-width: 720px;
text-align: center;
pointer-events: none;
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
color: rgba(255,255,255,0.9);
font-size: clamp(0.85rem, 1.1vw, 1rem);
letter-spacing: 0.18em;
line-height: 1.95;
margin: 0;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
@media (max-width: 640px) {
.um-hero__copy { letter-spacing: 0.16em; }
.um-hero__sub  { font-size: 0.82rem; letter-spacing: 0.12em; line-height: 1.85; }
}
.um-services-grid--hierarchy {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
max-width: 1180px;
margin: 3rem auto 0;
}
@media (min-width: 900px) {
.um-services-grid--hierarchy {
grid-template-columns: 1fr 1.4fr 1fr;
align-items: center;
gap: 1.6rem;
}
}
.um-service-card--primary {
position: relative;
}
.um-service-card--primary .um-service-card__media {
aspect-ratio: 4 / 3;
}
.um-service-card--primary .um-service-card__body {
padding: 1.8rem 1.8rem 2rem;
gap: 0.55rem;
}
.um-service-card--primary .um-service-card__ja {
font-size: 1.3rem;
letter-spacing: 0.24em;
}
.um-service-card--primary::before {
content: "RECOMMENDED";
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.3em;
color: #fff;
background: rgba(26,26,26,0.78);
padding: 0.45rem 0.85rem;
backdrop-filter: blur(6px);
}
@media (min-width: 900px) {
.um-service-card--primary .um-service-card__ja { font-size: 1.45rem; }
.um-service-card--primary .um-service-card__media { aspect-ratio: 3 / 2; }
}
body.theme-dark .um-service-card--primary::before {
background: rgba(245,245,245,0.85);
color: #1a1a1a;
}
.um-service-card__note {
margin-top: 0.5rem;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.14em;
line-height: 1.7;
color: #888;
font-feature-settings: "tnum";
}
body.theme-dark .um-service-card__note { color: #aaa; }
.um-section__cta-btn--ghost {
background: transparent;
border-color: rgba(0,0,0,0.35);
color: #1a1a1a;
}
.um-section__cta-btn--ghost:hover {
background: transparent;
color: #1a1a1a;
border-color: #1a1a1a;
transform: translateY(-1px);
}
body.theme-dark .um-section__cta-btn--ghost {
border-color: rgba(255,255,255,0.4);
color: #f5f5f5;
}
body.theme-dark .um-section__cta-btn--ghost:hover {
background: transparent;
color: #f5f5f5;
border-color: #f5f5f5;
}
.um-section--voices { background: rgba(0,0,0,0.025); }
body.theme-dark .um-section--voices { background: rgba(255,255,255,0.02); }
.um-voices-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.4rem;
max-width: 1100px;
margin: 3rem auto 0;
}
@media (min-width: 768px) {
.um-voices-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}
.um-voice-card {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 1.8rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.um-voice-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 32px -16px rgba(0,0,0,0.14);
}
.um-voice-card__quote {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 2.4rem;
line-height: 0.6;
color: #c8a36b;
opacity: 0.55;
margin: 0;
}
.um-voice-card__text {
font-size: 0.92rem;
line-height: 2.0;
letter-spacing: 0.04em;
color: #2a2a2a;
margin: 0;
flex: 1;
}
.um-voice-card__name {
font-size: 0.82rem;
letter-spacing: 0.18em;
color: #1a1a1a;
font-weight: 500;
margin: 0;
padding-top: 0.9rem;
border-top: 1px solid rgba(0,0,0,0.08);
}
.um-voice-card__name small {
display: block;
font-size: 0.72rem;
letter-spacing: 0.1em;
color: #888;
margin-top: 0.3rem;
font-weight: 400;
}
body.theme-dark .um-voice-card {
background: rgba(255,255,255,0.03);
border-color: rgba(255,255,255,0.1);
}
body.theme-dark .um-voice-card__text { color: #d8d8d8; }
body.theme-dark .um-voice-card__name { color: #f1f1f1; border-top-color: rgba(255,255,255,0.1); }
.um-follow-grid--quad {
display: grid;
grid-template-columns: 1fr;
gap: 0.9rem;
max-width: 960px;
margin: 3rem auto 0;
justify-content: stretch;
}
.um-follow-grid--quad .um-follow-card {
flex: none;
width: 100%;
max-width: none;
}
@media (min-width: 560px) {
.um-follow-grid--quad { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.um-follow-grid--quad { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
}
.um-follow-card__handle {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.06em;
color: #888;
font-feature-settings: "tnum";
margin: 0;
word-break: break-all;
}
body.theme-dark .um-follow-card__handle { color: #aaa; }
ruby {
ruby-position: over;
ruby-align: center;
}
ruby rt {
font-size: 0.52em;
letter-spacing: 0.08em;
color: #888;
font-weight: 400;
line-height: 1.2;
font-feature-settings: "palt";
}
body.theme-dark ruby rt { color: #aaa; }
.um-about-mission,
.um-about-vision {
max-width: 760px;
margin: 2rem auto;
padding: 2.4rem 2rem;
border-left: 2px solid #c8a36b;
background: rgba(200,163,107,0.04);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-about-mission__label,
.um-about-vision__label {
display: block;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.32em;
color: #c8a36b;
margin: 0 0 1rem;
text-transform: uppercase;
}
.um-about-mission__body,
.um-about-vision__body {
font-size: 1.05rem;
line-height: 2.0;
letter-spacing: 0.06em;
color: #1a1a1a;
font-weight: 400;
margin: 0;
}
body.theme-dark .um-about-mission,
body.theme-dark .um-about-vision {
background: rgba(200,163,107,0.06);
border-left-color: #c8a36b;
}
body.theme-dark .um-about-mission__body,
body.theme-dark .um-about-vision__body { color: #f1f1f1; }
.um-about-values {
max-width: 820px;
margin: 2rem auto;
list-style: none;
padding: 0;
counter-reset: um-values;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.um-about-values > li {
counter-increment: um-values;
position: relative;
padding: 1.6rem 0 1.6rem 4rem;
border-top: 1px solid rgba(0,0,0,0.1);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-about-values > li:last-child {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.um-about-values > li::before {
content: counter(um-values, decimal-leading-zero);
position: absolute;
left: 0;
top: 1.7rem;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0.18em;
color: #c8a36b;
font-feature-settings: "tnum";
}
.um-about-values__title {
display: block;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.18em;
color: #1a1a1a;
margin: 0 0 0.6rem;
}
.um-about-values__desc {
font-size: 0.92rem;
line-height: 2.0;
letter-spacing: 0.04em;
color: #555;
margin: 0;
}
body.theme-dark .um-about-values > li {
border-top-color: rgba(255,255,255,0.1);
}
body.theme-dark .um-about-values > li:last-child {
border-bottom-color: rgba(255,255,255,0.1);
}
body.theme-dark .um-about-values__title { color: #f1f1f1; }
body.theme-dark .um-about-values__desc  { color: #aaa; }
.um-bp-cta__btn:focus-visible,
.um-section__cta-btn--ghost:focus-visible,
.um-voice-card:focus-visible,
.um-follow-grid--quad .um-follow-card:focus-visible {
outline: 2px solid #c8a36b;
outline-offset: 3px;
}
.um-voice-card__quote {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(0.96rem, 1.2vw, 1.02rem);
font-style: normal;
line-height: 2.0;
letter-spacing: 0.04em;
color: #2a2a2a;
opacity: 1;
margin: 0;
padding: 0;
quotes: none;
flex: 1;
position: relative;
}
.um-voice-card__quote::before,
.um-voice-card__quote::after {
content: none;
}
.um-voice-card__caption {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding-top: 1rem;
border-top: 1px solid rgba(0,0,0,0.08);
}
.um-voice-card__caption .um-voice-card__name {
padding-top: 0;
border-top: 0;
font-size: 0.82rem;
letter-spacing: 0.18em;
color: #1a1a1a;
font-weight: 500;
margin: 0;
}
.um-voice-card__meta {
font-size: 0.78rem;
letter-spacing: 0.1em;
color: #888;
margin: 0;
}
body.theme-dark .um-voice-card__quote { color: #d8d8d8; }
body.theme-dark .um-voice-card__caption { border-top-color: rgba(255,255,255,0.1); }
body.theme-dark .um-voice-card__caption .um-voice-card__name { color: #f1f1f1; }
body.theme-dark .um-voice-card__meta { color: #aaa; }
.um-bp-hero {
position: relative;
min-height: auto;
display: block;
overflow: visible;
padding: var(--wp--preset--spacing--60, 4rem) 0;
color: #2a2a2a;
}
.um-bp-hero__inner {
position: relative;
z-index: auto;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
text-align: left;
color: inherit;
}
@media (min-width: 768px) {
.um-bp-hero__inner {
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
}
.um-bp-hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
border-radius: 2px;
}
.um-bp-hero__text {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
.um-bp-hero__catch {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 300;
letter-spacing: 0.18em;
line-height: 1.4;
color: #1a1a1a;
margin: 0;
}
.um-bp-hero__sub {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(0.92rem, 1.2vw, 1rem);
letter-spacing: 0.12em;
line-height: 1.95;
color: #555;
margin: 0;
}
.um-bp-hero__en {
display: block;
margin-top: 0.4rem;
font-size: 0.85rem;
letter-spacing: 0.22em;
color: #888;
}
.um-bp-hero .um-bp-hero__bg,
.um-bp-hero .um-bp-hero__overlay {
display: none;
}
body.theme-dark .um-bp-hero { color: #d8d8d8; }
body.theme-dark .um-bp-hero__catch { color: #f1f1f1; }
body.theme-dark .um-bp-hero__sub { color: #aaa; }
body.theme-dark .um-bp-hero__en { color: #888; }
.um-about {
max-width: 880px;
margin: 0 auto;
}
.um-about__header {
text-align: center;
max-width: 760px;
margin: 0 auto;
}
.um-about__section {
max-width: 760px;
margin: 0 auto;
}
.um-about__brand-logo {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0 2rem;
color: #1a1a1a;
}
body.theme-dark .um-about__brand-logo {
color: #f5f5f5;
}
.um-about__brand-logo-mark {
display: inline-block;
width: 280px;
max-width: 80%;
height: 64px;
background-color: currentColor;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
}
@media (max-width: 600px) {
.um-about__brand-logo-mark {
width: 220px;
height: 50px;
}
}
.um-about__tagline-lead {
font-size: 1.375rem;
line-height: 1.7;
letter-spacing: 0.08em;
margin-bottom: 1.75rem;
}
.um-about-bc-logo {
display: block;
width: 180px;
max-width: 56%;
height: 42px;
margin: 1.5rem auto 0.25rem;
background-color: #1a1a1a;
-webkit-mask-image: url('../images/um-logo.png');
mask-image: url('../images/um-logo.png');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
body.theme-dark .um-about-bc-logo { background-color: #f5f5f5; }
.um-about__tagline-lead strong {
font-weight: 500;
letter-spacing: 0.12em;
}
@media (max-width: 600px) {
.um-about__tagline-lead {
font-size: 1.125rem;
}
}
.um-bp-hero__photo[aria-hidden="true"] {
aspect-ratio: 16/9 !important;
max-height: 480px;
}
.um-bp-concept__photo {
max-height: 480px;
}
.um-bp-beforeafter__photo--placeholder {
aspect-ratio: 4/3 !important;
max-height: 260px;
}
.um-bp-voice__avatar {
width: 56px !important;
height: 56px !important;
max-width: 56px;
aspect-ratio: 1/1 !important;
flex-shrink: 0;
}
.um-bp-plan__image,
.um-bp-plan__photo,
.um-bp-plan__photo-placeholder {
aspect-ratio: 16/10 !important;
max-height: 200px;
}
.um-settings-panel[aria-hidden="true"] {
pointer-events: none;
}
.um-bp-pricing__grid--four {
grid-template-columns: 1fr !important;
max-width: 1280px !important;
gap: 1.4rem !important;
margin: 0 auto;
}
@media (min-width: 640px) {
.um-bp-pricing__grid--four {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 1200px) {
.um-bp-pricing__grid--four {
grid-template-columns: repeat(4, 1fr) !important;
}
}
.um-bp-pricing__grid--four .um-bp-plan {
padding: 1.6rem 1.3rem !important;
display: flex;
flex-direction: column;
align-self: stretch;
}
.um-bp-pricing__grid--four .um-bp-plan__num {
font-size: 0.72rem !important;
letter-spacing: 0.22em;
margin: 0 0 0.6rem !important;
}
.um-bp-pricing__grid--four .um-bp-plan__catch {
font-size: 0.96rem !important;
line-height: 1.55 !important;
margin: 0 0 0.8rem !important;
}
.um-bp-pricing__grid--four .um-bp-plan__price {
font-size: 1.5rem !important;
line-height: 1.3 !important;
margin: 0 0 1rem !important;
}
.um-bp-pricing__grid--four .um-bp-plan__price span {
font-size: 0.72rem;
margin-left: 0.2rem;
}
.um-bp-pricing__grid--four .um-bp-plan__spec {
font-size: 0.78rem !important;
line-height: 1.55 !important;
margin: 0 0 1rem !important;
padding: 0.8rem 0;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.um-bp-pricing__grid--four .um-bp-plan__spec dt {
font-size: 0.7rem !important;
color: #888;
margin: 0.3rem 0 0.1rem;
letter-spacing: 0.05em;
}
.um-bp-pricing__grid--four .um-bp-plan__spec dd {
font-size: 0.82rem !important;
line-height: 1.45 !important;
margin: 0 0 0.4rem !important;
color: #2a2a2a;
}
.um-bp-pricing__grid--four .um-bp-plan__desc {
font-size: 0.83rem !important;
line-height: 1.85 !important;
margin: 0 0 0.8rem !important;
}
.um-bp-pricing__grid--four .um-bp-plan__target {
font-size: 0.75rem !important;
line-height: 1.7 !important;
color: #555;
margin: auto 0 0 !important;
padding-top: 1rem;
}
.um-bp-pricing__grid--four .um-bp-plan__note {
font-size: 0.74rem !important;
line-height: 1.6 !important;
color: #888;
margin: 0.6rem 0 0 !important;
}
.um-bp-pricing__grid--four .um-bp-plan__badge {
font-size: 0.68rem !important;
letter-spacing: 0.2em;
padding: 0.3rem 0.7rem !important;
margin: 0 0 0.6rem !important;
}
.um-hero__overlay {
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0 var(--wp--preset--spacing--50, 2.5rem) !important;
background: none !important;
pointer-events: none !important;
}
.um-hero__copy {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
inset: auto !important;
pointer-events: none !important;
}
.um-hero__copy-line { display: block; margin: 0.1em 0; }
@media (max-width: 600px) {
.um-hero__copy {
font-size: clamp(0.95rem, 4.0vw, 1.4rem) !important;
letter-spacing: 0.10em !important;
line-height: 1.85 !important;
}
.um-hero__copy-line {
white-space: nowrap;
}
}
@media (max-width: 360px) {
.um-hero__copy {
font-size: clamp(0.85rem, 4.0vw, 1.2rem) !important;
letter-spacing: 0.06em !important;
}
}
.um-hero__sub {
position: absolute !important;
bottom: var(--wp--preset--spacing--60, 4rem) !important;
left: 50% !important;
top: auto !important;
right: auto !important;
transform: translateX(-50%) !important;
z-index: 6 !important;
width: 100% !important;
height: auto !important;
max-width: 760px !important;
text-align: center !important;
padding: 0 var(--wp--preset--spacing--50, 2.5rem) !important;
}
.um-hero__sub-en {
display: block;
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-size: clamp(0.92rem, 1.2vw, 1.05rem) !important;
letter-spacing: 0.28em;
font-style: italic;
color: rgba(255,255,255,0.94);
margin: 0 0 0.5rem;
}
.um-hero__sub-ja {
display: block;
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif !important;
font-size: clamp(0.74rem, 0.9vw, 0.82rem);
letter-spacing: 0.18em;
color: rgba(255,255,255,0.74);
}
.um-bp-hero__catch {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400 !important;
font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
letter-spacing: 0.22em !important;
line-height: 1.95 !important;
color: #1a1a1a !important;
}
.um-bp-hero__sub {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif !important;
color: #555 !important;
line-height: 2 !important;
}
.um-bp-hero__en {
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-style: italic;
letter-spacing: 0.22em !important;
font-size: 0.95rem !important;
color: #888 !important;
}
.um-about__h1 {
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-weight: 400 !important;
font-size: clamp(2rem, 3.5vw, 2.6rem) !important;
letter-spacing: 0.32em !important;
color: #1a1a1a;
}
.um-about__eyebrow {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif !important;
}
.um-about__h2 {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.7;
letter-spacing: 0.14em;
margin: 0 0 0.45rem;
}
#about-s1 { letter-spacing: 0.2em; }
#about-s1 ruby rt { letter-spacing: 0.05em; font-size: 0.5em; }
.um-about__label-h3 {
font-family: 'Inter Tight', system-ui, 'Noto Sans JP', sans-serif;
font-size: 1.0625rem;
font-weight: 400;
letter-spacing: 0.25em;
margin: 3rem 0 0.8rem;
}
.um-about__h3 {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
}
.um-about__lead {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-size: 1.05rem !important;
line-height: 2.1 !important;
letter-spacing: 0.08em !important;
}
.um-about__section p,
.um-about__body p {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
line-height: 2;
}
.um-about__mission, .um-about__vision,
.um-about__mission p, .um-about__vision p {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 2.05;
}
.um-about__mission .um-about__tagline,
.um-about__vision .um-about__tagline {
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-style: italic;
}
.um-voice-card__quote {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400 !important;
font-size: 0.98rem !important;
line-height: 2.05 !important;
letter-spacing: 0.06em !important;
color: #2a2a2a !important;
font-style: normal !important;
}
.um-voice-card__name,
.um-voice-card__meta {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif !important;
}
.um-bp-pricing__head .um-section__title,
.um-bp-pricing h2 {
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-weight: 400;
letter-spacing: 0.28em !important;
}
.um-bp-plan__catch {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
}
.um-bp-plan__num {
font-family: 'Inter Tight', sans-serif !important;
}
.um-bp-plan__price {
font-family: 'Inter Tight', sans-serif !important;
font-weight: 300;
}
.um-bp-plan__spec dt,
.um-bp-plan__spec dd,
.um-bp-plan__desc,
.um-bp-plan__target,
.um-bp-plan__note {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif !important;
}
.um-bp-final-cta__title {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400 !important;
letter-spacing: 0.22em !important;
line-height: 1.9 !important;
}
.um-bp-final-cta__eyebrow {
font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
font-style: italic;
}
.um-bp-beforeafter h2,
.um-bp-voice h2,
.um-bp-hearing h2 {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif !important;
font-weight: 400 !important;
letter-spacing: 0.18em !important;
line-height: 1.95 !important;
}
.um-bp-final-cta p,
.um-bp-final-cta .has-text-align-center,
.um-bp-final-cta__inner p,
.um-bp-final-cta__body {
color: #f1f1f1 !important;
}
.um-bp-final-cta a {
color: inherit;
}
.um-bp-plan--featured,
.um-bp-plan--featured p,
.um-bp-plan--featured dd,
.um-bp-plan--featured .um-bp-plan__catch,
.um-bp-plan--featured .um-bp-plan__desc,
.um-bp-plan--featured .um-bp-plan__price {
color: #f1f1f1 !important;
}
.um-bp-plan--featured .um-bp-plan__num,
.um-bp-plan--featured .um-bp-plan__spec dt,
.um-bp-plan--featured .um-bp-plan__price span,
.um-bp-plan--featured .um-bp-plan__target,
.um-bp-plan--featured .um-bp-plan__note {
color: #aaa !important;
}
.um-bp-plan--featured .um-bp-plan__badge {
background: #c8a36b !important;
color: #1a1a1a !important;
}
.um-hero__copy { text-shadow: 0 1px 18px rgba(0,0,0,0.45) !important; }
.um-hero__sub-en, .um-hero__sub-ja { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.wp-site-blocks > footer.has-background,
.wp-site-blocks > footer.has-background p,
.wp-site-blocks > footer.has-background .has-text-align-center,
.wp-site-blocks > footer.has-background .has-text-color {
color: #f1f1f1 !important;
}
.wp-site-blocks > footer.has-background a { color: #ddd !important; }
.wp-site-blocks > footer.has-background a:hover { color: #fff !important; }
.um-bp-plan--featured,
.um-bp-plan--featured h2,
.um-bp-plan--featured h3,
.um-bp-plan--featured p,
.um-bp-plan--featured span,
.um-bp-plan--featured dl,
.um-bp-plan--featured dt,
.um-bp-plan--featured dd,
.um-bp-plan--featured div,
.um-bp-plan--featured strong,
.um-bp-plan--featured em,
.um-bp-plan--featured small,
.um-bp-plan--featured li {
color: #f1f1f1 !important;
}
.um-bp-plan--featured .um-bp-plan__num,
.um-bp-plan--featured .um-bp-plan__price span,
.um-bp-plan--featured .um-bp-plan__spec dt,
.um-bp-plan--featured .um-bp-plan__target,
.um-bp-plan--featured .um-bp-plan__note,
.um-bp-plan--featured .um-bp-plan__target strong {
color: #c0c0c0 !important;
}
.um-bp-plan--featured .um-bp-plan__badge {
color: #1a1a1a !important;
background: #f1f1f1 !important;
}
.um-bp-final-cta,
.um-bp-final-cta *,
.um-bp-final-cta h2,
.um-bp-final-cta p,
.um-bp-final-cta span {
color: #f1f1f1 !important;
}
.um-bp-final-cta__eyebrow { color: #c8a36b !important; }
.um-bp-final-cta__body { color: #d8d8d8 !important; }
.wp-site-blocks > footer * {
}
.wp-site-blocks > footer.has-background,
.wp-site-blocks > footer.has-background * {
color: #d8d8d8 !important;
}
.wp-site-blocks > footer.has-background h1,
.wp-site-blocks > footer.has-background h2,
.wp-site-blocks > footer.has-background h3,
.wp-site-blocks > footer.has-background .um-site-logo,
.wp-site-blocks > footer.has-background strong {
color: #f1f1f1 !important;
}
.wp-site-blocks > footer.has-background a {
color: #d8d8d8 !important;
}
.wp-site-blocks > footer.has-background a:hover {
color: #fff !important;
opacity: 0.92;
}
.um-bp-eyebrow,
.um-section__eyebrow,
.um-section__sub,
.um-bp-why__num,
.um-bp-plan__num,
.um-bp-plan__target,
.um-bp-plan__note,
.um-bp-plan__spec dt,
.um-bp-plan__price span,
.um-about__eyebrow,
.um-about__value p:first-child,
.um-about__quote em,
.um-about__quote p:nth-child(2),
.um-bp-hero__en,
.um-bp-beforeafter__label,
.um-bp-voice__name small,
.um-voice-card__meta,
ruby > rt {
color: #6e6e6e !important;
}
.um-bp-plan--featured .um-bp-plan__num,
.um-bp-plan--featured .um-bp-plan__price span,
.um-bp-plan--featured .um-bp-plan__spec dt,
.um-bp-plan--featured .um-bp-plan__target,
.um-bp-plan--featured .um-bp-plan__note {
color: #c0c0c0 !important;
}
.um-profile-list__year,
dt[data-i18n^="about_gear"],
.um-bp-studio__access dt,
.um-bp-plan__target strong,
.um-bp-faq__cat,
.um-bp-closing__sign-role,
.um-bp-hearing__cta .um-bp-cta-card__sub {
color: #6e6e6e !important;
}
footer.has-background,
footer.has-background *,
footer.wp-block-template-part footer.has-background,
footer.wp-block-template-part footer.has-background *,
footer .has-text-align-center {
color: #f1f1f1 !important;
}
footer.has-background a,
footer .has-text-align-center a { color: #d8d8d8 !important; }
footer.has-background a:hover { color: #fff !important; }
.um-bp-voice__item blockquote {
}
.um-bp-voice__item blockquote::before {
}
.um-bp-voice__item blockquote { color: inherit !important; }
.um-bp-final-cta .um-bp-cta__btn,
.um-bp-final-cta a.um-bp-cta__btn {
color: #1a1a1a !important;
background: #f1f1f1 !important;
}
.um-bp-final-cta .um-bp-cta__btn:hover { opacity: 0.88; }
.um-bp-final-cta .um-bp-cta__btn--ghost,
.um-bp-final-cta a.um-bp-cta__btn--ghost {
color: #f1f1f1 !important;
background: transparent !important;
border-color: rgba(255,255,255,0.5) !important;
}
.um-bp-final-cta .um-bp-cta__btn--ghost:hover {
background: #f1f1f1 !important;
color: #1a1a1a !important;
}
html { scroll-behavior: smooth; }
.um-section--about {
padding-bottom: var(--wp--preset--spacing--50, 2.5rem) !important;
}
.um-section--about .um-section__head + * {
margin-top: 1.4rem;
}
.um-section--about .um-profile {
margin-top: 1.4rem !important;
}
.um-section--about .um-section__head,
.um-section--services .um-section__head {
text-align: center !important;
align-items: center !important;
}
.um-section--about .um-section__head .um-section__rule,
.um-section--services .um-section__head .um-section__rule {
margin-left: auto !important;
margin-right: auto !important;
}
.um-section--about .um-section__head > *,
.um-section--services .um-section__head > * {
text-align: center !important;
}
.um-service-card__image,
.um-service-card__photo,
.um-service-card .um-service-card__media,
.um-service-card figure,
.um-service-card img {
aspect-ratio: 4/3 !important;
width: 100% !important;
object-fit: cover !important;
background-color: #f4f4f4;
background-size: cover;
background-position: center;
display: block;
}
.um-section--services .um-section__cta-wrap,
.um-section--services .um-services__ctas {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem !important;
margin-top: 2.2rem;
}
.um-section--services .um-section__cta-wrap > .um-section__cta-btn {
margin: 0 !important;
}
@media (min-width: 768px) {
.um-section--services .um-section__cta-wrap {
gap: 2rem !important;
}
}
.um-hero__copy {
margin-top: -2rem !important;
}
.um-about__more {
margin: 0 auto;
max-width: 760px;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.um-about__more-summary {
list-style: none;
cursor: pointer;
padding: 1.6rem 0;
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.14em;
color: #1a1a1a;
transition: color 0.2s ease;
}
.um-about__more-summary::-webkit-details-marker { display: none; }
.um-about__more-summary:hover { color: #c8a36b; }
.um-about__more-icon {
font-size: 1.2rem;
font-weight: 300;
transition: transform 0.25s ease;
}
.um-about__more[open] .um-about__more-icon { transform: rotate(45deg); }
.um-about__more-body {
padding: 2rem 0 3rem;
animation: um-about__fade 0.4s ease;
}
@keyframes um-about__fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.um-about__story-image {
margin: 0 auto 1rem;
max-width: 760px;
overflow: hidden;
}
.um-about__story-image img {
display: block;
width: 100%;
height: auto;
}
.um-about__story-image--inset {
margin: 1.5rem auto 1.5rem;
max-width: 600px;
}
.um-glance {
max-width: 1080px;
margin: 0 auto;
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.um-glance__cell {
padding: 1.4rem 1.2rem;
text-align: center;
border-right: 1px solid rgba(0,0,0,0.08);
}
.um-glance__cell:last-child { border-right: none; }
@media (prefers-reduced-motion: reduce) {
.um-glance-marquee__track { animation: none; }
}
.um-glance__label {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.28em;
color: #888;
margin: 0 0 0.5rem;
text-transform: uppercase;
}
.um-glance__value {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 1.15rem;
letter-spacing: 0.04em;
color: #1a1a1a;
font-weight: 500;
margin: 0;
line-height: 1.45;
}
@media (max-width: 720px) {
.um-glance { grid-template-columns: 1fr 1fr; }
.um-glance__cell { border-bottom: 1px solid rgba(0,0,0,0.08); }
.um-glance__cell:nth-child(2n) { border-right: none; }
.um-glance__cell:nth-last-child(-n+2) { border-bottom: none; }
}
body.theme-dark .um-glance {
border-top-color: rgba(255,255,255,0.12);
border-bottom-color: rgba(255,255,255,0.12);
}
body.theme-dark .um-glance__cell {
border-right-color: rgba(255,255,255,0.12);
border-bottom-color: rgba(255,255,255,0.12);
}
body.theme-dark .um-glance__label { color: #aaa; }
body.theme-dark .um-glance__value { color: #f1f1f1; }
.um-bp-faq__cat-count {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.78rem;
color: #888;
font-weight: 400;
letter-spacing: 0.12em;
margin-left: 0.4em;
}
body.theme-dark .um-bp-faq__cat-count { color: #aaa; }
.um-bp2 {
--um-bp2-bg: #ffffff;
--um-bp2-bg-soft: #fafafa;
--um-bp2-bg-dark: #1a1a1a;
--um-bp2-line: rgba(0,0,0,0.08);
--um-bp2-text: #1a1a1a;
--um-bp2-muted: #888888;
--um-bp2-body: #2a2a2a;
max-width: none !important;
padding: 0 !important;
}
.um-bp2 .um-bp2-eyebrow {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.32em;
color: var(--um-bp2-muted); margin: 0 0 0.6rem; text-transform: uppercase;
}
.um-bp2 .um-bp2-h2 {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 500;
letter-spacing: 0.08em; line-height: 1.6; color: var(--um-bp2-text);
margin: 0 0 1.4rem !important;
}
.um-bp2 .um-bp2-h3 {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 500;
letter-spacing: 0.1em; line-height: 1.6; color: var(--um-bp2-text);
margin: 0 0 0.9rem !important;
}
.um-bp2 .um-bp2-body {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.97rem; line-height: 2.0; color: var(--um-bp2-body);
margin: 0 0 1.2rem;
}
.um-bp2 .um-bp2-body strong { font-weight: 600; color: var(--um-bp2-text); }
.um-bp2 .um-bp2-body--accent {
padding: 1.2rem 1.6rem;
border-left: 2px solid var(--um-bp2-text);
background: rgba(0,0,0,0.02);
font-weight: 500; color: var(--um-bp2-text);
}
.um-price-notice {
position: relative;
z-index: 5;
background: #f6efe1;
border-bottom: 1px solid #e5dcc6;
color: #4a3e00;
font-size: 0.86rem;
line-height: 1.7;
letter-spacing: 0.03em;
}
.um-price-notice__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0.9rem clamp(1rem, 4vw, 2.4rem);
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
}
.um-price-notice__badge {
flex: 0 0 auto;
padding: 0.25rem 0.65rem;
background: #1a1a1a;
color: #f5d770;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
border-radius: 999px;
}
.um-price-notice__text {
flex: 1 1 320px;
margin: 0;
font-size: 0.86rem;
}
.um-price-notice__text strong {
color: #1a1a1a;
font-weight: 600;
}
.um-price-notice__cta {
flex: 0 0 auto;
padding: 0.45rem 1.05rem;
background: #1a1a1a;
color: #fff;
border-radius: 999px;
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 0.06em;
transition: background .2s, transform .2s;
}
.um-price-notice__cta:hover {
background: #333;
transform: translateX(2px);
}
@media (max-width: 768px) {
.um-price-notice__inner {
padding: 0.85rem 1rem;
gap: 0.6rem;
}
.um-price-notice__text {
flex-basis: 100%;
font-size: 0.8rem;
}
.um-price-notice__cta {
margin-left: auto;
}
}
.um-bp2-hero {
position: relative; height: 90vh; min-height: 600px;
overflow: hidden; margin-bottom: 0;
}
.um-bp2-hero__photo {
position: absolute; inset: 0; z-index: 1;
background-size: cover; background-position: center;
}
.um-bp2-hero__photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
}
.um-bp2-hero--video .um-bp2-hero__video {
position: absolute; inset: 0; z-index: 1;
overflow: hidden;
background: #1a1411;
pointer-events: none;
}
.um-bp2-hero--video .um-bp2-hero__video iframe {
position: absolute;
top: 50%; left: 50%;
z-index: 1;
width: max(100vw, 177.78vh);
height: max(56.25vw, 100vh);
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.um-bp2-hero__video-poster {
position: absolute; inset: 0;
z-index: 3;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: 1;
transition: opacity 700ms ease;
}
.um-bp2-hero__video.is-video-ready .um-bp2-hero__video-poster {
opacity: 0;
pointer-events: none;
}
.um-bp2-hero__video-shield {
position: absolute; inset: 0;
z-index: 5;
background: transparent;
pointer-events: auto;
cursor: default;
-webkit-tap-highlight-color: transparent;
}
.um-bp2-hero--video .um-bp2-hero__video::after {
pointer-events: none;
}
.um-bp2-hero--video .um-bp2-hero__video::after {
content: ""; position: absolute; inset: 0;
z-index: 2; pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 100%);
}
.um-bp2-hero__overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fff; padding: 0 2rem; text-align: center;
}
.um-bp2-hero__crumb {
font-family: 'Inter Tight', sans-serif;
font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,0.7);
text-transform: uppercase; margin-bottom: 2rem;
}
.um-bp2-hero__catch {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 300;
letter-spacing: 0.18em; line-height: 1.5;
color: #fff; margin: 0 0 1.6rem !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.um-bp2-hero__sub {
font-family: 'Inter Tight', sans-serif;
font-size: 0.95rem; letter-spacing: 0.16em; color: rgba(255,255,255,0.85);
line-height: 1.95; margin: 0;
}
.um-bp2-concept {
display: grid; grid-template-columns: 1.2fr 1fr;
align-items: stretch;
}
@media (max-width: 880px) {
.um-bp2-concept { grid-template-columns: 1fr; min-height: auto; }
}
.um-bp2-concept__photo {
background-size: cover; background-position: center;
}
@media (max-width: 880px) {
.um-bp2-concept__photo { aspect-ratio: 4/5; min-height: 480px; }
}
.um-bp2-concept__text {
padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
display: flex; flex-direction: column; justify-content: center;
background: var(--um-bp2-bg);
}
.um-bp2-why {
background: var(--um-bp2-bg-soft);
padding: clamp(4rem, 8vw, 7rem) 0;
}
.um-bp2-why__head {
text-align: center; max-width: 720px;
margin: 0 auto clamp(3rem, 6vw, 5rem); padding: 0 1.5rem;
}
.um-bp2-why__row {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
align-items: center; max-width: 1280px;
margin: 0 auto clamp(2rem, 5vw, 4rem);
}
@media (max-width: 880px) {
.um-bp2-why__row { grid-template-columns: 1fr; gap: 0; }
}
.um-bp2-why__row--reverse .um-bp2-why__photo { order: 2; }
@media (max-width: 880px) {
.um-bp2-why__row--reverse .um-bp2-why__photo { order: 0; }
}
.um-bp2-why__photo {
aspect-ratio: 5 / 4;
background-size: cover; background-position: center;
}
.um-bp2-why__text { padding: clamp(2rem, 5vw, 4rem); }
.um-bp2-why__num {
font-family: 'Inter Tight', sans-serif;
font-size: 0.78rem; font-weight: 500; letter-spacing: 0.32em;
color: var(--um-bp2-muted); margin: 0 0 0.8rem;
}
.um-bp2-why__credits {
font-size: 0.85rem; color: var(--um-bp2-muted); line-height: 1.85;
margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--um-bp2-line);
}
.um-bp2-hearing {
background: var(--um-bp2-bg-dark); color: #f1f1f1;
}
.um-bp2-hearing__photo {
aspect-ratio: 21 / 9;
background-size: cover; background-position: center;
background-color: #2a261d;
}
.um-bp2-hearing__inner {
max-width: 720px; margin: 0 auto;
padding: clamp(4rem, 8vw, 6rem) 1.5rem;
text-align: center;
}
.um-bp2-hearing .um-bp2-eyebrow { color: rgba(255,255,255,0.5); }
.um-bp2-hearing .um-bp2-h2 { color: #fff; }
.um-bp2-hearing .um-bp2-body { color: rgba(255,255,255,0.85); }
.um-bp2-hearing .um-bp2-body--accent {
background: rgba(255,255,255,0.06);
border-left-color: #fff; color: #fff;
}
.um-bp2-hearing__cta {
margin-top: 3rem; padding: 2rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
}
.um-bp2-cta-card__lead { font-size: 0.95rem; margin-bottom: 0.8rem; line-height: 1.9; }
.um-bp2-flow {
padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}
.um-bp2-flow__head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.um-bp2-flow__grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 3vw, 2.5rem);
max-width: 1200px; margin: 0 auto;
}
@media (max-width: 880px) {
.um-bp2-flow__grid { grid-template-columns: 1fr; }
}
.um-bp2-flow__photo {
aspect-ratio: 4/3; margin-bottom: 1.6rem;
background-size: cover; background-position: center;
}
.um-bp2-flow__num {
font-family: 'Inter Tight', sans-serif;
font-size: 0.78rem; letter-spacing: 0.32em;
color: var(--um-bp2-muted); margin: 0 0 0.5rem;
}
.um-bp2-flow__title {
font-family: 'Inter Tight', sans-serif;
font-size: 1.1rem; font-weight: 500; letter-spacing: 0.1em;
margin: 0 0 0.8rem;
}
.um-bp2-flow__body {
font-size: 0.9rem; line-height: 1.95; color: #555; margin: 0;
}
.um-bp2-studio {
background: var(--um-bp2-bg-soft);
padding: 0 0 clamp(4rem, 8vw, 7rem);
}
.um-bp2-studio__photo {
aspect-ratio: 21/9;
background-size: cover; background-position: center;
}
@media (max-width: 720px) {
.um-bp2-studio__photo { aspect-ratio: 4/3; }
}
.um-bp2-studio__inner {
max-width: 880px; margin: 0 auto;
padding: clamp(3rem, 6vw, 5rem) 1.5rem 0;
text-align: center;
}
.um-bp2-studio__access {
margin-top: 2.4rem;
border-top: 1px solid var(--um-bp2-line);
text-align: left;
}
.um-bp2-studio__access > div {
display: grid; grid-template-columns: 120px 1fr; gap: 1rem;
padding: 0.95rem 0; border-bottom: 1px solid var(--um-bp2-line);
font-size: 0.92rem;
}
.um-bp2-studio__access dt {
color: var(--um-bp2-muted); letter-spacing: 0.16em;
font-size: 0.78rem; text-transform: uppercase; padding-top: 0.2em;
}
.um-bp2-pricing {
padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}
.um-bp2-pricing__head {
text-align: center; max-width: 720px;
margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.um-bp2-pricing__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 1.6rem; max-width: 1080px; margin: 0 auto;
}
@media (max-width: 720px) {
.um-bp2-pricing__grid { grid-template-columns: 1fr; }
}
.um-bp2-plan {
padding: 2.4rem 2rem;
border: 1px solid rgba(0,0,0,0.18);
background: #fff;
display: flex; flex-direction: column; position: relative;
font-family: 'Inter Tight', sans-serif;
}
.um-bp2-plan--featured {
background: var(--um-bp2-bg-dark); color: #f1f1f1;
border-color: var(--um-bp2-bg-dark);
}
.um-bp2-plan__badge {
position: absolute; top: -10px; left: 24px;
background: var(--um-bp2-text); color: #fff;
font-size: 0.65rem; letter-spacing: 0.32em;
padding: 4px 12px; text-transform: uppercase;
}
.um-bp2-plan--featured .um-bp2-plan__badge { background: #fff; color: var(--um-bp2-text); }
.um-bp2-plan__badge--annual { background: rgba(0,0,0,0.4); }
.um-bp2-plan__num {
font-size: 1.1rem; font-weight: 500; letter-spacing: 0.25em;
color: var(--um-bp2-text); margin: 0 0 0.9rem;
}
.um-bp2-plan--featured .um-bp2-plan__num { color: #fff; }
.um-bp2-plan__catch {
font-size: 1rem; font-weight: 500; letter-spacing: 0.06em;
margin: 0 0 1rem; line-height: 1.7;
}
.um-bp2-plan__price {
font-size: 1.5rem; letter-spacing: 0.05em; font-weight: 300;
margin: 0 0 1.5rem;
}
.um-bp2-plan__price span {
font-size: 0.85rem; color: var(--um-bp2-muted);
margin-left: 0.4em; letter-spacing: 0.1em;
}
.um-bp2-plan--featured .um-bp2-plan__price span { color: #aaa; }
.um-bp2-plan__spec { margin: 0 0 1.4rem; }
.um-bp2-plan__spec > div {
display: flex; justify-content: space-between; gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
font-size: 0.92rem; line-height: 1.6;
}
.um-bp2-plan--featured .um-bp2-plan__spec > div {
border-bottom-color: rgba(255,255,255,0.12);
}
.um-bp2-plan__spec dt {
color: #888; letter-spacing: 0.1em; min-width: 5em;
}
.um-bp2-plan--featured .um-bp2-plan__spec dt { color: #aaa; }
.um-bp2-plan__spec dd { margin: 0; text-align: right; }
.um-bp2-plan__desc {
font-size: 0.92rem; line-height: 1.95; margin: 0 0 1rem;
}
.um-bp2-plan__target {
font-size: 0.85rem; line-height: 1.85; color: var(--um-bp2-muted);
padding-top: 1rem; margin: auto 0 0;
border-top: 1px solid rgba(0,0,0,0.06);
}
.um-bp2-plan--featured .um-bp2-plan__target {
color: #bbb; border-top-color: rgba(255,255,255,0.12);
}
.um-bp2-plan__target strong { color: var(--um-bp2-text); font-weight: 500; }
.um-bp2-plan--featured .um-bp2-plan__target strong { color: #fff; }
.um-bp2-plan__note {
font-size: 0.78rem; color: var(--um-bp2-muted);
margin-top: 0.8rem; line-height: 1.7;
}
.um-bp2-included, .um-bp2-option {
max-width: 760px; margin: 3rem auto 0;
}
.um-bp2-included__list, .um-bp2-option__list {
list-style: none; padding: 0; margin: 1rem 0 0;
}
.um-bp2-included__list li {
display: flex; align-items: center; gap: 0.9rem;
padding: 0.85rem 0;
font-size: 0.92rem; line-height: 1.85;
border-bottom: 1px solid var(--um-bp2-line);
}
.um-bp2-included__icon {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
color: var(--um-bp2-text);
opacity: 0.7;
}
.um-bp2-included__icon svg {
width: 22px; height: 22px;
display: block;
}
.um-bp2-option__list > div {
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
padding: 0.85rem 0; border-bottom: 1px solid var(--um-bp2-line);
font-size: 0.92rem;
}
.um-bp2-option__list dt { color: var(--um-bp2-text); }
.um-bp2-option__list dd { margin: 0; }
.um-bp2-pay,
.um-bp2-cancel {
max-width: 760px;
margin: clamp(2.4rem, 4vw, 3.6rem) auto 0;
padding-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--um-bp2-line);
}
.um-bp2-pay__list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
}
.um-bp2-pay__list li {
font-size: 1rem;
line-height: 1.9;
color: var(--um-bp2-text);
padding: 0.1rem 0;
letter-spacing: 0.02em;
}
.um-bp2-pay__note {
font-size: 0.82rem;
color: var(--um-bp2-text-soft);
margin: 1.4rem 0 0;
line-height: 1.8;
letter-spacing: 0.02em;
}
.um-bp2-message {
background: var(--um-bp2-bg-soft);
padding: clamp(4rem, 8vw, 7rem) 1.5rem;
text-align: center;
}
.um-bp2-message__avatar {
width: 120px; height: 120px; border-radius: 50%;
margin: 0 auto 2.4rem;
background-size: cover; background-position: center;
}
.um-bp2-message__inner { max-width: 680px; margin: 0 auto; }
.um-bp2-message__inner .um-bp2-body { text-align: left; }
.um-bp2-message__sign { margin: 2.4rem 0 0; text-align: center; }
.um-bp2-message__sign-en {
display: block; font-size: 1.1rem; letter-spacing: 0.16em;
}
.um-bp2-message__sign-role {
display: block; font-size: 0.8rem; color: var(--um-bp2-muted);
letter-spacing: 0.18em; margin-top: 0.4em;
}
.um-bp2-faq {
padding: clamp(4rem, 8vw, 7rem) 1.5rem;
max-width: 880px; margin: 0 auto;
}
.um-bp2-faq__head { text-align: center; margin-bottom: 2.5rem; }
.um-bp2-faq__cat {
font-size: 0.9rem; letter-spacing: 0.18em; color: var(--um-bp2-muted);
margin: 2rem 0 1rem; font-weight: 500;
}
.um-bp2-faq__cat-count {
font-size: 0.78rem; color: var(--um-bp2-muted);
margin-left: 0.4em; font-weight: 400; letter-spacing: 0.12em;
}
.um-bp2-faq__item {
border-bottom: 1px solid var(--um-bp2-line);
}
.um-bp2-faq__item summary {
padding: 1.2rem 2rem 1.2rem 1.6rem;
cursor: pointer; list-style: none; position: relative;
font-size: 0.95rem; letter-spacing: 0.06em; line-height: 1.7;
}
.um-bp2-faq__item summary::-webkit-details-marker { display: none; }
.um-bp2-faq__item summary::before {
content: "Q"; position: absolute; left: 0; top: 1.2rem;
color: var(--um-bp2-muted); letter-spacing: 0.2em;
font-weight: 500; font-size: 0.85rem;
}
.um-bp2-faq__item summary::after {
content: "+"; position: absolute; right: 0; top: 1rem;
color: var(--um-bp2-muted); font-size: 1.2rem;
}
.um-bp2-faq__item[open] summary::after { content: "−"; }
.um-bp2-faq__item p {
padding: 0 0 1.4rem 1.6rem;
font-size: 0.9rem; line-height: 1.95; color: #555;
margin: 0;
}
.um-bp2-final-cta {
background: var(--um-bp2-bg-dark); color: #fff;
padding: clamp(5rem, 10vw, 8rem) 1.5rem;
text-align: center;
}
.um-bp2-final-cta .um-bp2-eyebrow { color: rgba(255,255,255,0.5); }
.um-bp2-final-cta .um-bp2-h2 { color: #fff; }
.um-bp2-final-cta .um-bp2-body { color: rgba(255,255,255,0.85); }
.um-bp2-final-cta__btns {
margin-top: 2.4rem; display: flex; gap: 1rem;
justify-content: center; flex-wrap: wrap;
}
.um-bp2-btn {
display: inline-block; padding: 1.1rem 2.4rem;
background: var(--um-bp2-text); color: var(--um-bp2-bg);
font-family: 'Inter Tight', sans-serif;
font-size: 0.78rem; letter-spacing: 0.32em;
text-transform: uppercase; text-decoration: none;
transition: opacity .2s;
}
.um-bp2-btn:hover { opacity: 0.85; }
.um-bp2-btn--inverted { background: #fff; color: var(--um-bp2-text); }
.um-bp2-btn--ghost {
background: transparent; border: 1px solid var(--um-bp2-text);
color: var(--um-bp2-text);
}
.um-bp2-btn--ghost-light {
background: transparent; border: 1px solid #fff; color: #fff;
}
.um-bp2-back {
text-align: center; padding: 3rem 0 5rem;
}
.um-bp2-back a {
font-size: 0.85rem; letter-spacing: 0.28em; color: var(--um-bp2-muted);
text-decoration: none;
}
body.theme-dark .um-bp2 {
--um-bp2-bg: #1a1a1a;
--um-bp2-bg-soft: #222;
--um-bp2-line: rgba(255,255,255,0.12);
--um-bp2-text: #f1f1f1;
--um-bp2-muted: #aaa;
--um-bp2-body: #d8d8d8;
}
body.theme-dark .um-bp2-concept__text,
body.theme-dark .um-bp2-plan { background: #222; }
body.theme-dark .um-bp2-plan--featured { background: #0a0a0a; }
body.theme-dark .um-bp2-btn { background: #f1f1f1; color: #1a1a1a; }
body.theme-dark .um-bp2-btn--inverted { background: #f1f1f1; color: #1a1a1a; }
body.theme-dark .um-bp2-btn--ghost { border-color: #f1f1f1; color: #f1f1f1; }
.um-bp2-plans {
max-width: 1080px; margin: 0 auto;
display: flex; flex-direction: column; gap: 24px;
}
.um-bp2-prow {
display: grid; grid-template-columns: 140px 1fr; gap: 36px;
align-items: center;
padding: 36px 48px;
background: #fff; border: 1px solid var(--um-bp2-line);
transition: border-color .2s;
}
.um-bp2-prow:hover { border-color: var(--um-bp2-text); }
@media (max-width: 720px) {
.um-bp2-prow {
grid-template-columns: 1fr; gap: 16px;
padding: 28px 24px;
text-align: left;
}
}
.um-bp2-prow__icon {
width: 120px; height: 120px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--um-bp2-text);
background: var(--um-bp2-bg-soft);
border-radius: 50%;
flex-shrink: 0;
}
.um-bp2-prow__icon svg { width: 60px; height: 60px; }
@media (max-width: 720px) {
.um-bp2-prow__icon { width: 80px; height: 80px; }
.um-bp2-prow__icon svg { width: 44px; height: 44px; }
}
.um-bp2-prow__head {
display: flex; align-items: baseline; gap: 20px;
margin-bottom: 12px; flex-wrap: wrap;
}
.um-bp2-prow__name {
font-family: 'Inter Tight', sans-serif;
font-size: 1.3rem; font-weight: 500; letter-spacing: 0.22em;
color: var(--um-bp2-text); margin: 0 !important;
}
.um-bp2-prow__price {
font-family: 'Inter Tight', sans-serif;
font-size: 1.5rem; font-weight: 300; letter-spacing: 0.04em;
color: var(--um-bp2-text); margin: 0 0 0 auto !important;
line-height: 1.3;
}
.um-bp2-prow__price span {
font-size: 0.78rem; color: var(--um-bp2-muted);
margin-left: 0.3em; letter-spacing: 0.1em;
}
@media (max-width: 720px) {
.um-bp2-prow__price { margin: 0 !important; }
}
.um-bp2-prow__catch {
font-size: 1rem; font-weight: 500; letter-spacing: 0.04em;
color: var(--um-bp2-text); margin-bottom: 12px;
}
.um-bp2-prow__desc {
font-size: 0.92rem; line-height: 1.95;
color: var(--um-bp2-body); margin-bottom: 18px;
}
.um-bp2-prow__specs {
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px 24px;
padding: 16px 0; margin-bottom: 16px;
border-top: 1px solid var(--um-bp2-line);
border-bottom: 1px solid var(--um-bp2-line);
font-size: 0.86rem;
}
.um-bp2-prow__specs > div { display: flex; flex-direction: column; gap: 2px; }
.um-bp2-prow__specs dt {
font-size: 0.68rem; color: var(--um-bp2-muted);
letter-spacing: 0.2em; text-transform: uppercase;
}
.um-bp2-prow__specs dd { margin: 0; font-size: 0.92rem; }
.um-bp2-prow__target {
font-size: 0.85rem; line-height: 1.85; color: var(--um-bp2-muted);
}
.um-bp2-prow__target strong { color: var(--um-bp2-text); font-weight: 500; }
.um-bp2-prow__note {
font-size: 0.78rem; color: var(--um-bp2-muted);
margin-top: 0.8rem; line-height: 1.7;
}
.um-bp2-prow--featured {
background: var(--um-bp2-bg-dark); color: #f1f1f1;
border-color: var(--um-bp2-bg-dark);
}
.um-bp2-prow--featured:hover { border-color: var(--um-bp2-bg-dark); }
.um-bp2-prow--featured .um-bp2-prow__icon {
background: rgba(255,255,255,0.06);
color: #f1f1f1;
}
.um-bp2-prow--featured .um-bp2-prow__name,
.um-bp2-prow--featured .um-bp2-prow__price,
.um-bp2-prow--featured .um-bp2-prow__catch { color: #fff; }
.um-bp2-prow--featured .um-bp2-prow__price span { color: #aaa; }
.um-bp2-prow--featured .um-bp2-prow__desc { color: #ddd; }
.um-bp2-prow--featured .um-bp2-prow__specs {
border-top-color: rgba(255,255,255,0.15);
border-bottom-color: rgba(255,255,255,0.15);
}
.um-bp2-prow--featured .um-bp2-prow__specs dt { color: #aaa; }
.um-bp2-prow--featured .um-bp2-prow__target { color: #bbb; }
.um-bp2-prow--featured .um-bp2-prow__target strong { color: #fff; }
.um-bp2-prow--featured .um-bp2-prow__note { color: #aaa; }
.um-bp2-compare {
max-width: 980px; margin: 48px auto 0;
border: 1px solid var(--um-bp2-line);
background: #fff;
}
.um-bp2-compare__heading {
font-family: 'Inter Tight', sans-serif;
font-size: 0.9rem; font-weight: 500; letter-spacing: 0.24em;
color: var(--um-bp2-text);
padding: 22px 28px;
margin: 0;
text-align: center;
border-bottom: 1px solid var(--um-bp2-line);
}
.um-bp2-compare__wrap {
padding: 8px 24px 24px; overflow-x: auto;
}
.um-bp2-compare__table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: 'Inter Tight', sans-serif;
}
.um-bp2-compare__table thead th {
padding: 18px 12px 14px;
border-bottom: 1px solid rgba(0,0,0,0.16);
text-align: center; vertical-align: top;
min-width: 130px; font-weight: 400;
}
.um-bp2-compare__table thead th:first-child {
text-align: left; min-width: 120px; width: 180px;
}
.um-bp2-compare__name {
display: block;
font-size: 0.9rem; font-weight: 500; letter-spacing: 0.2em;
color: var(--um-bp2-text); margin-bottom: 6px;
}
.um-bp2-compare__price {
display: block;
font-size: 1rem; font-weight: 300; color: var(--um-bp2-text);
letter-spacing: 0.03em;
}
.um-bp2-compare__price small {
display: block;
font-size: 0.65rem; color: var(--um-bp2-muted);
margin-top: 3px; letter-spacing: 0.1em;
}
.um-bp2-compare__was {
display: block;
font-size: 0.72rem;
color: var(--um-bp2-muted);
text-decoration: line-through;
text-decoration-thickness: 1px;
margin-bottom: 2px;
font-weight: 400;
}
.um-bp2-compare__table tbody td {
padding: 12px 14px; font-size: 0.85rem;
border-bottom: 1px solid var(--um-bp2-line);
text-align: center;
}
.um-bp2-compare__table tbody td:first-child {
text-align: left;
color: var(--um-bp2-muted);
font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.um-bp2-compare__yes { color: var(--um-bp2-text); font-size: 1rem; font-weight: 500; }
.um-bp2-compare__no { color: var(--um-bp2-muted); opacity: 0.5; }
.um-bp2-compare__strong { background: rgba(26,26,26,0.04); }
body.theme-dark .um-bp2-prow { background: #222; }
body.theme-dark .um-bp2-prow--featured { background: #0a0a0a; }
body.theme-dark .um-bp2-prow__icon { background: rgba(255,255,255,0.04); }
body.theme-dark .um-bp2-compare { background: #222; }
body.theme-dark .um-bp2-compare__strong { background: rgba(255,255,255,0.04); }
.um-bp2-prow__price-note {
font-size: 0.78rem;
line-height: 1.7;
color: var(--um-bp2-muted);
margin: -0.3rem 0 1rem;
letter-spacing: 0.04em;
display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
}
.um-bp2-prow--featured .um-bp2-prow__price-note { color: #ccc; }
.um-bp2-tag {
display: inline-block;
padding: 3px 10px;
background: var(--um-bp2-text); color: #fff;
font-size: 0.65rem; letter-spacing: 0.28em;
text-transform: uppercase; font-weight: 500;
}
.um-bp2-prow--featured .um-bp2-tag {
background: #fff; color: var(--um-bp2-text);
}
.um-bp2-strike {
text-decoration: line-through;
text-decoration-thickness: 1px;
color: var(--um-bp2-muted);
opacity: 0.7;
}
.um-bp2-prow--featured .um-bp2-strike { color: #aaa; }
.um-top-statement {
background: #fafafa;
padding: clamp(72px, 10vw, 140px) clamp(24px, 6vw, 80px);
text-align: center;
}
.um-top-statement__inner {
max-width: 720px; margin: 0 auto;
}
.um-top-statement__body {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 2.2;
letter-spacing: 0.08em;
color: #2a2a2a;
margin-top: 1.6em;
}
.um-top-statement__body:first-of-type { margin-top: 2.4em; }
.um-top-statement__body em {
font-style: normal;
border-bottom: 1px solid #1a1a1a;
padding-bottom: 2px;
}
body.theme-dark .um-top-statement { background: #222; }
body.theme-dark .um-top-statement__body { color: #d8d8d8; }
body.theme-dark .um-top-statement__body em { border-bottom-color: #f1f1f1; }
.um-top-studio {
padding: 0;
}
.um-top-studio__photo {
aspect-ratio: 21/9;
background-size: cover;
background-position: center;
background-color: #c4bda9;
}
@media (max-width: 720px) {
.um-top-studio__photo { aspect-ratio: 4/3; }
}
.um-top-studio__inner {
max-width: 880px; margin: 0 auto;
padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(4rem, 8vw, 7rem);
text-align: center;
}
.um-top-studio__body {
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
font-size: 0.97rem;
line-height: 2.0;
color: #2a2a2a;
margin: 0 0 2rem;
}
body.theme-dark .um-top-studio__body { color: #d8d8d8; }
.um-section--contact-dark {
background: #1a1a1a !important;
color: #ffffff !important;
}
.um-section--contact-dark .um-section__eyebrow { color: rgba(255,255,255,0.5) !important; }
.um-section--contact-dark .um-section__title { color: #ffffff !important; }
.um-section--contact-dark .um-section__rule { background: rgba(255,255,255,0.5) !important; }
.um-section--contact-dark .um-section__sub { color: rgba(255,255,255,0.85) !important; }
.um-section--contact-dark .um-top-contact-cta__btn {
background: #ffffff !important;
color: #1a1a1a !important;
border-color: #ffffff !important;
}
.um-section--contact-dark .um-top-contact-cta__btn:hover {
opacity: 0.85;
}
body.theme-dark .um-section--contact-dark { background: #0a0a0a !important; }
.um-service-card__note {
display: block;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0,0,0,0.06);
font-size: 0.78rem;
letter-spacing: 0.06em;
color: #888;
line-height: 1.7;
}
body.theme-dark .um-service-card__note {
border-top-color: rgba(255,255,255,0.1);
color: #aaa;
}
.um-nolla-mark {
display: inline-flex;
align-items: center;
gap: 0.32em;
font-family: 'Inter Tight', sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
vertical-align: baseline;
}
.um-nolla-mark::before {
content: "";
width: 0.95em;
height: 0.95em;
display: inline-block;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V5.5A2.5 2.5 0 0 1 5.5 3H9'/%3E%3Cpath d='M21 9V5.5A2.5 2.5 0 0 0 18.5 3H15'/%3E%3Cpath d='M3 15v3.5A2.5 2.5 0 0 0 5.5 21H9'/%3E%3Cpath d='M21 15v3.5A2.5 2.5 0 0 1 18.5 21H15'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
body.theme-dark .um-nolla-mark::before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1f1f1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V5.5A2.5 2.5 0 0 1 5.5 3H9'/%3E%3Cpath d='M21 9V5.5A2.5 2.5 0 0 0 18.5 3H15'/%3E%3Cpath d='M3 15v3.5A2.5 2.5 0 0 0 5.5 21H9'/%3E%3Cpath d='M21 15v3.5A2.5 2.5 0 0 1 18.5 21H15'/%3E%3C/svg%3E");
}
.um-profile__catch {
font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;
font-size: clamp(1.15rem, 1.8vw, 1.55rem);
font-weight: 400;
letter-spacing: 0.1em;
line-height: 2.4;
color: #1a1a1a;
margin: 0 0 2.4rem;
}
body.theme-dark .um-profile__catch { color: #f1f1f1; }
.um-profile__name {
font-size: 1.4rem;
font-weight: 400;
letter-spacing: 0.15em;
}
.um-profile__role {
color: #888888;
font-size: 0.8125rem;
letter-spacing: 0.15em;
line-height: 1.85;
}
.um-profile__intro {
font-size: 0.875rem;
line-height: 1.95;
}
.um-services-editorial {
max-width: 1200px;
margin: 0 auto;
border-top: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
}
.um-service-row {
display: grid;
grid-template-columns: 160px 1fr 1.1fr;
gap: clamp(24px, 5vw, 64px);
padding: clamp(16px, 2.5vw, 32px) clamp(24px, 5vw, 64px);
border-bottom: 1px solid var(--wp--preset--color--line, rgba(0,0,0,0.08));
align-items: center;
text-decoration: none;
color: inherit;
transition: background .2s;
}
.um-service-row:hover { background: rgba(0,0,0,0.015); }
@media (max-width: 880px) {
.um-service-row { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
}
.um-service-row__num {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(4rem, 9vw, 7rem);
font-weight: 200;
line-height: 1;
letter-spacing: 0.02em;
color: #1a1a1a;
opacity: 0.85;
}
.um-service-row__text {
padding-right: clamp(0px, 4vw, 32px);
}
.um-service-row__en {
font-size: 10px;
letter-spacing: 0.4em;
color: #888;
text-transform: uppercase;
display: block;
margin-bottom: 14px;
}
.um-service-row__ja {
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 500;
letter-spacing: 0.06em;
color: #1a1a1a;
margin: 0 0 18px;
line-height: 1.5;
white-space: nowrap;
}
@media (max-width: 880px) {
.um-service-row__ja { white-space: normal; }
}
.um-service-row__desc {
font-size: 0.9rem;
line-height: 2;
color: #2a2a2a;
margin: 0 0 18px;
letter-spacing: 0.04em;
}
.um-service-row__note {
font-size: 0.78rem;
color: #888;
margin: 0;
letter-spacing: 0.04em;
line-height: 1.85;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.um-service-row__photo {
aspect-ratio: 5/4;
background-size: cover;
background-position: center;
background-color: #f0f0f0;
background-image: linear-gradient(135deg, #ececec, #d6d6d6);
}
.um-service-row[data-genre="wedding"] .um-service-row__photo {
background-image: linear-gradient(135deg, #f0f0f0, #dadada);
}
.um-service-row__photo {
position: relative;
overflow: hidden;
transition: box-shadow .45s ease;
}
.um-service-row__photo::after {
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-size: cover;
background-position: center;
transform: scale(1.001);
transition: transform .7s cubic-bezier(.2, .6, .2, 1);
will-change: transform;
}
.um-service-row:hover .um-service-row__photo::after {
transform: scale(1.06);
}
.um-service-row:hover .um-service-row__photo {
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.um-service-row__photo::before {
content: "→";
position: absolute;
z-index: 2;
right: 14px;
bottom: 14px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #1a1a1a;
font-size: 15px;
line-height: 1;
opacity: 0;
transform: translateY(8px);
transition: opacity .4s ease, transform .4s cubic-bezier(.2, .6, .2, 1);
pointer-events: none;
}
.um-service-row:hover .um-service-row__photo::before {
opacity: 1;
transform: translateY(0);
}
body.theme-dark .um-service-row:hover .um-service-row__photo {
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}
@media (prefers-reduced-motion: reduce) {
.um-service-row__photo,
.um-service-row__photo::after,
.um-service-row__photo::before {
transition: none;
}
.um-service-row:hover .um-service-row__photo::after {
transform: none;
}
.um-service-row__photo::before {
opacity: 1;
transform: none;
}
}
body.theme-dark .um-services-editorial { border-top-color: rgba(255,255,255,0.1); }
body.theme-dark .um-service-row { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .um-service-row:hover { background: rgba(255,255,255,0.04); }
body.theme-dark .um-service-row__num { color: #f1f1f1; }
body.theme-dark .um-service-row__ja { color: #f1f1f1; }
body.theme-dark .um-service-row__desc { color: #d8d8d8; }
body.theme-dark .um-service-row__en,
body.theme-dark .um-service-row__note { color: #aaa; }
.um-section--about {
padding-bottom: clamp(0.5rem, 1.5vw, 1.25rem) !important;
}
.um-hero__overlay {
background: none !important;
}
.um-hero__copy {
text-shadow:
0 1px 2px rgba(0,0,0,0.6),
0 2px 18px rgba(0,0,0,0.55),
0 0 32px rgba(0,0,0,0.35) !important;
}
.um-bp2-hero__photo::after {
background:
radial-gradient(ellipse 900px 500px at center, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.30) 65%, rgba(0,0,0,0.10) 100%),
linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.40) 60%, rgba(0,0,0,0.70) 100%) !important;
}
.um-bp2-hero__catch {
text-shadow:
0 1px 2px rgba(0,0,0,0.85),
0 2px 8px rgba(0,0,0,0.7),
0 4px 24px rgba(0,0,0,0.6),
0 0 48px rgba(0,0,0,0.55) !important;
font-weight: 400 !important;
}
.um-bp2-hero__sub {
text-shadow:
0 1px 2px rgba(0,0,0,0.8),
0 2px 14px rgba(0,0,0,0.6) !important;
color: rgba(255,255,255,0.95) !important;
}
.um-bp2-hero__crumb {
text-shadow: 0 1px 8px rgba(0,0,0,0.75) !important;
color: rgba(255,255,255,0.95) !important;
}
.um-bp2-why__process {
margin: 0 0 1.4rem 1.6em;
padding: 0;
font-size: 0.92rem;
line-height: 2.1;
color: var(--um-bp2-body, #2a2a2a);
}
.um-bp2-why__process li {
margin: 0.2rem 0;
}
body.theme-dark .um-bp2-why__process {
color: #d8d8d8;
}
body.theme-dark .um-bp2-why__process li::marker {
color: #aaa;
}
.um-bp2-year-tiers {
margin: 1.4rem 0 1.4rem;
padding: 0;
display: flex; flex-direction: column; gap: 12px;
}
.um-bp2-year-tier {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
padding: 16px 18px;
background: rgba(0,0,0,0.025);
border-left: 2px solid var(--um-bp2-text);
align-items: center;
}
.um-bp2-year-tier dt {
font-family: 'Inter Tight', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--um-bp2-text);
}
.um-bp2-year-tier dd {
margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.um-bp2-year-tier__price {
font-size: 1.15rem;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--um-bp2-text);
}
.um-bp2-year-tier__price small {
font-size: 0.72rem;
color: var(--um-bp2-muted);
margin-left: 0.4em;
letter-spacing: 0.1em;
}
.um-bp2-year-tier__sub {
font-size: 0.78rem;
color: var(--um-bp2-muted);
letter-spacing: 0.06em;
}
.um-bp2-year-tier__more {
display: inline-flex;
align-items: center;
gap: 0.4em;
margin-top: 0.45rem;
padding: 0.35rem 0.8rem;
background: rgba(245, 215, 112, 0.12);
border: 1px solid rgba(245, 215, 112, 0.45);
border-radius: 999px;
color: inherit;
text-decoration: none;
font-size: 0.74rem;
letter-spacing: 0.04em;
align-self: flex-start;
transition: background .2s, transform .2s;
}
.um-bp2-year-tier__more:hover {
background: rgba(245, 215, 112, 0.22);
transform: translateX(2px);
}
.um-bp2-prow__savings {
margin: 1.2rem 0 1rem;
padding: 14px 18px;
background: rgba(0,0,0,0.03);
border-left: 2px solid var(--um-bp2-text);
font-size: 0.85rem;
color: var(--um-bp2-body);
line-height: 2;
letter-spacing: 0.04em;
}
.um-bp2-prow__savings strong { color: var(--um-bp2-text); font-weight: 600; }
.um-bp2-prow__savings-note {
display: block;
margin-top: 0.7rem;
padding-top: 0.7rem;
border-top: 1px dashed var(--um-bp2-line);
font-size: 0.78rem;
line-height: 1.85;
color: var(--um-bp2-muted);
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.um-bp2-year-tier {
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 16px;
}
.um-bp2-year-tier dt {
letter-spacing: 0.14em;
}
}
.um-bp2-compare__wrap {
position: relative;
}
.um-bp2-compare__scroll-hint {
display: none;
}
@media (max-width: 600px) {
.um-bp2-compare__scroll-hint {
display: block;
text-align: right;
font-family: 'Inter Tight', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.14em;
color: var(--um-bp2-muted);
padding: 0 24px 6px;
}
.um-bp2-compare__wrap::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 28px;
pointer-events: none;
background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}
body.theme-dark .um-bp2-compare__wrap::after {
background: linear-gradient(to right, rgba(34,34,34,0), #222);
}
}
body.theme-dark .um-bp2-year-tier {
background: rgba(255,255,255,0.04);
border-left-color: #f1f1f1;
}
body.theme-dark .um-bp2-prow__savings {
background: rgba(255,255,255,0.04);
border-left-color: #f1f1f1;
color: #d8d8d8;
}
body.theme-dark .um-bp2-prow__savings strong { color: #fff; }
body.theme-dark .um-bp2-prow__savings-note {
border-top-color: rgba(255,255,255,0.18);
color: #aaa;
}
.um-bp2-prow--featured .um-bp2-prow__price-note {
color: #f1f1f1;
}
.um-bp2-prow--featured .um-bp2-tag {
background: #ffffff;
color: #1a1a1a;
font-weight: 600;
}
.um-bp2-loyalty {
padding: clamp(4rem, 8vw, 7rem) clamp(1.2rem, 5vw, 4rem);
background: var(--um-bp2-bg, #fffaf2);
}
.um-bp2-loyalty__head {
max-width: 720px;
margin: 0 auto 2.5rem;
text-align: center;
}
.um-bp2-loyalty__head .um-bp2-body {
margin-top: 0.9rem;
color: var(--um-bp2-muted);
}
.um-bp2-loyalty__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.um-bp2-loyalty__card {
padding: 2.2rem 1.8rem;
background: #fff;
border: 1px solid var(--um-bp2-line, #d8d2c4);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.um-bp2-loyalty__card--featured {
background: #1a1a1a;
color: #fff;
border-color: #1a1a1a;
}
.um-bp2-loyalty__card--featured .um-bp2-h3,
.um-bp2-loyalty__card--featured .um-bp2-loyalty__catch,
.um-bp2-loyalty__card--featured .um-bp2-body {
color: #fff;
}
.um-bp2-loyalty__card--featured .um-bp2-body strong {
color: #f5d770;
}
.um-bp2-loyalty__num {
font-size: 0.78rem;
letter-spacing: 0.22em;
color: var(--um-bp2-muted);
margin: 0;
}
.um-bp2-loyalty__card--featured .um-bp2-loyalty__num {
color: rgba(255, 255, 255, 0.55);
}
.um-bp2-loyalty__catch {
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.04em;
margin: 0.2rem 0 0.4rem;
}
.um-bp2-loyalty__note {
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px dashed var(--um-bp2-line, #d8d2c4);
font-size: 0.78rem;
color: var(--um-bp2-muted);
}
.um-bp2-loyalty__ult-extra {
margin-top: 0.8rem;
padding: 1.1rem 1.2rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(245, 215, 112, 0.25);
border-radius: 4px;
}
.um-bp2-loyalty__ult-label {
font-size: 0.85rem;
font-weight: 500;
margin: 0 0 0.6rem;
color: #f5d770;
letter-spacing: 0.04em;
}
.um-bp2-loyalty__ult-list {
margin: 0 0 0.7rem;
padding-left: 1.2rem;
list-style: disc;
color: #fff;
}
.um-bp2-loyalty__ult-list li {
margin-bottom: 0.4rem;
font-size: 0.88rem;
line-height: 1.7;
}
.um-bp2-loyalty__ult-list li strong {
color: #f5d770;
font-weight: 500;
}
.um-bp2-loyalty__small {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.68);
margin: 0;
line-height: 1.7;
}
@media (max-width: 768px) {
.um-bp2-loyalty__grid {
grid-template-columns: 1fr;
}
}
.um-bp2-prow--featured .um-bp2-strike {
color: #aaa;
}
.um-bp2-year-tier--recommend {
background: rgba(192, 160, 0, 0.06) !important;
border-left-color: #c0a000 !important;
border-left-width: 3px !important;
position: relative;
}
.um-bp2-year-tier--recommend dt {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.um-bp2-year-tier__badge {
display: inline-block;
padding: 3px 10px;
background: #c0a000;
color: #fff;
font-family: 'Inter Tight', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.18em;
border-radius: 2px;
white-space: nowrap;
}
body.theme-dark .um-bp2-year-tier--recommend {
background: rgba(216, 192, 96, 0.12) !important;
border-left-color: #d8c060 !important;
}
body.theme-dark .um-bp2-year-tier__badge {
background: #d8c060;
color: #1a1a1a;
}
.um-bp2-plans__section {
text-align: center;
padding: 24px 0 16px;
}
.um-bp2-plans__section--annual {
padding-top: 64px;
margin-top: 32px;
border-top: 1px solid var(--um-bp2-line);
}
.um-bp2-plans__section-label {
font-family: 'Inter Tight', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.32em;
color: var(--um-bp2-muted);
text-transform: uppercase;
margin: 0 0 0.6rem;
}
.um-bp2-plans__section-name {
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--um-bp2-text);
margin: 0 0 0.5rem;
line-height: 1.5;
}
.um-bp2-plans__section-sub {
font-size: 0.85rem;
color: var(--um-bp2-muted);
letter-spacing: 0.06em;
margin: 0;
}
body.theme-dark .um-bp2-plans__section--annual {
border-top-color: rgba(255,255,255,0.1);
}
.um-bp2-plantoggle-wrap {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.um-bp2-plantoggle {
display: inline-flex;
gap: 4px;
padding: 5px;
border: 1px solid var(--um-bp2-line);
border-radius: 999px;
background: var(--um-bp2-bg-soft);
}
.um-bp2-plantoggle__btn {
appearance: none; -webkit-appearance: none;
border: 0; background: transparent; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 11px clamp(26px, 5vw, 52px);
border-radius: 999px;
color: var(--um-bp2-muted);
font-family: 'Inter Tight', 'Noto Sans JP', sans-serif;
transition: background .25s ease, color .25s ease;
}
.um-bp2-plantoggle__btn:hover { color: var(--um-bp2-text); }
.um-bp2-plantoggle__btn.is-active {
background: var(--um-bp2-bg-dark);
color: #fff;
}
.um-bp2-plantoggle__ja {
font-size: 1rem; font-weight: 500; letter-spacing: 0.14em; line-height: 1.4;
}
.um-bp2-plantoggle__en {
font-size: 0.62rem; font-weight: 400; letter-spacing: 0.22em;
text-transform: uppercase; opacity: 0.65;
}
.um-bp2-plantoggle__btn.is-active .um-bp2-plantoggle__en { opacity: 0.8; }
.um-bp2-plans__pane {
display: flex; flex-direction: column; gap: 24px;
}
.um-bp2-plans__pane[hidden] { display: none; }
.um-bp2-plans__pane.is-active {
animation: um-bp2-pane-fade .4s ease both;
}
@keyframes um-bp2-pane-fade {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.um-bp2-plans__pane.is-active { animation: none; }
}
@media (max-width: 520px) {
.um-bp2-plantoggle { display: flex; width: 100%; }
.um-bp2-plantoggle__btn { flex: 1; padding: 11px 8px; }
}
body.theme-dark .um-bp2-plantoggle {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.12);
}
.um-bp2-prow__more {
display: inline-flex;
align-items: center;
gap: 0.6em;
margin: -0.4rem 0 1.2rem;
padding: 0.55rem 1rem;
background: rgba(245, 215, 112, 0.12);
border: 1px solid rgba(245, 215, 112, 0.45);
border-radius: 999px;
color: inherit;
text-decoration: none;
font-size: 0.82rem;
letter-spacing: 0.04em;
transition: background .2s, transform .2s;
}
.um-bp2-prow__more:hover {
background: rgba(245, 215, 112, 0.22);
transform: translateX(2px);
}
.um-bp2-prow__more-q {
font-weight: 500;
}
.um-bp2-prow__more-arrow {
font-size: 0.95rem;
transition: transform .2s;
}
.um-bp2-prow__more:hover .um-bp2-prow__more-arrow {
transform: translateX(3px);
}
.um-bp2-prow--featured .um-bp2-prow__more {
color: #fff;
background: rgba(245, 215, 112, 0.18);
border-color: rgba(245, 215, 112, 0.6);
}
.um-bp2-prow--featured .um-bp2-prow__more:hover {
background: rgba(245, 215, 112, 0.32);
}
.um-bp2-cta-back {
padding: clamp(4rem, 8vw, 6.5rem) 1.5rem;
background: var(--um-bp2-bg-soft);
text-align: center;
}
.um-bp2-cta-back__inner {
max-width: 720px;
margin: 0 auto;
}
.um-bp2-cta-back__inner .um-bp2-body {
margin-top: 1.5rem;
text-align: center;
}
.um-bp2-cta-back__btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 2.4rem;
}
.um-bp2 {
--um-bp2-bg: #ffffff;
--um-bp2-bg-soft: #f4f1ea;
--um-bp2-bg-cream: #efe9dc;
--um-bp2-bg-dark: #1a1a1a;
--um-bp2-line: rgba(0,0,0,0.10);
--um-bp2-text: #1a1a1a;
--um-bp2-muted: #6f6a62;
--um-bp2-body: #2a2a2a;
--um-bp2-text-soft: #555550;
}
.um-bp2-concept__text { background: var(--um-bp2-bg-cream); }
.um-bp2-why          { background: var(--um-bp2-bg); }
.um-bp2-flow         { background: var(--um-bp2-bg-soft); }
.um-bp2-studio       { background: var(--um-bp2-bg); }
.um-bp2-pricing      { background: var(--um-bp2-bg-soft); }
.um-bp2-loyalty      { background: var(--um-bp2-bg); }
.um-bp2-faq          { background: var(--um-bp2-bg-soft); max-width: none; }
.um-bp2-faq__head,
.um-bp2-faq__cat,
.um-bp2-faq__item { max-width: 880px; margin-left: auto; margin-right: auto; }
.um-bp2 .um-glance { background: var(--um-bp2-bg); }
.um-bp2-prow:not(.um-bp2-prow--featured),
.um-bp2-compare,
.um-bp2-loyalty__card:not(.um-bp2-loyalty__card--featured) { background: #ffffff; }
.um-bp2 .um-bp2-eyebrow { color: var(--um-bp2-muted); margin: 0 0 0.9rem; }
.um-bp2 .um-bp2-h2 { line-height: 1.55; letter-spacing: 0.06em; }
.um-bp2 .um-bp2-body { color: var(--um-bp2-body); line-height: 1.95; }
.um-bp2-flow__body,
.um-bp2-faq__item p { color: #4a4a46; }
.um-bp2-why__text {
padding: clamp(2.2rem, 5vw, 4rem);
display: flex; flex-direction: column;
justify-content: center;
}
.um-bp2-why__text > .um-bp2-body,
.um-bp2-why__text > .um-bp2-why__process {
max-width: 40em;
}
.um-bp2-why__num {
font-size: 0.82rem; letter-spacing: 0.34em;
color: var(--um-bp2-muted); margin: 0 0 1rem;
}
.um-bp2-why .um-bp2-h3 {
font-size: clamp(1.15rem, 1.9vw, 1.45rem);
line-height: 1.55; margin: 0 0 1.2rem !important;
}
.um-bp2-why__text > .um-bp2-body { margin-bottom: 1.4rem; }
.um-bp2-why__text > .um-bp2-body:last-child { margin-bottom: 0; }
.um-bp2-why__process {
background: rgba(0,0,0,0.025);
border-left: 2px solid var(--um-bp2-text);
margin: 0 0 1.4rem;
padding: 0.9rem 1.2rem 0.9rem 2.6em;
list-style: decimal;
}
.um-bp2-why__row {
grid-template-columns: 0.85fr 1.15fr;
align-items: stretch;
}
.um-bp2-why__photo { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 880px) {
.um-bp2-why__row { grid-template-columns: 1fr; }
.um-bp2-why__photo { aspect-ratio: 5/4; min-height: 0; }
}
.um-bp2-concept { grid-template-columns: 1fr 1fr; }
.um-bp2-concept__text { padding: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 4rem); }
@media (max-width: 880px) {
.um-bp2-concept__photo { aspect-ratio: 16/10; min-height: 0; }
}
.um-bp2-hearing .um-bp2-body,
.um-bp2-final-cta .um-bp2-body { color: rgba(255,255,255,0.92); }
.um-bp2-hearing .um-bp2-eyebrow,
.um-bp2-final-cta .um-bp2-eyebrow { color: rgba(255,255,255,0.6); }
.um-bp2-cta-card__note { opacity: 1 !important; color: rgba(255,255,255,0.7) !important; }
.um-bp2-btn {
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1.3;
}
.um-bp2-plantoggle__btn { min-height: 48px; }
.um-bp2-faq__item summary { min-height: 44px; }
.um-bp2-prow__more,
.um-bp2-year-tier__more { min-height: 38px; }
.um-bp2-faq__item summary:focus-visible,
.um-bp2-btn:focus-visible,
.um-bp2-plantoggle__btn:focus-visible {
outline: 2px solid var(--um-bp2-text);
outline-offset: 3px;
}
body.theme-dark .um-bp2-faq__item summary:focus-visible,
body.theme-dark .um-bp2-btn:focus-visible,
body.theme-dark .um-bp2-plantoggle__btn:focus-visible {
outline-color: #f1f1f1;
}
.um-bp2-studio__photo,
.um-bp2-hearing__photo { aspect-ratio: 12 / 5; }
@media (max-width: 720px) {
.um-bp2-studio__photo,
.um-bp2-hearing__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
.um-bp2-hero__catch { letter-spacing: 0.12em; }
.um-bp2-why__text { padding: 2rem 1.4rem 2.4rem; }
.um-bp2-flow,
.um-bp2-pricing,
.um-bp2-loyalty { padding-left: 1.4rem; padding-right: 1.4rem; }
.um-bp2-prow__specs { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.um-bp2-studio__access > div { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.85rem 0; }
}
body.theme-dark .um-bp2 {
--um-bp2-bg: #161616;
--um-bp2-bg-soft: #202020;
--um-bp2-bg-cream: #242018;
--um-bp2-line: rgba(255,255,255,0.12);
--um-bp2-text: #f4f4f2;
--um-bp2-muted: #b3b0a9;
--um-bp2-body: #e2e2de;
--um-bp2-text-soft: #c8c8c2;
}
body.theme-dark .um-bp2-concept__text { background: var(--um-bp2-bg-cream); }
body.theme-dark .um-bp2-why     { background: var(--um-bp2-bg); }
body.theme-dark .um-bp2-flow    { background: var(--um-bp2-bg-soft); }
body.theme-dark .um-bp2-studio  { background: var(--um-bp2-bg); }
body.theme-dark .um-bp2-pricing { background: var(--um-bp2-bg-soft); }
body.theme-dark .um-bp2-loyalty { background: var(--um-bp2-bg); }
body.theme-dark .um-bp2-faq     { background: var(--um-bp2-bg-soft); }
body.theme-dark .um-bp2 .um-glance { background: var(--um-bp2-bg); }
body.theme-dark .um-bp2-prow,
body.theme-dark .um-bp2-compare,
body.theme-dark .um-bp2-loyalty__card { background: #242424; }
body.theme-dark .um-bp2-prow--featured,
body.theme-dark .um-bp2-loyalty__card--featured { background: #0d0d0d; }
body.theme-dark .um-bp2-flow__body,
body.theme-dark .um-bp2-faq__item p { color: #cfcfca; }
body.theme-dark .um-bp2-why__process { background: rgba(255,255,255,0.05); }
.um-about--sidebar { max-width: 1180px; margin: 0 auto; }
.um-about__pagehead {
text-align: center;
padding: 0 0 2.4rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 3.2rem;
}
.um-about__pagehead-title {
font-size: 2rem;
font-weight: 300;
letter-spacing: 0.28em;
margin: 0;
}
.um-about__pagehead-sub {
color: #888;
font-size: 0.8125rem;
letter-spacing: 0.22em;
margin: 0.6rem 0 0;
text-transform: uppercase;
}
.um-about-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 4rem;
align-items: start;
}
.um-about-side {
position: sticky;
top: 5.5rem;
align-self: start;
background: #fff;
padding: 1.8rem 1.6rem 1.6rem;
border: 1px solid rgba(0,0,0,0.07);
border-radius: 12px;
}
.um-about-side__photo {
margin-bottom: 1.2rem;
}
.um-about-side__photo .um-profile-photo--1 {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 8px;
}
.um-about-side__name {
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.08em;
margin: 0.4rem 0 0.2rem;
}
.um-about-side__aka {
color: #888;
font-size: 0.74em;
font-weight: 300;
letter-spacing: 0.18em;
margin-left: 0.4em;
text-transform: none;
white-space: nowrap;
}
.um-about-side__aka-word {
font-style: normal;
text-transform: lowercase;
margin-right: 0.3em;
letter-spacing: 0.04em;
}
.um-about-side__role {
font-size: 0.65rem;
letter-spacing: 0.22em;
color: #888;
margin: 0 0 1.4rem;
text-transform: uppercase;
}
.um-about-side__facts {
margin: 0;
padding: 1rem 0;
border-top: 1px solid rgba(0,0,0,0.07);
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.um-about-side__facts > div { margin-bottom: 0.85rem; }
.um-about-side__facts > div:last-child { margin-bottom: 0; }
.um-about-side__facts dt {
font-size: 0.62rem;
letter-spacing: 0.22em;
color: #999;
text-transform: uppercase;
margin-bottom: 0.2rem;
}
.um-about-side__facts dd {
margin: 0;
font-size: 0.82rem;
color: #333;
line-height: 1.7;
}
.um-about-side__social {
margin: 1.4rem 0 0 !important;
justify-content: flex-start !important;
}
.um-about-main {
min-width: 0;
}
.um-about-main .um-about__section { margin: 0; }
.um-about-details {
margin-top: 1.5rem;
padding-top: 3rem;
border-top: 1px solid rgba(0,0,0,0.08);
}
body.theme-dark .um-about-side {
background: #1f1f1f;
border-color: rgba(255,255,255,0.08);
}
body.theme-dark .um-about-side__facts {
border-top-color: rgba(255,255,255,0.08);
border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .um-about-side__facts dd { color: #ddd; }
body.theme-dark .um-about-side__name { color: #f1f1f1; }
body.theme-dark .um-about__pagehead {
border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .um-about-details {
border-top-color: rgba(255,255,255,0.08);
}
@media (max-width: 900px) {
.um-about-grid {
grid-template-columns: 1fr;
gap: 2.4rem;
}
.um-about-side {
position: static;
max-width: 420px;
margin: 0 auto;
}
.um-about__pagehead-title { font-size: 1.6rem; letter-spacing: 0.22em; }
}
.um-about--tabs { max-width: 880px; margin: 0 auto; }
.um-about-tabnav {
display: inline-flex;
margin: 0 auto 3rem;
padding: 0.35rem;
background: #f4f1ea;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.06);
width: auto;
}
.um-about-tabnav__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.7rem;
border: 0;
background: transparent;
border-radius: 999px;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.28em;
color: #666;
cursor: pointer;
transition: background .25s, color .25s;
text-transform: uppercase;
}
.um-about-tabnav__btn:hover { color: #1a1a1a; }
.um-about-tabnav__btn.is-active {
background: #fff;
color: #1a1a1a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
}
.um-about--tabs .um-tab-panel {
opacity: 0;
transition: opacity .3s ease;
}
.um-about--tabs .um-tab-panel.is-active {
opacity: 1;
}
.um-about--tabs > .um-about__pagehead,
.um-about--tabs > .um-about-tabnav {
display: block;
}
.um-about--tabs > .um-about-tabnav {
text-align: center;
background: transparent;
border: 0;
padding: 0;
}
.um-about--tabs > .um-about-tabnav > .um-about-tabnav__btn:first-child {
margin-left: 0;
}
.um-about--tabs .um-about-tabnav {
background: #f4f1ea;
padding: 0.35rem;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.06);
margin: 0 auto 3rem;
}
.um-about--tabs > * { text-align: left; }
.um-about--tabs > .um-about__pagehead,
.um-about--tabs > nav.um-about-tabnav { text-align: center; }
.um-about--tabs > nav.um-about-tabnav { display: flex; justify-content: center; }
body.page-id-8 main.wp-block-group,
body.page-id-12 main.wp-block-group { padding-top: 0 !important; }
body.page-id-8 main > *:first-child,
body.page-id-12 main > *:first-child { padding-top: calc(64px + 0.75rem) !important; }
@media (max-width: 768px) {
body.page-id-8 main > *:first-child,
body.page-id-12 main > *:first-child { padding-top: calc(56px + 0.5rem) !important; }
}
body.theme-dark .um-about-tabnav {
background: #2a2a2a;
border-color: rgba(255,255,255,0.08);
}
body.theme-dark .um-about-tabnav__btn { color: #aaa; }
body.theme-dark .um-about-tabnav__btn:hover { color: #fff; }
body.theme-dark .um-about-tabnav__btn.is-active {
background: #f1f1f1;
color: #1a1a1a;
}
@media (max-width: 600px) {
.um-about-tabnav__btn {
padding: 0.5rem 1.2rem;
font-size: 0.7rem;
letter-spacing: 0.22em;
}
}
.um-map-transition {
position: fixed;
inset: 0;
background: rgba(8, 8, 8, 0.94);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
z-index: 9995;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(.22,.7,.22,1);
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(ellipse at center, rgba(40,40,40,0.55) 0%, rgba(0,0,0,0.95) 70%);
}
.um-map-transition.is-visible {
opacity: 1;
}
.um-map-transition__inner {
text-align: center;
color: #fff;
}
.um-map-transition__city {
font-size: clamp(1.0rem, 2.2vw, 1.35rem);
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 1rem;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s 0.12s ease, transform 0.6s 0.12s cubic-bezier(.22,.7,.22,1);
font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-map-transition__title {
font-size: clamp(2.2rem, 7vw, 4.5rem);
letter-spacing: 0.22em;
font-weight: 500;
color: #ffffff;
margin: 0;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.55s 0.22s ease, transform 0.7s 0.22s cubic-bezier(.22,.7,.22,1);
font-family: 'Inter Tight', system-ui, -apple-system, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
.um-map-transition.is-visible .um-map-transition__city,
.um-map-transition.is-visible .um-map-transition__title {
opacity: 1;
transform: translateY(0);
}
.um-side-nav {
display: none !important;
}
.um-site-logo--fixed {
display: none !important;
}
body:not(.home) main.wp-block-group {
padding-top: calc(var(--wp--preset--spacing--70) + 64px) !important;
}
body.admin-bar:not(.home) main.wp-block-group {
padding-top: calc(var(--wp--preset--spacing--70) + 64px + 32px) !important;
}
@media (max-width: 782px) {
body.admin-bar:not(.home) main.wp-block-group {
padding-top: calc(var(--wp--preset--spacing--70) + 64px + 46px) !important;
}
}
@media (max-width: 768px) {
body.um-person-page main.wp-block-group {
padding-top: 74px !important;
}
body.um-person-page.admin-bar main.wp-block-group {
padding-top: calc(74px + 46px) !important;
}
}
.um-hero {
right: 0 !important;
}
body.home .um-top-header {
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom: 0 none !important;
transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease !important;
}
body.home .um-top-header__logo {
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
transition: color 0.35s ease, text-shadow 0.35s ease;
}
body.home .um-top-header__menu a {
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
transition: color 0.35s ease, text-shadow 0.35s ease;
}
body.home .um-top-header__menu a:hover {
color: #ffffff !important;
}
body.home .um-top-header__menu-trigger {
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.5));
}
body.home .um-top-header__menu-trigger:hover,
body.home .um-top-header__menu-trigger:focus-visible,
body.home .um-top-header__menu-zone:hover .um-top-header__menu-trigger,
body.home .um-top-header__menu-zone:focus-within .um-top-header__menu-trigger {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
body.home.um-hdr-over-hero .um-top-header::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 150px;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.38) 0%,
rgba(0, 0, 0, 0.20) 38%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
z-index: -1;
}
body.home:not(.is-past-hero) .um-top-header__menu .um-side-nav__menu-item--cta a {
background: transparent !important;
color: #ffffff !important;
border-color: transparent !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
animation: none !important;
}
body.home:not(.is-past-hero) .um-top-header__menu .um-side-nav__menu-item--cta a:hover {
background: transparent !important;
border-color: transparent !important;
}
body.home.is-past-hero .um-top-header {
background: rgba(255, 255, 255, 0.92) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}
body.home.is-past-hero .um-top-header__logo {
color: #1a1a1a !important;
}
body.home.is-past-hero .um-top-header__menu a {
color: #555 !important;
text-shadow: none;
}
body.home.is-past-hero .um-top-header__menu a:hover {
color: #1a1a1a !important;
}
body.home.is-past-hero .um-top-header__menu .um-side-nav__menu-item--cta a {
background: transparent;
}
body.home.is-past-hero .um-top-header__menu-trigger {
color: #555 !important;
border-color: rgba(0, 0, 0, 0.18) !important;
text-shadow: none;
}
body.home.is-past-hero .um-top-header__menu-trigger:hover,
body.home.is-past-hero .um-top-header__menu-trigger:focus-visible,
body.home.is-past-hero .um-top-header__menu-zone:hover .um-top-header__menu-trigger,
body.home.is-past-hero .um-top-header__menu-zone:focus-within .um-top-header__menu-trigger {
color: #1a1a1a !important;
border-color: rgba(0, 0, 0, 0.4) !important;
background: rgba(0, 0, 0, 0.04) !important;
}
body.theme-dark.home.is-past-hero .um-top-header__menu-trigger {
color: #bbb !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
body.theme-dark.home.is-past-hero .um-top-header__menu-trigger:hover,
body.theme-dark.home.is-past-hero .um-top-header__menu-trigger:focus-visible,
body.theme-dark.home.is-past-hero .um-top-header__menu-zone:hover .um-top-header__menu-trigger,
body.theme-dark.home.is-past-hero .um-top-header__menu-zone:focus-within .um-top-header__menu-trigger {
color: #fff !important;
border-color: rgba(255, 255, 255, 0.45) !important;
background: rgba(255, 255, 255, 0.08) !important;
}
body.theme-dark.home.is-past-hero .um-top-header {
background: rgba(15, 15, 15, 0.92) !important;
border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.theme-dark.home.is-past-hero .um-top-header__logo {
color: #f5f5f5 !important;
}
body.theme-dark.home.is-past-hero .um-top-header__menu a {
color: #bbb !important;
}
body.theme-dark.home.is-past-hero .um-top-header__menu a:hover {
color: #fff !important;
}
body {
--um-hdr-h: 64px;
--um-hdr-top: 0px;
}
body.admin-bar { --um-hdr-top: 32px; }
@media (max-width: 782px) {
body.admin-bar { --um-hdr-top: 46px; }
}
.um-top-header {
position: fixed;
top: var(--um-hdr-top);
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
height: var(--um-hdr-h);
transition: background 0.3s ease;
}
body.theme-dark .um-top-header {
background: rgba(15, 15, 15, 0.92);
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.um-top-header__logo {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
height: 28px;
position: relative;
inset: auto !important;
top: auto !important;
left: auto !important;
color: #1a1a1a;
transition: opacity 0.3s ease;
}
.um-top-header__logo:hover { opacity: 0.7; }
.um-top-header__logo .um-site-logo__mask {
width: 110px;
height: 24px;
}
body.theme-dark .um-top-header__logo {
color: #f5f5f5;
}
@media (min-width: 769px) {
.um-top-header__logo {
margin-left: 4.5px;
}
}
@media (max-width: 768px) {
body:has(.um-breadcrumb) .um-top-header__logo .um-site-logo__mask {
width: 48px;
-webkit-mask-size: auto 24px;
mask-size: auto 24px;
-webkit-mask-position: left center;
mask-position: left center;
}
}
.um-top-header__nav {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
}
.um-top-header__inline-nav { display: none; }
.um-top-header__inline-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(0.85rem, 1.4vw, 1.6rem);
}
.um-top-header__inline-item {
margin: 0;
display: flex;
align-items: center;
}
.um-top-header__inline-item a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
letter-spacing: 0.2em;
line-height: 1;
white-space: nowrap;
text-decoration: none;
transition: color 0.25s ease, opacity 0.25s ease;
}
.um-top-header__inline-item--cta .um-cta-icons {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.um-top-header__inline-item--cta .um-cta-icon { width: 13px; height: 13px; }
@media (min-width: 769px) {
.um-top-header__inline-nav {
display: flex;
flex: 1 1 auto;
justify-content: flex-end;
align-items: center;
min-width: 0;
margin-right: 48px;
}
body.um-inline-nav-collide .um-top-header__inline-nav {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
}
.um-top-header__inline-item a { color: #555; }
body.theme-dark .um-top-header__inline-item a { color: #bbb; }
body.home .um-top-header__inline-item a { color: #ffffff; }
body.home.is-past-hero .um-top-header__inline-item a { color: #555; }
body.theme-dark.home.is-past-hero .um-top-header__inline-item a { color: #bbb; }
.um-top-header__inline-item a:hover { opacity: 0.78; }
.um-top-header__inline-item.is-current a {
font-weight: 600;
animation: um-breadcrumb-loop 5.0s ease-in-out 1.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
.um-top-header__inline-item.is-current a { animation: none; opacity: 1; }
}
.um-top-header__menu-zone {
flex: 1 1 auto;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
}
.um-top-header__menu-trigger {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.75rem;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 999px;
color: #555;
font-size: 0.72rem;
letter-spacing: 0.28em;
line-height: 1;
cursor: pointer;
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.um-top-header__menu-trigger:hover,
.um-top-header__menu-trigger:focus-visible {
color: #1a1a1a;
border-color: rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.04);
outline: none;
}
.um-top-header__menu-trigger .um-top-header__menu-icon {
flex: 0 0 auto;
}
.um-top-header__menu-trigger .um-top-header__menu-label {
font-weight: 400;
display: inline-block;
}
body.theme-dark .um-top-header__menu-trigger {
color: #bbb;
border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-top-header__menu-trigger:hover,
body.theme-dark .um-top-header__menu-trigger:focus-visible {
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.08);
}
@media (min-width: 1px) {
.um-top-header__menu-zone {
position: fixed;
top: var(--um-hdr-top);
right: 1.5rem;
z-index: 1101;
flex: 0 0 auto;
display: inline-flex;
flex-direction: row;
align-items: center;
height: var(--um-hdr-h);
box-sizing: border-box;
background: transparent;
border: 0;
overflow: visible;
}
.um-top-header__menu-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
width: 36px;
box-sizing: border-box;
padding: 0;
border: 0;
background: transparent;
color: #555;
line-height: 1;
cursor: pointer;
max-width: none;
opacity: 1;
transition: color .25s ease, opacity .2s ease;
}
.um-top-header__menu-trigger .um-top-header__menu-label { display: none; }
.um-top-header__menu-trigger .um-top-header__menu-icon { width: 24px; height: 24px; }
.um-top-header__menu-zone:hover .um-top-header__menu-trigger,
.um-top-header__menu-zone:focus-within .um-top-header__menu-trigger,
.um-top-header__menu-zone.is-open .um-top-header__menu-trigger {
color: #1a1a1a;
}
body.theme-dark .um-top-header__menu-trigger {
color: #bbb;
}
body.theme-dark .um-top-header__menu-zone:hover .um-top-header__menu-trigger,
body.theme-dark .um-top-header__menu-zone:focus-within .um-top-header__menu-trigger,
body.theme-dark .um-top-header__menu-zone.is-open .um-top-header__menu-trigger {
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.08);
}
.um-top-header__nav {
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
display: block;
min-width: 250px;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.98);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
pointer-events: none;
transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.25,1), visibility 0s linear .28s;
z-index: 1102;
}
.um-top-header__nav::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.7rem;
height: 0.7rem;
}
.um-top-header__nav::after {
content: "";
position: sticky;
bottom: -0.5rem;
display: block;
height: 30px;
margin: -30px -0.5rem -0.5rem;
border-radius: 0 0 14px 14px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center 8px,
linear-gradient(to top, rgba(255, 255, 255, 0.98) 35%, rgba(255, 255, 255, 0));
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.um-top-header__nav.um-nav--more::after {
opacity: 1;
animation: um-nav-chevron 1.4s ease-in-out infinite;
}
@keyframes um-nav-chevron {
0%, 100% { background-position: center 6px, center bottom; }
50%      { background-position: center 12px, center bottom; }
}
body.theme-dark .um-top-header__nav::after {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center 8px,
linear-gradient(to top, rgba(22, 22, 22, 0.98) 35%, rgba(22, 22, 22, 0));
}
body.theme-dark .um-top-header__nav {
background: rgba(22, 22, 22, 0.98);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.um-top-header__menu-zone:hover .um-top-header__nav,
.um-top-header__menu-zone:focus-within .um-top-header__nav,
.um-top-header__menu-zone.is-open .um-top-header__nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.25,1), visibility 0s linear 0s;
}
.um-top-header__nav-logo {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.5rem 0.9rem 0.7rem 0.9rem;
margin-bottom: 0.3rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
color: #1a1a1a;
transition: opacity 0.2s ease;
}
.um-top-header__nav-logo:hover { opacity: 0.6; }
.um-top-header__nav-logo .um-site-logo__mask {
width: 104px;
height: 22px;
inset: auto !important;
position: relative !important;
}
body.theme-dark .um-top-header__nav-logo {
color: #f5f5f5;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
@media (max-height: 600px) {
.um-top-header__nav {
box-sizing: border-box;
max-height: calc(100vh - 90px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
}
.um-top-header__menu-zone .um-top-header__menu {
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
gap: 0.1rem;
width: 100%;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.um-top-header__menu-zone .um-top-header__menu li { display: block; width: 100%; margin: 0; }
.um-top-header__menu-zone .um-top-header__menu a,
.um-top-header__menu-zone .um-top-header__menu button {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 0.7rem 0.9rem;
border: 0;
border-radius: 9px;
background: transparent;
color: #333;
font-size: 0.82rem;
letter-spacing: 0.18em;
font-weight: 400;
text-align: left;
white-space: nowrap;
cursor: pointer;
text-shadow: none;
transition: background .2s ease, color .2s ease;
}
.um-top-header__menu-zone .um-top-header__menu a:hover,
.um-top-header__menu-zone .um-top-header__menu button:hover {
background: rgba(0, 0, 0, 0.05);
color: #1a1a1a;
}
body.theme-dark .um-top-header__menu-zone .um-top-header__menu a,
body.theme-dark .um-top-header__menu-zone .um-top-header__menu button { color: #ddd; }
body.theme-dark .um-top-header__menu-zone .um-top-header__menu a:hover,
body.theme-dark .um-top-header__menu-zone .um-top-header__menu button:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
body.home .um-top-header__nav .um-top-header__menu a,
body.home .um-top-header__nav .um-top-header__menu button {
color: #333 !important;
text-shadow: none !important;
}
body.theme-dark.home .um-top-header__nav .um-top-header__menu a,
body.theme-dark.home .um-top-header__nav .um-top-header__menu button {
color: #ddd !important;
}
.um-top-header__menu-item--setting {
display: block;
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.theme-dark .um-top-header__menu-item--setting {
border-top-color: rgba(255, 255, 255, 0.1);
}
.um-menu-settings {
display: flex;
flex-direction: column;
gap: 0.65rem;
padding: 0.2rem 0.5rem 0.35rem;
}
.um-menu-settings__field {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.um-menu-settings__label {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.6rem;
letter-spacing: 0.26em;
color: #999;
}
body.theme-dark .um-menu-settings__label { color: #888; }
.um-menu-settings__group {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.35rem;
}
.um-menu-settings__genre-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
box-sizing: border-box;
padding: 0.5rem 2rem 0.5rem 0.8rem;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 10px;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpolyline points='2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
color: #333;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.72rem;
letter-spacing: 0.1em;
line-height: 1.2;
cursor: pointer;
transition: border-color .2s ease;
}
.um-menu-settings__genre-select:hover,
.um-menu-settings__genre-select:focus {
border-color: rgba(0, 0, 0, 0.4);
outline: none;
}
.um-menu-settings__genre-select option { color: #1a1a1a; }
body.theme-dark .um-menu-settings__genre-select {
border-color: rgba(255, 255, 255, 0.22);
color: #ddd;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23aaa' stroke-width='1.5'%3E%3Cpolyline points='2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
}
body.theme-dark .um-menu-settings__genre-select option { color: #1a1a1a; }
.um-menu-settings .um-side-nav__lang-btn,
.um-menu-settings .um-side-nav__theme-btn {
width: auto !important;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.34rem 0.7rem;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
background: transparent;
color: #555;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.66rem;
letter-spacing: 0.12em;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.um-menu-settings .um-side-nav__lang-btn:hover,
.um-menu-settings .um-side-nav__theme-btn:hover,
.um-menu-settings__genre-btn:hover {
border-color: rgba(0, 0, 0, 0.35);
color: #1a1a1a;
}
.um-menu-settings .um-side-nav__lang-btn.is-active,
.um-menu-settings .um-side-nav__theme-btn.is-active,
.um-menu-settings__genre-btn.is-active {
background: #1a1a1a !important;
border-color: #1a1a1a !important;
color: #ffffff !important;
}
.um-menu-settings .um-side-nav__lang-btn.is-active *,
.um-menu-settings .um-side-nav__theme-btn.is-active * {
color: #ffffff !important;
}
body.theme-dark .um-menu-settings .um-side-nav__lang-btn,
body.theme-dark .um-menu-settings .um-side-nav__theme-btn,
body.theme-dark .um-menu-settings__genre-btn {
border-color: rgba(255, 255, 255, 0.22);
color: #bbb;
}
body.theme-dark .um-menu-settings .um-side-nav__lang-btn.is-active,
body.theme-dark .um-menu-settings .um-side-nav__theme-btn.is-active,
body.theme-dark .um-menu-settings__genre-btn.is-active {
background: #f5f5f5 !important;
border-color: #f5f5f5 !important;
color: #1a1a1a !important;
}
body.theme-dark .um-menu-settings .um-side-nav__lang-btn.is-active *,
body.theme-dark .um-menu-settings .um-side-nav__theme-btn.is-active * {
color: #1a1a1a !important;
}
.um-menu-settings__info {
font-size: 0.62rem;
line-height: 1.65;
letter-spacing: 0.02em;
color: #999;
margin: 0.1rem 0.1rem 0;
}
body.theme-dark .um-menu-settings__info { color: #888; }
.um-menu-settings__group--theme { gap: 0.5rem; }
.um-menu-settings__group--theme .um-side-nav__theme-btn {
padding: 0.15rem !important;
border: 0 !important;
border-radius: 50% !important;
background: transparent !important;
}
.um-menu-settings__swatch {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
box-sizing: border-box;
transition: box-shadow .2s ease;
}
.um-menu-settings__swatch--light { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.3); }
.um-menu-settings__swatch--dark  { background: #1a1a1a; border: 1px solid rgba(0, 0, 0, 0.3); }
.um-menu-settings__group--theme .um-side-nav__theme-btn.is-active .um-menu-settings__swatch {
box-shadow: 0 0 0 2px #1a1a1a;
}
body.theme-dark .um-menu-settings__swatch--light { border-color: rgba(255, 255, 255, 0.45); }
body.theme-dark .um-menu-settings__swatch--dark  { border-color: rgba(255, 255, 255, 0.45); }
body.theme-dark .um-menu-settings__group--theme .um-side-nav__theme-btn.is-active .um-menu-settings__swatch {
box-shadow: 0 0 0 2px #f5f5f5;
}
.um-top-header__settings { display: none; }
}
.um-menu-preview {
position: fixed;
box-sizing: border-box;
width: 280px;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.99);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
opacity: 0;
visibility: hidden;
transform: translateX(8px);
pointer-events: none;
z-index: 1103;
transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.um-menu-preview.is-visible {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition:
opacity .25s ease,
transform .25s ease,
top  .34s cubic-bezier(.2, .7, .25, 1),
left .34s cubic-bezier(.2, .7, .25, 1),
visibility 0s linear 0s;
}
.um-menu-preview::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(26, 26, 26, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
pointer-events: none;
opacity: 0;
z-index: 2;
}
body.theme-dark .um-menu-preview::after {
border-color: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}
.um-menu-preview.is-visible::after {
animation: um-menu-preview-blink 1.5s ease-in-out infinite;
}
@keyframes um-menu-preview-blink {
0%, 100% { opacity: 0.12; }
50%      { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.um-menu-preview.is-visible::after { animation: none; opacity: 0.4; }
}
.um-menu-preview__thumb,
.um-menu-preview__video {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 9px;
display: block;
background: #eee;
}
body.theme-dark .um-menu-preview__thumb,
body.theme-dark .um-menu-preview__video { background: #333; }
.um-menu-preview__open {
display: none;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin: 0.6rem 0.1rem 0.1rem;
padding: 0.7rem 1rem;
border-radius: 10px;
background: #1a1a1a;
color: #fff;
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-decoration: none;
}
body.theme-dark .um-menu-preview__open { background: #f5f5f5; color: #1a1a1a; }
.um-menu-preview__close {
display: none;
position: absolute;
top: 0.3rem;
right: 0.45rem;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: #999;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
z-index: 1;
}
.um-menu-preview-backdrop {
position: fixed;
inset: 0;
background: rgba(255, 255, 255, 0.95);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1103;
transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
body.theme-dark .um-menu-preview-backdrop {
background: rgba(8, 8, 8, 0.95);
}
.um-menu-preview-backdrop.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.32s ease;
}
.um-menu-preview__title {
font-family: 'Inter Tight', system-ui, sans-serif;
font-size: 0.8rem;
letter-spacing: 0.18em;
margin: 0.6rem 0.3rem 0.2rem;
color: #1a1a1a;
}
.um-menu-preview__desc {
font-size: 0.72rem;
line-height: 1.75;
letter-spacing: 0.02em;
margin: 0 0.3rem 0.3rem;
color: #666;
}
body.theme-dark .um-menu-preview {
background: rgba(22, 22, 22, 0.99);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
body.theme-dark .um-menu-preview__thumb { background: #333; }
body.theme-dark .um-menu-preview__title { color: #fff; }
body.theme-dark .um-menu-preview__desc { color: #aaa; }
.um-menu-preview.is-modal {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) scale(0.98);
width: min(86vw, 340px);
z-index: 1104;
padding: 0.6rem;
transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.25,1), visibility 0s linear .25s;
}
.um-menu-preview.is-modal.is-visible {
transform: translate(-50%, -50%) scale(1);
}
.um-menu-preview.is-modal .um-menu-preview__open { display: flex; }
.um-menu-preview.is-modal .um-menu-preview__close { display: block; }
.um-menu-preview.is-modal .um-menu-preview__title { margin-top: 0.7rem; }
.um-menu-preview.is-side {
position: fixed;
z-index: 1105;
padding: 0.5rem;
transform: translateX(-14px);
transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.25,1), visibility 0s linear .25s;
}
.um-menu-preview.is-side.is-visible {
transform: translateX(0);
transition:
opacity .25s ease,
transform .3s cubic-bezier(.2,.7,.25,1),
top   .34s cubic-bezier(.2, .7, .25, 1),
left  .34s cubic-bezier(.2, .7, .25, 1),
width .34s cubic-bezier(.2, .7, .25, 1),
visibility 0s linear 0s;
}
.um-menu-preview.is-side,
.um-menu-preview.is-modal {
pointer-events: auto;
cursor: pointer;
}
.um-menu-preview.is-side .um-menu-preview__open { display: flex; margin-top: 0.45rem; padding: 0.55rem 0.8rem; }
.um-menu-preview.is-side .um-menu-preview__close { display: block; }
.um-menu-preview.is-side .um-menu-preview__title { margin-top: 0.5rem; }
.um-menu-preview.is-side .um-menu-preview__desc { font-size: 0.68rem; }
.um-top-header__menu-zone.is-previewing {
z-index: 1104 !important;
}
.um-menu-dim {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.42);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1095;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
@media (min-width: 1px) {
body:has(.um-top-header__menu-zone:hover) .um-menu-dim,
body:has(.um-top-header__menu-zone:focus-within) .um-menu-dim,
body:has(.um-top-header__menu-zone.is-open) .um-menu-dim {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
}
.um-top-header__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0.55rem;
}
.um-top-header__menu li {
display: flex;
align-items: center;
writing-mode: horizontal-tb;
margin: 0;
padding: 0;
}
.um-top-header__menu a {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.95rem;
font-size: 0.8rem;
letter-spacing: 0.22em;
font-weight: 400;
color: #555;
text-decoration: none;
transition: color 0.25s ease;
writing-mode: horizontal-tb;
background: transparent;
border: 0;
}
.um-top-header__menu a:hover {
color: #1a1a1a;
}
.um-top-header__menu .is-current a {
color: #1a1a1a;
font-weight: 600;
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
}
.um-top-header__menu .is-current a::before {
display: none !important;
}
.um-top-header__menu .um-side-nav__menu-item--cta.is-current a {
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
}
body.theme-dark .um-top-header__menu a { color: #bbb; }
body.theme-dark .um-top-header__menu a:hover { color: #fff; }
body.theme-dark .um-top-header__menu .is-current a { color: #fff; }
.um-top-header__menu .um-side-nav__menu-item--cta {
margin-left: 0.2rem;
}
.um-top-header__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #555 !important;
padding: 0.5rem 0.95rem;
border: 0;
border-radius: 0;
font-weight: 400;
letter-spacing: 0.22em;
gap: 0.45rem;
transition: color 0.25s ease;
}
.um-top-header__menu .um-side-nav__menu-item--cta a:hover {
background: transparent;
color: #1a1a1a !important;
border-color: transparent;
}
.um-top-header__menu .um-side-nav__menu-item--cta.is-current a {
background: transparent;
color: #1a1a1a !important;
border-color: transparent;
font-weight: 600;
animation: um-breadcrumb-loop 5.0s ease-in-out infinite;
}
body.theme-dark .um-top-header__menu .um-side-nav__menu-item--cta a {
background: transparent;
color: #bbb !important;
border-color: transparent;
}
body.theme-dark .um-top-header__menu .um-side-nav__menu-item--cta a:hover {
background: transparent;
color: #fff !important;
}
body.theme-dark .um-top-header__menu .um-side-nav__menu-item--cta.is-current a {
background: transparent;
color: #fff !important;
border-color: transparent;
}
.um-top-header__settings {
margin-left: 0.6rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.18);
background: transparent;
color: #555;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
flex: 0 0 auto;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.um-top-header__settings:hover {
background: rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.32);
color: #1a1a1a;
transform: rotate(30deg);
}
body.theme-dark .um-top-header__settings {
color: #bbb;
border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .um-top-header__settings:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
}
.um-cta-icons {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.um-cta-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.um-cta-icon--line { color: currentColor; }
.um-cta-icon--mail { color: currentColor; }
.um-cta-label {
display: inline-block;
white-space: nowrap;
}
.um-top-header__menu .um-side-nav__menu-item--sns {
margin-left: 0.2rem;
}
.um-hero {
margin-top: 0;
}
body:not(.home) main > *:first-child {
padding-top: 64px;
}
body:not(.home) main.wp-block-group {
padding-top: 0;
}
body:not(.home) main.um-service-page > *:first-child {
padding-top: 64px !important;
}
@media (max-width: 768px) {
body:not(.home) main.um-service-page > *:first-child {
padding-top: 52px !important;
}
}
@media (max-width: 768px) {
.um-mb-toggle,
.um-mb-drawer,
.um-mb-backdrop {
display: none !important;
}
.um-top-header__settings {
display: none;
}
.um-top-header__menu-zone {
top: calc(0.75rem + var(--um-hdr-top));
right: 1.25rem;
height: 36px;
}
.um-top-header__menu-trigger {
border: 0 !important;
background: transparent !important;
padding: 0 !important;
height: 28px;
gap: 0;
}
.um-top-header__menu-trigger .um-top-header__menu-label { display: none !important; }
.um-top-header__menu-trigger .um-top-header__menu-icon { width: 24px; height: 24px; }
.um-top-header__nav {
width: 196px;
min-width: 0;
max-width: calc(100vw - 2rem);
box-sizing: border-box;
}
.um-top-header {
height: auto;
min-height: 72px;
box-sizing: border-box;
align-items: flex-start;
padding: 1rem 1.25rem;
border-bottom: 0;
}
.um-info-ticker--fixed {
top: 72px !important;
}
body.admin-bar .um-info-ticker--fixed {
top: calc(72px + 46px) !important;
}
body.home:not(.is-past-hero) .um-top-header {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 0;
}
body:not(.home) main > *:first-child {
padding-top: 48px;
}
}
.um-news-single {
max-width: 760px;
margin: 0 auto;
}
.um-news-single__pagehead {
text-align: center;
padding: 0 0 2.4rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
margin-bottom: 3.2rem;
}
body.theme-dark .um-news-single__pagehead {
border-bottom-color: rgba(255,255,255,0.10);
}
.um-news-single__title.wp-block-post-title {
font-size: 2rem !important;
font-weight: 300 !important;
letter-spacing: 0.25em !important;
line-height: 1.45 !important;
margin: 0 !important;
text-transform: uppercase;
text-align: center;
}
.um-news-single__meta {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 0.4rem 1.2rem !important;
margin: 1rem 0 0 !important;
color: #888;
font-size: 0.8125rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.um-news-single__meta .um-news-single__date,
.um-news-single__meta .um-news-single__category {
color: #888;
font-size: 0.8125rem;
letter-spacing: 0.15em;
}
.um-news-single__meta .um-news-single__category a {
color: #888;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.um-news-single__meta .um-news-single__category a:hover {
border-bottom-color: #888;
}
body.theme-dark .um-news-single__meta,
body.theme-dark .um-news-single__meta .um-news-single__date,
body.theme-dark .um-news-single__meta .um-news-single__category,
body.theme-dark .um-news-single__meta .um-news-single__category a {
color: #aaa;
}
.um-news-single__hero {
margin: 0 auto 3.2rem;
max-width: 760px;
}
.um-news-single__hero img {
width: 100%;
height: auto;
display: block;
}
.um-news-single__body {
font-size: 0.9375rem;
line-height: 1.95;
letter-spacing: 0.04em;
color: #333;
}
body.theme-dark .um-news-single__body {
color: #e5e5e5;
}
.um-news-single__body p {
margin: 0 0 1.5rem;
}
.um-news-single__body h2 {
font-size: 1.25rem !important;
font-weight: 400 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
margin: 3rem 0 1.2rem !important;
}
.um-news-single__body h3 {
font-size: 1rem !important;
font-weight: 400 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase;
margin: 2.4rem 0 1rem !important;
}
.um-news-single__body img,
.um-news-single__body figure {
margin: 2rem auto;
max-width: 100%;
height: auto;
display: block;
}
.um-news-single__body a {
color: inherit;
border-bottom: 1px solid currentColor;
transition: opacity 0.2s ease;
}
.um-news-single__body a:hover {
opacity: 0.65;
}
.um-news-single__body ul,
.um-news-single__body ol {
margin: 0 0 1.5rem 1.5rem;
padding: 0;
}
.um-news-single__body ul li,
.um-news-single__body ol li {
margin: 0 0 0.4rem;
line-height: 1.85;
}
.um-news-single__body blockquote {
margin: 2rem 0;
padding: 1.2rem 1.5rem;
border-left: 2px solid rgba(0,0,0,0.18);
color: #666;
font-style: normal;
font-size: 0.95rem;
}
body.theme-dark .um-news-single__body blockquote {
border-left-color: rgba(255,255,255,0.18);
color: #aaa;
}
@media (max-width: 600px) {
.um-news-single__title.wp-block-post-title {
font-size: 1.55rem !important;
letter-spacing: 0.18em !important;
}
.um-news-single__pagehead {
padding-bottom: 1.8rem;
margin-bottom: 2.2rem;
}
.um-news-single__hero {
margin-bottom: 2rem;
}
.um-news-single__body {
font-size: 0.9rem;
line-height: 1.9;
}
.um-news-single__body h2 {
font-size: 1.1rem !important;
margin: 2.2rem 0 1rem !important;
}
.um-news-single__body h3 {
font-size: 0.95rem !important;
margin: 1.8rem 0 0.8rem !important;
}
}
.um-page__title.wp-block-post-title {
max-width: 720px;
margin: 0 auto 2.4rem !important;
font-size: clamp(2rem, 4vw, 2.25rem) !important;
font-weight: 300 !important;
letter-spacing: 0.08em !important;
line-height: 1.5 !important;
text-align: center;
}
.um-page__body {
max-width: 720px;
margin: 0 auto;
font-size: 0.9375rem;
line-height: 1.9;
letter-spacing: 0.04em;
color: #333;
}
body.theme-dark .um-page__body {
color: #e5e5e5;
}
.um-page__body p {
margin: 0 0 1.5rem;
}
.um-page__body h2 {
font-size: 1.25rem !important;
font-weight: 400 !important;
letter-spacing: 0.12em !important;
margin: 3rem 0 1.2rem !important;
}
.um-page__body h3 {
font-size: 1rem !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
margin: 2.4rem 0 1rem !important;
}
.um-page__body img,
.um-page__body figure {
margin: 2rem auto;
max-width: 100%;
height: auto;
display: block;
}
.um-page__body a {
color: inherit;
border-bottom: 1px solid currentColor;
transition: opacity 0.2s ease;
}
.um-page__body a:hover {
opacity: 0.65;
}
.um-page__body ul,
.um-page__body ol {
margin: 0 0 1.5rem 1.5rem;
padding: 0;
}
.um-page__body ul li,
.um-page__body ol li {
margin: 0 0 0.4rem;
line-height: 1.85;
}
.um-page__body blockquote {
margin: 2rem 0;
padding: 1.2rem 1.5rem;
border-left: 2px solid rgba(0,0,0,0.18);
color: #666;
font-style: normal;
font-size: 0.95rem;
}
body.theme-dark .um-page__body blockquote {
border-left-color: rgba(255,255,255,0.18);
color: #aaa;
}
@media (max-width: 600px) {
.um-page__title.wp-block-post-title {
font-size: 1.7rem !important;
margin-bottom: 1.8rem !important;
}
.um-page__body {
font-size: 0.9rem;
line-height: 1.9;
}
.um-page__body h2 {
font-size: 1.1rem !important;
margin: 2.2rem 0 1rem !important;
}
.um-page__body h3 {
font-size: 0.95rem !important;
margin: 1.8rem 0 0.8rem !important;
}
}
.um-post-list .wp-block-post-template,
.um-post-list .wp-block-query-pagination,
.um-post-list .wp-block-query-no-results {
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.um-next-page__label {
color: var(--wp--preset--color--muted);
}
.um-next-page__link {
color: var(--wp--preset--color--text);
}
.um-next-page__link a {
color: currentColor;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.um-next-page__link a:hover {
border-bottom-color: currentColor;
}
@media (max-width: 600px) {
.um-plan-card {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto;
}
.um-plan-card__media {
aspect-ratio: 16 / 10;
width: 100%;
}
.um-plan-card__body {
padding: 1.1rem 1.2rem 1.3rem;
}
.um-plan-card__title {
font-size: 1rem;
letter-spacing: 0.15em;
line-height: 1.4;
word-break: keep-all;
overflow-wrap: anywhere;
}
.um-plan-card__subtitle {
font-size: 0.75rem;
letter-spacing: 0.06em;
}
.um-plan-card__excerpt {
font-size: 0.8125rem;
line-height: 1.7;
}
.um-plan-card__more {
font-size: 0.7rem;
letter-spacing: 0.15em;
}
.um-plan-card[data-genre] .um-plan-card__media::after {
font-size: 0.65rem;
letter-spacing: 0.18em;
}
.um-plan-list {
gap: 16px;
}
}
body.page-id-8 main.wp-block-group { padding-top: 0 !important; }
body.page-id-8 main > *:first-child { padding-top: calc(80px + 1rem) !important; }
@media (max-width: 768px) {
body.page-id-8 main > *:first-child { padding-top: calc(60px + 0.75rem) !important; }
}
body.home .um-section--news {
background: #ffffff;
}
body.home .um-section--news .um-section__eyebrow,
body.home .um-section--news .um-section__sub {
color: #6e6e6e !important;
text-shadow: none !important;
}
body.home .um-section--news .um-section__title,
body.home .um-section--news .um-section__title-link,
body.home .um-section--news .um-section__title-link * {
color: #333333 !important;
text-shadow: none !important;
}
body.home .um-section--news .um-news-marquee__label,
body.home .um-section--news .um-news-marquee__label-month,
body.home .um-section--news .um-news-marquee__label-key,
body.home .um-section--news .um-news-marquee__label-arrow {
color: #1a1a1a !important;
}
body.home .um-section--news .um-news-marquee__caption {
color: #1a1a1a !important;
}
body.home .um-section--news .um-section__cta-btn {
color: #1a1a1a !important;
border-color: rgba(0, 0, 0, 0.25) !important;
}
body.home .um-section--news .um-section__cta-btn:hover {
background: rgba(0, 0, 0, 0.04) !important;
}
.um-about__divider {
display: block;
width: 64px;
height: 1px;
border: 0;
background: #c8a36b;
margin: 3.6rem auto;
opacity: 0.9;
}
.um-about__section--story .um-about__h2 { margin-bottom: 0.45rem; }
body.theme-dark .um-about__divider,
html.um-pre-dark .um-about__divider { opacity: 1; }
@media (max-width: 600px) {
.um-about__divider { margin: 2.8rem auto; }
.um-about__h2 { letter-spacing: 0.12em; }
}
@media (max-width: 768px) {
.um-about__section--story .um-about__body br { display: none; }
}
.um-about__section--story .um-about__body {
max-width: 42em;
}
body.page-id-12 main.wp-block-group.umbp { padding-top: 0 !important; }
body.page-id-12 main.wp-block-group.umbp > *:first-child { padding-top: 0 !important; }
@media (max-width: 768px) {
body.page-id-12 main.wp-block-group.umbp > *:first-child { padding-top: 0 !important; }
}
.umbp{
--umbp-ink:#1a1613;--umbp-ink-soft:#4a443d;--umbp-muted:#8a8077;
--umbp-bg:#f6f2ec;--umbp-bg-2:#efe9e0;--umbp-line:#e0d8cc;--umbp-paper:#fffdfa;
--umbp-dark:#14110e;--umbp-gold:#b8935a;
--umbp-serif:'Shippori Mincho',serif;
--umbp-sans:'Noto Sans JP',sans-serif;
--umbp-latin:'Inter Tight','Noto Sans JP',sans-serif;
--umbp-ease:cubic-bezier(.22,.61,.36,1);
font-family:var(--umbp-sans);color:var(--umbp-ink);background:var(--umbp-bg);
line-height:1.9;font-weight:300;letter-spacing:.02em;overflow-x:hidden;
}
.umbp *{box-sizing:border-box;margin:0;padding:0}
.umbp img{display:block;max-width:100%}
.umbp a{color:inherit;text-decoration:none}
.umbp .eyebrow{font-family:var(--umbp-latin);font-size:.72rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--umbp-gold)}
.umbp .h-display{font-family:var(--umbp-serif);font-weight:400;letter-spacing:.04em;line-height:1.5}
.umbp .lead{font-size:1.02rem;line-height:2.1;color:var(--umbp-ink-soft);font-weight:300}
.umbp .wrap{max-width:1180px;margin:0 auto;padding:0 6vw}
.umbp .section{padding:clamp(4.5rem,10vh,9rem) 0}
.umbp .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--umbp-ease),transform 1.1s var(--umbp-ease)}
.umbp .reveal.in{opacity:1;transform:none}
.umbp .reveal.d1{transition-delay:.08s}.umbp .reveal.d2{transition-delay:.16s}.umbp .reveal.d3{transition-delay:.24s}
.umbp .hero{position:relative;height:100vh;height:100dvh;min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000}
.umbp .hero__bg{position:absolute;inset:-8% 0 0 0;height:116%;background-size:cover;background-position:center 30%;will-change:transform;filter:saturate(.9)}
.umbp .hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 38%,rgba(0,0,0,.55))}
.umbp .hero__inner{position:relative;text-align:center;color:#fff;padding:0 6vw}
.umbp .hero__crumb{font-family:var(--umbp-latin);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;opacity:.82;margin-bottom:2.2rem}
.umbp .hero__catch{font-family:var(--umbp-serif);font-weight:300;font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1.42;letter-spacing:.06em;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.umbp .hero__sub{margin-top:2rem;font-size:clamp(.92rem,1.5vw,1.1rem);font-weight:300;letter-spacing:.1em;opacity:.92}
.umbp .hero__cue{position:absolute;left:50%;bottom:3rem;transform:translateX(-50%);width:1px;height:54px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:umbp-cue 2.4s var(--umbp-ease) infinite}
@keyframes umbp-cue{0%{opacity:0;transform:translateX(-50%) scaleY(.3) translateY(-10px)}40%{opacity:1}100%{opacity:0;transform:translateX(-50%) scaleY(1) translateY(14px)}}
.umbp .concept__grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.umbp .concept__photo{aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:2px;filter:grayscale(1) contrast(1.02)}
.umbp .concept h2{font-size:clamp(1.9rem,3.8vw,3.1rem);margin:1.4rem 0 1.8rem}
.umbp .concept .lead+.lead{margin-top:1.2rem}
.umbp .works{position:relative;padding:clamp(4rem,9vh,7rem) 0;background:var(--umbp-bg-2);overflow:hidden}
.umbp .works__strip-wrap{position:relative}
.umbp .works__strip-wrap::before,
.umbp .works__strip-wrap::after{content:"";position:absolute;top:0;bottom:0;width:6vw;max-width:72px;pointer-events:none;z-index:2}
.umbp .works__strip-wrap::before{left:0;background:linear-gradient(90deg,var(--umbp-bg-2),rgba(239,233,224,0))}
.umbp .works__strip-wrap::after{right:0;background:linear-gradient(270deg,var(--umbp-bg-2),rgba(239,233,224,0))}
.umbp .works__head{text-align:center;max-width:40em;margin:0 auto clamp(2.2rem,5vh,3.4rem);padding:0 6vw}
.umbp .works__head h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:1rem}
.umbp .works__strip{display:flex;gap:18px;overflow-x:auto;padding:0 6vw 1.4rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.umbp .works__strip::-webkit-scrollbar{display:none}
.umbp .works__item{flex:0 0 auto;width:clamp(230px,26vw,360px);aspect-ratio:4/5;background-size:cover;background-position:center;border-radius:3px;scroll-snap-align:start;transition:filter .5s var(--umbp-ease),transform .5s var(--umbp-ease)}
.umbp .works__item:hover{filter:brightness(1.05);transform:translateY(-4px)}
.umbp .works__more{text-align:center;margin-top:1.2rem}
.umbp .works__more a{font-family:var(--umbp-latin);font-size:.82rem;letter-spacing:.16em;color:#8a6a2f;text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px;transition:color .3s var(--umbp-ease)}
.umbp .works__more a:hover{color:#6e521f}
.umbp .why__intro{text-align:center;max-width:40em;margin:0 auto clamp(3rem,7vh,6rem)}
.umbp .why__intro h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:1.2rem 0 1.4rem}
.umbp .moment{position:relative;height:84vh;height:84dvh;min-height:540px;display:flex;align-items:flex-end;overflow:hidden;margin-bottom:1rem}
.umbp .moment__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 1.8s var(--umbp-ease);will-change:transform}
.umbp .moment.in .moment__bg{transform:scale(1)}
.umbp .moment__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08) 25%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.82))}
.umbp .moment__txt{position:relative;color:#fff;padding:clamp(2.4rem,6vw,5rem);max-width:780px}
.umbp .moment__num{font-family:var(--umbp-latin);font-size:.8rem;font-weight:500;letter-spacing:.3em;opacity:.85;margin-bottom:1rem}
.umbp .moment__h{font-family:var(--umbp-serif);font-weight:300;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.5;letter-spacing:.04em}
.umbp .moment__p{margin-top:1.1rem;font-size:1rem;font-weight:300;letter-spacing:.06em;opacity:.94;max-width:32em;line-height:2}
.umbp .hearing{position:relative;background:var(--umbp-dark);color:#fff;overflow:hidden}
.umbp .hearing__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.26;filter:grayscale(.4)}
.umbp .hearing__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--umbp-dark),rgba(20,17,14,.4),var(--umbp-dark))}
.umbp .hearing__inner{position:relative;text-align:center;max-width:50em;margin:0 auto;padding:clamp(5rem,13vh,10rem) 6vw}
.umbp .hearing__quote{font-family:var(--umbp-serif);font-weight:300;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.8;letter-spacing:.05em;margin:1.6rem auto 0;color:#fff}
.umbp .hearing__sub{margin-top:1.8rem;opacity:.92;font-weight:300;font-size:.96rem}
.umbp .btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--umbp-sans);font-weight:400;font-size:.92rem;letter-spacing:.08em;padding:1.05em 2.4em;border-radius:999px;transition:.4s var(--umbp-ease);cursor:pointer;border:1px solid transparent}
.umbp .btn--light{background:#fff;color:var(--umbp-ink)}
.umbp .btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.umbp .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.umbp .btn--ghost:hover{background:rgba(255,255,255,.1)}
.umbp .hearing__btn{margin-top:2.6rem}
.umbp .flow__head{text-align:center;margin-bottom:clamp(2.6rem,6vh,4.5rem)}
.umbp .flow__head h2{font-size:clamp(1.8rem,3.5vw,2.7rem);margin-top:1rem}
.umbp .ftimeline{max-width:840px;margin:0 auto}
.umbp .fstep{position:relative;display:grid;grid-template-columns:56px 1fr clamp(100px,14vw,150px);gap:clamp(1.1rem,2.4vw,1.9rem);padding-bottom:clamp(2.4rem,5vh,3.6rem)}
.umbp .fstep:last-child{padding-bottom:0}
.umbp .fstep__rail{display:flex;flex-direction:column;align-items:center}
.umbp .fstep__icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--umbp-line);background:var(--umbp-paper);display:flex;align-items:center;justify-content:center;color:var(--umbp-gold);flex:0 0 auto;transition:box-shadow .7s var(--umbp-ease),border-color .7s var(--umbp-ease),transform .7s var(--umbp-ease);transform:scale(.85)}
.umbp .fstep.in .fstep__icon{border-color:var(--umbp-gold);box-shadow:0 10px 26px -14px rgba(184,147,90,.7);transform:scale(1)}
.umbp .fstep__icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.umbp .fstep__line{flex:1;width:1px;background:var(--umbp-line);margin-top:8px;min-height:20px}
.umbp .fstep:last-child .fstep__line{display:none}
.umbp .fstep__main{position:relative;padding-top:.5rem}
.umbp .fstep__thumb{width:100%;aspect-ratio:3/4;background-size:cover;background-position:center;border-radius:5px;margin-top:.5rem;filter:grayscale(.12)}
.umbp .fstep__ghost{display:none}
.umbp .fstep__num{font-family:var(--umbp-latin);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--umbp-gold);font-weight:500;margin-bottom:.45rem}
.umbp .fstep__title{font-family:var(--umbp-serif);font-weight:400;font-size:1.3rem;letter-spacing:.03em;margin-bottom:.7rem}
.umbp .fstep__text{font-size:.92rem;color:var(--umbp-ink-soft);font-weight:300;line-height:2.05;max-width:33em}
.umbp .studio{background:var(--umbp-bg-2)}
.umbp .studio__photo{height:clamp(340px,52vh,620px);background-size:cover;background-position:center}
.umbp .studio__inner{max-width:1180px;margin:0 auto;padding:clamp(3rem,7vh,5.5rem) 6vw;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.umbp .studio h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:1rem;line-height:1.55}
.umbp .studio__access{margin-top:.6rem}
.umbp .studio__access div{display:flex;gap:1.4rem;padding:1rem 0;border-bottom:1px solid var(--umbp-line)}
.umbp .studio__access dt{font-family:var(--umbp-latin);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--umbp-muted);min-width:84px;padding-top:.2em}
.umbp .studio__access dd{font-size:.95rem;font-weight:300}
.umbp .nolla{font-family:var(--umbp-latin);font-weight:500}
.umbp .pricing__head{text-align:center;max-width:42em;margin:0 auto clamp(2.6rem,6vh,4rem)}
.umbp .pricing__head h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:1rem 0 1.4rem}
.umbp .toggle{display:inline-flex;background:var(--umbp-bg-2);border:1px solid var(--umbp-line);border-radius:999px;padding:5px;position:relative}
.umbp .toggle__btn{position:relative;z-index:2;border:0;background:transparent;cursor:pointer;font-family:var(--umbp-sans);padding:.85em 2.2em;border-radius:999px;color:var(--umbp-muted);transition:color .4s var(--umbp-ease);display:flex;flex-direction:column;gap:2px;line-height:1.3}
.umbp .toggle__btn .en{font-family:var(--umbp-latin);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.umbp .toggle__btn .ja{font-size:.98rem;font-weight:400}
.umbp .toggle__btn.is-active{color:var(--umbp-ink)}
.umbp .toggle__pill{position:absolute;z-index:1;top:5px;bottom:5px;border-radius:999px;background:var(--umbp-paper);box-shadow:0 6px 16px -10px rgba(0,0,0,.35);transition:.45s var(--umbp-ease)}
.umbp .toggle-wrap{text-align:center;margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.umbp .pane{display:none}
.umbp .pane.is-active{display:block;animation:umbp-fade .6s var(--umbp-ease)}
@keyframes umbp-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1}}
.umbp .plans{display:grid;gap:1.4rem;max-width:980px;margin:0 auto}
.umbp .plan{background:var(--umbp-paper);border:1px solid var(--umbp-line);border-radius:14px;padding:clamp(1.8rem,3.5vw,3rem);display:grid;grid-template-columns:1fr auto;gap:1.2rem 2rem;align-items:start;transition:.5s var(--umbp-ease)}
.umbp .plan:hover{transform:translateY(-3px);box-shadow:0 24px 50px -30px rgba(0,0,0,.3)}
.umbp .plan__name{font-family:var(--umbp-latin);font-weight:500;font-size:1.5rem;letter-spacing:.08em}
.umbp .plan__catch{grid-column:1/-1;font-family:var(--umbp-serif);font-weight:400;font-size:1.12rem;color:var(--umbp-ink);margin-top:-.3rem;letter-spacing:.03em}
.umbp .plan__price{text-align:right;font-family:var(--umbp-latin);font-weight:500;font-size:1.9rem;white-space:nowrap}
.umbp .plan__price small{display:block;font-size:.66rem;letter-spacing:.1em;color:var(--umbp-muted);font-weight:400;margin-top:.3rem}
.umbp .plan__spec{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:.4rem;border-top:1px solid var(--umbp-line);padding-top:1.3rem}
.umbp .plan__spec div{padding-right:1rem}
.umbp .plan__spec dt{font-family:var(--umbp-latin);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--umbp-muted);margin-bottom:.4rem}
.umbp .plan__spec dd{font-size:.9rem;font-weight:400}
.umbp .plan--year{background:var(--umbp-dark);color:#fff;border-color:var(--umbp-dark);text-align:center;display:block;padding:clamp(2.4rem,5vw,3.6rem)}
.umbp .plan--year .plan__name{font-size:1.7rem}
.umbp .plan--year .plan__price{text-align:center;font-size:2.2rem;margin:.8rem 0}
.umbp .plan--year .plan__price small{color:rgba(255,255,255,.55)}
.umbp .plan--year .plan__catch{font-size:1.3rem;color:#fff;margin:.4rem 0 1.4rem}
.umbp .plan--year p{max-width:38em;margin:0 auto;font-size:.92rem;font-weight:300;opacity:.86;line-height:2}
.umbp .plan--year .btn{margin-top:1.8rem}
.umbp .vidopt{max-width:980px;margin:1.4rem auto 0;background:linear-gradient(120deg,#1f1a16,#14110e);color:#fff;border-radius:14px;padding:clamp(1.6rem,3vw,2.4rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.umbp .vidopt__l .k{font-family:var(--umbp-latin);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--umbp-gold)}
.umbp .vidopt__l h4{font-family:var(--umbp-serif);font-weight:300;font-size:1.25rem;margin:.5rem 0 .3rem}
.umbp .vidopt__l p{font-size:.86rem;opacity:.7;font-weight:300}
.umbp .vidopt__r{text-align:right}
.umbp .vidopt__price{font-family:var(--umbp-latin);font-weight:500;font-size:1.5rem;white-space:nowrap}
.umbp .vidopt__more{display:block;font-size:.78rem;color:var(--umbp-gold);margin-top:.4rem}
.umbp .compare{max-width:980px;margin:clamp(2.6rem,5vh,4rem) auto 0}
.umbp .compare summary{list-style:none;cursor:pointer;text-align:center;font-family:var(--umbp-latin);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--umbp-ink-soft);padding:1.1em;border:1px solid var(--umbp-line);border-radius:999px;transition:.3s}
.umbp .compare summary::-webkit-details-marker{display:none}
.umbp .compare summary:hover{background:var(--umbp-bg-2)}
.umbp .compare table{width:100%;border-collapse:collapse;margin-top:1.6rem;font-size:.85rem}
.umbp .compare th,.umbp .compare td{padding:.95rem .7rem;text-align:center;border-bottom:1px solid var(--umbp-line)}
.umbp .compare thead th{font-family:var(--umbp-latin);font-weight:500;letter-spacing:.06em}
.umbp .compare thead small{display:block;color:var(--umbp-muted);font-weight:400;font-size:.66rem;margin-top:.2rem}
.umbp .compare td:first-child,.umbp .compare th:first-child{text-align:left;color:var(--umbp-ink-soft)}
.umbp .compare .yes{color:var(--umbp-gold)}
.umbp .compare .strong{background:rgba(184,147,90,.07)}
.umbp .specs{background:var(--umbp-bg-2)}
.umbp .specs__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,2.6rem);max-width:1000px;margin:0 auto}
.umbp .scard{background:var(--umbp-paper);border:1px solid var(--umbp-line);border-radius:12px;padding:clamp(1.6rem,3vw,2.4rem)}
.umbp .scard h3{font-family:var(--umbp-serif);font-weight:400;font-size:1.2rem;margin:.7rem 0 1.2rem}
.umbp .scard ul{list-style:none}
.umbp .scard li{padding:.55rem 0;font-size:.92rem;font-weight:300;border-bottom:1px solid var(--umbp-line);display:flex;gap:.7em}
.umbp .scard li:last-child{border-bottom:0}
.umbp .scard li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--umbp-gold);margin-top:.85em;flex:0 0 auto}
.umbp .scard dl div{padding:.7rem 0;border-bottom:1px solid var(--umbp-line)}
.umbp .scard dl div:last-child{border-bottom:0}
.umbp .scard dt{font-size:.92rem;font-weight:500;margin-bottom:.2rem}
.umbp .scard dd{font-size:.86rem;color:var(--umbp-ink-soft);font-weight:300}
.umbp .scard .note{font-size:.82rem;color:var(--umbp-muted);margin-top:1rem;font-weight:300;line-height:1.9}
.umbp .faq__head{text-align:center;margin-bottom:clamp(2.4rem,5vh,3.6rem)}
.umbp .faq__head h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-top:1rem}
.umbp .faq__list{max-width:760px;margin:0 auto}
.umbp .faq__cat{font-family:var(--umbp-latin);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--umbp-muted);margin:2.4rem 0 .4rem}
.umbp .faq__item{border-bottom:1px solid var(--umbp-line)}
.umbp .faq__item summary{list-style:none;cursor:pointer;padding:1.4rem 2.4rem 1.4rem 0;font-size:1rem;font-weight:400;position:relative}
.umbp .faq__item summary::-webkit-details-marker{display:none}
.umbp .faq__item summary::after{content:"+";position:absolute;right:.4rem;top:1.25rem;font-size:1.3rem;color:var(--umbp-gold);font-weight:300;transition:.3s}
.umbp .faq__item[open] summary::after{transform:rotate(45deg)}
.umbp .faq__item p{padding:0 0 1.5rem;font-size:.92rem;color:var(--umbp-ink-soft);font-weight:300;line-height:2}
.umbp .final{position:relative;background:var(--umbp-dark);color:#fff;overflow:hidden}
.umbp .final__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;filter:grayscale(.5)}
.umbp .final__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(20,17,14,.4),var(--umbp-dark))}
.umbp .final__inner{position:relative;text-align:center;max-width:46em;margin:0 auto;padding:clamp(5.5rem,15vh,11rem) 6vw}
.umbp .final h2{font-family:var(--umbp-serif);font-weight:300;font-size:clamp(1.9rem,4vw,3rem);line-height:1.6}
.umbp .final p{margin-top:1.6rem;opacity:.92;font-weight:300}
.umbp .final__btns{margin-top:2.8rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.umbp .back{text-align:center;padding:3rem 0}
.umbp .back a{font-family:var(--umbp-latin);font-size:.78rem;letter-spacing:.2em;color:var(--umbp-muted)}
@media(max-width:860px){
.umbp .concept__grid,.umbp .studio__inner,.umbp .specs__grid{grid-template-columns:1fr}
.umbp .fstep{grid-template-columns:40px 1fr 64px;gap:.8rem}
.umbp .fstep__icon{width:40px;height:40px}.umbp .fstep__icon svg{width:20px;height:20px}
.umbp .fstep__thumb{aspect-ratio:1/1}
.umbp .plan{grid-template-columns:1fr}
.umbp .plan__price{text-align:left}
.umbp .plan__spec{grid-template-columns:1fr 1fr;gap:1.2rem}
.umbp .studio__photo{height:42vh}
.umbp .compare__scroll{overflow-x:auto}.umbp .compare table{min-width:640px}
.umbp .moment{height:auto;min-height:82vh;min-height:82dvh}
.umbp .vidopt{flex-direction:column;align-items:flex-start;text-align:left}.umbp .vidopt__r{text-align:left}
}
.umbp .vidopt__value{font-size:.95rem;font-weight:300;line-height:1.95;opacity:.92;margin:.2rem 0 .6rem;max-width:34em}
.umbp a:focus-visible,
.umbp .btn:focus-visible,
.umbp .toggle__btn:focus-visible,
.umbp summary:focus-visible{
outline:2px solid #b8935a;
outline-offset:3px;
border-radius:3px;
}
.umbp .hearing a:focus-visible,
.umbp .hearing .btn:focus-visible,
.umbp .final a:focus-visible,
.umbp .final .btn:focus-visible,
.umbp .plan--year a:focus-visible,
.umbp .plan--year .btn:focus-visible,
.umbp .btn--ghost:focus-visible{
outline-color:#ffffff;
}
@media (prefers-reduced-motion: reduce){
.umbp .reveal{opacity:1;transform:none;transition:none}
.umbp .moment__bg{transform:none;transition:none}
.umbp .moment.in .moment__bg{transform:none}
.umbp .hero__cue{animation:none}
.umbp .works__item,
.umbp .plan,
.umbp .toggle__pill,
.umbp .pane.is-active{transition:none;animation:none}
.umbp html{scroll-behavior:auto}
}
.um-route-loading{
position:fixed; left:50%;
bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
transform:translate(-50%, 8px);
display:flex; align-items:center; gap:.55em;
padding:.6em 1.15em; border-radius:999px;
background:rgba(18,18,18,.88); color:#fff;
font-size:.82rem; letter-spacing:.04em; font-weight:500; line-height:1; white-space:nowrap;
box-shadow:0 8px 26px rgba(0,0,0,.30);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .14s ease, transform .14s ease;
z-index:99999;
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
body.um-route-loading-on .um-route-loading{
opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.um-route-loading__spin{
width:1em; height:1em; border-radius:50%; flex:0 0 auto;
border:2px solid rgba(255,255,255,.34); border-top-color:#fff;
animation:um-route-spin .7s linear infinite;
}
@keyframes um-route-spin{ to{ transform:rotate(360deg); } }
.um-album-card{ transition:transform .12s ease, opacity .12s ease; }
.um-album-card:active{ transform:scale(.975); opacity:.92; }
.um-album-card.um-card-opening{
z-index: 300;
transform: scale(1.1) !important;
transition: transform .34s cubic-bezier(.22,.7,.22,1);
}
.um-album-card.um-card-opening .um-album-card__frame{
box-shadow: 0 22px 60px rgba(0,0,0,.5);
transition: box-shadow .34s ease;
}
@media (prefers-reduced-motion: reduce){
.um-route-loading{ transition:opacity .1s linear; }
.um-route-loading__spin{ animation-duration:1.4s; }
.um-album-card:active{ transform:none; }
.um-album-card.um-card-opening{ transform:none !important; }
}
.um-person__info-toggle{
display:inline-flex; align-items:center; gap:.5em;
margin-top:1.1rem; padding:.5em .95em .5em .55em;
background:transparent; border:1px solid rgba(0,0,0,.18); border-radius:999px;
color:rgba(0,0,0,.6); font:inherit; font-size:.82rem; letter-spacing:.04em;
cursor:pointer; -webkit-appearance:none; appearance:none;
transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.um-person__info-toggle:hover,
.um-person__info-toggle:focus-visible{
border-color:rgba(0,0,0,.45); color:rgba(0,0,0,.85); background:rgba(0,0,0,.03);
}
.um-person__info-toggle-icon{
display:inline-flex; align-items:center; justify-content:center;
width:1.5em; height:1.5em; border-radius:50%;
border:1.5px solid currentColor;
font-family:'Inter Tight', Georgia, serif; font-style:italic; font-weight:600;
font-size:.9em; line-height:1;
}
.um-person__info-toggle-label{ white-space:nowrap; }
.um-person__about-row{
display:flex; align-items:center; flex-wrap:wrap; gap:.75rem;
margin-top:1.1rem;
}
.um-person__about-row .um-person__info-toggle{ margin-top:0; }
.um-person__sns--inline{ margin:0; gap:.5rem; }
.um-person__sns--inline .um-person__sns-link{ width:34px; height:34px; }
.um-person__sns--inline .um-person__sns-link svg{ width:17px; height:17px; }
.um-person__detail-panel{
position:fixed; inset:0; z-index:1200;
display:flex; align-items:center; justify-content:center;
padding:clamp(0.6rem, 2vw, 1.4rem);
pointer-events:none; visibility:hidden; opacity:0;
transition:opacity .3s ease, visibility 0s linear .3s;
perspective: 1500px;
}
.um-person__detail-panel.is-open{
pointer-events:auto; visibility:visible; opacity:1;
transition:opacity .3s ease, visibility 0s linear 0s;
}
.um-person__detail-backdrop{
position:absolute; inset:0;
background:rgba(12,12,14,.55);
-webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.um-person__detail-card{
position:relative; z-index:1;
display:flex; flex-direction:row;
width:min(880px, 92vw);
max-height:82vh;
background:#fff; color:#1a1a1a;
border-radius:10px; overflow:hidden;
box-shadow:0 30px 80px -30px rgba(0,0,0,.5);
transform-origin: top center;
}
.um-person__detail-panel.is-open .um-person__detail-card{
animation: um-paper-drop .62s cubic-bezier(.2,.72,.24,1) both;
}
@keyframes um-paper-drop{
0%   { opacity:0; transform: translateY(-16vh) rotateX(11deg); box-shadow:0 6px 20px -10px rgba(0,0,0,.35); }
55%  { opacity:1; transform: translateY(1.4vh) rotateX(0deg); }
78%  { transform: translateY(-0.6vh); }
100% { opacity:1; transform: translateY(0); box-shadow:0 30px 80px -30px rgba(0,0,0,.5); }
}
body.theme-dark .um-person__detail-card{ background:#161616; color:#f0f0f0; }
@media (prefers-reduced-motion: reduce){
.um-person__detail-panel.is-open .um-person__detail-card{ animation: none; }
}
.um-person__detail-media{
flex:0 0 46%;
background:#0d0d0f;
display:flex; align-items:center; justify-content:center;
padding:1.6rem; box-sizing:border-box;
}
.um-person__detail-photo{
max-width:100%; max-height:100%; width:auto; height:auto;
object-fit:contain; display:block;
box-shadow:0 8px 30px -14px rgba(0,0,0,.6);
}
.um-person__detail-movie{
position:relative; width:100%; aspect-ratio:16/9;
margin:.2rem 0 .6rem; background:#000; border-radius:6px; overflow:hidden;
}
.um-person__detail-movie iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.um-person__detail-movie:not(.is-playing) iframe{ pointer-events:none; }
.um-person__detail-movie-watch{
display:inline-flex; align-items:center; gap:.5em;
margin:0 0 1.4rem; padding:.5em 1.1em;
background:#1a1a1a; color:#fff; border:none; border-radius:999px;
font:inherit; font-size:.82rem; letter-spacing:.06em; cursor:pointer;
transition:background-color .2s ease, transform .2s ease;
}
.um-person__detail-movie-watch:hover,
.um-person__detail-movie-watch:focus-visible{ background:#000; transform:translateY(-1px); }
.um-person__detail-movie-watch-icon{ font-size:.78em; }
body.theme-dark .um-person__detail-movie-watch{ background:#f0f0f0; color:#111; }
.um-person__detail-movie-facade{
position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
background:#000 center/cover no-repeat;
display:flex; align-items:center; justify-content:center;
}
.um-person__detail-movie-play{
width:56px; height:56px; border-radius:50%;
background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.9); color:#fff;
display:flex; align-items:center; justify-content:center; font-size:17px; padding-left:3px;
transition:transform .2s ease, background-color .2s ease;
}
.um-person__detail-movie-facade:hover .um-person__detail-movie-play,
.um-person__detail-movie-facade:focus-visible .um-person__detail-movie-play{
background:rgba(0,0,0,.65); transform:scale(1.08);
}
.um-person__detail-cheki{
margin:0; background:none; padding:0; border-radius:6px; overflow:hidden;
box-shadow:0 8px 24px -12px rgba(0,0,0,.45); max-width:100%;
}
.um-person__detail-cheki-photo{
width:clamp(150px, 20vw, 230px); aspect-ratio:4/5;
background-size:cover; background-position:center; background-color:#eee;
}
.um-person__detail-cheki.is-portrait .um-person__detail-cheki-photo{ aspect-ratio:4/5; }
.um-person__detail-cheki-sign{ display:none; }
.um-person__detail-video{
position:relative; width:100%; padding-top:56.25%; height:0;
background:#000; border-radius:4px; overflow:hidden;
}
.um-person__detail-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.um-person__detail-info{
flex:1 1 0; min-width:0;
padding:2.6rem 2rem 2.2rem;
overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.um-person__detail-close{
position:absolute; top:.6rem; right:.7rem; z-index:2;
width:2.2rem; height:2.2rem; line-height:1;
display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.85); border:none; border-radius:50%;
font-size:1.6rem; color:#333; cursor:pointer;
box-shadow:0 1px 6px rgba(0,0,0,.2);
transition:color .2s ease, background-color .2s ease;
}
.um-person__detail-close:hover,
.um-person__detail-close:focus-visible{ color:#000; background:#fff; }
.um-person__detail-title{
margin:0 0 .25rem; font-family:'Inter Tight', system-ui, sans-serif;
font-size:1.5rem; font-weight:500; letter-spacing:.01em;
}
.um-person__detail-tagline{
margin:0 0 1rem; font-size:.92rem; color:rgba(0,0,0,.55); letter-spacing:.02em;
}
body.theme-dark .um-person__detail-tagline{ color:rgba(255,255,255,.6); }
.um-person__detail-cats{
list-style:none; display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin:0 0 1.2rem; padding:0;
}
.um-person__detail-cat{ font-size:.82rem; color:#3a3a3a; font-weight:300; letter-spacing:.04em; }
body.theme-dark .um-person__detail-cat{ color:#cfcfcf; }
.um-person__detail-body .um-person__bio,
.um-person__detail-body .um-person__description{
margin:0 0 1.4rem; font-size:.95rem; line-height:1.9; color:rgba(0,0,0,.8);
}
body.theme-dark .um-person__detail-body .um-person__bio,
body.theme-dark .um-person__detail-body .um-person__description{ color:rgba(255,255,255,.8); }
.um-person__detail-info .um-person__sns{
display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 0; padding:0; list-style:none;
}
.um-person__cover-wrap.is-clickable{ cursor:pointer; transition:transform .25s ease; }
.um-person__cover-wrap.is-clickable:hover{ transform:translateY(-2px); }
.um-person__cover-wrap.is-clickable:focus-visible{ outline:2px solid #c8a36b; outline-offset:3px; }
@media (max-width:680px){
.um-person__detail-card{ flex-direction:column; max-height:88vh; }
.um-person__detail-media{ flex:0 0 auto; padding:1.3rem; }
.um-person__detail-cheki-photo{ width:clamp(140px, 44vw, 200px); }
.um-person__detail-info{ padding:1.6rem 1.4rem 1.8rem; }
}
@media (prefers-reduced-motion: reduce){
.um-person__detail-card{ transition:none; }
}
body.um-detail-open{ overflow:hidden; }
.um-lightbox__person{
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 1rem);
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: inline-flex;
align-items: center;
gap: .4em;
padding: .55em 1.2em;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.5);
border-radius: 999px;
color: #fff;
font-size: .8rem;
letter-spacing: .1em;
white-space: nowrap;
text-decoration: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.um-lightbox__person:hover,
.um-lightbox__person:focus-visible{
background: rgba(255,255,255,.92);
border-color: #fff;
color: #111;
}
@media (max-width: 768px){
.um-lightbox__person{
font-size: .74rem;
padding: .5em 1em;
top: calc(env(safe-area-inset-top, 0px) + .6rem);
}
}
.um-lightbox:fullscreen .um-lightbox__person{ z-index: 200; }
body.um-person-page .um-person__hero{
align-items: center;
gap: clamp(1.1rem, 3vw, 1.9rem);
padding-top: 1.4rem;
}
body.um-person-page .um-person__hero .um-person__cover-wrap,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-portrait,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-forced-portrait{
flex: 0 0 auto;
width: clamp(120px, 13vw, 160px);
height: clamp(120px, 13vw, 160px);
max-width: none;
margin: 0;
padding: 0;
background: none;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 3px 14px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05);
overflow: hidden;
}
body.theme-dark.um-person-page .um-person__hero .um-person__cover-wrap{ background: none; border-color: rgba(255,255,255,.85); }
body.um-person-page .um-person__hero .um-person__cover,
body.um-person-page .um-person__hero .um-person__cover-wrap:not(.is-portrait) .um-person__cover,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-portrait .um-person__cover,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-forced-portrait .um-person__cover{
width: 100%;
height: 100%;
max-height: none;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: var(--um-focal, center);
background-color: #f3f1ea;
border-radius: 50%;
transform: scale(var(--um-zoom, 1));
transform-origin: var(--um-focal, center);
animation: none;
}
body.um-person-page .um-person__hero .um-person__cover-sign{ display: none; }
.um-gallery-grid__item--video { position: relative; }
.um-gallery-grid__item-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 46px; height: 46px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(0,0,0,0.45);
border: 1.5px solid rgba(255,255,255,0.85);
color: #fff;
font-size: 15px;
line-height: 1;
padding-left: 3px;
pointer-events: none;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
transition: background-color .2s ease, transform .2s ease;
}
.um-gallery-grid__item--video:hover .um-gallery-grid__item-play {
background: rgba(0,0,0,0.62);
transform: translate(-50%, -50%) scale(1.08);
}
.um-video-modal {
position: fixed; inset: 0;
z-index: 10000;
background: rgba(8,8,10,0.94);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.um-video-modal.is-open {
opacity: 1; visibility: visible; pointer-events: auto;
transition: opacity .25s ease, visibility 0s linear 0s;
}
.um-video-modal__inner {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
box-sizing: border-box;
}
.um-video-modal__player {
max-width: min(1280px, 92vw);
max-height: 86vh;
width: auto; height: auto;
background: #000;
border-radius: 4px;
box-shadow: 0 20px 60px -20px rgba(0,0,0,0.7);
}
.um-video-modal__close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 1rem);
right: 1rem;
z-index: 2;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 50%;
color: #fff; font-size: 1.5rem; line-height: 1;
cursor: pointer;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
transition: background-color .2s ease, color .2s ease;
}
.um-video-modal__close:hover,
.um-video-modal__close:focus-visible { background: rgba(255,255,255,0.92); color: #111; }
@media (max-width: 600px) {
.um-video-modal__player { max-width: 96vw; max-height: 76vh; }
.um-gallery-grid__item-play { width: 38px; height: 38px; font-size: 13px; }
}
@media (max-width: 600px) {
body.um-person-page .um-person__hero {
flex-direction: row;
align-items: center;
gap: 0.9rem;
text-align: left;
}
body.um-person-page .um-person__hero .um-person__cover-wrap,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-portrait,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-forced-portrait {
flex: 0 0 110px;
width: 110px;
height: 110px;
max-width: 110px;
margin: 0;
padding: 0;
background: none;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06);
overflow: hidden;
align-self: center;
}
body.theme-dark.um-person-page .um-person__hero .um-person__cover-wrap { border-color: rgba(255,255,255,.85); }
body.um-person-page .um-person__hero .um-person__cover,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-portrait .um-person__cover,
body.um-person-page .um-person__hero .um-person__cover-wrap.is-forced-portrait .um-person__cover {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: var(--um-focal, center);
border-radius: 50%;
transform: scale(var(--um-zoom, 1));
transform-origin: var(--um-focal, center);
animation: none;
}
body.um-person-page .um-person__hero .um-person__cover-sign { display: none; }
body.um-person-page .um-person__intro { flex: 1 1 0; min-width: 0; }
body.um-person-page .um-person__hero .um-person__genre-jp--above { margin: 0 0 0.18rem; }
body.um-person-page .um-person__hero .um-person__genre-chip { font-size: 0.8rem; letter-spacing: 0.04em; }
body.um-person-page .um-person__hero .um-person__name { font-size: 1.1rem; line-height: 1.2; margin: 0; }
body.um-person-page .um-person__hero .um-person__tagline { font-size: 0.84rem; line-height: 1.3; margin: 0.12rem 0 0; }
body.um-person-page .um-person__hero .um-person__about-row { margin-top: 0.4rem; gap: 0.5rem; }
body.um-person-page .um-person__hero .um-person__info-toggle { padding: 0.32em 0.7em 0.32em 0.4em; font-size: 0.72rem; }
body.um-person-page .um-person__hero .um-person__sns--inline { gap: 0.4rem; }
body.um-person-page .um-person__hero .um-person__sns--inline .um-person__sns-link { width: 30px; height: 30px; }
body.um-person-page .um-person__hero .um-person__sns--inline .um-person__sns-link svg { width: 15px; height: 15px; }
}
.um-person.has-person-tint { position: relative; }
.um-person.has-person-tint::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
height: 60vh;
pointer-events: none;
z-index: 0;
background: linear-gradient(180deg, var(--um-person-tint, transparent) 0%, transparent 100%);
opacity: 0.14;
}
.um-person.has-person-tint > * { position: relative; z-index: 1; }
body.theme-dark .um-person.has-person-tint::before { opacity: 0.18; }
@media (prefers-reduced-motion: reduce) {  }