:root {
    --basic_color:peachpuff;
    --width: 280px;             /* 幅 */
    --height_top1: 50px;        /* 高さ：年月見出し＆月移動ボタン */
    --height_top2: 20px;        /* 高さ：曜日見出し */
    --height_middle: 50px;      /* 高さ：１週分の日付 x 5 or 6 */
    --height_bottom: 15px;      /* 高さ：余白１ */      
    --height_middle2: 30px;     /* 高さ：年移動ボタン＆開くボタン */ 
    --height_bottom2: 10px;     /* 高さ：余白２ */
}
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* カレンダーの外枠 */
.innerFrame1{
    display: block;
    width: var(--width);
    background-color: var(--basic_color);
    padding-bottom: var(--height_bottom);
}
/* カレンダー上部（年月 & 月移動ボタン） */
.grid_1{
    display: grid;
    grid-template-columns: 14px 30px auto auto 30px 14px;  
    grid-auto-rows: var(--height_top1); 
    align-items: center; 
    justify-items: center;
}
/* 月見出し */
.month_title{
    display: flex;
    justify-content:right;
    align-items: center;
    width: 62px;
    font-size: 1.5rem;
}
/* 年見出し */
.year_title{
    display: flex;
    justify-content:center;
    align-items: center;
    width: 130px;
    font-size: 1rem;
}
/* 月移動ボタン */
button.month{
    width: 30px;
    height: 25px;
    display: flex;
    justify-content:center;
    align-items: center;
}
/* 週の曜日 */
.grid_2{
    display: grid;
    grid-template-columns: 14px 36px 36px 36px 36px 36px 36px 36px 14px ;  
    grid-auto-rows: var(--height_top2);
    background-color:var(--basic_color);
}
/* カレンダー本体の入れ物 */
.grid_3{
    display: grid;
    grid-template-columns: 14px 252px 14px;  
    background-color: var(--basic_color);
}
/* カレンダー本体 */
.grid_4{
    display: grid;
    grid-template-columns: 36px 36px 36px 36px 36px 36px 36px;  
    grid-auto-rows: var(--height_middle);
    background-color: white;  
}
/* 年移動ボタン＆ファイルオープンボタン */
.grid_5{
    display: grid;
    width: var(--width);
    grid-template-columns: 14px 40px auto 40px 82px 14px ;  
    grid-auto-rows: var(--height_middle2);
    background-color: var(--basic_color);
    align-items: center; 
    justify-items: center;
    padding-bottom: var(--height_bottom2);
}
/* 年移動ボタン */
button.year{
    width: 40px;
    height: 28px;
}
/* 開くボタン */
button.open{
    width: 60px;
    height: 28px;
}
/* 日付 */
.day{
    border: solid 1px var(--basic_color);
    justify-content:center;
    align-items: center;
}
/* 日付（非表示） */
.noday{
    display: none;
}
/* 日曜・祝日 */
.holiday{
    color: #ff0000;
}
/* 土曜 */
.saturday{
    color: #0000ff;
}
/* 大きい文字 */
.largeFont{
    font-size: 1.3rem;
}
/* 小さい文字 */
.smallFont{
    font-size: 1.0rem;
}
/* 選択日 */
.currentDay{
    border: solid 2px red;
}
/* 曜日 */
.weekday{
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 0.9rem;
}