@charset "UTF-8";
/* =================================================================
theme-blue-news.css … お知らせ一覧ページ専用デザイン
-----------------------------------------------------------------
対象は news/news_data.html
★このページだけ違うデザインにしている理由★
お知らせページは、トップページ（index.html）の「お知らせ」枠から
続けて開く画面。そのため、トップページと同じ
「淡い青の背景 ＋ 白いカード ＋ 上端の青いライン」に
そろえて、行き来したときに違和感が出ないようにしています。
※ 共同研究・受託研究・学術指導の3ページは、
theme-blue-sub.css を使います。
★保存するときの注意（大事）★
・必ず「UTF-8」で保存してください（1行目の @charset と合わせるため）。
・全角スペース（ ）が混ざるとCSSが効かなくなります。半角スペースを。
★読み込み順（この順番を守ってください）★
style.css
→ ../css/theme-blue.css （色の定義とフッターの紺色）
→ ../css/theme-blue-news.css （← 最優先。このファイル）
初期デザインに戻したいときは、news_data.html の
の2行を消すだけで、defaultになります。
================================================================= */
/* =================================================================
1. そろえる（横スクロール防止）
-----------------------------------------------------------------
★ここは見た目には関係ありませんが、消すと崩れます★
下の 3 番で、お知らせ1件ごとの箱に「内側の余白」と「枠線」を付けています。ブラウザの初期設定のままだと
指定した幅 ＋ 内側の余白 ＋ 枠線 ＝ 実際の幅と足し算され、スマホで画面からはみ出すことがあります。
border-box にすることで、余白と枠線を含んだ幅になり、はみ出しません。
================================================================= */
.js-news-item,
.carousel-container {
box-sizing: border-box;
}
h1, h2, h3 {
color: var(--c-navy);
}
/* =================================================================
2. お知らせ1件分を「白いカード」にする
-----------------------------------------------------------------
トップページの「お知らせ」枠や、下層ページの白いカードと
同じ見た目にそろえます。
★注意★
.js-news-item に display は絶対に指定しないでください。
カテゴリの絞り込み（すべて／お知らせ／…）は script.js が
display を切り替えて行っているため、ここで指定すると
絞り込みが効かなくなります。
================================================================= */
.js-news-item {
background: var(--c-panel);
border: 1px solid var(--c-line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 32px 32px;
position: relative;
overflow: hidden; /* カード上端の青いラインを角丸に合わせて切る */
}
/* カードの上端に、細い青のラインを走らせる */
.js-news-item::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--c-blue), var(--c-sky) 55%, #8fd8ff);
}
/* =================================================================
4. 日付とタイトル
================================================================= */
.js-news-date {
color: var(--c-blue);
}
/* カレンダーのアイコンも青にそろえる
（下のSVGの中の %230073bd が線の色です。#0073bd の # を
%23 と書き換えたものなので、色を変えるときも同じ書き方でお願いします。） */
.js-news-date::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230073bd' d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192h352v256c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* お知らせの見出し */
.js-news-title {
color: var(--c-navy);
padding-bottom: 12px;
border-bottom: 1px solid var(--c-line);
}
/* =================================================================
5. カテゴリの絞り込みタブ（すべて／お知らせ／イベント／公募情報）
-----------------------------------------------------------------
元はすべて同じ青1色でした。カテゴリの色ラベル（バッジ）と
同じ色に塗り分けて、どのカテゴリを見ているか一目で分かるように
しています。
★色を変えたいとき★
下の4行の --tab（文字と枠線の色）と --tab-bg（マウスを乗せたときの薄い背景色）を書き換えてください。
※ --tab の色は css/news-box.css と news/style.css の
.news-badge--〇〇 と同じ色にそろえてあります。
片方だけ変えると、ラベルとタブの色がズレます。
================================================================= */
.news-filter button[data-filter="all"] { --tab: #444444; --tab-bg: #f0f0f0; } /* すべて ：グレー */
.news-filter button[data-filter="news"] { --tab: #005bac; --tab-bg: #eaf3fb; } /* お知らせ：青 */
.news-filter button[data-filter="event"] { --tab: #e67e22; --tab-bg: #fdf1e6; } /* イベント：オレンジ */
.news-filter button[data-filter="recruit"] { --tab: #2e9e5b; --tab-bg: #e9f6ee; } /* 公募情報：緑 */
.news-filter button {
background: #ffffff;
border: 1px solid var(--tab);
color: var(--tab);
}
.news-filter button:hover {
background: var(--tab-bg);
}
/* いま選ばれているタブは、そのカテゴリの色で塗りつぶす */
.news-filter button.is-active {
background: var(--tab);
border-color: var(--tab);
color: #ffffff;
}
/* =================================================================
6. 写真スライド
================================================================= */
.carousel-container {
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
.carousel-btn {
background-color: rgba(6, 58, 104, .62);
border-radius: 50%;
width: 42px;
height: 42px;
padding: 0;
line-height: 1;
transition: background-color var(--ease);
}
.carousel-btn:hover {
background-color: rgba(6, 58, 104, .88);
}
/* =================================================================
7. 記事の中の画像
================================================================= */
.image-area img,
.js-news-pdf-image {
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
/* =================================================================
8. フッター
================================================================= */
footer {
position: relative;
margin-top: 60px;
width: 100%;
margin-left: 0;
}
/* フッターの上端に、水色のラインを引く */
footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--c-blue), var(--c-sky) 55%, #8fd8ff);
}
footer p {
margin: 6px 0;
line-height: 1.7;
}
footer p:last-child {
color: rgba(255, 255, 255, .72);
margin-top: 14px;
}
/* =================================================================
9. スマホ・タブレット用の調整
================================================================= */
@media (max-width: 900px) {
.js-news-item {
padding: 22px 18px 26px;
border-radius: 8px;
}
}
@media (max-width: 600px) {
.carousel-btn {
width: 36px;
height: 36px;
font-size: 16px;
}
footer {
margin-top: 48px;
}
}
/* =================================================================
10. 印刷時の調整（背景の色や影を消してくれる設定です）
================================================================= */
@media print {
.news-filter,
.carousel-btn {
display: none !important;
}
.js-news-item {
box-shadow: none !important;
border: 1px solid #ccc;
}
h1, h2, h3 {
color: #000 !important;
}
}