.frame {
    background: url('../img/background-input.png') center/cover;
}
.logo {
    padding: 80px 322px 6px 322px;
}
.presented {
    display: flex;
    justify-content: center;
    padding-bottom: 22px;
    color: var(--white);
    font: var(--font-label);
    font-weight: var(--font-regular);
    font-size: 14px;
}
.IST-logo{
    width: 140px;
    padding-left: 10px;
}
.input-area {
    padding: 0px 120px 0px 120px;
}
.create-button-area {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
}

.charcter-name-area {
    margin-bottom: 48px;
}
.story-select-area {
    margin-bottom: 32px;
}

.text-label {
    color: var(--white);
    font: var(--font-label);
    font-weight: var(--font-regular);
    margin-bottom: 8px;
}
.input-shape {
    box-sizing: border-box;
    background-color: var(--blue);
    border-radius: 8px; /* 角を丸くする */
    outline: none;
    color: var(--white);
    width: 100%;
    padding: 6px 16px 7px 16px;
    font: var(--font-body02);
    font-weight: var(--font-medium);
    border: 2px solid var(--blue); /* 線は同色で見えないようにしておく */
}
.line {
    display: block;
    width: 100%;
    margin-top: 6px;
}

/* カスタムドロップダウン */
.custom-select {
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../img/arrow-down.svg'); /* 独自のSVGアイコンへのパス */
    background-repeat: no-repeat;
    background-position: right 18px center; /* アイコンの位置調整 */
    border: 2px solid var(--blue); /* 線は同色で見えないようにしておく */
}
.input-shape:focus, .custom-select:focus {
    border: 2px solid var(--gold);
}

/* error対応 */
.input-shape.error, .custom-select.error {
    border: 2px solid var(--error);
    /*position: relative;*/
}
.error-area {
    position: relative;
}
.input-shape.error + .error-message,
.custom-select.error + .error-message {
    display: inline-block;
    color: var(--white);
    background-color: var(--error);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    bottom: -35px; /* バルーンの位置 */
    left: 0;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.input-shape.error + .error-message::before,
.custom-select.error + .error-message::before {
    content: '';
    position: absolute;
    top: -10px; /* バルーンの三角形の位置 */
    left: 10px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent var(--error) transparent;
    z-index: 10;
}

/* textarea */
.non-resizable-textarea {
    height: 80px;
    resize: none; /* リサイズ機能を無効化 */
    overflow: overlay; /* スクロールバーを必要に応じて表示 */
}
.inline-container {
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
}

.random-button {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    width: 200px;
    height: 48px;
    margin-left: 10px;
    padding: 10px 20px 12px 20px;
}
.random-button img,.random-button i {
    margin-right: 6px;
    width: 30px;
}

.create-button {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    width: 280px; 
    height: 72px;
    padding: 14px 0px 19px 0px;
}
.create-button img {
    margin-right: 8px;
    z-index: 3;
}