/* @group @variables font-family */
:root {
/*--font-family-heading-primary: Jost, sans-serif;
--font-family-default: 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', "BIZ UDPGothic", system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-numeric: 'Open Sans', 'Source Sans Pro', 'Lato', 'Noto Sans CJK JP', system-ui, -apple-system, BlinkMacSystemFont, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-pre: Consolas, Monaco, 'Andale Mono', monospace, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-inherit: inherit;*/


--font-family-heading-primary: Jost, sans-serif;
--font-family-default: 'Hiragino Sans', "BIZ UDPGothic", system-ui, -apple-system, 'Yu Gothic', 'Meiryo', sans-serif;
--font-family-numeric: 'Open Sans', 'Source Sans Pro', 'Lato', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', "BIZ UDPGothic",system-ui, -apple-system, BlinkMacSystemFont, 'Meiryo', sans-serif;
--font-family-pre: Consolas, Monaco, 'Andale Mono', monospace, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-family-inherit: inherit;
}

/* @end @variables - text-block */

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

/* @group @variables x-padding */

:root {
--x-padding-base: 5vw;
--x-padding-header-base: 5vw;
--x-padding-header: var(--x-padding-header-base);
--x-padding: var(--x-padding-base);
--x-padding-right: var(--x-padding);
--x-padding-left: var(--x-padding);
--x-padding-header-right: var(--x-padding-header);
--x-padding-header-left: var(--x-padding-header);
}

@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));
--x-padding-header-right: calc(env(safe-area-inset-right) + var(--x-padding-header));
--x-padding-header-left: calc(env(safe-area-inset-left) + var(--x-padding-header));
}

}

@media all and (min-width: 66em) {

:root {
--x-padding-base: calc((100vw - 60rem) / 2);
}

}

@media all and (min-width: 90em) {

:root {
--x-padding-header-base: calc((100vw - 72rem) / 2);
}

}

/* @end @variables x-padding */

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

/* @group @variables - link */

:root {
--transition-time: .3s;
--transition-delay: 0s;
--transition-cubic-bezier: cubic-bezier(.6, .5, .5, .75);
--link-text-decoration: none;
--link-action-text-decoration: none;
--link-active-text-decoration: none;
--link-border-size: 1px;
--link-transition: background-size var(--transition-time) 0s var(--transition-cubic-bezier), color var(--transition-time) 0s var(--transition-cubic-bezier);
}

/* @end @variables - link */

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

/* @group @variables - padding */

:root {
/* 320〜1200pxで指定して作成 https://min-max-calculator.9elements.com */
--padding-primary: clamp(0.5rem, 0.318rem + 0.91vw, 1rem); /* 8〜16px */
}

/* @end @variables - padding */

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

/* @group @variables - border-radius */

:root {
/* 320〜1200pxで指定して作成 https://min-max-calculator.9elements.com */
--padding-primary: clamp(0.5rem, 0.318rem + 0.91vw, 1rem); /* 8〜16px */
}

/* @end @variables - border-radius */

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

/* @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);

/* transform & pointer-events */
--transform-pointer-events-transition: transform var(--transition-time) 0s var(--transition-cubic-bezier), pointer-events var(--transition-time) 0s var(--transition-cubic-bezier);
/* position */

--position-transition: position var(--transition-time) 0s var(--transition-cubic-bezier);
--position-wait-transition: position 0s var(--transition-time) var(--transition-cubic-bezier);
--position-none-transition: position 0s 0s var(--transition-cubic-bezier);

/* 背景色 */
--background-color-transition: background-color var(--transition-time) 0s var(--transition-cubic-bezier);

/* max-height */
--max-height-transition: max-height var(--transition-time) 0s var(--transition-cubic-bezier), padding var(--transition-time) 0s var(--transition-cubic-bezier);
/* max-height & padding */
--max-height-toggle-transition: max-height var(--transition-time) 0s var(--transition-cubic-bezier), padding var(--transition-time) 0s var(--transition-cubic-bezier);
--max-height-toggle-transition: max-height var(--transition-time) 0s var(--transition-cubic-bezier), padding var(--transition-time) 0s var(--transition-cubic-bezier);

