/* --------------------------------------------------------
* mutual-footer.css
--------------------------------------------------------*/

/* @group @o-mutual-footer */

[class*="o-mutual-footer"] {
overflow: hidden;
display: grid;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: 3rem;
padding: 3rem var(--x-padding-right) 6rem var(--x-padding-left);
background-color: hsl(220deg 5% 20%);
color: var(--color-white);
content-visibility: auto;
contain: layout;
}

[class*="o-mutual-footer"] {
contain-intrinsic-size: 360px 900px; /* Set an intrinsic size (width and height) */
}

[class*="a-footer-logo"] {
grid-row: 1;
}

[class*="m-footer-nav"] {
grid-row: 2;
}

[class*="a-footer-copyright"] {
grid-row: 3;
}

/* @end @m-footer-info */

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

/* @group @a-footer-logo */

[class*="a-footer-logo"] {
text-align: center;
}

[class*="a-footer-logo"] img {
width: auto;
height: 3rem;
filter: brightness(0) invert(1);
}

/* @end @a-footer-logo */

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

/* @group @variables */

[class*="a-footer-nav-list"] {
--footer-nav-list-justify-content: center;
--footer-nav-list-g-grid-template-columns: repeat(1, 1fr);
--font-size: .875rem;
--line-height: 1.71428571;
}

@media (width >= 28em) { /* 448px -> * */

[class*="a-footer-nav-list"] {
--footer-nav-list-g-grid-template-columns: repeat(2, 1fr);
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="a-footer-nav-list"] {
--footer-nav-list-g-grid-template-columns: repeat(4, auto);
}

}

/* @end @variables */

/* @group @a-footer-nav-list */

[class*="a-footer-nav-list"] {
display: grid;
justify-content: var(--footer-nav-list-justify-content);
grid-auto-flow: var(--footer-nav-list-grid-auto-flow);
grid-template-columns: var(--footer-nav-list-g-grid-template-columns);
gap: .75rem 1.5rem;
margin-inline: auto;
}

[class*="a-footer-nav-list"] li {
padding-left: 1.125rem;
background-image: url('../img/sprite-svg.svg#icon-arrow-right-white');
background-position: 0 .375rem;
background-repeat: no-repeat;
background-size: .75rem .75rem;
}

/* @end @a-footer-nav-list */

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

/* @group @variables */

[class*="a-footer-copyright"] {
--word-break: keep-all;
--overflow-wrap: anywhere;
--text-align: center;
}

/* @end @variables */

/* @group ＠a-footer-copyright */

[class*="a-footer-copyright"] {
align-self: end;
overflow: hidden;
font-size: .625rem;
line-height: 1.2;
text-transform: uppercase;
}

/* @end @a-footer-copyright */

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

/* @group @variables */

:root {
--page-top-left: var(--x-padding-left);
}

@media (width >= 90em) { /* 1320px -> * */

[class*="a-page-top"] {
--page-top-transform: translateX(-4.125rem);
}

}

[class*="a-page-top"] {
--page-top-icon-size: 3.375rem;
--page-top-opacity: 0;
--page-top-transition: opacity .3s 0s var(--transition-cubic-bezier);
--page-top-link-transition: background-color 0s 0s var(--transition-cubic-bezier);
}

[class*="is-fit-sticky"] [class*="a-page-top"] {
--page-top-opacity: 1;
}

[class*="a-page-top"] a {
--page-top-link-transition: background-color .3s 0s var(--transition-cubic-bezier);
}

/* @end @variables */

/* @group @variables */

[class*="a-page-top"] {
--link-background-color: hsl(58deg 85% 45% / 75%);
}

[class*="a-page-top"] a:hover,
[class*="a-page-top"] a:focus {
--link-after-background-color: hsl(58deg 85% 45% / 87.5%);
}

/* @end @variables */

/* @group @variables */

[class*="is-foot-sticky"] [class*="a-page-top"] {
--link-background-color: hsl(58deg 85% 45% / 100%);
}

[class*="is-foot-sticky"] [class*="a-page-top"] a:hover,
[class*="is-foot-sticky"] [class*="a-page-top"] a:focus {
--link-after-background-color: hsl(58deg 85% 40% / 100%);
}

/* @end @variables */

/* @group @a-page-top */

:where([class*="a-page-top"]) {
box-sizing: border-box;
position: fixed;
z-index: 3;
z-index: 11;
bottom: 1.5rem;
left: var(--page-top-left);
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
border-radius: .1875rem;
opacity: var(--page-top-opacity);
transition: var(--page-top-transition);
transform: var(--page-top-transform);
}

[class*="a-page-top"] a {
position: relative;
display: grid;
place-items: center;
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
background-color: var(--link-background-color);
border-radius: inherit;
transition: var(--page-top-link-transition);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
}

@media print {[class*="a-page-top"] {display: none;}}

[class*="a-page-top"] a:before,
[class*="a-page-top"] a:after {
content: '';
box-sizing: border-box;
}

[class*="a-page-top"] a:before {
position: relative;
z-index: 2;
inset: 0;
display: grid;
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
background-image: url('../img/sprite-svg.svg#icon-pagetop-white');
background-size: 1.875rem 1.875rem;
background-position: center center;
background-repeat: no-repeat;
}

[class*="a-page-top"] a:after {
position: absolute;
z-index: -1;
inset: 0;
display: block;
width: var(--page-top-icon-size);
height: var(--page-top-icon-size);
background-color: var(--link-after-background-color);
border-radius: inherit;
transition: transform .3s 0s var(--transition-cubic-bezier);
transform: scaleY(0);
transform-origin: top;
}

[class*="a-page-top"] a:hover:after,
[class*="a-page-top"] a:focus:after {
transform: scaleY(1);
transform-origin: bottom;
background-origin: bottom;
}

/* @end @a-page-top */