/* @group @variables - @link */

:root {
--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(246deg 32% 37%);
}

/* @end @variables - @link */

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

/* @group @viewport */

@viewport{width:device-width;initial-scale:1;}

/* @end @viewport */

/* @group @reset */

html{text-size-adjust:100%}

body {
overflow-x: clip;
height: 100vh;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: var(--background-color);
font-feature-settings: "palt";
text-box-edge: ideographic;
text-box-trim: both;
text-spacing-property: trim-start;
}

@supports (min-height: 100dvh;) {
body {min-height: 100dvh;}
}

h1,h2,h3,h4,p,ul,ol,dl,table,pre,figure,input,textarea{margin-top:0;}
figure,blockquote{margin-inline:0;}
dd{margin-left:0;}
ins{text-decoration: none;}
object,video,picture{max-width:100%;}
img,iframe{max-width: 100%;height: auto;border: 0;vertical-align: bottom;}
svg:not(:root){overflow:hidden;}
iframe{border:0;vertical-align:top;}
table{border-collapse:separate;border-spacing:0;}
table,tbody,tr{padding:0;border:0;}
input,textarea{margin:0;}
input,select{vertical-align:baseline;}
textarea{overflow:auto;vertical-align:top;}

button{box-sizing:border-box;margin:0;padding:0;background:transparent;border-radius:0;font-size:inherit;line-height:inherit;font-weight:inherit;font-variation-settings:inherit;border:0;outline:none;cursor:pointer;vertical-align:baseline;appearance:none;outline:none;}

input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
h2,h3,li,dt,dd,th,td{line-break:strict;word-wrap:break-word;overflow-wrap:break-word;}
em,address{font-style:normal;}
abbr[title]{border-bottom:1px dotted inherit;}
blockquote{margin:0;}
iframe{contain:strict;}
label{transition:none;}
label img{pointer-events:none;}

img[width],[height],
input[type="image"][width],[height],
video[width],[height],
embed[width],[height],
iframe[width],[height],
marquee[width],[height],
object[width],[height] {
aspect-ratio: attr(width) / attr(height); 
}

p, li, dt, dd, th, td {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
}

ruby:not([class]) {
display: inline-grid;
grid-auto-flow: row;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}

