::-webkit-scrollbar {
    background: white;
    width: 6px;
    height: 6px;       
}
::-webkit-scrollbar-thumb {
    background-color: lightgray;
    border-radius: 6px;
  }


html {
    scroll-behavior: smooth;
}

body {
    font-size: 100%;
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 
    '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 
    serif;
    color: black;
    margin: 0 auto 0 0;
    
}


/* h1はblockレベル要素なので以下で中央寄せ */
h1 {
    text-align: center;    
    margin: 40px 0 50px 0;
    font-size: clamp(22px, calc(0.9rem + 2vw), 32px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-weight: bold;
    
}


nav {
    /* ボーダーの点線を中央揃え、両脇に余白 */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


.categorized-archives {
    /* 点線との間にマージン */
    margin: 0 0 20px 0;
}
@media screen and (max-width: 442px){
    /* 過去記事の日付の下にタイトルが来るようにする */
    .categorized-archives li a {
        display: flex;
        flex-direction: column;
    }
}
.categorized-archives li {
    /* 過去記事と過去記事の間の余白 */
    margin-bottom: 10px;
}
.categorized-archives li a time {
    font-size: clamp(15px, calc(0.75rem + 0.2vw), 20px);
    /* font-weight: lighter;    */
    text-align: left;
    margin: 0 10px 0 0;
}
.categorized-archives li a span {
    font-size: clamp(16.5px, calc(0.75rem + 1vw), 26px);
    /* font-weight: lighter;      */
    text-align: left;
    margin: 0 10px 10px 0;
}
.see-more-categorized-archives {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-size: clamp(14.5px, calc(0.7rem + 0.7vw), 19px);
    margin: 20px 0 30px 0;
}
/* .see-more-categorized-archives span {
    letter-spacing: -0.15em;
} */


/***お問い合わせ***/
.contact-container {
    display: flex;
    flex-direction: column;
    /* 封筒を中央揃え */
    justify-content: center;
    /* 点線との間にマージン */
    margin: 0 0 20px 0;
    /* border-bottom: 2px dotted black; */
    margin: 70px 0 50px 0;
}
.envelope-icon {
    margin: 10px;
    height: 50px;  
}
.contact-p-container {
    font-size: clamp(22px, calc(0.5rem + 2vw), 30.5px);
    text-align: center;
}
.contact-p-container p {
    margin: 30px 0 5px 0;
}



/***LOGO-HOME***/
.logo-container {
    border-top: 3px solid;
  display: flex;
  justify-content: flex-end;
}
.logo {
    display: flex;
    /* flex-directionをcolumnにしたので
    本来水平方向の主軸が垂直方向になる。
    よって中央揃えはjustify-contentでは指定できない */
    align-items: center;
    flex-direction: column;
  margin: 10px 22px 80px 0;
}
.kuma-face-logo {
    height: 40px;
    width: 40px;
}
.logo-title {
    font-size: clamp(12px, calc(0.45rem + 1vw), 22px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-weight: bold;
    /* ロゴの文字をinline-blockで横並びにする */
    display: inline-block;
    /* くまちゃんロゴの上下の余白が不均等なので以下で暫定的に調整 */
    /* margin: 10px 0 12px 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
}



/***追従するトップへ戻るボタン***/
#page-top {
    position: fixed;
    right: 5px;
    bottom: 85px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: #555555;
    padding: 0 0 0 35px;
    border-top: solid 1px;
}
#page-top::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
    transform-origin: left top;
}
/***トップへ戻るボタンここまで***/