body {
  margin: 0;
}

body {
  font-size: 16px;      /* 基本の文字サイズ */
  line-height: 1.6;     /* 行間を広めに */
  color: #333;          /* 落ち着いた文字色 */
  font-family: "游ゴシック", "Yu Gothic", sans-serif; /* 読みやすい日本語フォント */
  background-color: #fff;
}



header {
  position: relative;  /* メニューを絶対配置するため */
  background-color: transparent;
  color: whitesmoke;
  padding: 0;
  text-align: center;
  background-image: url("./images/ui/hr_records_pic_revised.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
   display: flex;           /* 子要素を並べる */
   flex-direction: column;  /* 子要素を縦に並べる */
  justify-content: center; /* 横方向中央 */
  align-items: center;     /* 縦方向中央 */       
  text-align: center;
}



.site-title {                /* ヘッダーの内部 */
  font-family: '游明朝', serif;
  font-weight: bold;
  font-size: 2em;
  letter-spacing: 0.05em;
  margin: 0 0 10px 0; /* 下に余白をつける */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* 文字の影で視認性アップ */
}

.category-nav {
  position: absolute;      /* ヘッダー内で絶対配置 */
  bottom: 10px;            /* 下から10px上に */
  width: 100%;             /* 横幅いっぱいに中央揃え */
  display: flex;
  justify-content: center; /* 中央揃え */
}

/* カテゴリーの横並び設定 */
.category-nav ul {
  display: flex;
  justify-content: center;  /* 横方向中央揃え */
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;                /* 項目間の間隔 */
}

.category-nav a {
  text-decoration: none;
  color: whitesmoke;          /* 白文字 */
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6); /* メニューも文字影で見やすく */
}

.category-nav a:hover {
  color: #0bd;;             /* ホバーで青 */
  text-decoration: none; 
}

.container {           /* 横のサイドの位置決め */
  display: flex;
  width: 90%;           /*251026変更*/
  max-width: 1200px;    /*251026変更*/
  margin: 20px auto;
  padding: 0 10px;
}

main {
  flex: 3;
  margin-right: 10px;  /*251031変更*/
  background: white;
  color: #333333;
  padding: 20px 20px 20px 20px;  /*251031変更*/
  border-radius: 0; /* ←角丸も消す */
  box-shadow: none; /* ←影を消す */
}

p {
  font-size: 16px;
}

/*article 消す*/
/*251026, 251115変更 74%->100% -> 消す article {*/
/* 251115変更 10px->0 -> 消す margin-left:*/

.container h3 {
  font-size: 1.2em;
}

article p {
  margin-bottom: 2rem;
}


aside {
  width: 22%;
  flex: 1;
  background: white;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.9rem;
  font-weight: normal; 
}



aside p{
  padding: 12px 10px;
  font-weight: normal; 
}


.sub-title {
  font-size: 1rem;
  padding: 0 8px 8px;
  border-bottom: 2px #999 solid; /* 水色 → 落ち着いたグレー */
  font-weight: bold;
}

.sub-menu {
  margin-bottom: 60px;
  list-style: none;
  padding: 0;
  margin: 0; /* 余白がある場合はリセット */
}


.sub-menu li {
  border-bottom: none;
}

.sub-menu a {
  
  color: #333;
  padding: 10px;
  display: block;
  font-weight: normal !important;
  text-decoration: none !important;
}

.sub-menu a:hover {
  color: #007BFF; /* #0bd から落ち着いた色に変更*/
  font-weight: normal !important;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
  aside {
    display: none;
  }
  main {
    flex: 1 1 100%;
    margin-right: 0;
  }
  article {
    width: 100%;
    margin-left: 0;
}
}


@media screen and (min-width: 769px) {
  article {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  main {
    display: flex;
    justify-content: center;
  }
}


/* 記事タイトルと日付 */
article h3 {
  font-family: '游ゴシック', sans-serif;
  font-size: 1.6em;
  margin-top: 0;
}

h4 {
  font-size: 1.1em;  /* 251115更新 h4見出しを少し大きく */
}

.date {
  font-size: 0.85em;
  color: #777;
  margin-bottom: 10px;
}

/* hover時のリンク強調 */
.category-nav a:hover {
  color: #007BFF;
  text-decoration: none;
}



footer {
  background-color: #333;
  color: #e0e0e0;
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}


/* Blog画像 */

.blog-img {
  max-width: 100%;   /* 画面に合わせて縮小 */
  height: auto;      /* 高さは自動調整 */
  display: block;    /* ブロックにして上下余白を調整しやすく */
  margin: 20px auto;    /* 上下に余白 */
}


/* お問い合わせページの中 */

textarea {
  width: 100%;
  max-width: 600px;
  height: 200px;
}


input[type="text"],
input[type="email"] {
  width: 100%;       /* 横幅いっぱい */
  max-width: 600px;  /* 最大600px */
  padding: 5px;      /* 内側の余白で見やすく */
  box-sizing: border-box; /* 枠線込みで幅を正確に */
}