ruby:not([class]) rt {
order: -1;
font-size: .625rem;
line-height: 1.8;
text-align: inherit;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{appearance:none;}
textarea{overflow:auto;vertical-align:top;}

a,[title]{text-decoration: none;}
a,a:hover{will-change:opacity;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:hsla(0,0%,0%,0);tap-highlight-color:hsla(0,0%,0%,0);}
a:hover{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-callout:none;}
a svg, button svg {transition: inherit;}

h1, h2, h3, h4, h5, p, ul, ol, dl, table {margin-top:0;margin-bottom:0;}

ul,ol{padding-left:0;list-style:none;}

a,[title] {text-decoration:none;}

h1, h2, h3, h4, h5, h6, strong {
font-weight: 500;
font-variation-settings: "wght" 500;
}

*:focus-visible {
outline: 2px dashed hsl(47deg 100% 60%);
outline-offset: 4px;
}

/* @end @reset */

/* variables core --------------------------------------------------------*/

/* @group @variables */

body {
font-family: var(--font-family);
color: var(--color);
font-weight: var(--font-weight);
font-variation-settings: var(--font-variation-settings);
}

header, footer, p, ul, ol, li, dl, dt, dd, table, tr, th, td, figure, figure, figcaption, time, blockquote, pre, input, textarea, label, select, button, pre, code {
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
font-weight: var(--font-weight);
font-variation-settings: var(--font-variation-settings);
color: var(--color);
letter-spacing: var(--letter-spacing);
}

p {
line-height: var(--paragraph-line-height);
}

th, td dt, em {font-style: normal;}

strong {
background-image: var(--strong-background-image);
font-weight: var(--strong-font-weight);
font-variation-settings: var(--strong-font-variation-settings);
}

:where(p, ul, dl):not(:where([class*="o-mutual-header" ], [class*="m-headline"], [class*="m-section-footer"], [class*="m-sottovoce"] p)) em {
background-image: var(--emphasis-background-image)
}

:where(p, ul, dl, table) em {
font-size: var(--emphasis-font-size);
line-height: var(--emphasis-line-height);
color: var(--emphasis-color);
font-weight: var(--emphasis-font-weight);
font-variation-settings: var(--emphasis-font-variation-settings);
}

:where(p, ul, dl, table) span {
font-size: var(--span-font-size);
line-height: var(--span-line-height);
color: var(--span-color);
font-weight: var(--span-font-weight);
font-variation-settings: var(--span-font-variation-settings);
}

rt {
font-size: var(--ruby-rext-font-size);
line-height: var(--ruby-rext-line-height);
color: var(--ruby-rext-color);
font-weight: var(--ruby-rext-font-weight);
font-variation-settings: var(--ruby-rext-font-variation-settings);
}

figcaption {
margin-top: var(--figcaption-margin-top);
margin-bottom: var(--figcaption-margin-bottom);
font-size: var(--figcaption-font-size);
line-height: var(--figcaption-line-height);
color: var(--figcaption-color);
font-weight: var(--figcaption-font-weight);
font-variation-settings: var(--figcaptionfont-variation-settings);
word-break: var(--figcaption-word-break);
text-align: var(--figcaption-text-align);
}

p, ul, ol, dl, table, blockquote, pre, figure {
margin-top: var(--margin-top);
margin-bottom: var(--margin-bottom);
}

pre,code {font-family: var(--font-family-pre);}
[class*="a-font-numeric"] {font-family: var(--font-family-numeric);}

/* @end @variables */

/* @group @variables - @h1 */

h1 {
overflow: var(--head-1-overflow);
margin-top: var(--head-1-margin-top);
margin-bottom: var(--head-1-margin-bottom);
font-family: var(--head-1-font-family);
font-size: var(--head-1-font-size);
line-height: var(--head-1-line-height);
color: var(--head-1-color);
font-weight: var(--head-1-font-weight);
font-variation-settings: var(--head-1-font-variation-settings);
text-transform: var(--head-1-text-transform);
word-break: var(--head-1-word-break);
overflow-wrap: var(--head-1-overflow-wrap);
text-align: var(--head-1-text-align);
}

h1 em {
font-family: var(--head-1-emphasis-font-family);
font-size: var(--head-1-emphasis-font-size);
line-height: var(--head-1-emphasis-line-height);
font-weight: var(--head-1-emphasis-font-weight);
font-variation-settings: var(--head-1-emphasis-font-variation-settings);
}

/* @end @variables - @h1 */

/* @group @variables - @h2 */

h2 {
overflow: var(--head-2-overflow);
margin-top: var(--head-2-margin-top);
margin-bottom: var(--head-2-margin-bottom);
font-family: var(--head-2-font-family);
font-size: var(--head-2-font-size);
line-height: var(--head-2-line-height);
color: var(--head-2-color);
font-weight: var(--head-2-font-weight);
font-variation-settings: var(--head-2-font-variation-settings);
text-transform: var(--head-2-text-transform);
font-style: var(--head-2-font-style);
word-break: var(--head-2-word-break);
overflow-wrap: var(--head-2-overflow-wrap);
text-align: var(--head-2-text-align);
}

h2 em {
font-family: var(--head-2-emphasis-font-family);
font-size: var(--head-2-emphasis-font-size);
line-height: var(--head-2-emphasis-line-height);
font-weight: var(--head-2-emphasis-font-weight);
font-variation-settings: var(--head-2-emphasis-font-variation-settings);
}

/* @end @variables - @h2 */

/* @group @variables - @h3 */

h3 {
overflow: var(--head-3-overflow);
margin-top: var(--head-3-margin-top);
margin-bottom: var(--head-3-margin-bottom);
font-family: var(--head-3-font-family);
font-size: var(--head-3-font-size);
line-height: var(--head-3-line-height);
color: var(--head-3-color);
font-weight: var(--head-3-font-weight);
font-variation-settings: var(--head-3-font-variation-settings);
text-transform: var(--head-3-text-transform);
word-break: var(--head-3-word-break);
overflow-wrap: var(--head-3-overflow-wrap);
text-align: var(--head-3-text-align);
}

h3 em {
font-family: var(--head-3-emphasis-font-family);
font-size: var(--head-3-emphasis-font-size);
line-height: var(--head-3-emphasis-line-height);
font-weight: var(--head-3-emphasis-font-weight);
font-variation-settings: var(--head-3-emphasis-font-variation-settings);
}

/* @end @variables - @h3 */

/* @group @variables - @h4 */

h4 {
overflow: var(--head-1-overflow);
margin-top: var(--head-4-margin-top);
margin-bottom: var(--head-4-margin-bottom);
font-family: var(--head-4-font-family);
font-size: var(--head-4-font-size);
line-height: var(--head-4-line-height);
color: var(--head-4-color);
font-weight: var(--head-4-font-weight);
font-variation-settings: var(--head-4-font-variation-settings);
text-transform: var(--head-4-text-transform);
word-break: var(--head-4-word-break);
overflow-wrap: var(--head-4-overflow-wrap);
text-align: var(--head-4-text-align);
}

h4 em {
font-family: var(--head-4-emphasis-font-family);
font-size: var(--head-4-emphasis-font-size);
line-height: var(--head-4-emphasis-line-height);
font-weight: var(--head-4-emphasis-font-weight);
font-variation-settings: var(--head-4-emphasis-font-variation-settings);
}

/* @end @variables - @h4 */

/* @group @width / height */

[class*="a-svg-icon"],
[class*="a-svg-"] {
box-sizing: border-box;
width: var(--icon-width);
height: var(--icon-height);
margin: var(--icon-margin);
fill: var(--icon-fill);
opacity: var(--icon-opacity);
stroke: var(--icon-stroke);
stroke-width:var(--icon-stroke-width);
stop-color: var(--icon-stop-color);
will-change: transform;
transform: var(--icon-transform);
transform-origin: center;
transition: var(--icon-transition);
}

/* @end @width / height */

/* variables core --------------------------------------------------------*/

/* @group @variables - color */

:root {
--background-color: hsl(220deg 20% 90%);
--border-color: hsl(220deg 5% 85%);
--border-action-color: hsl(220deg 2.5% 75%);

--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: hsl(220deg 50% 50%);
--color-primary-action: hsl(220deg 50% 45%);
--color-primary-active: hsl(220deg 50% 40%);

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

/* @end @variables - color */

/* @group @variables - color */

:root {
--color-white: hsl(0deg 0% 100%);
}

/* @end @variables - color black */

/* @group @variables - link */

: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 - link */

/* @group @variables - form color */

:root {
--color-label: hsl(240deg 5% 20%);
--color-input-disabled: hsl(220deg 5% 60% / 50%);
--color-form-checked: hsl(198deg 75% 47.5%);
--color-form-error: hsl(0deg 75% 47.5%);
--color-form-success: hsl(150deg 75% 47.5%);
--check-border: hsl(240deg 5% 65%);

--color-form-icon: hsl(242.5deg 5% 85%);
--color-autofill-primary: hsl(220deg 90% 45%);
--color-autofill-secondary: hsl(220deg 90% 95%);
--color-input-disabled: hsl(220deg 10% 85%);
--color-success-primary: hsl(120deg 55% 45%);
--color-success-secondary: hsl(120deg 60% 95%);
--color-error-primary: hsl(355deg 55% 55%);
--color-error-secondary: hsl(355deg 100% 97.5%);
--color-warning-primary: hsl(50deg 95% 47.5%);
--color-warning-secondary:hsl(50deg 100% 95%);
--color-focus-primary: hsl(205deg 55% 55%);
--color-focus-secondary: hsl(205deg 90% 97.5%);
--color-focus-tertiary: hsl(205deg 55% 75%);
}

/* @end @variables - form color */

/* @group @variables - transition */

:root {

/* 背景色 */
--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);

/* 透過 */
--opacity-transition: opacity var(--transition-time) 0s var(--transition-cubic-bezier), visibility 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);

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

/* 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 @font-family */

html {
font-family: 'Hiragino Sans', 'BIZ UDPGothic', system-ui, -apple-system, 'Meiryo', sans-serif;
}

body, h5, p, ul, ol, dl, table{
font-family: inherit;
font-smoothing: antialiased;
font-feature-settings: "palt" 1;
}

h1, h2, h3, h4 {
font-family: 'Oswald', 'Hiragino Sans', 'BIZ UDPGothic', system-ui, -apple-system, 'Meiryo', sans-serif;
}

/* @end @font-family */

/* @group @base font-size */

/* HTML要素の文字サイズが画面サイズ20emで87.5%、画面サイズ62emでは100% */
html{font-size: 100%;}

body {
min-width: 60rem;
line-height: 1.5;
}

h2 {
--head-2-font-size: 1.5rem;
--head-2-line-height: 1.2;
}

h3 {
--head-3-font-size: 1.125rem;
--head-3-line-height: 1.2;
}

/* @end @base font-size */

/* @group @variables x-padding */

:root {
--x-padding: calc(5vw + (100% - 68rem) / 2);
--x-padding: clamp(5%, calc((100vw - 80rem) / 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));
}

}

