/*
SEED 2.9
main.css — 管理画面レイアウト・コンポーネント
TRISITE FRAMEWORK 1.1 ベース
(C) 2026 K
*/

:root {
    --color-super-light-glass:rgba(255, 254, 254, 0.6);
	--color-light-glass:rgba(255, 254, 254, 0.4);
	--color-dark-glass:rgba(84,82,82, 0.2);
	--color-super-dark-glass:rgba(84,82,82, 0.7);

    --color-super-white: #fff;
	--color-white: #fefeff;
	--color-blue: #0088a8;
	--color-red: #d00164;
	--color-yellow: #f49c00;
	--color-gray: #a99;
	--color-lightgray: #eeefef;
	--color-black: #595455;
}

body {
    background: var(--color-lightgray);
}

.base-box {
    background: linear-gradient(325deg, rgba(255, 254, 254,0) 0%, rgba(255, 254, 254,0.4) 100%);
    box-shadow:var(--et-shadow-light), 0 0 2px var(--color-super-light-glass) inset;
	animation: fade-in forwards 0.8s 0.2s ease-out;
	margin-inline:auto;
}
.sub-box {
	background: linear-gradient(325deg, rgba(255, 254, 254,0.1) 0%, rgba(255, 254, 254,0.4) 100%);
	box-shadow:var(--shadow-light), 0 0 2px var(--color-light-glass) inset;
    overflow: hidden;
	transition:left calc(var(--et-transition) * 2);
}

main {
    padding:var(--et-space-normal);
}

/* ティザーロゴ用 */
h1 {
    width:180px;
}

article {
    border-radius:var(--et-radius-normal);
}

dl {
    div {
        dt {
            text-align:left;
            font-size:1em;
            width:140px;
        }
    }
}

form {
    select{
        background:var(--et-color-form-bg);
        width:100%;
    }
    .et-select-container {
        width:100%;
    }
    .et-error-message {
        text-align:left;
        width:100%;
    }
    dd:has(.et-password-group):has(.et-error-message) {
        flex-wrap: wrap;
        gap:0;
    }
}

.buttons {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:var(--et-space-normal);
}
.button {
    padding:10px 20px;
    width:200px;
    max-width:100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:10px;
    box-shadow:var(--et-shadow-light);

    span {
        flex:1;
        text-align:center;
        line-height:1.4;
    }

    i {
        opacity:0.8;
        font-size:1.4em;
        transition: translate var(--et-transition);
    }
    &.border-button {
        border:solid 1px var(--color-white);
    }
    &.trans-button {
        border:solid 1px var(--color-white);
        background:none;
    }
    &.back {
        border:solid 1px var(--color-gray);
        background:none;
        color:var(--color-gray);
    }
    &.mini-button {
        width:fit-content;
        font-size:1em;
        padding:10px;

        span {
            padding-inline:var(--et-space-normal);
        }
    }
}
a.button:hover i {
    scale:1.1;
}