:root {
    --primary-foreground: aliceblue;
    --primary-background: #001d42;
    --primary-highlight: #6bb6ff;
    --secondary-foregorund: aliceblue;
    --secondary-background: #1f2e55;
    --secondary-highlight: #000;
    --toolbox-foreground: aliceblue;
    --toolbox-background: #24282e;
    --toolbox-highlight: #6bb6ff;
    --caution-foreground: aliceblue;
    --caution-background: #24282e;
    --caution-highligt: #FF3333;
    --linked-foreground: #FF3333;
}



body {
    margin: 0;
    color: var(--primary-foreground);
}

/* アニメーションの設定 */
@keyframes Spinner-Rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Flexbox周り */

.Flex-Vertical-Stretch {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.Flex-Vertical-Center {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.Flex-Horizontal-Center {
    display: flex;
    justify-content: center;
}

.Flex-Horizontal-Between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Flex-Horizontal-Left {
    display: flex;
    justify-content: left;
    align-items: center;
}


/* リンク */
.Link {
    cursor: pointer;
    transition: .2s;
}

@media (hover: hover) {
    .Link:hover {
        color: var(--primary-highlight);
    }
}


/* ボーダーリンク：左から右 */
.Link-Border-Left {
    position: relative;
    cursor: pointer;
}

.Link-Border-Left::after {
    background: var(--primary-highlight);
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s;
    z-index: -1;
}

@media (hover: hover) {
    .Link-Border-Left:hover::after {
        transform: scale(1, 1);
    }
}

/* ボーダーリンク：右から左 */
.Link-Border-Right {
    position: relative;
    cursor: pointer;
}

.Link-Border-Right::after {
    background: var(--primary-highlight);
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: .2s;
    z-index: -1;
}

@media (hover: hover) and (pointer: fine) {
    .Link-Border-Right:hover::after {
        transform: scale(1, 1);
    }
}

/* ボーダーリンク：フェード */
.Link-Border-Fade {
    position: relative;
    cursor: pointer;
}

.Link-Border-Fade::after {
    background: var(--primary-highlight);
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    width: 100%;
    height: 100%;
    transition: .3s;
    opacity: 0;
    z-index: -1;
}

@media (hover: hover) {
    .Link-Border-Fade:hover::after {
        opacity: 1;
    }
}


/* メニュー用共通 */

.Menu-Common ul {
    padding: 0;
    margin: 0;
}

.Menu-Common li {
    display: flex;
    align-items: center;
    line-height: 1.5;
    list-style-type: none !important;
    overflow: hidden;
    height: 0px;
    transition: 0.2s;
}

.Menu-Common li i {
    margin-left: 20px;
    line-height: 1.75;
}

.Menu-Common li span {
    margin-left: 5px;
    margin-right: auto;
}

.Menu-Visible li {
    overflow: visible;
    height: 50px;
}


/* 常時コンテンツ */
.Section {
    position: relative;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    color: var(--primary-foreground);
    background: var(--primary-background);
}

.Section .Section-Summary {
    display: flex;
    position: relative;
    padding: 10px 20px;
    font-weight: 600;
}

.Section .Section-Content {
    overflow: hidden;
    margin: 0;
    color: var(--secondary-foregorund);
    background: var(--secondary-background);
}

.Section .Section-Inner {

}


/* アコーディオンコンテンツ */

.Accordion {
    position: relative;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    background: var(--primary-background);
}

.Accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
}

.Accordion summary span {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    align-items: center;
}

.Accordion summary span:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: .2em solid #444;
    border-left-color: lightgray;
    animation: Spinner-Rotation 1s linear infinite;
    opacity: 0;
    transition: opacity .2s;
    margin-right: 10px;
}

.Accordion-Loading summary span:after {
    opacity: 1;
}

.Accordion summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid var(--primary-foreground);
    border-right: 3px solid var(--primary-foreground);
    content: '';
    transition: transform .3s;
}