/* @end @variables x-padding */

/* @group @variables - color */

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

/* @end @variables - color */

/* @group @transition - link */

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

/* @end @transition - link */

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

/* @group @variables - @link */

:root {
--link-background-color: transparent;

--link-border-color: transparent;
--link-border-action-color: inherit;
--link-border-active-color: inherit;
--link-color: hsl(197.5deg 55%  47.5%);
--link-action-color: hsl(197.5deg 55% 42.5%);
--link-active-color: hsl(197.5deg 55% 37.5%);
--link-disabled-color: hsl(197.5deg 55% 47.5%, .5);
}

:where(main),
:where([class*="o-mutual-footer"]) {
--link-color: hsl(0deg 0% 90%);
--link-action-color: hsl(0deg 0% 100%);
--link-active-color: hsl(0deg 0% 80%);
--ripetere-direction: rtl;
}

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

/* @group @variables - @link */

:where(a):not([class]):not(:has(img)) {
box-decoration-break: clone;
background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
background-size: 0% 133%, 0 133%;
background-position: 0 0;
background-repeat: no-repeat;
background-origin: content-box;
border-bottom: 1.5px solid transparent;
font-size: var(--link-font-size);
line-height: var(--link-line-height);
color: var(--link-color);
text-decoration: none;
text-decoration-skip-ink: auto;
text-underline-position: under;
transition: background-size var(--transition-time) 0s var(--transition-cubic-bezier), border-color var(--transition-time) 0s var(--transition-cubic-bezier), color var(--transition-time) 0s var(--transition-cubic-bezier);
}

:where(a):not([class]):not(:has(img)):focus {
background-size: 100% 133%, 100% 133%;
border-bottom-color: var(--link-action-color);
color: var(--link-action-color);
text-decoration: none;
}

@media (hover: hover) {

:where(a):not([class]):not(:has(img)):hover {
background-size: 100% 133%, 100% 133%;
border-bottom-color: var(--link-action-color);
color: var(--link-action-color);
text-decoration: none;
}

}

:where(a):not([class]):not(:has(img)):active {
border-bottom-color: var(--link-active-color);
color: var(--link-active-color);
text-decoration: none;
}

:where(a):not([class]):not(:has(img)):disabled {
color: var(--link-disabled-color);
}



/* @end @variables - @link */

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

/* @group @layout */

body {
display: grid;
grid-template-rows: auto 1fr auto;
}

/* @end @layout */

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

/* @group @a-button */

[class*="a-button"] {
display: grid;
align-items: center;
gap: .75rem;
min-width: 7.5rem;
height: 3rem;
padding-inline: .75rem;
background-color: var(--color-primary);
color: var(--color-white);
border-radius: .25rem;
text-align: center;
direction: ltr;
transition: var(--link-primary-transition);
}

[class*="a-button"]:hover,
[class*="a-button"]:focus,
label:hover [class*="a-button"],
label:focus [class*="a-button"] {
background-color: var(--color-primary-action);
}

input[class*="has-error"] + * [class*="a-button"] {
background-color: var(--color-error-primary);
}

#auth:disabled {
    cursor: not-allowed;
}
#auth:disabled [class*="a-button"] {
    background-color: #bbb;

}

/* @end @a-button */

/* @group @a-button-secondary */

[class*="a-button-secondary"] {
justify-content: center;
grid-template-columns: 1rem auto;
}

/* @end @a-button-secondary */

/* @group @a-button-tertiary */

[class*="a-button-tertiary"] {
justify-content: center;
grid-template-columns: 1rem auto;
direction: rtl;
}

[class*="a-button-tertiary"]>* {
direction: ltr;
}

/* @end @a-button-tertiary */

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

/* @group @a-pulsante */

[class*="a-pulsante"] {
display: inline-grid;
align-items: center;
gap: .5rem;
min-width: 4.5rem;
height: 2.25rem;
margin-inline: auto;
padding-inline: .75rem;
background-color: hsl(220deg 20% 95%);
border-radius: .25rem;
font-size: .875rem;
line-height: 1.71428571;
text-align: center;
direction: ltr;
transition: var(--link-primary-transition);
}

[class*="a-pulsante"]:hover,
[class*="a-pulsante"]:focus,
label:hover [class*="a-pulsante"],
label:focus [class*="a-pulsante"] {
background-color: hsl(220deg 20% 80%);
}

input[class*="has-error"] + * [class*="a-pulsante"] {
background-color: var(--color-error-primary);
color: var(--color-white);
}

/* @end @a-pulsante */

/* @group @a-pulsante-secondary */

[class*="a-pulsante-secondary"] {
justify-content: center;
grid-template-columns: 1rem auto;
}

[class*="a-pulsante-secondary"] svg {
width: .75rem;
height: .75rem;
}

/* @end @a-pulsante-secondary */

/* @group @a-pulsante-deutero */

[class*="a-pulsante-deutero"] {
justify-content: center;
grid-template-columns: 1rem auto;
background-color: var(--color-primary);
color: var(--color-white);
}

[class*="a-pulsante-deutero"] svg {
width: .75rem;
height: .75rem;
}

[class*="a-pulsante-deutero"]:hover,
[class*="a-pulsante-deutero"]:focus,
label:hover [class*="a-pulsante-deutero"],
label:focus [class*="a-pulsante-deutero"] {
background-color: var(--color-primary-action);
}

/* @end @a-pulsante-deutero */

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

/* @group @a-bouton */

[class*="a-bouton"] {
display: grid;
align-items: center;
gap: .75rem;
min-width: 7.5rem;
height: 3rem;
margin-inline: auto;
padding-inline: .75rem;
background-color: var(--color-white);
border: 1px solid var(--color-white);
border-radius: .25rem;
font-size: .875rem;
line-height: 1.71428571;
color: inherit;
text-align: center;
direction: ltr;
transition: var(--link-primary-transition);
}

[class*="a-bouton"]:hover,
[class*="a-bouton"]:focus,
label:hover [class*="a-bouton"],
label:focus [class*="a-bouton"] {
color: hsl(220deg 50% 50%);
}

/* @end @a-bouton */

/* @group @a-bouton-secondary */

[class*="a-bouton-secondary"] {
justify-content: center;
grid-template-columns: 1rem auto;
}

[class*="a-bouton-secondary"] svg {
width: .75rem;
height: .75rem;
}

/* @end @a-bouton-secondary */

/* variables word-break --------------------------------------------------------*/

/* @group @variables */

[class*="a-word-break-primo"] {
--font-weight: 500;
--font-variation-settings: "wght" var(--font-weight);
}

/* @end @variables */

/* @group @a-word-break */

