/* @group @variables font-family */

@font-face {
font-family: 'Oswald';
src: local('Oswald'), url("../fonts/Oswald-VariableFont_wght.woff2") format('woff2');
font-display: swap;
}

@font-face {
font-family: 'Open Sans';
src: local('Open Sans'), url("../fonts/OpenSans-VariableFont_wght.woff2") format('woff2');
font-display: swap;
}

:root {
--font-family-heading: 'Oswald', 'Noto Sans JP', 'Noto Sans CJK JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', system-ui, -apple-system, 'BIZ UDPGothic', 'Yu Gothic', 'Meiryo', 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;
}

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

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

/* @group @variables */

:root {
--font-family: var(--font-family-default);
--font-size: inherit;
--line-height: 1.5;
--paragraph-line-height: var(--line-height);
--color: var(--color-text);
--font-weight: 400;
--font-variation-settings: "wght" var(--font-weight);

--font-weight-bold: 600;
--font-variation-settings-bold: "wght" var(--font-weight-bold);

--font-weight-extra-bold: 700;
--font-variation-settings-extra-bold: "wght" var(--font-weight-extra-bold);

--font-weight-light: 200;
--font-variation-settings-light: "wght" var(--font-weight-light);

--font-weight-extra-light: 100;
--font-variation-settings-extra-light: "wght" var(--font-weight-extra-light);

--head-1-font-weight: 400;
--head-1-font-variation-settings: "wght" var(--head-1-font-weight);

--head-2-font-weight: 400;
--head-2-font-variation-settings: "wght" var(--head-2-font-weight);

--head-3-font-weight: 500;
--head-3-font-variation-settings: "wght" var(--head-3-font-weight);

--head-4-font-weight: 500;
--head-4-font-variation-settings: "wght" var(--head-4-font-weight);

--head-5-font-weight: 500;
--head-5-font-variation-settings: "wght" var(--head-5-font-weight);

--margin-bottom: 0;
--margin-top: 0;
--figcaption-margin-top: 0;
--figcaption-margin-bottom: 0;

--emphasis-font-weight: 500;
--emphasis-font-variation-settings: "wght" var(--emphasis-font-weight);
--emphasis-background-image: linear-gradient(transparent 60%, var(--color-primary-highlight) 0%);
}

[class*="a-emphasis-effect-slide-in"] {
--emphasis-action-color: var(--color-primary-highlight);
--emphasis-start-position: 50%;
--emphasis-animation-time: 1s .5s;
}

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

:root {
--text-align-proto: left;
--text-align-deutero: center;
--text-align-trito: right;
}

}

@media (width < 48em) { /* 0 -> 767px */

:root {
--text-align-primero: left;
--text-align-segundo: center;
--text-align-right: tercero;
}

}

[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 */

/* @group @variables - text-align */

/* @end @variables - text-align */

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

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

/* 背景画像1 */
--background-position-transition: background-position var(--transition-time) 0s var(--transition-cubic-bezier);

/* max-height */
--max-height-transition: max-height 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);

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

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

/* Link: background-color & color */
--link-primary-transition: background-color var(--transition-time) 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 var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75),background-color var(--transition-time) 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 var(--transition-time) 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 var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), border-color var(--transition-time) 0s cubic-bezier(.6, .5, .5, .75), color var(--transition-time) 0s var(--transition-cubic-bezier);

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

/* filter color */
--filter-transition: filter var(--transition-time) 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);

}

/* @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 x-padding */

:root {
--x-padding-base: 4.375vw;
--x-padding: var(--x-padding-base);
--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));
}

}

@media (width >= 72em) { /* 1152px -> * */
 
:root {
--x-padding-base: calc((100vw - 68rem) / 2);
/*--x-padding-base: calc(2.5vw + 1.5rem);*/
}

}

/* @end @variables x-padding */

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

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

:root {
--color-white:  hsl(0deg 0% 100%);
--color-white-link:  hsl(0deg 0% 95%);
--color-white-action:  hsl(0deg 0% 90%);
--color-white-active:  hsl(0deg 0% 80%);
--color-white-disabled: hsl(0deg 0% 100% / 50%);
}

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

/* @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%);
--color-black:  hsl(0deg 0% 0%);
}

/* @end @variables - color black */

/* @group @variables - color */

:root {
--color-link: hsl(197.5deg 75%  47.5%);
--color-link-border: hsl(197.5deg 75%  47.5% / 85%);
--color-link-action: hsl(197.5deg 75%  42.5%);
--color-link-action-border: hsl(197.5deg 75%  47.5% / 85%);
--color-link-active: hsl(197.5deg 75%  37.5%);
--color-link-active-border: hsl(197.5deg 75%  37.5% / 85%);
--color-link-disabled: hsl(197.5deg 75%  47.5%, .5);
}

