:root{
    --school-image-color:#800c16;
    --symbol-red:#bc0301;
    --symbol-blue:#0e438b;
    --symbol-skyblue:#2493c3;
    --symbol-green: #1aa1a9;
    --symbol-yellow:#ffd814;
    --symbol-orange:#ffac4b;
    --symbol-pink:#ff7171;
    --jukuchu-pink: #ed8599;
}

*,*::before,*::after{
    position: relative;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    &:has(dialog:open){
        overflow: hidden;
    }
}

ul{
    padding: 0;
}

p{
    margin: 0;
    line-height: 1.3;
}

*:has(>input:checked){
    color: var(--symbol-red);
}

input::-webkit-calendar-picker-indicator,
* > :is([type="radio"],[type="checkbox"]){
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0;
}

[type="text"]{
    border-radius: .25em;
    border: 1px solid #ccc;
}

[type="button"],button,select{
    background: #efefef;
    border-radius: .25em;
    color: #393939;
    outline: none;
    border: 1px solid #ccc;
}

.flex-row-container{
    display: flex;
    flex-direction: row;
}
.flex-column-container{
    display: flex;
    flex-direction: column;
}

.grid-container{
    display: grid;
}

.has-background-icon-before{
    &::before{
        content: '';
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}
.has-background-icon-after{
    &::after{
        content: '';
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

.custom-close-button{
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    appearance: none!important;
    border: none!important;
    outline: none!important;
    color: transparent!important;
    background-image: url(../main_img/close.svg)!important;
    background-size: 130%!important;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff!important;
    border-radius: 50%;
}

.custom-checkbox-container{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25em;
    & input{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
    &::before{
        content: '';
        width: 1.5em;
        height: 1.5em;
        display: inline-block;
        background-image: url('/symbol_image/checkbox-blank.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    &:has(:checked){
        &::before{
            background-image: url('/symbol_image/checkbox-checked.svg');
        }
    }
}

/* 1行に収まるときだけ中央寄せ */
.oneline-center{
    margin-inline: auto;
    max-inline-size: max-content;
}

dialog.loading-dialog{
    border:0!important ;
    padding: 0!important;
    background-color: transparent!important;
    & .loading {
        font-size: 2rem;
        color: gray;
        position: relative;

        /* グラデーションを文字に適用 */
        background: linear-gradient(
            90deg,
            gray 0%,
            #fff 50%,
            gray 100%
        );
        text-shadow:
    0 0 5px rgba(255,255,255,0.4),
    0 0 10px rgba(255,255,255,0.2);
        background-size: 200% 100%;
        background-position: 0% 50%;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        animation: glow-move 3s linear infinite;
    }
}
@keyframes glow-move {
  0% {
      background-position: 200% 50%;
    }
    100% {
      background-position: 0% 50%;
  }
}

.none{
    display: none!important;
}