/* -------------------------------------------------------
                    全体の設定
---------------------------------------------------------*/
body {
    width: 100%;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color: #52353d;
    margin: 0 auto;
    padding: 0;
    text-align: left;
}

header {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    color: rgb(255, 250, 244);
    background-color: rgb(48, 46, 46);
    border-top: 3px solid rgb(48, 46, 46);
    border-bottom: 4px solid rgb(179, 179, 176);
}

main {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px;
    background-color: rgb(255, 250, 244);
    border: 1px solid rgb(255, 250, 244);
    min-height: 800px;
    height: 100%;
    display: flex;
}

footer {
    font-size: larger;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(218, 214, 211);
    color: rgb(218, 214, 211);
    border-top: 4px solid rgb(218, 214, 211);
    border-bottom: 1px solid rgb(131, 128, 128);
}

h1 {
    color: rgb(255, 250, 244);
}

h2 {
    color: rgb(197, 136, 62);
}

h3 {
    background-color: rgb(233, 230, 217);
    padding-top: 2px;
    padding-bottom: 5px;

}

/*----------- 入力エリア ------------*/
#title, textarea {
    max-width: 90%;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    border: 1px solid #acaca5;
    /*角を丸くする*/
    border-radius: 3px;
    background-color: rgb(253, 254, 255);
}

#preview {
    max-width: 700px;
    margin: auto;
    text-align: center;
    margin: 0 auto;
    padding-left: 10px;
}

/*-------- ファイル選択ボタン --------*/
input[type=file]::file-selector-button {
    border: 2px solid rgb(48, 46, 46);
    color: rgb(255, 250, 244);
    padding: 7px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: .2em;
    background-color: rgb(48, 46, 46);
}

input[type=file]::file-selector-button:hover {
    background-color: #8d8d86;
    border: 2px solid #8d8d86;
    cursor: pointer;
    transition: 0.7s;
}

/*-------- 各要素 --------*/
#titl {
    margin-left: 10px;
}

#capt {
    margin-left: 10px;
}


#box {
    width: 45%;
    margin: 0 auto;
    padding-right: 10px;
    margin-top: 10px;
    margin-bottom: 25px;
}

#prev {
    width: 55%;
    margin: 0 auto;
    ;
}

#pre1 {
    padding-left: 10px;
}

.files {
    margin-left: 10px;
    margin-top: 25px
}
/*-------- 作成・保存ボタン --------*/
#send, #save {
    padding: 6px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 10px;
    margin-left: 10px;
    /*ボタンの角を丸くする*/
    border-radius: 4px;
}

#send, #save:hover {
    cursor: pointer;
}

#send {
    border: 2px solid rgb(48, 46, 46);
    background-color: rgb(48, 46, 46);
    color: rgb(255, 250, 244);
}

#send:hover {
    background-color: #8d8d86;
    border: 2px solid #8d8d86;
    transition: 0.7s;
}

#save {
    border: 2px solid #c58a9b;
    background-color: #c58a9b;
    color: rgb(255, 250, 244);
}

#save:hover {
    background-color: #b1b1a9;
    border: 2px solid #b1b1a9;
    transition: 0.7s;
}