/* --------------------
   基本設定
-------------------- */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#cfcfcf;

    font-family:'DotGothic16',sans-serif;

    color:#000;

    padding:20px;

}

.container{

    max-width:1100px;

    margin:auto;

    background:#fff;

    border:4px solid #000;

    padding:25px;

    box-shadow:8px 8px #000;

}


/* --------------------
   タイトル
-------------------- */

header{

    text-align:center;

    margin-bottom:30px;

}

header h1{

    font-size:36px;

    letter-spacing:3px;

}

header p{

    margin-top:10px;

}


/* --------------------
   カレンダー
-------------------- */

.calendar{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;

}

.day{

    background:#efefef;

    border:3px solid black;

    min-height:110px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.15s;

}

.day:hover{

    transform:translate(-3px,-3px);

    box-shadow:5px 5px black;

}

.day.selected{

    background:#fff6a0;

}

.day.today{

    border:3px dashed black;

}

.day-number{

    margin-bottom:8px;

}

.day img{

    width:58px;

    image-rendering:pixelated;

}


/* --------------------
   感情選択
-------------------- */

.emotion-window{

    margin-top:40px;

    background:#dcdcdc;

    border:4px solid black;

    padding:20px;

    box-shadow:8px 8px black;

}

.emotion-window h2{

    text-align:center;

    margin-bottom:20px;

}

.emotion-list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.emotion-list img{

    width:70px;

    margin:auto;

    cursor:pointer;

    image-rendering:pixelated;

    transition:.15s;

}

.emotion-list img:hover{

    transform:scale(1.15);

}


/* --------------------
   メモ
-------------------- */

.memo-window{

    margin-top:35px;

    background:#dcdcdc;

    border:4px solid black;

    padding:20px;

    box-shadow:8px 8px black;

}

.memo-window h2{

    text-align:center;

    margin-bottom:15px;

}

textarea{

    width:100%;

    height:120px;

    resize:none;

    padding:15px;

    font-family:'DotGothic16',sans-serif;

    border:3px solid black;

    font-size:14px;

}

.memo-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;

}

#saveButton{

    width:150px;

    height:45px;

    background:white;

    border:3px solid black;

    cursor:pointer;

    font-family:'DotGothic16',sans-serif;

    transition:.15s;

}

#saveButton:hover{

    transform:translate(-2px,-2px);

    box-shadow:4px 4px black;

}

#saveButton:active{

    transform:translate(2px,2px);

    box-shadow:none;

}


/* --------------------
   SAVE COMPLETE
-------------------- */

#savePopup{

    position:fixed;

    top:20px;

    right:20px;

    background:black;

    color:white;

    padding:15px 25px;

    border:3px solid white;

    display:none;

    z-index:1000;

}


/* --------------------
   HISTORY
-------------------- */

.history-window{

    margin-top:45px;

    background:#dcdcdc;

    border:4px solid black;

    padding:20px;

    box-shadow:8px 8px black;

}

.history-window h2{

    text-align:center;

    margin-bottom:20px;

}


/* 外側 */

.history-wrapper{

    overflow:hidden;

}


/* 流れる部分 */

#historyTrack{

    display:flex;

    gap:20px;

    width:max-content;

    animation:historyScroll 35s linear infinite;

}

/* PCではホバーで停止 */

#historyTrack:hover{

    animation-play-state:paused;

}


/* カード */

.history-card{

    width:170px;

    min-height:190px;

    background:white;

    border:3px solid black;

    box-shadow:5px 5px black;

    padding:15px;

    flex-shrink:0;

    text-align:center;

}

.history-card img{

    width:70px;

    image-rendering:pixelated;

    margin-bottom:10px;

}

.history-date{

    margin-bottom:10px;

}

.history-comment{

    font-size:13px;

    word-break:break-word;

}


/* --------------------
   アニメーション
-------------------- */

@keyframes historyScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-190px * 8));

    }

}

@keyframes pop{

    0%{

        transform:scale(.6);

    }

    50%{

        transform:scale(1.2);

    }

    100%{

        transform:scale(1);

    }

}

.pop{

    animation:pop .25s;

}


/* --------------------
   フッター
-------------------- */

footer{

    margin-top:50px;

    text-align:center;

}


/* --------------------
   スマホ
-------------------- */

@media(max-width:768px){

.calendar{

grid-template-columns:repeat(4,1fr);

}

.day{

min-height:90px;

}

.day img{

width:45px;

}

.emotion-list{

grid-template-columns:repeat(4,1fr);

gap:12px;

}

.emotion-list img{

width:55px;

}

.memo-footer{

flex-direction:column;

gap:15px;

}

#saveButton{

width:100%;

}

.history-wrapper{

overflow-x:auto;

overflow-y:hidden;

padding-bottom:10px;

}

/* スマホでは自動スクロールを止めて
   指で横スクロールできるようにする */

#historyTrack{

animation:none;

padding-right:20px;

}

.history-card{

width:150px;

min-height:170px;

}

}

#historyTrack{

    display:flex;

    gap:20px;

    width:max-content;

    animation:historyScroll 60s linear infinite;

}
.delete-btn{

    margin-top:10px;

    width:28px;

    height:28px;

    border:2px solid black;

    background:white;

    cursor:pointer;

    font-family:'DotGothic16',sans-serif;

}

.delete-btn:hover{

    background:#ffb5b5;

}