[class*="a-word-break-primary"],
[class*="a-word-break-deuxieme"],
[class*="a-word-break-toryism"] {word-break: keep-all;overflow-wrap: anywhere;}

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

/* @end @a-word-break */

/* @group @a-line-break-primary */

[class*="a-line-break"] {display: inline-block;}

/* @end @a-line-break-primary */

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

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

[class*="o-mutual-header"] {
position: relative;
height: 3rem;
}

[class*="m-mutual-header-body"] {
position: absolute;
z-index: 11;
top: 0;
right: 0;
left: 0;
height: 3rem;
display: grid;
align-items: center;
padding-block: .375rem;
padding-inline: var(--x-padding-left) var(--x-padding-right);
background-color: hsl(0deg 0% 100%);
box-shadow: 0 1px 0 0 hsl(220deg 5% 85%);
}

[class*="o-mutual-header"] h1 a {
display: grid;
height: 2.25rem;
}

[class*="o-mutual-header"] h1 img {
width: auto;
height: inherit;
}

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

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

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

[class*="o-mutual-footer"] {
padding-block: 2.25rem 3.75rem;
padding-inline: var(--x-padding-left) var(--x-padding-right);
background-color: hsl(220deg 5% 20%);
color: hsl(30deg 100% 100%);
}

[class*="o-mutual-footer"] small {
display: block;
font-size: .75rem;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
}

/* @end @a-mutual-footer */

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




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







/* @group @variables */

[class*="o-section"] {
--section-child-margin-right: var(--x-padding-right);
--section-child-margin-left: var(--x-padding-left);
}

[class*="m-fraction"] {
--section-child-margin-right: var(--push-margin-right);
--section-child-margin-left: var(--push-margin-left);
}

[class*="o-section-primary"] {
--section-gap: 2.25rem 0;
--section-padding-block-start: 3.75rem;
--section-padding-block-end: 4.5rem;
}

[class*="o-section-proto"] {
--section-gap: 2.25rem 0;
--section-padding-block-end: 4.5rem;
}

[class*="o-section-secondary"] {
--section-gap: 2.25rem 0;
--section-padding-block-start: 3.75rem;
--section-padding-block-end: 4.5rem;
}

[class*="m-section-footer"] {
--section-child-margin-right: var(--x-padding-right);
--section-child-margin-left: var(--x-padding-left);
}

/* @end @variables */

/* @group @o-section */

[class*="o-section"] {
position: relative;
z-index: var(--section-z-index);
display: grid;
align-content: start;
align-items: start;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: var(--section-gap);
align-self: var(--section-align-self);
padding-block-start: var(--section-padding-block-start);
padding-block-end: var(--section-padding-block-end);
background-color: var(--section-background-color);
background-image: var(--section-background-image);
background-position: 0 0;
background-repeat: var(--section-background-repeat);
background-size: var(--section-background-size);
color: var(--section-color);
backface-visibility: hidden;
content-visibility: auto;
contain-intrinsic-size: 0 30rem; /* 横は0、縦だけ200pxに設定 */
contain: layout;
}

[class*="o-section"]>* {
margin-right: var(--section-child-margin-right);
margin-left: var(--section-child-margin-left);
}

[class*="m-fraction"] {
grid-column: var(--section-child-grid-column);
}

/* @end @o-section */

/* @group @o-section */

[class*="a-section-media"] {
position: absolute;
z-index: -2;
inset: 0;
}

[class*="a-section-media"] img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

/* @end @o-section */

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

/* @group @variables */

[class*="m-headline"] {
--head-2-margin-bottom: 0;
--head-2-word-break: keep-all;
--head-2-overflow-wrap: break-word;
--head-2-font-weight: 500;
--head-2-font-variation-settings: "wght" var(--head-2-font-weight);
}

/* @end @variables */

/* @group @m-headline */

[class*="m-headline"] {
position: relative;
z-index: 3;
/*padding-bottom: calc(.75rem - 1px);
border-bottom: 1px solid hsl(220deg 5% 55%);*/
word-break: keep-all;
text-transform: uppercase;
}

/* @end @m-headline */

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

/* @group @variables */

[class*="m-success-headline"] {
--head-2-margin-bottom: 0;
--head-2-word-break: keep-all;
--head-2-overflow-wrap: break-word;
--head-2-font-weight: 500;
--head-2-font-variation-settings: "wght" var(--head-2-font-weight);
--head-2-color: var(--color-primary);
}

/* @end @variables */

/* @group @m-success-headline */

[class*="m-success-headline"] {
position: relative;
z-index: 3;
display: grid;
justify-content: center;
grid-auto-flow: row;
gap: 1.5rem;
word-break: keep-all;
text-transform: uppercase;
text-align: center;
}

/* @end @m-success-headline */

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

/* @group @variables */

[class*="m-section-footer"] {
--section-footer-grid-template-columns: minmax(7.5rem, 9rem) auto;
--section-footer-gap: 1.5rem;
--section-footer-margin-top: 1.5rem;
--section-footer-direction: ltr;
}

[class*="m-section-footer-secondary"] {
--section-footer-justify-content: start;
--section-footer-grid-template-columns: minmax(7.5rem, 9rem) auto;
--section-footer-gap: 1.5rem;
}

[class*="m-section-footer-tertiary"] {
--section-footer-justify-content: space-between;
--section-footer-grid-template-columns: minmax(7.5rem, 9rem) auto;
--section-footer-gap: 1.5rem;
--section-footer-direction: rtl;
}

/* @end @variables */

/* @group @m-section-footer */

[class*="m-section-footer"] {
box-sizing: border-box;
display: grid;
justify-content: var(--section-footer-justify-content);
grid-template-columns: var(--section-footer-grid-template-columns);
gap: var(--section-footer-gap);
margin-top: var(--section-footer-margin-top);
padding-right: var(--section-footer-padding-right);
padding-left: var(--section-footer-padding-left);
direction: var(--section-footer-direction);
}

/* @end @m-section-footer */

/* -------------------------------------------------------- */
/* @group @variables */

[class*="m-grid"] {
--grid-template-columns: repeat(1, 1fr);
--grid-gap: 3rem;
}

[class*="grille"] {
--grid-template-columns: repeat(1, 1fr);
--grid-gap: 1.5rem;
}

[class*="m-grid-secondary"],
[class*="m-grille-secondary"] {
--grid-template-columns: repeat(1, 1fr);
}

[class*="m-grid-tertiary"],
[class*="m-grille-tertiary"] {
--grid-template-columns: repeat(3, 1fr);
}

/* @end @variables */

/* @group @m-grid */

[class*="m-grid"],
[class*="grille"] {
display: grid;
align-items: var(--grid-align-items);
grid-template-columns: var(--grid-template-columns);
gap: var(--grid-gap);
order: var(--grid-order);
direction: var(--grid-direction);
}