--modal-fade-transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier), visibility var(--transition-time) 0s var(--transition-cubic-bezier);

/* CSS Filter */
--filter-transition: filter var(--transition-time) 0s var(--transition-cubic-bezier);

/* 透過 */
--opacity-transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier);

/* background-color */
--background-color-transition: background-color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: background-color & color */
--link-primary-transition: background-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: background-image & background-color & color */
--link-secondary-transition: background-image .3s 0s cubic-bezier(.6, .5, .5, .75),background-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: color */
--link-proto-transition: color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: border-color & color */
--link-primero-transition: border-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: background-color & border-color & color */
--link-premier-transition: background-color .3s 0s cubic-bezier(.6, .5, .5, .75), border-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* Link: background-color & border-color & color & box-shadow */
--link-erste-transition: background-color .3s 0s cubic-bezier(.6, .5, .5, .75), border-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier), box-shadow var(--transition-time) 0s var(--transition-cubic-bezier);

/* stroke color */
--link-primo-transition: filter var(--transition-time) 0s var(--transition-cubic-bezier), border-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* 透過 */
--stroke-transition: stroke var(--transition-time) 0s var(--transition-cubic-bezier);

/* filter color */
--filter-transition: filter var(--transition-time) 0s var(--transition-cubic-bezier);

/*form: background-color & border-color & c& color */
--form-primary-transition: background-color .3s 0s cubic-bezier(.6, .5, .5, .75), border-color .3s 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

/* svg: fill color */
--fill-transition: fill var(--transition-time) 0s var(--transition-cubic-bezier);

/* svg: fill color */
--fill-stroke-transition: fill var(--transition-time) 0s var(--transition-cubic-bezier), storke var(--transition-time) 0s var(--transition-cubic-bezier);

--svg-proto-transition: background-colorr .3s 0s cubic-bezier(.6, .5, .5, .75), fi var(--transition-time) 0s var(--transition-cubic-bezier);
}

/* @end @variables - transition */

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

/* @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 - color black to white */
:root {
--color-white: hsla(0, 0%, 100%, 1);
--color-white-link: hsla(0, 0%, 95%, 1);
--color-white-action: hsla(0, 0%, 90%, 1);
--color-white-active: hsla(0, 0%, 80%, 1);
--color-white-disabled: hsla(0, 0%, 100%, .5);
}

/* @end @variables - color black to white */

/* @group @variables - color */

:root {
--color-very-light-gray: hsla(0, 2.5%, 90%, 1);
--color-gainsboro: hsla(0, 2.5%, 85%, 1);
--color-silver: hsla(0, 2.5%, 75%, 1);
--color-darkgray: hsla(0, 2.5%, 50%, 1);
--color-dimgray: hsla(0, 2.5%, 40%, 1);
--color-very-dark-gray: hsla(0, 2.5%, 20%, 1);
--color-black: hsla(0, 0%, 0%, 1);
}

/* @end @variables - color black */

/* @group @variables - color */

:root {
--link-background-color: transparent;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);

--link-background-size: 0% 120%, 0 120%;
--link-action-background-size: 100% 120%, 100% 120%;
--link-background-position: 0 0;
--link-background-repeat: no-repeat;
--link-color: hsla(197.5, 75%, 47.5%, 1);
--link-color-border: hsla(197.5, 75%, 47.5%, .85);
--link-action-color: hsla(197.5, 75%, 42.5%, 1);
--link-action-border-color: hsla(197.5, 75%, 47.5%, .85);
--link-active-color: hsla(197.5, 75%, 37.5%, 1);
--link-active-border-color: hsla(197.5, 75%, 37.5%, .85);
--link-color-disabled: hsla(197.5, 75%, 47.5%, .5);
}

/* @end @variables - color */

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