@charset "UTF-8";
/*-----------------------------------*/
/*-----------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&family=Mrs+Saint+Delafield&display=swap");
*, ::after, ::before { box-sizing: border-box; }

html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; text-align: left; background-color: #fff; }

[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }

p { margin-top: 0; margin-bottom: 1rem; }

abbr[data-original-title], abbr[title] { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; cursor: help; border-bottom: 0; -webkit-text-decoration-skip-ink: none; text-decoration-skip-ink: none; }

address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }

dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }

ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }

dt { font-weight: 700; }

dd { margin-bottom: .5rem; margin-left: 0; }

blockquote { margin: 0 0 1rem; }

b, strong { font-weight: bolder; }

small { font-size: 80%; }

sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

a { color: #007bff; text-decoration: none; background-color: transparent; }

a:hover { color: #0056b3; text-decoration: underline; }

a:not([href]):not([class]) { color: inherit; text-decoration: none; }

a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

code, kbd, pre, samp { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 1em; }

pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; }

figure { margin: 0 0 1rem; }

img { vertical-align: middle; border-style: none; }

svg { overflow: hidden; vertical-align: middle; }

table { border-collapse: collapse; }

caption { padding-top: .75rem; padding-bottom: .75rem; color: #6c757d; text-align: left; caption-side: bottom; }

th { text-align: inherit; }

label { display: inline-block; margin-bottom: .5rem; }

button { border-radius: 0; }

button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }

button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

button, input { overflow: visible; }

button, select { text-transform: none; }

[role=button] { cursor: pointer; }

select { word-wrap: normal; }

[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; }

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; }

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border-style: none; }

input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }

textarea { overflow: auto; resize: vertical; }

fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }

legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.5rem; line-height: inherit; color: inherit; white-space: normal; }

progress { vertical-align: baseline; }

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; }

[type=search] { outline-offset: -2px; -webkit-appearance: none; }

[type=search]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

output { display: inline-block; }

summary { display: list-item; cursor: pointer; }

template { display: none; }

[hidden] { display: none !important; }

@font-face { font-family: 'FuiFont'; src: url("assets/font/huiFontP.woff2") format("woff2"); }
/*----------------------------------------*/
@media screen and (max-width: 769px) { #howto h4 { margin-bottom: 48px; } }
#howto .container { padding-top: 32px; padding-bottom: 64px; }
#howto-step { position: relative; }
#howto-step.container { padding-top: 0; padding-bottom: 0; }
#howto-step .howto-item { padding-left: 24px; padding-right: 24px; font-size: .875rem; }
#howto-step .howto-item .step { margin-bottom: 8px; color: #1d694c; font-size: .875rem; font-weight: bold; line-height: 1em; }
#howto-step .howto-item .title { margin-bottom: 24px; font-size: 1rem; font-weight: bold; }
#howto-step .howto-item .col { align-items: center; margin-bottom: 48px; }
@media screen and (max-width: 769px) { #howto-step .howto-item .col-item { width: calc(65% - 8px); } }
@media screen and (max-width: 600px) { #howto-step .howto-item .col-item { width: 100%; } }
#howto-step .howto-item .col-item.small { background-color: #efeded; }
@media screen and (max-width: 769px) { #howto-step .howto-item .col-item.small { width: calc(35% - 8px); min-width: unset; } }
@media screen and (max-width: 600px) { #howto-step .howto-item .col-item.small { order: -1; width: 100%; }
  #howto-step .howto-item .col-item.small img { max-width: 240px; height: auto; margin: 8px auto; } }
#howto-step .howto-item .buttonSet { margin-top: 48px; }
#howto-step .howto-item .buttonSet .bubble { color: #fff; background-color: #1d694c; }
#howto-step .howto-item .buttonSet .bubble::after { border-top-color: #1d694c; }
#howto-step .howto-item .buttonSet .button.primary { background-image: linear-gradient(to right, #acd078 0, #4d8f80 50%, #4d8f80 100%); background-size: 200% 100%; }
#howto-step .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; padding: 0; background-color: #1d694c; border: solid 1px #fff; border-radius: 50%; }
#howto-step .slick-arrow span { display: none; }
#howto-step .slick-arrow.slick-prev { left: -8px; display: inline-block; width: 26px; height: 26px; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23fff" fill-rule="evenodd" d="m10.76,5.7c.33.27.33.72,0,.99l-2.74,2.31,2.74,2.31c.31.27.31.7,0,.97-.32.28-.85.29-1.18.02l-3.33-2.8c-.33-.27-.33-.72,0-.99l3.33-2.8c.33-.27.85-.27,1.18,0h0Z"/></svg>'); background-position: center center; background-size: contain; background-repeat: no-repeat; }
#howto-step .slick-arrow.slick-next { right: -8px; display: inline-block; width: 26px; height: 26px; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23fff" fill-rule="evenodd" d="m7.24,5.71c.33-.27.85-.27,1.18,0l3.33,2.8c.33.27.33.72,0,.99l-3.33,2.8c-.33.27-.86.26-1.18-.02-.31-.27-.31-.7,0-.97l2.74-2.31-2.74-2.31c-.33-.27-.33-.72,0-.99Z"/></svg>'); background-position: center center; background-size: contain; background-repeat: no-repeat; }
#howto-step .slick-dots { list-style: none; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 0; margin: 32px 0 0; line-height: 0; }
#howto-step .slick-dots button { width: 12px; height: 12px; color: transparent; font-size: 1px; line-height: 0; background-color: #efeded; border: none; border-radius: 50%; }
#howto-step .slick-dots .slick-active button { background-color: #1d694c; }
#howto-att { background-color: #efeded; border-radius: 10px; }
#howto-att.container { padding: 48px; }
@media screen and (max-width: 1080px) { #howto-att.container { width: calc(100% - 16px); margin-left: 8px; margin-right: 8px; } }
@media screen and (max-width: 769px) { #howto-att.container { padding: 32px 24px; } }
#howto-att h3 { margin-bottom: 32px; font-size: 1.125rem; }
@media screen and (max-width: 769px) { #howto-att h3 { margin-bottom: 24px; } }
#howto-att ul { padding-left: 18px; font-size: .875rem; }
#howto-att ul:last-child { margin-bottom: 0; }
#howto-att ul > li { margin-bottom: 8px; }
#howto-att ul > li:last-child { margin-bottom: 0; }
#howto-att ul > li strong { color: #c81f1f; }

.timetabe_nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.timetabe_nav .slick-arrow { width: 32px; height: 32px; padding: 0; margin: 0; background: none; border: none; }
.timetabe_nav .slick-arrow span { display: none; }
.timetabe_nav .slick-arrow::before { content: ''; background-color: #1d694c; border-radius: 50%; }
.timetabe_nav .slick-arrow.slick-prev { order: 0; }
.timetabe_nav .slick-arrow.slick-prev::before { display: inline-block; width: 32px; height: 32px; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23fff" fill-rule="evenodd" d="m10.76,5.7c.33.27.33.72,0,.99l-2.74,2.31,2.74,2.31c.31.27.31.7,0,.97-.32.28-.85.29-1.18.02l-3.33-2.8c-.33-.27-.33-.72,0-.99l3.33-2.8c.33-.27.85-.27,1.18,0h0Z"/></svg>'); background-position: center center; background-size: contain; background-repeat: no-repeat; }
.timetabe_nav .slick-arrow.slick-next { order: 2; }
.timetabe_nav .slick-arrow.slick-next::before { display: inline-block; width: 32px; height: 32px; background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path fill="%23fff" fill-rule="evenodd" d="m7.24,5.71c.33-.27.85-.27,1.18,0l3.33,2.8c.33.27.33.72,0,.99l-3.33,2.8c-.33.27-.86.26-1.18-.02-.31-.27-.31-.7,0-.97l2.74-2.31-2.74-2.31c-.33-.27-.33-.72,0-.99Z"/></svg>'); background-position: center center; background-size: contain; background-repeat: no-repeat; }
.timetabe_nav .slick-dots { order: 1; list-style: none; display: flex; justify-content: center; align-items: center; gap: 16px; margin: 0; padding: 0; }
.timetabe_nav .slick-dots > li { display: none; }
.timetabe_nav .slick-dots > li.slick-active { display: block; }
.timetabe_nav .slick-dots button { padding: 0; margin: 0; color: #333333; font-size: 1.25rem; letter-spacing: .1em; text-decoration: none; background: none; border: none; cursor: default; }
.timetabe_nav .slick-dots button::before { content: '第'; display: inline-block; }
.timetabe_nav .slick-dots button::after { content: 'セメスター'; display: inline-block; }

#semester_tab { list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 32px; }
#semester_tab > li { width: calc((100% - (8px * 3)) / 4); }
@media screen and (max-width: 769px) { #semester_tab > li { width: calc(50% - 4px); } }
#semester_tab > li .button { display: block; width: 100%; height: 100%; padding: 12px 24px; color: #fff; font-size: .875rem; letter-spacing: .1em; text-align: center; background-color: rgba(82, 132, 118, 0.75); border: none; border-radius: 6px; }
#semester_tab > li.current .button { background-color: #1d694c; }

#simulation .heading-serif { margin: 96px auto 64px; font-family: 'Noto Serif JP', serif; font-size: 1.5rem; font-weight: bold; text-align: center; letter-spacing: .05em; }
#simulation #select_area { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin-bottom: 64px; }
#simulation #select_area > p { width: 100%; text-align: center; }
#simulation #select_area label { margin-bottom: 0; background-color: var(--subjectcolor); border: solid 1px var(--subjectcolor); border-radius: 6px; cursor: pointer; }
@media screen and (max-width: 769px) { #simulation #select_area label { min-width: calc(30% - 10px); } }
@media screen and (max-width: 414px) { #simulation #select_area label { width: 100%; } }
#simulation #select_area label span { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 10px 16px; color: #333333; font-size: .875rem; font-weight: 500; line-height: 1em; background-color: rgba(255, 255, 255, 0.75); border-radius: 5px; }
#simulation #select_area label span::before { content: ''; display: block; width: 1em; height: 1em; background-color: #fff; border-radius: 50%; box-shadow: 0 0 3px -1px rgba(51, 51, 51, 0.5) inset; }
#simulation #select_area label span input { display: none; }
#simulation #select_area label span:has(:checked) { color: #fff; background-color: rgba(255, 255, 255, 0.25); }
#simulation #select_area label span:has(:checked)::before { background-color: var(--subjectcolor); border: solid 3px #fff; }
#simulation #step2 .heading-serif { margin-bottom: 16px; }
#simulation #step2 .comment { text-align: center; margin-bottom: 64px; }

@media screen and (max-width: 769px) { #timetabe_simulation::before, #timetable::before { content: '※表と各セル内はスクロールできます。'; display: block; width: 100%; padding: 0 16px; margin-bottom: 8px; font-size: .75rem; text-align: center; } }

.semesters .semester_wrap { margin-bottom: 32px; overflow-x: auto; }
.semesters .semester_wrap > .title { display: none; }
.semesters .table_scroll { min-width: 700px; }
.semesters .simulation_table { width: 100%; table-layout: fixed; font-size: .75rem; border-collapse: collapse; }
.semesters .simulation_table th, .semesters .simulation_table td { border: solid 1px #999; }
.semesters .simulation_table th { padding: 6px; text-align: center; vertical-align: middle; }
.semesters .simulation_table td { padding: 6px 3px; vertical-align: top; }
.semesters .simulation_table thead th { background-color: #eee; }
.semesters .simulation_table thead th:first-child { width: 3em; }
@media screen and (min-width: 769.01px) { .semesters .simulation_table .bottom_head { display: none; } }
.semesters .simulation_table tbody th { position: sticky; left: -1px; z-index: 1; background-color: #eee; }
.semesters .simulation_table tbody td .label_set:has(.selected) label { opacity: .25; }
@media screen and (max-width: 769px) { .semesters .simulation_table tbody td .label_set { max-height: 160px; overflow-y: auto; } }
.semesters .simulation_table tbody td .label_set label { display: block; width: 100%; padding: 3px; margin-bottom: 0; line-height: 1.4em; cursor: pointer; }
#timetable .semesters .simulation_table tbody td .label_set label { cursor: default; }
.semesters .simulation_table tbody td .label_set label .roman { padding: 0 2px; font-family: 'Noto Serif JP', serif; }
.semesters .simulation_table tbody td .label_set label:has([data-mandatory="true"]) .field::before, .semesters .simulation_table tbody td .label_set label:has([data-mandatory="true"]) .area::before { content: '必須'; display: block; padding: 2px 6px; margin-right: 4px; line-height: 1em; background-color: #c81f1f; border-radius: 3px; }
.semesters .simulation_table tbody td .label_set label:hover { background-color: #f4f2eb; }
#timetable .semesters .simulation_table tbody td .label_set label:hover { background-color: transparent; }
.semesters .simulation_table tbody td .label_set label:has(.selected) { font-weight: bold; background-color: #f4f2eb; opacity: 1; }
.semesters .simulation_table tbody td .label_set label .field, .semesters .simulation_table tbody td .label_set label .area { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 3px; color: #fff; font-size: .625rem; text-align: center; background-color: var(--subjectcolor); }
.semesters .simulation_table tbody td .label_set label .area b { display: block; font-weight: normal; }
.semesters .simulation_table tbody td .label_set label .area b::before { content: '［'; }
.semesters .simulation_table tbody td .label_set label .area b::after { content: '］'; }
.semesters .simulation_table tbody td .label_set label .sbjct_meta { font-size: .625rem; }
.semesters .simulation_table tbody td .label_set label input { display: none; }
.semesters .other_subject { display: flex; align-items: flex-start; gap: 16px; width: 100%; margin-top: 16px; }
@media screen and (max-width: 769px) { .semesters .other_subject { justify-content: flex-start; } }
.semesters .other_subject .simulation_table { max-width: 35%; margin-bottom: 0; }
@media screen and (max-width: 769px) { .semesters .other_subject .simulation_table { max-width: 50%; } }

.creditsSUM { position: sticky; bottom: 0; z-index: 10; max-width: 860px; padding: 0 32px; margin: 0 auto 32px auto; }
@media screen and (max-width: 769px) { .creditsSUM { max-width: 100%; padding-left: 0; padding-right: 0; } }
.creditsSUM ul { list-style: none; padding: 0; margin: 0; }
.creditsSUM #tax_subject_classify { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 16px; font-size: .75rem; letter-spacing: -1px; background-color: #e4e1dd; }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify { padding: 8px; } }
.creditsSUM #tax_subject_classify > li { display: flex; justify-content: flex-start; width: calc(65% - 8px); }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify > li { width: 100%; } }
.creditsSUM #tax_subject_classify #basic-field { order: 0; }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify #basic-field { order: unset; } }
.creditsSUM #tax_subject_classify #select-field { order: 2; }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify #select-field { order: unset; } }
.creditsSUM #tax_subject_classify #special-field { order: 1; width: calc(35% - 8px); }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify #special-field { order: unset; width: calc(25% - 8px); } }
.creditsSUM #tax_subject_classify #all_sum { justify-content: flex-end; align-items: center; order: 3; width: calc(20% - 16px); padding: 0; font-size: .875rem; text-align: right; font-weight: bold; letter-spacing: 0; }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify #all_sum { order: unset; width: calc(40% - 16px); } }
.creditsSUM #tax_subject_classify #all_sum .credits { font-size: .75rem; }
.creditsSUM #tax_subject_classify #all_sum .credits .all_credit { font-size: .875rem; }
.creditsSUM #tax_subject_classify #submit { order: 4; width: calc(15% - 8px); padding-left: 8px; }
@media screen and (max-width: 769px) { .creditsSUM #tax_subject_classify #submit { order: unset; width: calc(35% - 8px); } }
.creditsSUM #tax_subject_classify #submit > button { width: 100%; padding: 4px 12px; color: #fff; font-size: .875rem; font-weight: bold; line-height: 1em; background-color: #1d694c; border: none; border-radius: 3px; }
.creditsSUM #tax_subject_classify #submit > button:hover { background-color: rgba(29, 105, 76, 0.5); }
.creditsSUM #tax_subject_classify .child { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 70%; margin-left: auto; background-color: #fff; border-radius: 3px; }
.creditsSUM #tax_subject_classify .child > li { margin: 0 4px; }
.creditsSUM .label { margin-right: 3px; }
.creditsSUM .credits { font-size: .625rem; }
.creditsSUM .credits .field_credit, .creditsSUM .credits .area_credit, .creditsSUM .credits .all_credit { font-size: .75rem; }
.creditsSUM #select-field .child > li:not(.fixed_item):not(.main_area) { display: none; }
.creditsSUM #select-field .child:has(.main_area) li.message { display: none; }

#print { position: absolute; left: -100vw; bottom: -100vh; z-index: -1; display: none; width: 100vw; max-width: 769px; }
#print .semester_wrap { overflow: visible; }
#print .semester_wrap > .title { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 6px; font-size: .875rem; color: #fff; background-color: #1d694c; }
#print .semester_wrap > .title::before { content: '愛短 時間割シミュレーション'; padding: 1px 16px; color: #1d694c; background-color: #fff; border-radius: 3px; }
#print .semester_wrap > .title ~ strong { display: block; padding-bottom: 16px; color: #c81f1f; font-size: .875rem; font-weight: normal; }
#print .semester_wrap .table_scroll { min-width: unset; }
#print .simulation_table tbody th { position: relative; left: 0; }
#print .simulation_table tbody .bottom_head { display: none; }
#print .label_set label { display: none; }
#print .label_set label:has(.selected) { display: block; font-weight: normal; background-color: transparent; }
@media screen and (max-width: 769px) { #print .label_set { max-height: unset; overflow-y: visible; } }
#print .creditsSUM #basic-field, #print .creditsSUM #select-field { order: unset; width: 100%; }
#print .creditsSUM #special-field, #print .creditsSUM #all_sum { order: unset; width: 40%; }
#print .creditsSUM #submit { display: none; }

#modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 100000; opacity: 1; transition: opacity 160ms 0ms ease, z-index 0ms 0ms ease; }
#modal.off { opacity: 0; z-index: -1; }
#modal .container { width: 100%; max-width: unset; height: 100%; padding: 72px 8px; overflow-y: auto; overscroll-behavior: contain; }
#modal .container .sem { max-width: 769px; min-height: 60px; margin: 0 auto; }
#modal .container .sem .slick-list { width: 100%; }
#modal .container .sem .slick-list .slick-slide { min-height: 60px; background: url("assets/img/icon/loading.svg") center center/24px 24px no-repeat; }
#modal .container img { width: 100%; height: auto; }
#modal .container .creditsSUM { position: relative; max-width: 769px; margin-bottom: 0; margin-top: 16px; text-align: center; }
#modal .container .creditsSUM img { max-width: 600px; }
#modal .container .control { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; width: 100%; height: 60px; background-color: #1d694c; }
#modal .container .control .container { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 769px; height: 100%; padding: 8px 16px; }
#modal .container .control .slick-dots { list-style: none; order: -1; display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; }
#modal .container .control .slick-dots > li button { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 0; line-height: 1em; color: #fff; background-color: rgba(0, 64, 53, 0.4); border: solid 1px rgba(255, 255, 255, 0.25); border-radius: 50%; }
#modal .container .control .slick-dots > li.slick-active button { color: #1d694c; font-weight: bold; background-color: #fff; border-color: transparent; }
#modal .container .button_close { position: fixed; top: 8px; right: 8px; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; padding: 0; background-color: rgba(51, 51, 51, 0.4); border: none; border-radius: 50%; }
#modal .container .button_close span { display: none; }
#modal .container .button_close::before { content: ""; display: block; width: 14px; height: 14px; background: url("assets/img/icon/close.svg") center center/contain no-repeat; }
#modal .container .button_dl { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; height: 40px; padding: 6px 24px; font-size: .75rem; line-height: 1em; letter-spacing: .06em; color: #fff; font-weight: bold; background-color: rgba(0, 64, 53, 0.25); border: solid 1px rgba(255, 255, 255, 0.25); border-radius: 10em; }
#modal .container .button_dl::after { content: ""; display: block; width: 16px; height: 16px; background: url("assets/img/icon/download.svg") center center/contain no-repeat; }
#modal .container .button_dl.downloading { color: rgba(255, 255, 255, 0.25); background-color: rgba(0, 64, 53, 0.75); }
#modal .container .button_dl.downloading::before { content: ""; position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); display: block; width: 16px; height: 16px; background: url("assets/img/icon/downloading.svg") center center/contain no-repeat; }
#modal .container .button_dl.downloading::after { opacity: .25; }