/* 期間入力の横並びスタイル */
.period-separator {
    margin: 10px 0;
    text-align: left;
    font-size: 16px;
}

.period-duration-group {
    display: flex;
    align-items: center;
    column-gap: 15px;
    /* 各項目の間の隙間 */
    flex-wrap: wrap;
}

.period-duration-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* セレクトボックスと単位の間の隙間 */
    flex-basis: 0;
    flex-grow: 1;
    /* 親要素の幅に応じて均等に伸びる */
}

.period-duration-item .select-field {
    width: 100%;
}

.period-duration-item span {
    white-space: nowrap;
    font-size: 16px;
}

/* textareaの文字カウンタデザイン */
.textarea-footer {
    display: flex;
    /* Flexboxを有効化 */
    justify-content: space-between;
    /* 両端に配置 */
    align-items: center;
    /* 中央揃え（縦方向） */
    margin-top: 5px;
}

/* textareaの確認画面(divタグ)のデザイン */
.display-textarea {
    /* --- .textarea-fieldの基本デザイン --- */
    width: 100%;
    padding: 15px;
    border: 1px solid #8C8C8C;
    border-radius: 6px;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    box-sizing: border-box;

    /* --- readonlyデザイン --- */
    background-color: #f0f0f0;
    
    /* --- 追加デザイン --- */
    min-height: 110px; /* rows="3"相当の高さ */
    line-height: 1.6;
    word-break: break-word; /* 折り返し */
}