.Accordion-Open summary::after {
    transform: rotate(-45deg);
}

.Accordion summary::-webkit-details-marker {
    display: none;
}

.Accordion .Accordion-Content {
    overflow: hidden;
    margin: 0;
    color: var(--secondary-foregorund);
    background: var(--secondary-background);
}

.Accordion .Accordion-Inner {
    opacity: 0;
    transition: opacity .5s;
}
.Accordion[open] .Accordion-Inner {
    opacity: 1;
}


/* テキストボックス */
.Textbox {
    color: var(--textbox-foreground);
}

.Textbox span {
    display: block;
    margin-bottom: 5px;
    font-size: .9em;
}

.Textbox input {
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 5px;
    color: var(--toolbox-foreground);
    background-color: var(--toolbox-background);
    font-size: 1em;
    line-height: 1.5;
}

.Textbox input:focus {
    outline: 1px solid #fff;
}

.Textbox input::placeholder {
    color: rgba(255,255,255,.5);
}

/* ボタン */
.Button a {
    color: var(--toolbox-foreground);
    background: var(--toolbox-background);
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}

.Button a::after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 2rem;
    font-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6px;
    height: 6px;
    border-top: solid 2px currentColor;
    border-right: solid 2px currentColor;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s;
}

.Button-Left a {
    justify-content: left;
}

.Button-Caution a {
    color: var(--caution-foreground);
    background : var(--caution-background);
}

/* スマホの場合は最初から色を変える */
@media (hover: hover) {
    .Button a:hover {
        background: var(--toolbox-highlight);
        color: var(--toolbox-foreground);
    }

    .Button-Caution a:hover {
        background: var(--caution-highligt);
        color: var(--caution-foreground)
    }

    .Button a:hover::after {
        opacity: 1;
        animation: Button-Animation .5s linear infinite;
    }
}

@media (hover: none) {
    .Button a:active {
        background: var(--toolbox-highlight);
        color: var(--toolbox-foreground);
    }

    .Button-Caution a:active {
        background: var(--caution-highligt);
        color: var(--caution-foreground)
    }

    .Button a:active::after {
        opacity: 1;
        animation: Button-Animation .5s linear infinite;
    }
}

@keyframes Button-Animation {
    0% {
        right: 2rem;
    }

    50% {
        right: 1.4rem;
    }

    100% {
        right: 2rem;
    }
}

.NumberInput {
    display: flex;
    justify-content: space-between;
    background: var(--toolbox-background);
    border-radius: 5px;
    overflow: hidden;
}

.NumberInput-Spinner {
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--toolbox-foreground);
    background: #00000000;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

.NumberInput input::-webkit-outer-spin-button,
.NumberInput input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    margin: 0;
}

.NumberInput-SpinnerMinus {
    order: 1;
}

.NumberInput-SpinnerPlus {
    order: 2;
}

@media (hover: hover) {
    .NumberInput-Spinner:hover {
        background: var(--toolbox-highlight);
        color: var(--toolbox-foreground);
    }
}

/* セレクタ */
.Selector {
    position: relative;
}

.Selector .Selector-Placeholder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 5px;
    background: #24282e;
}

.Selector .Selector-Placeholder::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid aliceblue;
    border-right: 3px solid aliceblue;
    content: '';
    transition: transform .3s;
}

.Selector ul {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    background: linear-gradient(180deg, #24282e, #333333);
}

.Selector li {
    position: relative;
    display: flex;
    align-items: center;
    flex-grow: 1;
    line-height: 1.5;
    list-style-type: none !important;
    overflow: hidden;
    height: 0px;
    transition: 0.2s;
    padding: 0px 20px;
}

.Selector-Visible li {
    overflow: visible;
    height: 35px;
}

.Input-Focus-Highlight:focus {
    outline: 2px solid var(--toolbox-foreground) !important;
}

.Input-Focus-Highlight:focus-within {
    outline: 2px solid var(--toolbox-foreground) !important;
}