/* @end @variables - color */

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

/* @group @variables - @link */

:root {
--background-color: hsl(220deg 2.5% 97.5%);
--border-color: hsl(220deg 2.5% 85%);
--border-action-color: hsl(220deg 2.5% 75%);
--border-color-news: hsl(220deg 5% 67.5%);

--box-shadow-color: hsl(220deg 2.5% 95%);

--color-text: hsl(220deg 5% 15%);
--color-text-action: hsl(220deg 10% 35%);
--color-text-active: hsl(220deg 10% 40%);
--color-text-disabled: hsl(220deg 10% 30% / 50%);
--color-text-placeholder: hsl(220deg 10% 30% / 50%);

--color-primary: hsl(0deg 0% 20%);

--color-primary-button: hsl(0deg 0% 0%);
--color-primary-button-action: hsl(0deg 0% 2.5%);
--color-primary-button-active: hsl(0deg 0% 5%);
--color-primary-gradient: hsl(0deg 5% 25%);

--color-primary-highlight: hsl(0deg 50.2%, 44.9% / 37.5%);

--color-border-primary: hsl(125deg 1% 47%);

--color-secondary: hsl(99deg 52% 48%);
--color-secondary-text: hsl(99deg 52% 25%);
--color-secondary-action: hsl(99deg 52% 48%);
--color-secondary-active: hsl(99deg 52% 43%);

--color-table-body-background-color: hsl(0deg 0% 100% / 90%);
--color-table-odd-background-color: hsl(0deg 0% 100% / 90%);
--color-table-even-background-color: hsl(99deg 52% 95% / 90%);
--color-table-crosshead-background-color: hsl(200deg 20% 97.5% / 90%);

--color-table-hover-background-color: hsl(220deg 20% 85% / 90%);

--color-proto-background-color: hsl(220deg 20% 15%);
--color-deutero-background-color: hsl(220deg 20% 5%);
}

/* @end @variables - @link */

/* @group @variables - @link */

: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-border-color: transparent;
--link-border-action-color: inherit;
--link-border-active-color: inherit;
--link-color: var(--color-link);
--link-action-color: var(--color-link-action);
--link-active-color: var(--color-link-active);
--link-transition: background-size .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s var(--transition-cubic-bezier);
}

[class="a-link-secondary"] {
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-color: var(--color-text);
--link-action-color: var(--color-text-action);
--link-active-color: var(--color-text-active);
}

:where([class*="o-mutual-footer"]) {
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-color: var(--color-white-action);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white-active);
--ripetere-direction: rtl;
}

/* @end @variables - @a-link */

/* @group variables - @a-btn-link */

:root {
--btn-display: grid;
--btn-grid-template-columns: var(--btn-icon-width) 1fr var(--btn-icon-width);
--btn-secondary-grid-template-columns: 1fr;
--btn-height: 3rem;
--btn-padding: 0 .25rem;
--btn-font-size: .875rem;
--btn-line-height: 1.25;
--btn-font-weight: var(--font-weight-bold);
--btn-font-variation-settings: var(--font-variation-settings-bold);
--btn-background-image: linear-gradient(160deg, var(--color-primary-button) 0%, var(--color-primary-gradient) 100%);

--btn-background-color: var(--color-primary-button);
--btn-action-background-color: var(--color-white);
--btn-disabled-background-color: hsl(30deg 5% 85% / 50%);
--btn-border-color: var(--color-primary);
--btn-action-border-color: var(--color-primary-button-action);
--btn-active-border-color: var(--color-primary-button-active);
--btn-border-radius: 99rem;
--btn-color: var(--color-white);
--btn-action-color: var(--color-primary);
--btn-active-color: var(--color-primary);
--btn-disabled-filter: none;
--btn-transition: color .1875s .0625s cubic-bezier(.6, .5, .5, .75), filter .25s 0s var(--transition-cubic-bezier);

--btn-before-transform: skewX(-25deg) scaleX(0);
--btn-before-transform-origin: right;
--btn-before-action-transform: skewX(-25deg) scaleX(1.5);
--btn-before-action-transform-origin: left;
--btn-before-transition: transform .25s 0s var(--transition-cubic-bezier);
--btn-icon-width: .75rem;
--btn-icon-height: .75rem;
--btn-link-transform: translateX(.25rem);

--btn-icon-transition: fill .1875s .0625s cubic-bezier(.6, .5, .5, .75), transform .1875s .0625s var(--transition-cubic-bezier);
--btn-text-grid-column: 2;
--btn-secondary-text-grid-columnn: 1;
}