:where([class*="m-grid"])>* {
overflow: clip;
direction: ltr;
}

/* @end @m-grid */
/* @group @a-file-upload-hidden */

[class*="a-file-upload-hidden"] {
position: absolute;
z-index: -2;
width: 0;
height: 0;
opacity: 0;
clip: rect(1px, 1px, 1px, 1px);
}

/* @end @a-file-upload-hidden */

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

/* @group @m-file-upload */

[class*="m-file-upload"] {
position: relative;
display: grid;
grid-auto-flow: row;
gap: 1.5rem;
}

/* @end @m-file-upload */

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

[class*="a-auth-area"] {
box-sizing: border-box;
position: relative;
display: grid;
justify-content: center;
align-content: center;
align-items: center;
grid-auto-flow: row;
gap: 1.125rem;
min-height: 20rem;
padding: calc(1.125rem - 1px);
background-color: var(--color-white);
border: 1px solid var(--border-color);
border-radius: .375rem;
transition: var(--link-premier-transition);
text-align: center;
}

[class*="a-auth-area"] input {
    width: 300px;
    margin: 0 auto;
}


/* @group @a-file-upload-area */

[class*="a-file-upload-area"] {
box-sizing: border-box;
position: relative;
display: grid;
justify-content: center;
align-content: center;
align-items: center;
grid-auto-flow: row;
gap: 1.125rem;
min-height: 20rem;
padding: calc(1.125rem - 1px);
background-color: var(--color-white);
border: 1px solid var(--border-color);
border-radius: .375rem;
cursor: pointer;
transition: var(--link-premier-transition);
}

[class*="a-file-upload-area"]:hover,
[class*="a-file-upload-area"]:focus {
}

input:focus + [class*="a-file-upload-area"],
[class*="a-file-upload-area"]:hover,
[class*="a-file-upload-area"]:focus,
[class*="a-file-upload-area"].dragover {
padding: calc(1.125rem - 2px);
border-width: 2px;
border-color: var(--color-form-checked);
}

input:focus-visible + [class*="a-file-upload-area"] {
z-index: 2;
outline: 2px dashed hsl(47deg 100% 60%);
outline-offset: 4px;
}

input[class*="has-error"] + [class*="a-file-upload-area"] {
background-color: var(--color-error-secondary);
color: var(--color-error-primary);
border-color: var(--color-error-primary);
}

[class*="a-file-upload-area"] svg {
width: 3rem;
height: 3rem;
margin-inline: auto;
color: var(--color-primary);
transition: var(--color-transition);
}

[class*="a-file-upload-area"]:hover svg,
[class*="a-file-upload-area"]:focus svg {
color: var(--color-primary-action);
}

input[class*="has-error"] + [class*="a-file-upload-area"] svg {
color: var(--color-error-primary);
}

[class*="a-file-uploader-text"] {
display: grid;
grid-auto-flow: rows;
gap: .375rem;
font-size: .75rem;
line-height: 1.5;
text-align: center;
}

[class*="a-file-uploader-button"] {
display: grid;
justify-content: center;
align-items: center;
height: 3rem;
background-color: var(--color-primary);
color: var(--color-white);
border-radius: .25rem;
transition: var(--link-primary-transition);
}

label:hover [class*="a-file-uploader-button"],
label:focus [class*="a-file-uploader-button"] {
background-color: var(--color-primary-action);
}

/* @end @a-file-upload-area */

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

/* @group @a-notice-icon-list */

[class*="a-notice-icon-list"] {
display: grid;
grid-template-columns: 1rem 1fr;
gap: .375rem .5rem;
}

[class*="a-notice-icon-list"] svg {
width: 1rem;
height: 1rem;
margin-top: .25rem;
color: var(--color-primary);
}

/* @end @a-notice-icon-list */

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

/* @group @variables */

[class*="m-upload-area"] {
    display: none;
--head-3-font-size: 1.25rem;
--head-3-color: hsl(220deg 30% 30%);
}

/* @end @variables */

/* @group @m-upload-area */

/* [class*="m-upload-area"] {
display: grid;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: 1.5rem;
} */

/* @end @m-upload-area */

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

/* @group @m-upload-list */

[class*="m-upload-list"] {
padding-top: .75rem;
display: grid;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: .75rem;
}

/* @end @m-upload-list */

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

/* @group @variables */

[class*="a-upload-detail"] {
--background-color: var(--color-white);
}

[class*="a-upload-detail"][class*="has-error"] {
--background-color: var(--color-error-secondary);
--border-color: var(--color-error-primary);
}

/* @end @variables */

/* @group @a-upload-detail */

[class*="a-upload-detail"] {
padding: calc(.75rem - 1px);
background-color: var(--background-color);
border: 1px solid var(--border-color);
border-radius: .375rem;
}

/* @end @a-upload-detail */

/* @group @a-upload-detail */

[class*="a-upload-detail"] {
display: grid;
grid-template-columns: 3rem .75rem 1fr .75rem 1.5rem;
grid-template-rows: 1.5rem .75rem .75rem auto;
}

[class*="a-upload-file-delite-button"] {
grid-column: 5;
grid-row: 1;
cursor: pointer;
}

[class*="a-upload-file-name"] {
grid-column: 3;
grid-row: 1;
}

[class*="a-upload-file-type"] {
grid-column: 1;
grid-row: 1 / span 4;
}

[class*="a-upload-progress"] {
grid-column: 3 / span 4;
grid-row: 3;
}

[class*="a-upload-error-text"] {
grid-column: 3 / span 4;
grid-row: 4;
}

/* @end @a-upload-detail */

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

/* @group @a-upload-file-name */

[class*="a-upload-file-name"] {
display: grid;
grid-template-columns: 1fr auto;
gap: .75rem;
}

[class*="a-upload-file-name"] dt {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

[class*="a-upload-file-name"] dd {
white-space: nowrap;
}

[class*="has-error"] [class*="a-upload-file-name"] dd {
color: var(--color-error-primary);
}

/* @end @a-upload-file-name */

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

/* @group @a-upload-file-type */

[class*="a-upload-file-type"] {
align-self: center;
}

[class*="a-upload-file-type"] img {
width: 3rem;
height: 3rem;
}

/* @end @a-upload-file-type */

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

/* @group @a-upload-file-delite-button */

[class*="a-upload-file-delite-button"] {
position: relative;
transition: var(--color-transition);
}

[class*="a-upload-file-delite-button"]:hover,
[class*="a-upload-file-delite-button"]:focus {
color: var(--color-error-primary);
}

[class*="a-upload-file-delite-button"]:before {
content: '削除';
position: absolute;
bottom: 100%;
left: 50%;
padding: .1875rem .375rem .5rem;
background-color: var(--color-error-primary);
font-size: .625rem;
line-height: 1.2;
color: var(--color-white);
white-space: nowrap;
opacity: 0;
pointer-events: none;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - .375rem), 70% calc(100% - .375rem), 50% 100%, 30% calc(100% - .375rem), 0 calc(100% - .375rem));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - .375rem), 70% calc(100% - .375rem), 50% 100%, 30% calc(100% - .375rem), 0 calc(100% - .375rem));
transform: translateX(-50%);
transition: var(--opacity-transition);
}

