/* 親コンテナの幅を合わせ、左右端を揃える */
.article-intro,
.article-categories-grid {
  max-width: 1200px; /* 画面中央寄せしたい幅 */
  margin: 100px 100px;     /* 左右中央寄せ */
  padding: 50px 50px;    /* 左右に余白 */
}

/* Article categories (左) と Browse all articles (右) を横並びに */
.article-intro {
  max-width: 1200px;
  margin: 100px 150px;      /* 上下は100px、左右は自動で中央寄せ */
  padding: 0 50px;         /* 左右に50pxの余白を追加 */
  display: flex;
  justify-content: space-between;  /* 左側：タイトル、右側：ボタンを左右に配置 */
  align-items: center;
}

/* タイトル */
.article-title {
  font-size: 36px;
  color: #333;
  margin: 0;
}

/* ボタン */
.browse-articles-btn {
  display: inline-block;
  background-color: #373e5a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
  transition: background-color 0.3s ease;
  /* 幅や高さを固定したい場合は指定する */
  /* width: 206px; height: 49px; line-height: 49px; text-align: center; */
}

.browse-articles-btn:hover {
  background-color: #2b304a;
}

/* 3つのボックスを横並び */
.article-categories-grid {
  display: flex;
  justify-content: center; /* 中央揃え */
  gap: 40px;
  /* 3つのボックスを50px上にずらす */
  margin-top: -50px; 
}

/* 各ボックスの基本スタイル */
.category-box {
  position: relative;
  width: 317px;
  height: 396px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* タイトル(36px)と概要(14px)を左下に配置 */
.category-box h3 {
  position: absolute;
  left: 20px;
  bottom: 60px;
  font-size: 36px;
  color: #dadfe8;
  margin: 0;
}

.category-box p {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 14px;
  color: #dadfe8;
  margin: 0;
  line-height: 1.4;
  max-width: 90%;
}

/* 背景画像 */
.category-box.interview {
  background-image: url('/wp-content/themes/kubio-child/images/article-category1');
}
.category-box.about-university {
  background-image: url('/wp-content/themes/kubio-child/images/article-category2');
}
.category-box.study-abroad {
  background-image: url('/wp-content/themes/kubio-child/images/article-category3');
}

/* Latest Articles セクションのコンテナ */
.latest-articles-section {
    width: 1100px;       /* 固定幅1100px */
    margin: 20px auto;   /* 上下は40px、左右自動で中央寄せ */
    text-align: left;    /* テキストは左寄せ */
  }
  
  /* Latest Articles のタイトル */
  .latest-articles-title {
    font-size: 18px;     /* 文字サイズ18px */
    color: #333333;      /* 文字色#333333 */
    margin: 0;           /* 余白なし */
  }
  
  /* 横線 */
  .latest-articles-line {
    width: 1100px;               /* 横幅1100px */
    height: 2px;                 /* 太さ2px */
    background-color: #162040;   /* 線の色#162040 */
    border: none;
    margin-top: 15px;            /* タイトルから15px下に配置 */
  }
  
  /* 全体コンテナ */
  .latest-articles {
    width: 1100px;      /* 幅1100px */
    margin: 0 auto;     /* 中央寄せ */
    /* 必要に応じて上余白などを追加: margin-top: 40px; など */
  }
  
  /* 3つのボックスを横並び */
  .latest-articles-grid {
    display: flex;
    justify-content: space-between; /* 3つのボックスを左右に振り分け */
    align-items: flex-start;
    gap: 0; /* ボックス間に余白が必要ならここで設定 */
  }
  
  /* 個々の記事ボックス */
  .latest-article {
    width: 337px;
    height: 182px;
    background: transparent;
    border: 2px solid #162040; /* 線の幅2px、色162040 */
    border-radius: 6px;        /* 角を少し丸く（お好みで数値調整） */
    box-sizing: border-box;    /* パディング込みで幅・高さを計算 */
    padding: 10px;             /* 内側に余白 */
  }
  
  /* カテゴリー名と投稿日時（上部左寄せ） */
  .latest-article .article-meta {
    font-size: 18px;  /* 18px */
    color: #000;      /* 黒 */
    margin: 0;
    line-height: 1.2;
    /* ボックスの上部に配置したいなら追加のmarginなど調整 */
  }
  
  /* 記事タイトル（左揃え, 20px, 行間隔6 => line-height: 26px 程度） */
  .latest-article .article-title {
    font-size: 20px;
    color: #000;     /* 黒 */
    margin: 8px 0 0; /* 上に少し余白 */
    line-height: 26px; /* 20px + 行間6 => 26px */
    text-align: left;
  }
  
  /* リンク全体をボックスの大きさに拡張 */
  .latest-article .article-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit; /* 親要素の文字色を継承 */
  }
  
  /* ホバー時に背景色や枠線色を変えたい場合 */
  .latest-article:hover {
    border-color: #2b304a; /* 例：枠線を少し変化させる */
  }



  .article-container {
    width: 80%;
    margin: 50px auto;
    text-align: left;
  }
  
  /* 記事リスト */
  .articles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  
  /* 記事アイテム */
  .article-item {
    width: 300px;
    border: 2px solid #162040;
    padding: 15px;
    border-radius: 8px;
    background: #f9f9f9;
    transition: 0.3s;
  }
  
  .article-item:hover {
    background: #eaeaea;
  }
  
  /* 記事のタイトル */
  .article-item h3 {
    font-size: 18px;
    margin: 0 0 10px;
  }
  
  /* 記事の抜粋 */
  .article-item p {
    font-size: 14px;
    color: #333;
  }
  
  /* ヘッダー下の線 */
  .header-underline {
    width: 1500px;
    height: 2px;
    background-color: #373e5a;
    margin: 125px auto 0; /* ✅ ヘッダーの下に配置 */
    border: none;
  }

  /* ✅ Articleページのヘッダーメニューの色を変更 */
.page-template-page-article .main-nav .nav-list li a {
    color: #373e5a !important; /* 通常時の文字色 */
  }
  
  .page-template-page-article .main-nav .nav-list li a:hover {
    color: #2b304a !important; /* ホバー時に少し濃く */
  }

 /* 編集部のおすすめ記事のデザイン */
.recommended-article-item {
    width: 330px;
    display: flex;
    flex-direction: column;
    align-items: left; /* 画像を中央揃え */
    text-decoration: none;
    background: transparent; /* 背景を透明に */
}

/* 投稿画像の表示設定 */
.recommended-article-item .article-image img {
    width: 100%;
    height: 220px;  /* 2:3 の比率 */
    object-fit: cover;
    border-radius: 8px; /* 角を少し丸く */
    display: block;
}

/* タグのスタイル */
.recommended-article-item .article-tag {
    margin-top: 15px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000; /* 黒に変更 */
    text-decoration: none;
}

/* タイトルのスタイル */
.recommended-article-item .article-title {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    margin: 10px 0;
    color: #000; /* 黒に変更 */
    display: block;
    text-decoration: none;
}

/* タイトル下の横線 */
.recommended-article-item .title-separator {
    width: 80px; /* 横線を80pxに変更 */
    border: none;
    border-top: 2px solid #000;
    margin: 25px 0;
}

/* 記事概要のスタイル */
.recommended-article-item .article-excerpt {
    font-size: 16px;
    text-align: left;
    line-height: 1.6;
    color: #000; /* 黒に変更 */
    text-decoration: none;
}