::-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;
}


.categories-container {
    /* border-bottom: 2px dotted black; */
}
.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: left;
    align-items: baseline;
    /* 点線との間にマージン */
    margin: 0 0 60px 0;
}
.categories li {
    /* それぞれのカテゴリー間のマージン。
    liの内側のaタグに指定しても効かない */
    margin: 10px;
}
li .categories-yurikuma::before {
    content: '';
    display: inline-block;
    width: clamp(17.5px, calc(0.9rem + 1.3vw), 33.3px);
    height: clamp(18.3px, calc(1.13rem + 1.39vw), 35.8px);
 
    background-image: url(../images/favicon-pseudo-element-20240514.svg);
    background-size: contain;
    vertical-align: middle;
}
.categories-yurikuma {
    font-size: clamp(16.5px, calc(0.81rem + 0.86vw), 24px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
   letter-spacing: -0.15em;
}
.categories-yurikuma span {
    font-size: clamp(14.5px, calc(0.7rem + 0.7vw), 19px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-weight: lighter;
    letter-spacing: -0.05em;
}
.categories-yurikuma::before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(images/favicon20230331.svg);
    background-size: contain;
    vertical-align: middle;
}
.categories-quotes {
    font-size: clamp(17px, calc(0.83rem + 1.2vw), 29px);
    font-weight: bold;
    letter-spacing: -0.15em;
  }
  .categories-quotes span {
    font-size: clamp(16px, calc(0.8rem + 1.1vw), 27px);
    font-weight: bold;
    letter-spacing: -0.15em;
  }  
.categories-it {
    font-size: clamp(17.5px, calc(0.9rem + 1.3vw), 33.3px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-weight: bold;
}
.categories-it span {
    font-size: clamp(13px, calc(0.6rem + 0.7vw), 25px);
    vertical-align: middle;
}
.categories-travel {
    font-size: clamp(17px, calc(0.83rem + 1.2vw), 29px);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-weight: lighter;
}
.categories-fashion {
    font-size: clamp(17.5px, calc(1rem + 1.35vw), 33px);
    font-weight: bold; 
    letter-spacing: -0.2em;
}
.categories-fashion span {
    font-size: clamp(13px, calc(0.6rem + 0.7vw), 25px);
    font-weight: bold;
    letter-spacing: -0.2em;
}
.categories-fashion span span {
    font-size: clamp(16.5px, calc(0.85rem + 1.3vw), 28.5px);
    font-weight: bold;
    letter-spacing: -0.1em;
}
.categories-fashion span span .etc-na {
    font-size: clamp(12px, calc(0.55rem + 0.67vw), 24px);
    vertical-align: 0.5em;
    letter-spacing: -0.27em;
}
.categories-fashion span span .etc-do {
    font-size: clamp(12px, calc(0.55rem + 0.67vw), 24px);
}
.categories-sewing span {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(14px, calc(0.77rem + 0.87vw), 26px);
    /* font-weight: bolder;  */
    letter-spacing: -0.05em;
}
.categories-sewing span span {
    font-size: clamp(16px, calc(0.8rem + 1.1vw), 28px);
    /* font-weight: bolder;  */
    letter-spacing: -0.02em;
}
.categories-food {
    font-size: clamp(17.7px, calc(1rem + 1.33vw), 33.3px);
    font-weight: bold; 
}
.categories-cooking {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(14px, calc(0.77rem + 0.87vw), 26px);
    font-weight: bolder; 
    letter-spacing: -0.1em;
}
.categories-cooking span {
    font-size: 10px;
}
.categories-cooking span span {
     font-size: clamp(16.5px, calc(0.88rem + 1.15vw), 28.5px);
    font-weight: normal; 
    letter-spacing: -0.01em;
}
.categories-home {
    font-size: clamp(17px, calc(0.9rem + 1.3vw), 29px);
    font-weight: bold; 
    letter-spacing: -0.15em;
}
.categories-home span {
    font-size: clamp(14px, calc(0.77rem + 0.87vw), 26px);
    /* font-weight: bold;  */
    letter-spacing: -0.2em;
}
.categories-diy {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
    'メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', 
    sans-serif;
    font-size: clamp(15px, calc(0.87rem + 0.9vw), 27px);
    font-weight: bold; 
    /* letter-spacing: -0.15em; */
}
.categories-art {
    font-size: clamp(17.7px, calc(1rem + 1.33vw), 33.3px);
    letter-spacing: -0.35em;
    font-weight: bold;
}
.paint-brush {
    display: inline-block;
    font-size: clamp(13px, calc(0.7rem + 0.8vw), 25px);
    letter-spacing: -0.3em;
    vertical-align: 0.13em;
    transform: rotate(-30deg);
}
.categories-music {
    font-size: clamp(17px, calc(0.9rem + 1.3vw), 29px);
}
.musical-note1 {
    font-size: clamp(12px, calc(0.63rem + 0.75vw), 23.5px);
    letter-spacing: -0.22em;
    vertical-align: super;
}
.musical-note2 {
    font-size: clamp(12px, calc(0.63rem + 0.75vw), 23.5px);
    letter-spacing: -0.22em;
    vertical-align: -0.1em;
}
.categories-books {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(17.7px, calc(1rem + 1.33vw), 33.3px);
    font-weight: bold; 
}
.categories-books span {
    font-size: clamp(12px, calc(0.63rem + 0.75vw), 23.5px);
    letter-spacing: -0.1em;
    vertical-align: 0.23em;
}
.categories-plants {
    font-size: clamp(15px, calc(0.87rem + 0.9vw), 27px);
}
.categories-plants span {
    letter-spacing: -0.1em;
}
.categories-plants span span {
    font-size: clamp(13px, calc(0.6rem + 0.7vw), 25px);
    letter-spacing: -0.25em;
}
.categories-plants span span span {
    font-size: clamp(15px, calc(0.87rem + 0.9vw), 27px);
    letter-spacing: -0.1em;
}
.categories-animals {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(14px, calc(0.77rem + 0.87vw), 26px);
    font-weight: bold;
}
.ya {
    font-size: clamp(13px, calc(0.6rem + 0.7vw), 25px);
}
.categories-life {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 
    '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 
    serif;
    font-size: clamp(15px, calc(0.87rem + 0.9vw), 27px);
    font-weight: bold;
    letter-spacing: -0.15em;
}
.life-bi {
    font-size: clamp(13.5px, calc(0.8rem + 0.8vw), 24px);
}
.life-nokoto {
    font-size: clamp(12px, calc(0.74rem + 0.8vw), 22px);
    letter-spacing: -0.18em;
}
.categories-society {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 
    '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 
    serif;
    font-style: italic;
    font-size: clamp(15px, calc(0.87rem + 0.9vw), 27px);
    letter-spacing: -0.15em;
}
.categories-society span {
    font-size: clamp(13px, calc(0.6rem + 0.7vw), 25px);
}
.categories-spirituality {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(16px, calc(0.73rem + 0.8vw), 23.2px);
    font-weight: bold;
    letter-spacing: -0.15em;
}
.categories-spirituality span {
    font-size: clamp(14.5px, calc(0.7rem + 0.7vw), 19px);
}
.categories-beauty {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 
    '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', 
    serif;
    font-size: clamp(16.5px, calc(0.81rem + 0.86vw), 24px);
    font-weight: bold;
}
.categories-beauty span {
   font-size: clamp(14.5px, calc(0.7rem + 0.7vw), 19px);
}
.categories-health {
    font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    font-size: clamp(16.5px, calc(0.81rem + 0.86vw), 24px);
    font-weight: bold;
}
.categories-health span {
    font-size: clamp(14.5px, calc(0.7rem + 0.7vw), 19px);
}


/***ロゴ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;
}
/***トップへ戻るボタンここまで***/