@charset "utf-8";

/* 全体設定　ここから */
:root {
    /* 使用カラーのカスタムプロパティ　ここから */
        /* カラー */
    --caramel: HSLA(38, 47%, 60%, 1); /* #C9A66B */
        --caramel_st: HSLA(38, 47%, 65%, 1);
        --caramel_ed: HSLA(38, 47%, 53%, 1);
    --cayenne: HSLA(13, 65%, 42%, 1); /* #AF4425 */
    --cinnamon: HSLA(15, 57%, 25%, 1); /* #662E1C */
        --cinnamon_st: HSLA(15, 57%, 30%, 1);
        --cinnamon_ed: HSLA(15, 57%, 18%, 1);
    --cream: HSLA(44, 59%, 81%, 1); /* #EBDCB2 */
        --cream_st: HSLA(44, 59%, 86%, 1);
        --cream_ed: HSLA(44, 59%, 76%, 1);
    --white: HSLA(0, 100%, 100%, 1);
    --gray_white: HSLA(30, 6%, 88%, 1);
    --gray_pale: HSLA(30, 6%, 95%, 0.6);
    --gray: HSLA(30, 6%, 50%, 1);;
    --pink: HSLA(328, 65%, 45%, 1);

        /* エフェクト系 */
    --shadow: HSLA(30, 6%, 10%, 0.1);
    --shadow_cinnamon: HSLA(15, 57%, 25%, 0.5);
    --white_blur: HSLA(0, 100%, 100%, 0.5);

        /* 対パーツ */
    --font_black: HSLA(30, 6%, 10%, 1);

        /* グラデーション */
    --m_grad_caramel: -moz-linear-gradient(top, var(--caramel_st) 40%, var(--caramel_ed));
    --w_grad_caramel: -webkit-linear-gradient(top, var(--caramel_st) 40%, var(--caramel_ed));
    --grad_caramel: linear-gradient(to bottom, var(--caramel_st) 40%, var(--caramel_ed));
    --m_grad_cinnamon: -moz-linear-gradient(top, var(--cinnamon) 40%, var(--cinnamon_ed));
    --w_grad_cinnamon: -webkit-linear-gradient(top, var(--cinnamon) 40%, var(--cinnamon_ed));
    --grad_cinnamon: linear-gradient(to bottom, var(--cinnamon) 40%, var(--cinnamon_ed));
    --m_grad_cream: -moz-linear-gradient(top, var(--cream_st) 40%, var(--cream_ed));
    --w_grad_cream: -webkit-linear-gradient(top, var(--cream_st) 40%, var(--cream_ed));
    --grad_cream: linear-gradient(to bottom, var(--cream_st) 40%, var(--cream_ed));

    /* 使用カラーのカスタムプロパティ　ここまで */
}
    /* 設定をニュートラルにする　ここから */
html, body, form {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
body {
    margin: 0px;
    padding: 0px;
    color: var(--font_black);
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    letter-spacing: 0.06em;
    line-height: 1.8;
    background: var(--white);
    -webkit-text-size-adjust: none;
}
div, section {box-sizing: border-box;}
p, ul, h1, h2, h3, h4, h5, h6, img, input, span {margin: 0; padding: 0;}
li {list-style-type: none;}
    /* 設定をニュートラルにする　ここまで */
    /* 作成ページ全体の共通仕様　ここから */
a {
    color: var(--gray);
    text-decoration-color: var(--gray);
    transition: 0.3s;
}
a:hover {
    color: var(--cayenne);
    text-decoration-line: none;
        
}
button, input[type="button"], input[type="submit"] {
    height: 35px;
    width: 100px;
}
table {border-collapse: collapse;}

.v-false {display: none;}
    /* 作成ページ全体の共通仕様　ここまで */

    /* 共通クラス設定　ここから */
.column-nowrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    flex-flow: column nowrap;
}
.row-wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.jc-between {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.jc-center {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.center-middle {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.around-middle {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
}
.between-middle {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

    /* 共通クラス設定　ここまで */
/* 全体設定　ここまで */

input[type="text"],
input[type="password"] {
    background-color: var(--white_blur);
    border: none;
    border-radius: 3px;
    box-shadow: 1px 1px 3px 0 var(--shadow_cinnamon);
    font-size: 16px;
    outline: none;
    padding: 0.5em 0.8em;
}
input[type="text"]:focus,
input[type="password"]:focus {
    background-color: var(--white);
    box-shadow: none;
}

#disp_msg {
    color: var(--cayenne);
    font-size: 0.9em;
    font-weight: bold;
}
.appeared {opacity: 1 !important;}

body.login {
    background-color: var(--white);
    overflow: hidden hidden;
}
.accent-sheet {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--cinnamon);
    clip-path: polygon(0% 0%, 480px 0%, 120px 100%, 0% 100%);
    height: 100%;
    width: 100%;
}
.auto-login {
    cursor: pointer;
    font-size: 14px;
    padding-left: 0.5em;
}
.auto-login > input[type="checkbox"] {
    position: relative;
    top: 2px;
    left: 0;
    height: 16px;
    margin: 0.5em;
    width: 16px;
}
.b-cinnamon {
    background-color: var(--cinnamon);
    background: var(--m_grad_cinnamon);
    background: var(--w_grad_cinnamon);
    background: var(--grad_cinnamon);
    border: 1px solid var(--white);
    border-radius: 5px;
    color: var(--white);
    cursor: pointer;
    font-size: 1.1em;
    font-family: cursive;
}
.b-cinnamon:hover {background: var(--cinnamon_ed);}
.covered-frame {
    background-color: var(--cream);
    background: var(--m_grad_cream);
    background: var(--w_grad_cream);
    background: var(--grad_cream);
    height: 100%;
    opacity: 0;
    transition-duration: 2.5s;
    width: 100%;
}
.entry-form {
    position: fixed;
    right: 10vw;
    bottom: 12vh;
    font-size: 16px;
    z-index: 100;
}
.entry-form p:not([class]) {
    filter: drop-shadow(0 0 3px var(--white));
    font-family: cursive;
    font-size: 1.2em;
    width: 6em;
}
.entry-form .b-cinnamon {
    height: 40px;
    width: 7em;
}
.entry-form .column-nowrap > * {
    padding: 0.5em 0;
}
.entry-form .row-wrap {
    margin: 0 auto;
    padding: 0.5em 0;
    width: 100%;
}
.entry-form .title {
    color: var(--cinnamon);
    filter: drop-shadow(0 0 3px var(--white));
    font-size: 2em;
    font-family: cursive;
    padding-bottom: 0.5em;
}
.logo {
    position: absolute;
    top: 60px;
    left: 80px;
    filter: drop-shadow(0 0 1px var(--white));
    height: auto;
    width: 213px;
    z-index: 100;
}
@media screen and (max-width: 600px) {
    .auto-login {color: var(--cayenne);}
}
@media screen and (max-width: 420px) {
    input[type="text"],
    input[type="password"] {
        padding: 0.5em 0.8em;
        width: 220px;
    }
    .entry-form {
        left: 0;
        right: 0;
        top: 42vh;
        bottom: 0;
        padding: 0 2em;
        width: 100%;
    }
    .entry-form > * {text-align: center;}
    .entry-form .row-wrap {
        width: 220px;
    }
    .entry-form .title {
        color: var(--cream);
        padding-bottom: 0;
    }
    .logo {
        left: calc(50vw - 106px);
    }
}