[class*="a-upload-file-delite-button"]:hover:before,
[class*="a-upload-file-delite-button"]:focus:before {
opacity: 1;
}

/* @end @a-upload-file-delite-button */

/* @group @m-error-dialog */

[class*="m-error-dialog"] {
position: fixed;
z-index: 101;
visibility: hidden;
inset: 0;
display: grid;
justify-content: center;
align-items: center;
padding: 0;
border: none;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: var(--opacity-transition:);
}

[class*="has-doalog-error"][class*="m-error-dialog"] {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

[class*="a-dialog-overlay"] {
position: fixed;
z-index: 100;
visibility: visible;
inset: 0;
background-color: hsl(220deg 5% 20% / 50%);
-webkit-backdrop-filter: blur(.125rem);
backdrop-filter: blur(.125rem);
opacity: 0;
pointer-events: none;
cursor: pointer;
}

[class*="has-doalog-error"][class*="m-error-dialog"] + [class*="a-dialog-overlay"] {
opacity: 1;
pointer-events: auto;
}

[class*="a-error-dialog"] {
box-sizing: border-box;
display: grid;
justify-content: center;
align-content: center;
align-items: center;
gap: .75rem;
width: 30rem;
padding: 1.5rem;
background-color: var(--color-white);
border-radius: .375rem;
box-shadow: 0 1px .25rem hsl(220deg 5% 20% / 40%);
pointer-events: auto;
}

[class*="a-error-icon-dialog"] {
width: 4.5rem;
height: 4.5rem;
margin-inline: auto;
color: var(--color-error-primary);
}

[class*="a-error-dialog"] p {
margin-bottom: .75rem;
text-align: center;
}

/* @end @m-error-dialog */

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

/* @group @a-upload-error-text */

[class*="a-upload-error-text"] {
visibility: hidden;
height: 0;
color: var(--color-error-primary);
}

[class*="has-error"] [class*="a-upload-error-text"] {
visibility: visible;
height: auto;
color: var(--color-error-primary);
}

/* @end @a-upload-error-text */
/* @group @m-result-list */

[class*="m-result-list"] {
display: grid;
grid-auto-flow: row;
grid-auto-columns: 1fr;
gap: .75rem;
}

/* @end @m-result-list */

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

/* @group @variables */

[class*="a-result-detail"] {
--background-color: var(--color-white);
}

[class*="a-result-detail"][class*="has-error"] {
--background-color: var(--color-error-secondary);
--border-color: var(--color-error-primary);
}

/* @end @variables */

/* @group @a-result-detail */

[class*="a-result-detail"] {
padding: calc(.75rem - 1px);
background-color: var(--background-color);
border: 1px solid var(--border-color);
border-radius: .375rem;
}

/* @end @a-result-detail */

/* @group @a-result-detail */

[class*="a-result-detail"] {
display: grid;
align-items: center;
grid-template-columns: 3rem .75rem 1fr .75rem 1.5rem;
grid-template-rows: auto;
}

[class*="a-result-file-delite-button"] {
grid-column: 5;
grid-row: 1;
cursor: pointer;
}

[class*="a-result-file-name"] {
grid-column: 3;
grid-row: 1;
}

[class*="a-result-file-type"] {
grid-column: 1;
grid-row: 1;
}

/* @end @a-result-detail */

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

/* @group @a-result-file-name */

[class*="a-result-file-name"] {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

/* @end @a-result-file-name */

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

/* @group @a-result-file-type */

[class*="a-result-file-type"] {
align-self: center;
}

[class*="a-result-file-type"] img {
width: 3rem;
height: 3rem;
}

/* @end @a-result-file-type */

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

/* @group @a-result-file-delite-button */

[class*="a-result-file-delite-button"] {
position: relative;
transition: var(--color-transition);
}

[class*="a-result-file-delite-button"]:hover,
[class*="a-result-file-delite-button"]:focus {
color: var(--color-error-primary);
}

[class*="a-result-file-delite-button"]:before {
content: '削除';
position: absolute;
bottom: 100%;
left: 50%;
padding: .1875rem .375rem .5rem;
background-color: var(--color-error-primary);
font-size: .625rem;
line-height: 1.2;
color: var(--color-white);
white-space: nowrap;
opacity: 0;
pointer-events: none;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - .375rem), 70% calc(100% - .375rem), 50% 100%, 30% calc(100% - .375rem), 0 calc(100% - .375rem));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - .375rem), 70% calc(100% - .375rem), 50% 100%, 30% calc(100% - .375rem), 0 calc(100% - .375rem));
transform: translateX(-50%);
transition: var(--opacity-transition);
}

[class*="a-result-file-delite-button"]:hover:before,
[class*="a-result-file-delite-button"]:focus:before {
opacity: 1;
}

/* @end @a-result-file-delite-button */

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

/* @group @a-result-error-text */

[class*="a-result-error-text"] {
visibility: hidden;
height: 0;
color: var(--color-error-primary);
}

[class*="has-error"] [class*="a-result-error-text"] {
visibility: visible;
height: auto;
color: var(--color-error-primary);
}

/* @end @a-result-error-text */
/* -------------------------------------------------------- */

/* @group @m-file-type */

[class*="m-file-type"] {
position: relative;
z-index: 2;
display: grid;
align-content: start;
grid-auto-flow: row;
gap: 1.125rem;
background-color: hsl(0deg 0% 100%);
padding: calc(1.125rem);
border-radius: .375rem;
}

/* @end @m-file-type */

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

/* @group @a-file-type-header */

[class*="a-file-type-header"] {
position: relative;
display: grid;
align-content: center;
align-items: center;
grid-template-columns: 3rem 1fr;
gap: .75rem;
}

[class*="a-file-type-header"] img {
width: 3rem;
height: 3rem;
}

[class*="a-file-type-header"] h3 {
font-size: 1.25rem;
line-height: 1.2;
}

/* @end @a-file-type-header */

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

/* @group @m-file-format-setting */

[class*="m-file-format-setting"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
padding: .75rem;
background-color: hsl(220deg 5% 95%);
border-radius: .375rem;
}