[class*="o-mutual-header"] {
--btn-width: 7.5rem;
--btn-font-size: .75rem;
--btn-line-height: 1.25;
}

[class*="a-form-footer"] {
--btn-width: 100%;
--btn-font-size: 1.125rem;
}

:where([class*="o-mutual-header"]) {
--btn-grid-template-columns: 0 1fr 0;
--btn-height: 2.25rem;
--btn-padding: .5625rem .1875rem;
--btn-font-size: .875rem;
--btn-line-height: 1.2;
}

:where([class*="a-btn-link-rss"]) {
--btn-display: inline-grid;
--btn-grid-template-columns: auto 1fr;
--btn-gap: .375rem;
--btn-background-color: var(--color-white);
--btn-background-image: linear-gradient(160deg, var(--color-white) 0%, var(--color-white) 100%);
--btn-action-background-color: var(--color-primary-button-action);
--btn-active-background-color: var(--color-primary-button-active);
--btn-disabled-background-color: hsl(30deg 5% 85% / 50%);
--btn-border-color: var(--color-primary);
--btn-action-border-color: var(--color-primary-button-action);
--btn-active-border-color: var(--color-primary-button-active);
--btn-border-radius: .25rem;
--btn-color: var(--color-primary);
--btn-action-color: var(--color-white);
--btn-active-color: var(--color-white);

--btn-height: 1.5rem;
--btn-padding: .25rem .1875rem;
--btn-font-size: .75rem;
--btn-line-height: 1.5;
--btn-icon-width: .625rem;
--btn-icon-height: .625rem;
--btn-link-transform: translateX(0);
}

[class*="a-btn-link-premier"] {
--btn-background-image: none;
--btn-background-color: hsl(0deg 0% 100% / 10%);
--btn-action-background-color: var(--color-white);
--btn-active-background-color: var(--color-white);
--btn-border-color: var(--border-color);
--btn-action-border-color: var(--border-color);
--btn-active-border-color: var(--border-color);
--btn-color: var(--color-text);
--btn-action-color: var(--color-text-action);
--btn-active-color: var(--color-text-active);
--btn-icon-transition: var(--link-premier-transition);
}

[class*="a-btn-link-proto"] {
--btn-background-color: var(--color-primary-button);
--btn-background-image: linear-gradient(160deg, var(--color-white) 0%, var(--color-white) 100%);
--btn-action-background-color: var(--color-primary-button-action);
--btn-active-background-color: var(--color-primary-button-active);
--btn-disabled-background-color: hsl(30deg 5% 85% / 50%);
--btn-border-color: var(--color-primary);
--btn-action-border-color: var(--color-primary-button-action);
--btn-active-border-color: var(--color-primary-button-active);
--btn-color: var(--color-primary);
--btn-action-color: var(--color-white);
--btn-active-color: var(--color-white);
}

[class*="a-btn-link-secondary"] {
--btn-grid-template-columns: var(--btn-secondary-grid-template-columns);
--btn-text-grid-column: var(--btn-secondary-text-grid-column);
}

[class*="a-btn-link-xpel"] {
--btn-grid-template-columns: var(--btn-secondary-grid-template-columns);
--btn-text-grid-column: var(--btn-secondary-text-grid-column);
--btn-background-image: none;
--btn-background-color: hsl(45deg 97.5% 45%);
--btn-border-color: hsl(45deg 97.5% 45%);
--btn-action-border-color: hsl(45deg 97.5% 40%);
--btn-active-border-color: hsl(45deg 97.5% 35%);
--btn-action-color: hsl(45deg 97.5% 40%);
--btn-active-color: hsl(45deg 97.5% 35%);
}

[class*="a-btn-link-delecto"] {
--btn-grid-template-columns: var(--btn-secondary-grid-template-columns);
--btn-text-grid-column: var(--btn-secondary-text-grid-column);
--btn-background-image: none;
--btn-background-color: var(--color-secondary);
--btn-border-color: var(--color-secondary);
--btn-action-border-color: var(--color-secondary-action);
--btn-active-border-color: var(--color-secondary-active);
--btn-action-color: var(--color-secondary-action);
--btn-active-color: var(--color-secondary-active);
}

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

:where([class*="o-mutual-header"]) {
--btn-padding: 0 .75rem;
--btn-font-size: 1rem;
--btn-line-height: 1.2;
}

}

/* @end variables - @a-btn-link */

/* @group variables - @a-btn-link */

[class*="a-btn-link-secondary"] {
--btn-grid-template-columns: var(--btn-secondary-grid-template-columns);
--btn-text-grid-column: var(--btn-secondary-text-grid-column);
}

/* @end variables - @a-btn-link */

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

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

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