@charset "utf-8";
/* ==========================================================================
第45回日本骨代謝学会学術集会 上書きスタイル
既存の common.css / menu.css / site-style.css は変更せず、
このファイルを最後に読み込んで差分だけを上書きする。
========================================================================== */
/* --------------------------------------------------------------------------
1. メニュー配色
ご依頼「メニューの色味はメインビジュアルと合わせてもう少し薄い青に」
旧: #004190（濃紺） → 新: #1E5F8E（メインビジュアルの空・海に合わせた青）
-------------------------------------------------------------------------- */
/* site-style.css が ul.menu / #contents_l に
linear-gradient(90deg, #00695c, #1565c0)（濃いティール→青）を敷いている。
背景色だけ変えてもこのグラデーションが上に乗って見えないので、
グラデーション自体をメインビジュアルの空・海に近い薄い青に差し替える。
白文字のコントラストは両端とも 4.4:1 以上を確保している。 */
#contents_l,
ul.menu {
background-color: var(--menu-bg);
background-image: var(--menu-gradient);
}
ul.menu > li > a,
ul.menu > li.menu_kaitou > a {
border-bottom: 1px solid var(--menu-rule);
color: var(--menu-text);
position: relative;
/* 元CSSは height:43px 固定 + overflow:hidden のため、2行になる項目が
下端で切れてしまう。最低高さを保ちつつ伸びるようにする。 */
height: auto;
min-height: 43px;
overflow: visible;
padding-top: 6px;
padding-bottom: 6px;
}
ul.menu > li > a:hover,
ul.menu > li a.on:hover,
ul.menu > li a.on {
background: var(--menu-active-bg);
color: var(--menu-active-text);
}
/* site-style.css が color:#fff !important を当てているため、
明るいメニュー配色にすると文字が白のままで見えなくなる。
同じく !important で打ち消す。 */
.menu-etc {
border-top: 1px solid var(--menu-rule);
color: var(--menu-text) !important;
}
/* --------------------------------------------------------------------------
2. 「準備中」表記
公開時点で内容が未確定のページは、リンクを無効化したうえで
メニュー右端に「準備中」を表示する。
内容が用意でき次第、該当 から is-preparing クラスを外すだけで公開できる。
-------------------------------------------------------------------------- */
ul.menu > li.is-preparing > a {
pointer-events: none;
cursor: default;
color: var(--menu-dim);
padding-right: 46px;
}
ul.menu > li.is-preparing > a::after {
content: "準備中";
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
padding: 1px 4px;
border: 1px solid var(--badge-border);
border-radius: 3px;
background: var(--badge-bg);
color: var(--badge-text);
font-size: 9px;
font-weight: normal;
line-height: 1.4;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
3. 下層ページのヘッダー背景
現行サイトは bg_page.jpg を参照しているが実ファイルが存在せず、
下層ページでヘッダーの白文字が背景なしで表示されていた。
第45回版の背景画像を用意して差し替える。
-------------------------------------------------------------------------- */
header.pageheader {
background: url(../images/45/bg_page45.jpg) no-repeat 0 0;
background-size: cover;
}
/* site-style.css が第42回のメインビジュアル(img_top01.png)を !important で
背景指定しているため、第45回の画像で打ち消す。
（生成した下層ページは .page を付けていないので通常は使われないが、
旧マークアップを流用した場合に42回の画像が出るのを防ぐ） */
.pageheader.page {
background: url(../images/45/bg_page45.jpg) no-repeat top center !important;
background-size: cover !important;
}
/* --------------------------------------------------------------------------
4. メインビジュアル
@2x（1500px幅）で書き出しているため、表示幅に合わせて縮小する。
-------------------------------------------------------------------------- */
/* display は指定しない。指定すると .pc_only / .sp_only の
出し分け（display:none）を打ち消してしまう。 */
#contents_r img.toppage {
width: 100%;
height: auto;
/* 元CSSはヘッダー帯にメインビジュアルを潜り込ませるため負のマージンを
当てている（site-style.css は !important）。第45回は帯を画像に
焼き込んでいるので不要。打ち消さないと上部が切れる。 */
margin-top: 0 !important;
}
#contents_r > h1 {
margin: 0;
line-height: 0;
}
/* トップページの header は中身なし（帯はメインビジュアルに焼き込み済み）。
common.js が $('header') にハンバーガーボタンを挿入するため、
受け皿として幅を持たせておく。高さ0でレイアウトに影響しない。 */
header.topheader {
position: absolute;
width: 100%;
height: 0;
background: none;
}
/* --------------------------------------------------------------------------
5. 新着情報の枠
元CSSは height 固定（PC 140px / SP 160px）のため、公開直後に記事が
少ないと枠内が大きく空いて見える。内容に応じて縮み、記事が増えたら
従来どおりスクロールするようにする。
-------------------------------------------------------------------------- */
#news_flame {
height: auto;
max-height: 140px;
}
/* --------------------------------------------------------------------------
6. 会長写真
Retina対応で @2x（300x380）で書き出しているため、表示幅を実寸の
150px に固定する。指定しないとスマホで原寸300pxのまま出て大きすぎる。
-------------------------------------------------------------------------- */
div.greet_name div.photo img {
width: 150px;
height: auto;
}
/* --------------------------------------------------------------------------
7. 準備中ページの本文
-------------------------------------------------------------------------- */
.preparing-body {
margin: 60px auto 80px;
padding: 40px 20px;
max-width: 660px;
text-align: center;
}
.preparing-body .preparing-mark {
display: inline-block;
margin-bottom: 18px;
padding: 6px 20px;
border: 1px solid #1E5F8E;
border-radius: 4px;
color: #1E5F8E;
font-size: 15px;
letter-spacing: 0.1em;
}
.preparing-body p {
line-height: 1.9;
}
/* --------------------------------------------------------------------------
6. スマホ
-------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
#contents_l {
background-color: var(--menu-bg);
}
/* 元CSSが margin-left:-20px を当てているため、ヘッダー画像の左端
（「第45回」の縦組み）が画面外に切れてしまう。0に戻す。 */
header.topheader h1 img,
header.pageheader h1 img {
margin-left: 0;
}
#news_flame {
height: auto;
max-height: 160px;
}
/* スマホではハンバーガーボタンを画面上部に固定する。
下層ページの header.pageheader が position:fixed なのと同じ扱い。 */
header.topheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
z-index: 1000;
}
/* common.js はメニュー開閉で ul だけを slideToggle するため、
閉じている状態でも .menu-etc（学会HPへのリンク）が残って
ページ最上部に浮いて見える。nav に .add が付く展開時のみ表示する。 */
nav:not(.add) + .menu-etc {
display: none;
}
ul.menu > li.is-preparing > a {
padding-right: 54px;
}
ul.menu > li.is-preparing > a::after {
right: 12px;
}
}
/* ==========================================================================
8. フッター 学術集会会長連絡先の住所
.bl_1 が 220px しかなく「〒399-0781 長野県塩尻市広丘郷原1780」が
222px 必要なため、番地「1780」だけが3行目に落ちていた。
枠を少し広げ、住所行は折り返さないようにする。
========================================================================== */
#info div.bl_1 {
flex: 0 0 31%;
margin-right: 9%;
}
#info div.bl_1 p {
white-space: nowrap;
}
@media screen and (max-width: 767px) {
/* スマホは1カラムで幅に余裕があるため、折り返し禁止を解除する
（解除しないと画面幅を超えて横スクロールが出る） */
#info div.bl_1 p {
white-space: normal;
}
}
/* ==========================================================================
9. 配色テーマ
第42回は「薄い水色の背景 + 紺(#004190) + 緑(#5BA647)」。
第45回はトンマナを刷新するため、色はすべてこの変数で定義し、
ここだけ差し替えれば全体の雰囲気が変わるようにする。
※ メニューの配色は「メインビジュアルに合わせた薄い青」という
ご指定があるため、この刷新の対象外（上の 1. で指定済み）。
========================================================================== */
:root {
--bg: #EDE7DA;
--surface: #FFFFFF;
--primary: #0D5C68;
--accent: #C08A4E;
--th-bg: #F4F1EA;
--rule: #DCD5C7;
--text: #2E3538;
--news-bar-bg: #0D5C68;
--news-bar-text: #FFFFFF;
--menu-bg: #2E7B88;
--menu-gradient: linear-gradient(180deg, #2E7B88, #2A8177);
--menu-text: #FFFFFF;
--menu-rule: #4E9AA6;
--menu-dim: #CBE2E4;
--menu-active-bg: #0D5C68;
--menu-active-text: #FFFFFF;
--badge-border: #8FBFC6;
--badge-bg: rgba(255,255,255,.14);
--badge-text: #E4F2F4;
--menu-hover-bg: #1B6470;
--menu-hover-text: #FFFFFF;
}
body {
background-color: var(--bg);
color: var(--text);
}
#contents {
background-color: var(--surface);
}
/* 新着情報の見出し帯（元は黄色 #F1C548） */
#news h2 {
background: var(--news-bar-bg);
color: var(--news-bar-text);
letter-spacing: 0.06em;
}
/* ページタイトル（元は緑の下線 + 緑文字） */
#contents_r h2.pagetitle {
color: var(--primary);
border-bottom: 2px solid var(--accent);
}
/* 本文中の大見出し（元は薄青背景 + 紺の縦線） */
main h3 {
background-color: var(--th-bg);
border-left-color: var(--primary);
color: var(--primary);
}
/* 開催概要の表（元は薄青の見出しセル） */
table.hyou_info th {
background-color: var(--th-bg);
}
table.hyou_info th,
table.hyou_info td {
border-color: var(--rule);
}
/* フッター連絡先 */
#info {
border-top: 1px solid var(--rule);
}
#info h2 {
color: var(--primary);
}
footer {
color: var(--primary);
}
/* 会長挨拶のテーマ表記 */
.copy {
color: var(--primary);
}
/* 準備中ページ */
.preparing-body .preparing-mark {
border-color: var(--accent);
color: var(--accent);
}
/* リンク色 */
#contents_r a {
color: var(--primary);
}
/* ==========================================================================
10. 書体
第42回は全面ゴシック体だった。第45回はメインビジュアルが
ヒラギノ明朝のため、見出しを明朝体に揃えて全体の印象を変える。
Windows でも 游明朝 → MS P明朝 と落ちるようにフォールバックを並べる。
本文はゴシックのまま（長文の可読性を優先）。
========================================================================== */
#contents_r h2.pagetitle,
#news h2,
main h3,
.copy,
#info h2,
.preparing-body .preparing-mark {
font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN",
"游明朝", YuMincho, "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
font-weight: 600;
}
#contents_r h2.pagetitle {
letter-spacing: 0.14em;
font-size: 24px;
}
.copy {
letter-spacing: 0.06em;
}
/* ==========================================================================
11. メニューとコンテンツの境界／ハンバーガーの色
メニューを明るい配色にした場合、白い本文エリアと地続きに見えるため
区切り線を入れる。ハンバーガーのバーは元CSSで #02549F 固定なので
テーマに追随させる。
========================================================================== */
#contents_l {
border-right: 1px solid var(--menu-rule);
}
@media screen and (max-width: 767px) {
#contents_l {
border-right: none;
border-bottom: 1px solid var(--menu-rule);
}
/* ハンバーガーのバーは common.css の #02549F のままにする。
白メニュー上でもコントラスト約6.5:1で視認性に問題がないため。 */
}
/* ==========================================================================
12. 現在表示中のページのメニュー項目
common.js が現在ページの に .current を付け、
site-style.css の `ul.menu > li.current { background:#283593 }`（濃い藍）が
効いていた。第42回から継承した色で、明るいメニュー配色にすると
文字色との組み合わせで判読できなくなる。
ご指定どおり「新着情報の見出し帯」と同じ色に統一し、文字は白にする。
========================================================================== */
ul.menu > li.current {
background: var(--news-bar-bg);
}
ul.menu > li.current > a,
ul.menu > li.current > a:hover {
color: var(--news-bar-text);
}
/* 準備中のページが現在表示中になった場合も文字が沈まないようにする */
ul.menu > li.current.is-preparing > a {
color: var(--news-bar-text);
opacity: 0.75;
}
ul.menu > li.current.is-preparing > a::after {
border-color: var(--news-bar-text);
color: var(--news-bar-text);
background: rgba(255, 255, 255, 0.15);
}
/* ==========================================================================
13. マウスホバー
site-style.css の
ul.menu > li > a:not(.js-off):hover { background:#283593 }
は :not(.js-off) の分だけ詳細度が高く（0,3,3）、
こちらの `ul.menu > li > a:hover`（0,2,3）では上書きできない。
同じ形の選択子で指定し直す。
現在表示中の項目は濃いティールで塗るため、ホバーは淡いトーンにして
両者が見分けられるようにする。
========================================================================== */
ul.menu > li > a:not(.js-off):hover {
background: var(--menu-hover-bg);
color: var(--menu-hover-text);
}
/* 現在表示中の項目にホバーしても色が変わらないようにする */
ul.menu > li.current > a:not(.js-off):hover {
background: var(--news-bar-bg);
color: var(--news-bar-text);
}
/* ==========================================================================
14. 修正依頼(2026-08-22)
========================================================================== */
/* (4)-② 現在ページはホバー色と近くなるため、金色の縦線でも識別できるようにする */
ul.menu > li.current > a {
box-shadow: inset 4px 0 0 var(--accent);
}
@media screen and (max-width: 767px) {
/* (4)-① ハンバーガーボタンがヘッダーの「集会」に重なる問題。
ヘッダー画像だけをボタン幅ぶん短くする。帯の背景（bg_page45.jpg）は
header 要素の background なので、右端まで途切れずに続く。 */
header.pageheader h1 img {
width: calc(100% - 52px);
margin-left: 0;
}
/* (4)-② メニューを開いたとき、固定ヘッダーの下に「HOME」が潜り込む問題。
帯の高さは画像比率(285/1500 = 19%)に連動して変わるため、
px 固定ではなく画面幅に対する % で余白を取る。 */
header.pageheader + #contents_l nav.add {
padding-top: 20%;
}
/* トップページは帯がない（header.topheader は高さ0）ので、
ハンバーガーボタンをよける分だけ空ければよい。 */
header.topheader + #contents_l nav.add {
padding-top: 60px;
}
}