body, html {
    margin: 0;
    padding: 0;
    width: 100%;
}
body {
    font-family: Arial, sans-serif;
    background-color: #fffbf7;
}
a {
    color: #986858;
}
.center {
    display: flex;
    justify-content: center;
}
.center-paragraphs {
    display: flex; /* Flexboxを使用 */
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 水平方向の中心に配置 */
    text-align: center; /* テキストを中央揃え */
    width: 100%; /* コンテナの幅を全体に */
}
.image-container {
    display: flex; /* Flexboxを使用して画像を並べる */
    justify-content: center; /* 画像間に適切なスペースを設定 */
}
  
.image-container img {
    width: 30%; /* コンテナの半分の幅に画像を設定 */
    height: auto; /* 高さを自動調整してアスペクト比を保持 */
    padding: 20px;
}

.responsive-header {
    width: 100%; /* 画像の幅を画面幅に合わせて調整 */
    height: auto; /* 高さを自動で調整してアスペクト比を保持 */
    padding-top: 12px;

}
.rounded-image {
    border-radius: 20%; /* 角の丸みの半径を指定 */
}

.site-header {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: flex-start; /* 左揃え */
    gap: 10px;
    padding: 10px;
    background-color: #fffbf7;
}
.top-row {
    display: flex; /* 1行目を横並びに設定 */
    align-items: center; /* アイテムを中央揃え */
    width: 100%; /* 行の幅を最大に */
}
  
.site-icon {
    width: 35px; /* アイコンのサイズ調整 */
}
  
.site-title {
    font-size: 24px; /* タイトルのフォントサイズ */
    margin-left: 10px; /* インデントを追加 */
}
a.site-title {
    text-decoration: none;
    color: #000000;
    margin-left: 0px;
}
  
.site-summary {
    font-size: 16px; /* 要約のフォントサイズ */
    margin-left: 20px; /* インデントを追加 */
    position: absolute;
    transform: translate(40px, 30px);
}
  
/* スマートフォンサイズの画面でのスタイリング */
@media (max-width: 600px) {
    .site-summary {
        display: none; /* アイコンと要約を非表示 */
    }
  
    .site-title {
        font-size: 20px; /* スマートフォン用のタイトルサイズ */
    }

    .responsive-header {
        padding-top: 0px;
    }
}

.caterory-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;    
}
.category-icon {
    width: 40px;
}
.category-title {
    font-size: 24px;
}

.caterory-entry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding: 10px; */
    margin-left: 30px; 
}
.category-entry-icon {
    width: 30px;
}
.category-entry-title {
    font-size: 18px;
}

.content-area {
    padding-left: 15%;
    padding-right: 15%;
}