@charset "UTF-8";

/* ==============================================
   基本設定 (Base)
   ============================================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* 枠線や余白を幅に含める設定 */
}

body {
	/* 読みやすいモダンなフォント設定に変更 */
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%; /* スマホでの文字サイズ自動調整を無効化 */
}

/* ==============================================
   ヘッダー (Header)
   ============================================== */
header {
	width: 100%; /* 幅を画面いっぱいに広げる */
	position: fixed;
	top: 0;
	z-index: 1000;
	line-height: 1.0;
	background-color: #00437C; /* 上部の背景色 */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

	/* --- タイトル部分の設定 --- */
	header .headline {
		display: flex;
		align-items: center;
		justify-content: center; /* タイトルを中央に維持 */
		max-width: 90%;
		margin: 0 auto;
		padding: 1.0em 0;
		gap: 20px;
		position: relative; /* ▼重要：ここを基準にロゴを配置する */
	}
		/* タイトル文字が入っているエリア */
		header .headline > div {
			flex: initial;
			text-align: center; /* ▼日本語と英語の行を中央揃えにする */
		}

	header .conferenceNameJP {
		font-size: 1.7em;
		color: #F0B300;
		font-weight: bold;
		margin-bottom: 0.2em;
		line-height: 1.2;
	}

	header .conferenceNameEN {
		font-size: 1.0em;
		color: #F0B300;
		font-weight: bold;
		line-height: 1.2;
	}

	header .logo {
		height: 3.5em;
		width: auto;
		/* ▼ここから追加・変更▼ */
		background-color: #ffffff; /* 背景を白にする */
		padding: 5px 10px; /* ロゴの周りに少し余白を作る */
		border-radius: 5px; /* 角を少し丸くして優しくする */
		box-shadow: 0 0 5px rgba(0,0,0,0.3); /* 少し影をつけて立体的に */

		/* ▼ここを変更：ロゴを右端に固定する設定 */
		position: absolute;
		right: 0; /* 右端に配置 */
		top: 50%; /* 上下中央の基準点 */
		transform: translateY(-50%); /* 上下中央に補正 */
	}

	/* --- ナビゲーション（メニュー）部分の設定 --- */
	/* ここで背景を白に変えて分離させます */
	header nav {
		background-color: #ffffff; /* 背景を白に */
		width: 100%;
		border-bottom: 3px solid #F0B300; /* 下にアクセントの黄色い線 */
	}

		header nav ul {
			display: flex;
			flex-wrap: wrap;
			max-width: 90%;
			margin: 0 auto;
			padding: 10px 0;
			list-style-type: none;
			/* ▼ここを追加・変更（中央寄せ）▼ */
			justify-content: center;
		}

		header nav li {
			margin-right: 20px;
		}

			/* リンク文字色を「青」に変更（背景が白になるため） */
			header nav li a {
				font-weight: bold;
				text-decoration: none;
				color: #00437C; /* 文字を濃い青に */
				font-size: 0.95em;
				padding: 5px 10px;
				border-radius: 4px;
				transition: all 0.3s;
			}

				header nav li a:hover,
				header nav li a:active {
					background-color: #00437C; /* ホバー時は背景を青に */
					color: #ffffff; /* 文字を白に */
				}

	/* 2段目のメニューの設定（線は不要なのでシンプルに） */
	header .navigation2 {
		padding-top: 0;
		margin-top: -5px; /* 上のメニューとの隙間を詰める */
		border-top: none;
	}

/* --- スマホ対応（ヘッダー部分のみ調整） --- */
@media screen and (max-width: 768px) {
	header .headline {
		flex-direction: column;
		align-items: flex-start;
		padding: 10px 5%; /* スマホでの余白調整 */
		max-width: 100%;
	}

	header nav ul {
		flex-direction: column;
		max-width: 100%;
		padding: 0 5%;
	}

	header nav li {
		margin-bottom: 5px;
		border-bottom: 1px solid #eee; /* スマホ時は細い線で区切る */
		width: 100%;
	}

	header nav li a {
		display: block; /* タップしやすいように広げる */
		padding: 10px 0;
	}

	/* スマホでは「右端固定」を解除して、タイトルの下に並べる */
	header .logo {
		position: static; /* 固定を解除 */
		transform: none;
		margin-top: 10px; /* タイトルとの隙間 */
		align-self: flex-start; /* 左寄せ（またはお好みで center） */
	}
}

/* --- 準備中のリンク（グレイアウト） --- */
header nav li a.disabled {
	color: #cccccc !important; /* 文字色をグレーに（強制） */
	pointer-events: none; /* クリックを無効化 */
	cursor: default; /* マウスカーソルを指マークにしない */
	text-decoration: none; /* 下線などを消す */
}


/* ==============================================
   メインコンテンツ (Main)
   ============================================== */
main {
	margin: 0 5%;
	/* ヘッダーの高さ分だけ余白を空ける（PC用） */
	padding-top: 14em;
}

	main .banner {
		width: 100%;
		height: auto;
		display: block;
	}

	main .description {
		margin: 20px;
	}

		/* 見出しのデザイン統一 */
		main .description h1,
		main .description h2 {
			margin-top: 1.5em;
			margin-bottom: 0.5em;
			font-size: 1.4em;
			font-weight: bold;
			color: #00437C; /* 学会カラーに合わせる */
			border-bottom: 2px solid #F0B300; /* 下線を追加 */
			padding-bottom: 0.2em;
		}

		main .description h3 {
			margin-top: 1.2em;
			font-size: 1.2em;
			font-weight: bold;
			color: #333;
		}

		main .description p {
			margin: 0.5em 0 1em 0;
			line-height: 1.6; /* 読みやすい行間 */
			color: #333;
		}

		main .description ul {
			margin: 0.5em 0 1em 20px;
		}

		main .description li {
			margin-top: 0.5em;
			line-height: 1.5;
		}

		/* 右寄せレイアウト（PCのみ適用） */
		main .description .floatRight {
			float: right;
			margin: 0 0 20px 20px;
			background: #f9f9f9;
			padding: 10px;
			border: 1px solid #ccc;
		}

	/* リンクスタイル */
	main a {
		color: #245BDD;
		text-decoration: underline;
	}

		main a:hover {
			color: #B63C09;
			text-decoration: none;
		}

/* ==============================================
   フッター (Footer)
   ============================================== */
footer {
	width: 90%;
	margin: 50px auto 0 auto; /* 中央寄せ */
	background-color: #00437C;
	padding: 20px;
}

	footer p {
		font-size: 0.9em;
		text-align: center; /* スマホでも見やすいよう中央揃え */
		color: #F0B300;
		line-height: 1.4;
	}

/* ==============================================
   スマホ・タブレット対応 (Responsive)
   ============================================== */
@media screen and (max-width: 768px) {

	/* ヘッダー：固定を解除し、幅いっぱいに */
	header {
		position: relative;
		width: 100%;
		margin: 0;
		padding-bottom: 10px;
	}

		header .headline {
			flex-direction: column; /* 縦並び */
			align-items: flex-start;
			margin: 10px;
		}

		header .logo {
			margin-top: 10px;
			height: 50px; /* スマホ用に少し小さく */
		}

		header .conferenceNameJP {
			font-size: 1.2em;
		}

		header .conferenceNameEN {
			font-size: 0.8em;
		}

		/* ナビゲーション：縦並びにしてタップしやすく */
		header nav ul {
			flex-direction: column;
			margin: 0 10px;
		}

		header nav li {
			margin-right: 0;
			border-bottom: 1px solid rgba(255,255,255,0.1);
			padding: 5px 0;
		}

		header .navigation2 {
			border-top: none;
			margin-top: 0;
		}

	/* メイン：ヘッダー固定解除に伴い余白調整 */
	main {
		width: 100%;
		margin: 0;
		padding-top: 0;
	}

		main .description {
			margin: 15px;
		}

			/* 右寄せ解除 */
			main .description .floatRight {
				float: none;
				margin: 20px 0;
				width: 100%;
			}

	footer {
		width: 100%;
		margin-bottom: 0;
	}
}