@charset "UTF-8";
/* =====================================================================
   日本FIX委員会トレーディングセミナー 統合スタイルシート
   ---------------------------------------------------------------------
   2024年版の redefine / class / base の3ファイルから実使用分だけを
   1本にまとめ、float レイアウトを flex に置き換えてレスポンシブ化した。
   進め方は FRCF（frcf_web/assets/css/style.css）に合わせてある。
   旧IE向けハック（clearfix・filter:alpha・*html）は全て削除した。
   ブレークポイント: 768px（1200px はサイトの最大幅）
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. カスタムプロパティ
   ------------------------------------------------------------------ */
:root {
	--c-text:      #000;
	--c-body:      #333;
	--c-accent:    #252062;   /* キーカラー（スポンサー枠・セッション帯・リンク） */
	--c-line:      #ccc;
	--c-bg-soft:   #eee;
	--c-red:       #f00;
	--c-time:      #FFFBD2;   /* プログラムの時刻セル */
	--c-cocktail:  #FBE7EB;   /* ネットワーキング */
	--c-link:      var(--c-accent);
	--w-site:      1200px;    /* サイト最大幅 */
	--w-main:      900px;     /* 本文カラム */
	--w-sub:       230px;     /* サイドカラム */
	--gap:         20px;
}

/* ---------------------------------------------------------------------
   2. リセット
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, hr, div, p, pre,
address, blockquote, ul, ol, dl, dt, dd, form, fieldset {
	margin: 0;
	padding: 0;
}

body {
	color: var(--c-text);
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN',
	             'メイリオ', Meiryo, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	background: #f4f4f4;
}

/* 区切りのない長い文字列（伏字の ●●● や URL）も枠内で折り返す */
p { text-align: justify; overflow-wrap: break-word; }
/* 伏字（●●●）の段落。● は記号なので overflow-wrap だけでは
   折り返さないブラウザ（Safari など）があるため、文字単位で折り返す */
.dummy { word-break: break-all; }
[lang="en"] p { text-align: left; }   /* 英文は両端揃えにすると単語間が開きすぎる */

h1, h2, h3, h4, h5, h6,
input, select, textarea, button, table, th, td { font-family: inherit; }

h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; }
strong, em { font-weight: bold; }
address, em { font-style: normal; }
ol, ul { list-style: none; }

img {
	border: 0;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}

a { color: var(--c-link); text-decoration: underline; }
a:hover { color: #5a55a8; }
a.link-plain { color: inherit; }

/* 画像リンクのフェード（旧 filter:alpha を transition に置換） */
.fadeimg { transition: opacity .3s ease; }
a:hover .fadeimg { opacity: .7; }

/* ---------------------------------------------------------------------
   3. レイアウト
   ------------------------------------------------------------------ */
#wrapper {
	width: 100%;
	max-width: var(--w-site);
	margin: 0 auto;
	background: #fff;
	box-shadow: 0 12px 10px 0 rgba(0, 0, 0, .5);
}

/* 本文とサイドの2カラム。
   DOM順は main → sub（本文を先に読ませる）だが、
   order で視覚的にはサイドを左に置く（従来の見た目を維持）。 */
.layout {
	display: flex;
	align-items: flex-start;
	gap: var(--gap);
	padding: 10px var(--gap) var(--gap);
}

#main-column {
	flex: 1 1 auto;
	min-width: 0;          /* flex 内でテーブルがはみ出すのを防ぐ */
	max-width: var(--w-main);
}

#sub-column {
	order: -1;             /* 視覚上は左 */
	flex: 0 0 var(--w-sub);
	color: var(--c-body);
}

/* ---------------------------------------------------------------------
   4. サイトヘッダー
   ------------------------------------------------------------------ */
.site-title { margin: 0; }
.site-title img { width: 100%; }

/* ---------------------------------------------------------------------
   5. 見出し
   ------------------------------------------------------------------ */
/* 背景画像（h2_bg）に枠線が描き込まれているので border は付けない */
#main-column h2 {
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: 8px 14px;
	margin-bottom: 10px;
	color: #fff;
	font-size: 160%;
	line-height: 1.25;
	background: url("../img/common/h2_bg.webp") no-repeat left center / 100% 100%;
}

/* 「※English follows Japanese」→ 英語欄へのページ内リンク */
.lang-jump { color: inherit; }
.lang-jump:hover { color: inherit; opacity: .7; }

/* ---------------------------------------------------------------------
   6. リスト
   ------------------------------------------------------------------ */
/* 2024年版は li にアイコン画像を指定していたが、パス違いで表示されて
   いなかった。見た目を変えないようアイコンは付けず、字下げだけ残す。 */
