/* @group @variables x-padding */

:root {
--x-padding: calc(5vw + (100% - 68rem) / 2);
--x-padding: clamp(5%, calc((100vw - 68rem) / 2), 68rem);
/*--x-padding: calc(5vw + (6.25 * ((100vw - 62em) / 18)));　NGコード　*/
--x-padding-right: var(--x-padding);
--x-padding-left: var(--x-padding);
}

@supports (padding-top: constant(safe-area-inset-top)) {
:root {
--x-padding-right: calc(env(safe-area-inset-right) + var(--x-padding));
--x-padding-left: calc(env(safe-area-inset-left) + var(--x-padding));
}

}

:root {
--push-margin: clamp(5%, calc((100vw - 50rem) / 2), 50rem);
--push-margin-right: var(--push-margin);
--push-margin-left: var(--push-margin);
}

@supports (padding-top: constant(safe-area-inset-top)) {
:root {
--push-margin-right: calc(env(safe-area-inset-right) + var(--push-margin));
--push-margin-left: calc(env(safe-area-inset-left) + var(--push-margin));
}

}

:root {
--footer-margin: clamp(5%, calc((100vw - 30rem) / 2), 30rem);
--footer-margin-right: var(--footer-margin);
--footer-margin-left: var(--footer-margin);
}

@supports (padding-top: constant(safe-area-inset-top)) {
:root {
--footer-margin-right: calc(env(safe-area-inset-right) + var(--footer-margin));
--footer-margin-left: calc(env(safe-area-inset-left) + var(--footer-margin));
}

}

/* @end @variables x-padding */

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

/* @group @variables - transition */

:root {
--transition-time: .3s;
--transition-delay: 0s;
--transition-cubic-bezier: cubic-bezier(.6, .5, .5, .75);
}

/* @end @variables - transition */

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

/* @group @variables - text-rendering */

:root {
--word-break: break-all;
--overflow-wrap: break-word;
}

@supports (word-break: auto-phrase) {

:root {
--word-break: auto-phrase;
}

}

/* @end @variables - text-rendering */

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

/* @group @variables - transform */

:root {
/* 画像拡大縮小 */
--media-scale-transform: scale(1.2);
}

/* @end @variables - transform */

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

/* @group @variables - backdrop-filter */

:root {
--backdrop-filter: blur(.125rem);
}

/* @end @variables - backdrop-filter */

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

/* @group variables - @a-media */

:root {
--media-border-radius: .75rem;
}

/* @end variables - @a-media */

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

/* @group @variables - @color */

:root {
--background-color: hsl(220deg 2.5% 97.5%);
--border-color: hsl(220deg 2.5% 85%);
--box-shadow-color: hsl(220deg 2.5% 95%);
--color-heading: hsl(220deg 20% 20%);
--color-text: hsl(220deg 10% 20%);
--color-text-action: hsl(220deg 10% 25%);
--color-text-active: hsl(220deg 10% 30%);
--color-white: hsl(0deg 0% 100%);
--color-white-action: hsl(0deg 0% 90%);
--color-white-active: hsl(0deg 0% 80%);
}

/* @end @variables - @color */

/* @group @variables - @color */

:root {
--color-primary: hsl(58deg 85% 45%);
--color-primary-action: hsl(58deg 85% 40%);
--color-primary-active: hsl(58deg 85% 35%);
--color-primary-highlight: hsl(58deg 85% 45% / 45%);
--color-primary-disabled: hsl(58deg 85% 45% / 50%);
--color-primary-gradient: hsl(58deg 85% 35%);
--color-emphasis: hsl(355deg 80% 60%);
}

/* @end @variables - @color */

/* @group @variables - color */

:root {
--color-very-light-gray: hsl(220deg 2.5% 90%);
--color-gainsboro: hsl(220deg 2.5% 85%);
--color-silver: hsl(220deg 2.5% 75%);
--color-darkgray: hsl(220deg 2.5% 50%);
--color-dimgray: hsl(220deg 2.5% 40%);
--color-very-dark-gray: hsl(220deg 2.5% 20%);
}

/* @end @variables - color black */

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

/* @group @variables - text */

:root {
--font-family: var(--font-family-default);
--font-size: inherit;
--line-height: 1.5;
--color: var(--color-text);
--font-weight: 300;
--font-weight-bold: 500;
--font-weight-bold-variation-settings: "wght" var(--font-weight-bold);
--head-1-font-weight: var(--font-weight-bold);
--head-2-font-weight: var(--font-weight-bold);
--head-3-font-weight: var(--font-weight-bold);
--head-4-font-weight: var(--font-weight-bold);
--head-5-font-weight: var(--font-weight-bold);
--strong-font-weight: var(--font-weight-bold);
--emphasis-font-weight: var(--font-weight-bold);
--emphasis-background-image: linear-gradient(transparent 60%, var(--color-primary-highlight) 0%);
}

[class*="o-mutual-header"],
[class*="o-mutual-footer"],
[class*="o-mutual-nav"] {
--head-1-font-size: inherit;
--head-1-line-height: 1;
--head-2-font-size: inherit;
--head-2-line-height: 1;
}

/* @end @variables - text */

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

/* @group @variables - transition */

:root {
/* transform */
--transform-transition: transform var(--transition-time) 0s var(--transition-cubic-bezier);
--transform-none-transition: transform 0s 0s var(--transition-cubic-bezier);
/* position */
--position-wait-transition: position 0s var(--transition-time) var(--transition-cubic-bezier);
--position-none-transition: position 0s 0s var(--transition-cubic-bezier);
}

/* @end @variables - transition */