/* @end @m-file-format-setting */

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

/* @group @m-compression-setting */

[class*="m-compression-setting"] {
display: grid;
grid-auto-flow: row;
gap: .75rem;
padding: .75rem;
background-color: hsl(220deg 5% 95%);
border-radius: .375rem;
}

/* @end @m-compression-setting */

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

/* @group @m-radio-button-list */

[class*="m-radio-button-list"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background-color: var(--border-color);
border-radius: .25rem;
border: 1px solid var(--border-color);
}

[class*="m-radio-button-list"]>li {
padding: 1px;
}

[class*="m-radio-button-list"]>li:first-of-type {
border-radius: .25rem 0 0 .25rem;
}

[class*="m-radio-button-list"]>li:last-of-type {
border-radius: 0 .25rem .25rem 0;
}

/* @end @m-radio-button-list */

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

/* @group @a-radio-input */

[class*="a-radio-input"] {
position: relative;
background-color: var(--color-white);
}

/* @end @a-radio-input */

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

/* @group @a-radio-button-primary */

[class*="a-radio-button-primary"] {
position: relative;
display: grid;
justify-content: center;
align-items: center;
height: calc(3rem - 4px);
border: 2px solid transparent;
border-radius: inherit;
font-size: .875rem;
line-height: 1.71428571;
cursor: pointer;
transition: var(--link-premier-transition);
}

input:focus + [class*="a-radio-button-primary"],
[class*="a-radio-button-primary"]:hover,
[class*="a-radio-button-primary"]:focus {
border-color: var(--color-form-checked);
}

input:checked + [class*="a-radio-button-primary"] {
background-color: var(--color-form-checked);
color: var(--color-white);
}

input:focus-visible + [class*="a-radio-button-primary"] {
z-index: 2;
outline: 2px dashed hsl(47deg 100% 60%);
outline-offset: 4px;
}

/* @end @a-radio-button-primary */

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

/* @group @a-radio-hidden */

[class*="a-radio-hidden"] {
position: absolute;
z-index: -2;
width: 0;
height: 0;
opacity: 0;
clip: rect(1px, 1px, 1px, 1px);
}

/* @end @a-radio-hidden */


/* select --------------------------------------*/

/* @group @reset select */

select {
-moz-appearance:none;-webkit-appearance:none;appearance:none;
margin:0;
padding-top:0;
padding-bottom:0;
border:0;
border-radius:0;
outline:0 none;
}

select:focus::-ms-value {
background:transparent;
color:inherit;
}

select:-moz-focusring,
select:hover:-moz-focusring,
select:focus:-moz-focusring {
-moz-appearance:none;
color:transparent;
text-shadow:0 0 0 hsl(0, 0%, 0%, 0);
}

select:disabled{pointer-events: none;opacity: .5;}

/* @end @reset select */

/* select --------------------------------------*/


/* @group @variables */

[class*="a-select"] {
--select-icon-dropdown: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsl(220, 20%, 60%)" fill-rule="evenodd" d="M23.936 2.255A.5.5 0 0 0 23.5 2H.5a.5.5 0 0 0-.427.759l11.5 19a.5.5 0 0 0 .855 0l11.5-19a.5.5 0 0 0 .008-.504z"/></svg>');
--select-background-image: linear-gradient(-180deg, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 100%) 100%);
--select-background-color: var(--color-white);
--select-border-color: transparent;
--select-box-shadow: 0 0 0 1px var(--border-color), 0 1px .375rem hsla(220, 5%, 90%, 1);
}

[class*="a-select-all"] {
--select-width: 100%
}

[class*="a-select"]:not(:disabled):hover {
--select-border-color: var(--color-form-checked);
--select-box-shadow: 0 1px .375rem hsla(220, 5%, 90%, 1);
}

[class*="a-select"]:not(:disabled):focus {
--select-border-color: var(--color-form-checked);
--select-box-shadow: 0 1px .375rem hsla(220, 5%, 90%, 1);
}

[class*="a-select"]:disabled {
--select-background-color: var(--color-input-disabled);
--select-color: var(--color-text-disabled);
}

/*[class*="a-select"]:-webkit-autofill,
[class*="a-select"]:autofill {
--background-color: var(--color-autofill-secondary);
--border-color: var(--color-autofill-primary);
--box-shadow-color: var(--color-autofill-primary);
}*/

/* @end @variables */

/* @group @a-form-select-pimary */

[class*="a-select"] {
box-sizing: border-box;
display: grid;
align-items: center;
width: var(--select-width);
min-height: 3rem;
padding-inline: calc(.75rem - 2px) calc(2.25rem - 2px);
background-color: var(--select-background-color);
background-image: var(--select-icon-dropdown), var(--select-background-image);
background-position: calc(100% - .75rem) center, 0 0;
background-repeat: no-repeat;
background-size: calc(.1875rem * 3) auto, 100% 100%;
border: 2px solid var(--select-border-color);
border-radius: .375rem;
box-shadow: var(--select-box-shadow);
color: var(--select-color);
caret-color: var(--select-color);
transition: var(--link-premier-transition);
white-space: nowrap;
}

/* @end @a-form-select */

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

/* @group @m-success-info-list */

[class*="m-success-info-list"] {
display: grid;
}

/* @end @m-success-info-list */

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

/* @group @m-success-detail */

[class*="m-success-detail"] {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .75rem;
}

/* @end @m-success-detail */
/* -------------------------------------------------------- */

/* @group @a-success-detail */

[class*="a-success-detail"] {
position: relative;
display: grid;
align-content: center;
align-items: center;
grid-template-columns: 1fr 12rem;
gap: .75rem;
padding: .75rem;
background-color: var(--color-white);
border-radius: .375rem;
/*box-shadow: 0 1px 0 0 var(--border-color), inset 0 1px 0 0 var(--border-color);*/
}

/* @end @a-success-detail */
/* @group @m-success-header */

[class*="m-success-header"] {
display: grid;
justify-content: center;
grid-auto-flow: row;
gap: 1.5rem;
text-align: center;
}

/* @end @m-success-header */

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

/* @group @a-success */

[class*="a-success-icon"] {
display: grid;
width: 9rem;
height: 9rem;
margin-inline: auto;
border-radius: 50%;
stroke-width: 2;
stroke: var(--color-primary);
stroke-miterlimit: 10;
box-shadow: inset 0 0 0 var(--color-primary);
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

[class*="a-success-circle"] {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke-miterlimit: 10;
stroke: var(--color-primary);
fill: none;
animation: stroke .6s var(--success-animation-curve) forwards;
}

[class*="a-success-check"] {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke .3s var(--success-animation-curve) .8s forwards;
}

/* @end @a-success */

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

/* @group @variables */

:root {
--success-animation-curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
}

/* @end @variables */

/* @group @check-animation */

@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}