.speakers li {
	padding: 10px 0 0 20px;
	margin-top: 10px;
	border-top: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------
   7. テーブル
   ------------------------------------------------------------------ */
table { border-collapse: collapse; }
td, th { border: 1px solid var(--c-line); padding: 10px; }
table td p { text-align: left; }

table.outline_table,
table.program_table { width: 100%; }

table.outline_table th {
	width: 100px;
	white-space: nowrap;
	text-align: center;
	font-weight: normal;
}

table.program_table th {
	width: 100px;
	white-space: nowrap;
	text-align: center;
	background-color: var(--c-time);
}
/* 受付・休憩の行は上下を詰める */
table.program_table .is-short { padding-top: 0; padding-bottom: 0; }
table.program_table td.gray { background-color: var(--c-line); }
table.program_table td.pink { background-color: var(--c-cocktail); }

/* ---------------------------------------------------------------------
   8. プログラム
   ------------------------------------------------------------------ */
/* セッション名の帯（セルの padding を打ち消して上辺に貼り付ける） */
table.program_table p.session {
	margin: -10px -10px 5px;
	padding: 2px 2px 2px 10px;
	background-color: var(--c-accent);
	color: #fff;
	font-weight: bold;
}
/* 開会・閉会挨拶のように帯だけのセルは、下の余白を残さない */
table.program_table p.session:only-child { margin-bottom: -10px; }

.title {
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: bold;
}

/* モデレーター／パネリストのラベル。
   パネリストの前（2つ目以降）は罫線で区切る（旧 hr.mt10.mb10 の代わり） */
.role {
	margin-top: 5px;
	font-weight: bold;
}
.role ~ .role {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--c-line);
}
.role ~ .role + .speakers li:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* ---------------------------------------------------------------------
   9. サイドカラム
   ------------------------------------------------------------------ */
.regist img.is-closed { opacity: .3; }

.sponsor-category1 {
	display: block;
	padding: 5px;
	background-color: var(--c-accent);
	border: 1px solid var(--c-accent);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.sponsor-box {
	padding: 0 10px 10px;
	border: 1px solid var(--c-accent);
}

.sponsor-category2 {
	display: block;
	margin-top: 15px;
	padding: 5px;
	background-color: var(--c-bg-soft);
	border: 1px solid var(--c-line);
	font-size: 14px;
	font-weight: bold;
	text-align: center;
}

.left_logo { margin-top: 30px; text-align: center; }
.sponsor-category2 + .left_logo { margin-top: 30px; }
.left_logo + .sponsor-category2 { margin-top: 30px; }

.sponsor-logo {
	display: block;
	width: 180px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* スポンサーのロゴが未着のあいだのグレー枠（中に社名をテキストで入れる）。
   決まったら <img> に置き換える。 */
.logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 180px;
	height: 60px;
	margin: 0 auto;
	padding: 0 8px;
	background: #d9d9d9;
	border: 1px solid #c4c4c4;
	color: var(--c-body);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}

.contact-title {
	margin-top: 20px;
	font-size: 14px;
	font-weight: bold;
}
.contact-title span {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
}
.contact p { text-align: left; }

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------
   10. フッター
   ------------------------------------------------------------------ */
footer {
	padding: 10px;
	border-top: 1px solid #999;
	background: #fff;
	text-align: center;
}

/* ---------------------------------------------------------------------
   11. ユーティリティ（旧 class.css のうち実使用分のみ・px を維持）
   ------------------------------------------------------------------ */
.mt05 { margin-top:  5px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }

.bold        { font-weight: bold; }
.alignCenter { text-align: center; }
.colorRed    { color: var(--c-red); }

/* =====================================================================
   12. レスポンシブ
   ===================================================================== */

/* --- 〜1200px: サイト幅を画面に合わせる --------------------------- */
@media (max-width: 1200px) {
	#wrapper { box-shadow: none; }
}

/* --- 〜768px: スマートフォン ---------------------------------------- */
@media (max-width: 768px) {
	body { font-size: 14px; }

	.layout {
		flex-direction: column;
		padding: 10px;
		gap: 10px;
	}

	#main-column { max-width: none; width: 100%; }

	#sub-column {
		order: 0;            /* 本文の下へ回す */
		flex: 1 1 auto;
		width: 100%;
		border-top: 1px solid var(--c-line);
		padding-top: 20px;
	}

	.regist { text-align: center; }

	/* サイドのスポンサーロゴを横並びにして間延びを防ぐ（最大2列） */
	.sponsor-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.sponsor-box .sponsor-category2 { flex: 1 0 100%; margin-top: 15px; }
	.sponsor-box .left_logo { flex: 0 0 calc((100% - 10px) / 2); margin-top: 10px; }
	.sponsor-logo { width: 160px; }

	#main-column h2 { min-height: 48px; font-size: 130%; }

	/* ------------------------------------------------------------
	   テーブルはセルを縦に積む（FRCF と同じ）。
	   行を1つの塊として枠で囲み、セルの区切りは下罫線で表す。
	   ------------------------------------------------------------ */
	#main-column table,
	#main-column tbody,
	#main-column tr,
	#main-column th,
	#main-column td {
		display: block;
		width: auto !important;
		white-space: normal;
	}

	#main-column tr {
		margin-bottom: 10px;
		border: 1px solid var(--c-line);
	}

	#main-column th,
	#main-column td {
		border: none;
		border-bottom: 1px solid var(--c-line);
		text-align: left;
	}
	#main-column tr > *:last-child { border-bottom: none; }

	/* 開催概要の見出しセルは薄い地色で見出しらしくする */
	#main-column table.outline_table th {
		padding: 6px 10px;
		background-color: var(--c-bg-soft);
		font-weight: bold;
	}

	/* 時刻セルは見出しのように扱う */
	#main-column table.program_table th {
		padding: 6px 10px;
		font-weight: bold;
	}
	/* 縦積みでは受付・休憩の行も上下に余白を取る（詰めると文字が罫線に付く） */
	#main-column table.program_table .is-short { padding-top: 6px; padding-bottom: 6px; }
}