@charset "UTF-8";

.news-container {
    max-width: 1100px;
    margin: 0 auto 100px;
    padding: 0 20px;
}

.news-inner {
    border-top: 3px solid #f57c00;
    padding-top: 40px;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.news-header h2 {
    font-size: 1.8rem;
    margin: 0;
    color: #2e7d32;
}

.view-all {
    color: #2e7d32;
    text-decoration: none;
    font-weight: bold;
}

.view-all:hover {
    color: #f57c00;
    text-decoration: underline;
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li {
    border-bottom: 1px solid #eee;
}

.news-list li a {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    text-decoration: none;
    color: #333;
    transition: background 0.2s;
}

.news-list li a:hover {
    background-color: #f9f9f9;
}

.news-list .date {
    color: #888;
    width: 110px;
    font-size: 0.9rem;
}

/* カテゴリーラベル */
.category {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 4px;
    color: #fff;
    margin-right: 20px;
    min-width: 80px;
    text-align: center;
}

.label-blue { background-color: #1e88e5; }
.label-green { background-color: #43a047; }
.label-orange { background-color: #f57c00; } 
.label-gray { background-color: #b5b5b5; }
.label-pink { background-color: #ea9090; }

/* ホバー時の挙動 */
.news-list li a:hover {
    background-color: #fffaf5; 
}

.news-list li a:hover .title {
    color: #f57c00; 
}

.news-list .date {
    color: #888;
    width: 110px;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.news-list .title {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s; 
}

/* ==========================================================================
   下層ページ専用スタイル
   ========================================================================== */

/* ページヘッダー */
.page-header {
    background-color: #f1f8e9;
    border-left: 8px solid #2e7d32;
    padding: 40px 0;
    margin-bottom: 20px;
    background-image: url("../images/header.png");
}

.page-header h1 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 2rem;
}

.page-header p {
    margin: 0;
    color: #fff;
}

/* パンくずリスト */
.breadcrumb {
    font-size: 0.85rem;
    margin-bottom: 40px;
    margin-top: 20px;
    color: #888;
}

.breadcrumb a {
    color: #2e7d32;
    text-decoration: none;
}

/* メインコンテンツエリア */
.content-area {
    max-width: 900px;
    margin: 0 auto 100px;
    padding: 0 20px;
    min-height: 400px;
}

/* 案内ボックス */
.info-box {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin: 30px 0;
}

.info-box h3 {
    margin-top: 0;
    color: #f57c00;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-list {
    padding-left: 20px;
}

.step-list li {
    margin-bottom: 15px;
}

/* ダウンロードボタン */
.btn-download {
    display: inline-block;
    padding: 15px 25px;
    background: #2e7d32;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px;
    transition: background 0.3s;
}

.btn-download:hover {
    background: #f57c00;
}

/* 共通コンテナ */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ダウンロードセクション全体に下の余白を追加 */
.download-list {
    margin-bottom: 60px;
}

/* ==========================================================================
   お知らせ詳細ページ専用スタイル
   ========================================================================== */

.detail-page {
    max-width: 800px;
    margin-top: 40px;
}

.post-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.post-meta .date {
    color: #888;
    font-family: Arial, sans-serif;
}

.post-title {
    font-size: 2.2rem;
    line-height: 1.4;
    color: #333;
    margin: 0;
}

.post-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #444;
}

.post-content p {
    margin-bottom: 25px;
}

/* 記事内の画像設定 */
.post-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0 40px;
}

/* 記事内リストの調整 */
.post-content ul {
    margin-bottom: 30px;
    padding-left: 20px;
}

.post-content li {
    margin-bottom: 10px;
}



/* お知らせ詳細：戻るボタンのエリア */
.back-to-list {
    margin-top: 60px;
    margin-bottom: 40px; /* フッターとの間の隙間 */
    text-align: center;
}

/* 戻るボタンの装飾 */
.btn-back {
    display: inline-block;
    padding: 12px 40px;
    background: #fff;
    color: #2e7d32; /* メインの緑 */
    border: 2px solid #2e7d32;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    transition: 0.3s ease;
}


.btn-back:hover {
    background: #f57c00;
    border-color: #f57c00;
    color: #fff;
    transform: translateY(-2px); /* 少し浮かせる */
    box-shadow: 0 5px 15px rgba(245, 124, 0, 0.3);
}

.btn-back i {
    margin-right: 8px;
}

.post-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    position: static;
}

/* 記事末尾の余白調整 */
.detail-page article {
    margin-bottom: 80px;
}

/* ==========================================================================
   よくある質問
   ========================================================================== */
.faq-container {
    margin-top: 30px;
    margin-bottom: 50px;
}

.faq-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-question {
    padding: 20px;
    cursor: pointer;
    font-weight: bold;
    list-style: none; /* デフォルトの三角を消す */
    position: relative;
    display: flex;
    align-items: center;
    color: #2e7d32; /* メインの緑 */
    transition: background 0.3s;
}

.faq-question::-webkit-details-marker {
    display: none; /* Safari用の三角消し */
}

.faq-question span {
    color: #f57c00; /* Qの文字をオレンジに */
    font-size: 1.4rem;
    margin-right: 12px;
}

/* ホバー時に薄いオレンジ背景 */
.faq-question:hover {
    background-color: #fffaf5;
}

/* 開閉を示すアイコン（擬似要素） */
.faq-question::after {
    content: '\f067'; /* FontAwesomeのプラスアイコン */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    font-size: 0.9rem;
    color: #ccc;
    transition: transform 0.3s;
}

/* 開いている時のアイコン変化 */
.faq-item[open] .faq-question::after {
    content: '\f068'; /* マイナスアイコン */
    transform: rotate(180deg);
    color: #f57c00;
}

/* 回答部分 */
.faq-answer {
    padding: 10px 20px 10px 52px; /* Qの文字幅に合わせて左余白を調整 */
    line-height: 1.8;
    color: #555;
    border-top: 1px solid #f9f9f9;
}

.faq-answer p {
    margin: 0;
}

/* ==========================================================================
   業績集
   ========================================================================== */
/* 全体の文字のフォントと行間を整える */
.publication-list {
  max-width: 95%;
  margin: 20px auto;
  font-family: sans-serif;
  line-height: 1.7;
  color: #333;
}

/* 論文のリスト（箇条書き） */
.publication-list ul {
  padding-left: 20px;
  margin: 0;
}

/* 論文1件ごとの間隔 */
.publication-list li {
  margin-bottom: 15px;
}

/* リンク（DOIなど） */
.publication-list a {
  color: #0066cc;
  text-decoration: none;
}
.publication-list a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   2. テーブルの外枠・コンテナ（横・縦スクロールの設定）
   ========================================================================== */
.mega-table-container {
    width: 100%;
    max-height: 600px; /* これを超えると縦スクロール */
    overflow: auto;    /* 横・縦両方のスクロールを許可 */
    border: 1px solid #dcdde1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background-color: #fff;
}

/* ==========================================================================
   3. テーブル本体と基本セル
   ========================================================================== */
.mega-table {
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap; /* セル内での意図しない改行を防ぐ */
}

.mega-table th, 
.mega-table td {
    padding: 12px 18px;
    border: 1px solid #e0e0e0;
}

/* ==========================================================================
   4. 見出し（固定表示の設定）
   ========================================================================== */
/* 上部ヘッダーの固定（深緑） */
.mega-table th {
    background-color: #1b4d3e;
    color: #ffffff;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* 左端（1列目）の固定 */
.mega-table td:-child,
.mega-table th:fifth-child {
    position: sticky;
    left: 0;
    z-index: 20;
    background-color: #f4f7f5; /* 左列は薄い緑系のグレー */
    font-weight: bold;
    color: #1b4d3e;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

/* 左上の角のセル（縦横の固定が重なる部分） */
.mega-table th:first-child {
    z-index: 30; 
}

/* ==========================================================================
   5. データの配置ルール（基本は右寄せ、1列目だけ左寄せ）
   ========================================================================== */
.mega-table td {
    text-align: center;
}
/* 

/* ==========================================================================
   6. 視認性向上のための背景色設定（ゼブラ柄・ホバー効果）
   ========================================================================== */

/* マウスホバー時のエフェクト（淡いオレンジ） */
.mega-table .table-hover-1st:hover td:nth-child(n){
    background-color: #ffe8a1 !important;
    color: #1b4d3e;
}

.mega-table .table-hover-2nd:hover td:nth-child(n + 2) {
    background-color: #ffe8a1 !important;
    color: #1b4d3e;
}

.mega-table tr.border {
    border-bottom: 2px solid #333;
}

/* ==========================================================================
   お知らせ一覧ページ スタイル
   ========================================================================= */

.news-list-section {
    margin-bottom: 80px;
}

.page-lead {
    color: #666;
    margin-bottom: 40px;
    font-size: 1.05rem;
}

/* 一覧の枠組み */
.news-list {
    border-top: 1px solid #e0e0e0;
    margin-bottom: 40px;
}

/* 1行のお知らせアイテム */
.news-item {
    display: flex;
    align-items: center;
    padding: 20px 10px;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

/* マウスONで薄いオレンジ（さし色）の背景にしてリンク感を出す */
.news-item:hover {
    background-color: #fffaf5;
}

.news-item-title{
    border: none !important;
    margin-top: 15px !important;
}

/* 日付とカテゴリの塊 */
.news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 240px; /* 幅を固定してタイトルの位置を綺麗に揃える */
}

.news-meta .date {
    font-size: 0.95rem;
    color: #888;
    font-family: monospace; /* 数字の幅を揃えて見やすく */
}

/* カテゴリタグの共通設定 */
.category {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    white-space: nowrap;
}

/* タイトルエリア */
.news-title-area {
    flex-grow: 1; /* 残りの横幅をすべて使う */
    padding-right: 20px;
}

.news-item-title {
    font-size: 1.05rem;
    font-weight: normal;
    margin: 0;
    line-height: 1.5;
    transition: color 0.3s;
}

/* ホバー時にタイトルをメインの緑にする */
.news-item:hover .news-item-title {
    color: #2e7d32;
}

/* 右端の矢印アイコン */
.news-arrow {
    color: #ccc;
    transition: transform 0.3s, color 0.3s;
}

.news-item:hover .news-arrow {
    color: #f57c00; /* ホバーでオレンジに */
    transform: translateX(4px); /* 少し右に動かす */
}

/* --- ページネーション（ページ送り） --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 50px;
}

.pagination a, 
.pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    text-decoration: none;
    color: #555;
    font-size: 0.95rem;
    transition: all 0.3s;
}

/* 数字リンクのホバー時 */
.pagination a:hover {
    border-color: #2e7d32;
    color: #2e7d32;
    background-color: #f1f8e9;
}

/* 現在のページ（選択中） */
.pagination .current {
    background-color: #2e7d32;
    border-color: #2e7d32;
    color: #fff;
    font-weight: bold;
}

/* 無効化されたボタン（前へ、など） */
.pagination .disabled {
    color: #ccc;
    background-color: #f9f9f9;
    cursor: not-allowed;
}


/* ページトップへのスクロール */
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #f57c00;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #f57c00;
}