@keyframes scale {
0%, 100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}

@keyframes fill {
100% {
box-shadow: inset 0 0 0 6rem var(--color-premier);
}
}

/* @end @check-animation */
/* @group @variables */

:root {
--progress-bar-height: .375rem;
--progress-bar-background-color: var(--background-color);
}

/* @end @variables */

/* @group @progress */

progress {
overflow: clip;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: 100%;
height: var(--progress-bar-height);
border: 1px solid var(--progress-bar-border-color);
border-radius: .75rem;
}

progress[value]::-webkit-progress-bar {
background-color: var(--progress-bar-background-color);
border-radius: .75rem; 
}

progress[value]::-webkit-progress-value {
background-color: var(--color-primary);
border-radius: .75rem; 
}

[class*="has-error"] progress[value]::-webkit-progress-bar,
[class*="has-error"] progress[value]::-webkit-progress-value {
background-color: var(--color-error-primary);
}

/* @end @progress */

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

/* @group @variables */

[class*="m-progress-bar"] {
--progress-bar-height: 1.5rem;
--progress-bar-background-color: var(--color-white);
--font-weight: 500;
--font-variation-settings: "wght" var(--font-weight);
}

/* @end @variables */

/* @group ＠m-progress-bar */

[class*="m-progress-bar"] {
display: grid;
gap: .75rem;
}

/* @end @m-progress-bar */

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

/* @group @m-error-area */

[class*="m-error-area"] {
display: none;
}

[class*="has-error"] [class*="m-error-area"] {
display: block;
}

/* @end @m-error-area */

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

/* @group @m-error-message */

[class*="m-error-message"] {
position: relative;
display: grid;
grid-auto-flow: row;
gap: .375rem;
color: var(--color-error-primary);
}

/* @end @m-error-message */

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

/* @group @a-error-message-detail */

[class*="a-error-message-detail"] {
display: grid;
grid-template-columns: 1rem 1fr;
gap: .5rem;
}

[class*="a-error-message-detail"] svg {
width: 1rem;
height: 1rem;
margin-top: .25rem;
color: var(--color-error-primary);
}

/* @end @a-error-message-detail */

@keyframes dotAnimation {
    0% { content: '.'; }
    20% { content: '..'; }
    40% { content: '...'; }
    60% { content: '....'; }
    80% { content: '.....'; }
    100% { content: '......'; }
}

#step-message::after {
    display: inline-block;
    animation: dotAnimation 1.5s steps(3, end) infinite;
    content: '';
}
#step-message.complete::after {
    animation: none;
    content: '';
}

/* -------------------------------------------------------- */
/* @group @m-file-progress-section                          */
/* -------------------------------------------------------- */

.m-file-progress-section {
    margin-top: 1.5rem;
    border: 1px solid var(--color-border, hsl(220deg 10% 88%));
    border-radius: .5rem;
}

.a-file-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem 1rem;
    background: var(--color-background-secondary, hsl(220deg 10% 96%));
    border-bottom: 1px solid var(--color-border, hsl(220deg 10% 88%));
}

.a-file-progress-heading {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
}

.a-file-progress-count {
    font-size: .8125rem;
    color: var(--color-text-action);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- */
/* @group @m-file-progress-list                             */
/* -------------------------------------------------------- */

.m-file-progress-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.a-file-progress-empty {
    padding: 1rem;
    font-size: .875rem;
    color: var(--color-text-action);
    text-align: center;
}

.a-file-progress-item {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    font-size: .8125rem;
    border-bottom: 1px solid var(--color-border, hsl(220deg 10% 92%));
    transition: background .15s;
}

.a-file-progress-item:last-child {
    border-bottom: none;
}

/* ステータスアイコン (CSS のみ) */
.a-file-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: .7rem;
}

[data-status="processing"] .a-file-status-icon {
    border: 2px solid var(--color-primary, hsl(220deg 70% 50%));
    border-top-color: transparent;
    animation: spin .7s linear infinite;
}

[data-status="done"] .a-file-status-icon {
    background: hsl(142deg 60% 45%);
    color: #fff;
}
[data-status="done"] .a-file-status-icon::after {
    content: '✓';
    font-size: .65rem;
    font-weight: 700;
}

[data-status="error"] .a-file-status-icon {
    background: hsl(0deg 70% 55%);
    color: #fff;
}
[data-status="error"] .a-file-status-icon::after {
    content: '✕';
    font-size: .65rem;
    font-weight: 700;
}

[data-status="processing"] .a-file-progress-status {
    color: var(--color-primary, hsl(220deg 70% 50%));
}
[data-status="done"] .a-file-progress-status {
    color: hsl(142deg 60% 40%);
}
[data-status="error"] .a-file-progress-status {
    color: hsl(0deg 70% 50%);
}

.a-file-progress-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}

.a-file-progress-phase {
    font-size: .75rem;
    padding: .125rem .4rem;
    border-radius: .25rem;
    background: var(--color-background-secondary, hsl(220deg 10% 94%));
    color: var(--color-text-action);
    white-space: nowrap;
}

.a-file-progress-status {
    font-size: .75rem;
    white-space: nowrap;
    min-width: 4rem;
    text-align: right;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* -------------------------------------------------------- */
/* @group @m-error-log-section                              */
/* -------------------------------------------------------- */

.m-error-log-section {
    margin-top: 1rem;
    border: 1px solid hsl(0deg 70% 80%);
    border-radius: .5rem;
    overflow: hidden;
}

.a-error-log-summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    background: hsl(0deg 70% 97%);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: hsl(0deg 60% 40%);
    list-style: none;
    user-select: none;
}
.a-error-log-summary::-webkit-details-marker { display: none; }
.a-error-log-summary::before {
    content: '▶';
    font-size: .625rem;
    transition: transform .2s;
    margin-left: auto;
}
.m-error-log-section[open] .a-error-log-summary::before {
    transform: rotate(90deg);
}

.a-error-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    border-radius: .75rem;
    background: hsl(0deg 70% 55%);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.m-error-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    background: #fff;
}

.a-error-log-item {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 2fr);
    gap: .5rem;
    align-items: baseline;
    padding: .5rem 1rem;
    font-size: .8rem;
    border-bottom: 1px solid hsl(0deg 70% 92%);
}
.a-error-log-item:last-child {
    border-bottom: none;
}

.a-error-log-time {
    color: var(--color-text-action);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.a-error-log-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
    font-weight: 500;
}

.a-error-log-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: hsl(0deg 60% 40%);
}