/* -------------------------------------------------------- */

/* @group @variables */

[class*="o-mutual-header"] {
/*--header-background-color: hsl(246deg 32% 32% / 85%);*/
--color: hsl(0deg 0% 100%)
}

[class*="o-mutual-header"] h1 {
--font-family: 'Oswald', 'Hiragino Sans', 'BIZ UDPGothic', system-ui, -apple-system, 'Meiryo', sans-serif;
--font-weight: 600;
}

[class*="o-mutual-header"] dl {
--text-align: center;
}

[class*="o-mutual-header"] dd {
--font-size: .75rem;
}

@media (width >= 62em) { /* 992px -> * */

[class*="a-mutual-header-watch"] {
--header-watch-height: 24rem;
}

}

/* @end @variables */

/* @group @o-mutual-header */

[class*="o-mutual-header"] {
position: absolute;
z-index: 12;
overflow: hidden;
top: 0;
right: 0;
left: 0;
display: grid;
place-content: center space-between;
gap: .75rem;
grid-auto-flow: column;
grid-template-columns: 1fr 7.5rem;
height: 4.5rem;
padding-right: var(--x-padding-right);
padding-left: var(--x-padding-left);
background-color: var(--header-background-color);
backface-visibility: hidden;
/*-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);*/
}

[class*="o-mutual-header"] h1 {
display: inline-grid;
justify-content: start;
width: auto;
height: 2.25rem;
}

[class*="o-mutual-header"] a {
display: inline-grid;

justify-content: center;
align-items: center;
grid-auto-flow: column;
gap: .75rem;
text-align: center;
}

[class*="o-mutual-header"] dl {
position: relative;
display: grid;
justify-content: center;
align-items: center;
padding-left: .75rem;
}

[class*="o-mutual-header"] dl:before {
content: '';
position: absolute;
top: .375rem;
left: 0;
bottom: .375rem;
border-left: 1px solid;
}

[class*="o-mutual-header"] img {
align-self: center;
width: auto;
height: 2.25rem;
filter: brightness(0) invert(1);
}

/* @end @mutual-header */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-mutual-header-watch"] {
--header-watch-height: 20rem;
}

@media (width >= 62em) { /* 992px -> * */

[class*="a-mutual-header-watch"] {
--header-watch-height: 24rem;
}

}

/* @end @variables */

/* @group @a-mutual-header-watch */

[class*="a-mutual-header-watch"] {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 1px;
height: var(--header-watch-height);
pointer-events: none;
}

/* @end @a-mutual-header-watch */