/*全体の余白をゼロにする*/
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box; /* 要素の幅の計算を簡単に */
}

body {
  font-family: Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.6;
  color: #333; /* 基本の文字色 */
}

a {
  color: #0066cc; /* 基本のリンク色 */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #004c99;
}

/*ヘッダー部分*/
.header {
  background-color: #336699;
  color: white;
  width: 100%;
  padding: 10px 0; /* 上下のパディングを追加 */
  position: relative; /* headerImgの絶対配置の基準に */
}

/*ヘッダーimage部分*/
.headerImg {
  position: absolute;
  top: 5px; /* 位置調整 */
  right: 10px; /* 位置調整 */
  height: 50px; /* HTML側で指定済みだが念のため */
}

/*サイトタイトル*/
.headingLarge {
  font-size: 2.2em; /* 少し調整 */ /* (元の3emから変更) */
  text-align: center;
  padding: 15px 20px; /* 少し調整 */ /* (元の20pxから変更) */
  /* text-shadow は一旦コメントアウト。デザインに応じて調整 */
  /* text-shadow: 5px -5px 4px gray; */
  margin-right: 70px; /* ロゴとの重なりを避ける */
}

/*部分装飾*/
.partLarge {
  font-size: 1em; /* 親要素のフォントサイズに対して */ /* (元の2emから変更、意味合い変更) */
  color: #FFDD57; /* 強調色に変更 */
  background-color: transparent;
}

/* ナビゲーションメニュー */
.navigation {
  color: white;
  background-color: #2D4059;
  border-top: solid 1px #2D4059;
  border-bottom: solid 1px #2D4059;
  text-align: center; /* ナビゲーション項目を中央揃え */
}

/* 列挙型箇条書きを横並び表示に */
.navigationLi {
  display: inline-block;
  padding: 15px 20px; /* 少し調整 */ /* (元の15pxから変更) */
}

.navigationLi a {
  color: white;
  font-weight: bold;
}

.navigationLi a:hover {
  color: #FFDD57;
  text-decoration: none;
}

/* メインコンテンツエリアの共通スタイル */
.article {
  background-color: #f4f7f6; /* 少し変更 */
  color: black;
  width: 100%;
  padding-top: 30px; /* 少し調整 */ /* (元の50pxから変更) */
  padding-bottom: 30px; /* 少し調整 */ /* (元の50pxから変更) */
}

/*ページのパラグラフ*/
.articleP {
  width: 75%;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
}

/*文章部のHTMLフォーム*/
.articleFormUl {
  width: 75%;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 20px;
  list-style: none;
}

/*送信ボタン*/
.submitbtn {
  width:150px;
  height:30px;
  border: solid 1px gray;
}

/* ヒーローセクション */
.hero-section {
  background-color: #e9f2f9; /* 明るい背景色 */
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.lead-text {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.button {
  display: inline-block;
  background-color: #EA5455; /* 強調色 */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  margin: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #d43d3d;
  color: white;
  text-decoration: none;
}

/* セクション共通 */
.researcher-intro, .site-summary {
  max-width: 900px;
  margin: 0 auto 30px auto; /* 中央揃えと下のマージン */
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.section-title {
  font-size: 1.8em;
  color: #336699;
  margin-bottom: 20px;
  border-bottom: 2px solid #FFDD57;
  padding-bottom: 5px;
}

.text-link {
  font-weight: bold;
}

/*文章部の見栄えを揃えるために、p要素のCSSのプロパティを真似して、クラスセレクタを記述*/
/* ページのタイトル (h2) */
.articleH2 {
  font-size: 1.8em; /* 少し調整 */ /* (元の2emから変更) */
  color: #336699; /* ヘッダーと合わせたテーマカラー */
  /* margin-left はセクションごとの中央揃えで対応 */
  margin-bottom: 20px;
}

/*ページのパラグラフ*/
.articleP {
  /* width, margin-left, margin-right はセクションごとの設定で対応 */
  margin-bottom: 15px; /* 少し調整 */ /* (元の20pxから変更) */
  line-height: 1.7; /* 行間を少し広げる */
}

/*ページの表,tableの位置,tableの枠線*/
.articleTable {
  width: 100%; /* セクション内で幅100%に */ /* (元の50%から変更) */
  /* margin-left はセクションごとの中央揃えで対応 */
  margin-bottom: 20px;
  border-collapse: collapse;
  border: solid 1px #ccc; /* 少し薄い色に */ /* (元のblackから変更) */
}

/* セルの文字列と枠線との空白を10pxし、枠線をsolid(実線)で、太さ1pxで、色blackで枠線を描く */
.articleTableTh, .articleTableTd {
  padding: 10px;
  border: solid 1px #ccc; /* 少し薄い色に */ /* (元のblackから変更) */
  text-align: left; /* セル内テキストを左揃えに */
}

.articleTableTh {
  background-color: #e9f2f9; /* ヘッダーセルに背景色 */
  font-weight: bold;
  color: #336699;
}

/* 文章部の表の見出し、下線、太文字 */
.articleTableCaption {
  text-decoration: none; /* 下線を削除 */ /* (元のunderlineから変更) */
  font-weight: bold;
  font-size: 1.2em;
  color: #336699;
  margin-bottom: 10px;
  text-align: left; /* キャプションを左揃えに */
}

/*部分装飾*/
.txtKeyword {
  color: #EA5455;
  background-color: transparent;
  font-weight: bold;
}

/*フッター部分*/
.footer {
  width: 100%;
  color: #333; /* 文字色変更 */ /* (元のblackから変更) */
  background-color: #FFDD57; /* ベースファイルの色を活かすか検討 */ /* (元の#fd0から変更、または#fd0) */
  padding: 20px 0; /* 上下のパディングを追加 */
  border-top: 3px solid #2D4059;
}

/* ----- 右寄せ、項目記号の削除、文字は標準小、余白5px ----- */
.footerUL {
  text-align: center; /* 中央揃えに変更 */ /* (元のrightから変更) */
  list-style: none;
  font-size: 0.9em; /* 少し調整 */ /* (元のsmallerから変更) */
  padding: 5px;
}

.footerUL li {
  margin-bottom: 5px;
}

.footerUL a {
  color: #336699; /* フッター内のリンク色 */
}

.footerUL a:hover {
  color: #EA5455;
}

/* 元々の課題CSSでh1, p要素に直接スタイルが設定していた。
   クラスベースに移行したため、これらは不要または調整対象。
   今回はクラスセレクタを優先するため、コメントアウトまたは削除を検討。
   もし全体的なp要素などにスタイルを当てたい場合は残すが、
   クラスで詳細に制御する方が一般的かな。
*/
/*
h1 {
  font-size: 3em;
  text-align: center;
  text-shadow: 5px -5px 4px gray
}
p {
  text-indent:1em;
  border: solid 1px black;
  padding: 10px;
}
*/

.txtLarge {
  font-size: 3em;
}
.bigfont {
  font-size: 1.5em;
}
.redchar {
  color: red;
}
/* research.html 関連スタイル */

.page-title-section {
  text-align: center;
  padding: 20px;
  background-color: #e0eaf1; /* 少し異なる背景色で区別 */
  margin-bottom: 30px;
}

.section-intro {
  font-size: 1.1em;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}

#research-background,
#theoretical-framework,
#research-plan,
#research-progress,
#gbs-details {
  max-width: 900px;
  margin: 0 auto 30px auto; /* 中央揃えと下のマージン */
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.sub-section-title {
  font-size: 1.4em;
  color: #336699;
  margin-top: 20px;
  margin-bottom: 10px;
  border-left: 4px solid #FFDD57;
  padding-left: 8px;
}

.custom-list {
  margin-left: 20px; /* ol 要素の左マージン */
  padding-left: 20px; /* ol 要素の左パディング（マーカー用） */
}

.custom-list li {
  margin-bottom: 10px; /* リストアイテム間のマージン */
}

.placeholder-image,
.timeline-placeholder {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  margin: 20px 0;
  background-color: #f9f9f9;
  color: #777;
}

.timeline-placeholder h4 {
  margin-bottom: 10px;
  color: #555;
}

.supplementary-info {
  background-color: #f0f8ff; /* AliceBlue など薄い色 */
  border-left: 5px solid #336699;
}
/* practice.html 関連スタイル */

.tool-sample-area,
.case-study-item {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #ccc; /* 各項目の区切りを明確に */
}

.case-study-item:last-child {
  border-bottom: none; /* 最後のアイテムの下線は不要 */
}

.placeholder-image.wide-placeholder {
  min-height: 200px; /* サンプル表示エリアの高さを確保 */
}

.placeholder-image.graph-placeholder,
.placeholder-image.flowchart-placeholder {
  min-height: 150px;
}

/* もし導入事例などを横並びにする場合などのスタイル */
/* 例
.case-studies-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.case-study-item {
  flex-basis: calc(50% - 10px); // 2カラムの場合
}
*/
/* profile.html 関連スタイル */

.profile-container {
  display: flex; /* 画像とテキストを横並びにするため */
  flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
  align-items: flex-start; /* 上揃え */
  gap: 20px; /* 要素間の隙間 */
  padding: 20px;
}

.profile-image-area {
  flex: 1; /* 利用可能なスペースの割合 */
  min-width: 200px; /* 最小幅 */
  max-width: 300px; /* 最大幅を制限して大きくなりすぎないように */
  margin: 0 auto 20px auto; /* 中央揃えと下マージン */
}

.placeholder-image.profile-photo-placeholder {
  width: 100%;
  padding-top: 100%; /* 正方形を維持（画像を配置する場合は調整） */
  min-height: auto; /* 親の高さに依存させない */
  background-color: #e9e9e9;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 円形にする場合 */
}

.profile-text-area {
  flex: 2; /* 利用可能なスペースの割合 */
  min-width: 300px; /* テキストエリアの最小幅 */
}

.affiliation {
  font-size: 1.1em;
  font-weight: bold;
  color: #555;
  margin-bottom: 15px;
}

#research-philosophy p.articleP {
  margin-bottom: 20px; /* 研究への想いの段落間を少し広めに */
  text-indent: 1em; /* 段落の先頭を1文字インデント */
}

.section-title.no-border-bottom {
  border-bottom: none;
  padding-bottom: 0;
}
/* publications.html 関連スタイル */

.publication-list {
  margin-bottom: 30px;
}

.publication-item {
  background-color: #f9f9f9; /* 各項目を少し区別 */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px 20px;
  margin-bottom: 20px;
}

.publication-item:last-child {
  margin-bottom: 0;
}

.publication-title {
  font-size: 1.3em;
  color: #336699; /* テーマカラー */
  margin-bottom: 5px;
}

.publication-meta {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 8px;
  line-height: 1.4;
}

.publication-links a {
  font-size: 0.9em;
  margin-right: 10px;
}

.publication-abstract {
  font-size: 1em;
  color: #444;
  margin-top: 10px;
  padding-left: 15px;
  border-left: 3px solid #FFDD57; /* 強調色で左ボーダー */
}

#other-publications .publication-item {
  background-color: transparent; /* 「その他」はシンプルな表示に */
  border: none;
  padding-left: 0;
  padding-right: 0;
}
/* contact.html 関連スタイル */

.contact-details p.articleP {
  margin-bottom: 10px; /* 連絡先情報の各行の間隔 */
}

.contact-details strong {
  display: inline-block;
  width: 120px; /* ラベル部分の幅を揃える（必要に応じて調整） */
  font-weight: bold;
  color: #333;
}

.form-placeholder {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  margin: 20px 0;
  background-color: #f9f9f9;
  color: #777;
}

/* 将来的にフォームを設置する場合の基本スタイル例 */
.contact-form div {
  margin-bottom: 15px;
}

.contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #444;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical; /* 縦方向のみリサイズ可能に */
}

/* #collaboration-info など、他のセクションにも共通のパディングやボーダーを適用する場合は、
   既存の #research-background などと同じスタイル定義に含めるか？
   共通のセクション用クラスを作成して適用する？
   例: .content-section { max-width: 900px; margin: 0 auto 30px auto; ... }
*/
#contact-information,
#contact-form-guidance,
#collaboration-info {
  max-width: 900px;
  margin: 0 auto 30px auto; /* 中央揃えと下のマージン */
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
/* sitemap.html 関連スタイル */

#sitemap-structure {
  max-width: 900px;
  margin: 0 auto 30px auto; /* 中央揃えと下のマージン */
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.sitemap-list {
  list-style-type: none; /* デフォルトのリストマーカーを削除 */
  padding-left: 0; /* 左のパディングをリセット */
}

.sitemap-list.level-1 > li {
  margin-bottom: 15px; /* 第1階層のリストアイテム間のマージン */
}

.sitemap-list.level-1 > li > a {
  font-size: 1.2em; /* 第1階層のリンク文字を少し大きく */
  font-weight: bold;
}

.sitemap-list.level-2 {
  margin-top: 5px;
  padding-left: 20px; /* 第2階層のインデント */
  border-left: 2px solid #e0e0e0; /* インデントの視覚的補助線 */
}

.sitemap-list.level-2 > li {
  margin-bottom: 8px;
  font-size: 1em;
}

.sitemap-list.level-3 {
  margin-top: 3px;
  padding-left: 20px; /* 第3階層のインデント */
  border-left: 1px dashed #e0e0e0; /* インデントの視覚的補助線 */
}

.sitemap-list.level-3 > li {
  margin-bottom: 5px;
  font-size: 0.9em;
}

.sitemap-list li:not(:has(>a)) { /* リンクではないリストアイテム（説明文など）のスタイル */
  color: #555;
  font-style: italic;
}
/* privacy.html 関連スタイル */

#policy-details {
  max-width: 900px;
  margin: 0 auto 30px auto; /* 中央揃えと下のマージン */
  padding: 25px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.policy-content .section-title {
  /* section-title の既存スタイルを継承しつつ、必要なら微調整 */
  font-size: 1.5em; /* section-title のデフォルトより少し小さくする場合 */
  margin-top: 25px;
  margin-bottom: 15px;
}

.policy-content .section-title:first-child {
  margin-top: 0;
}

.policy-content p.articleP {
  margin-bottom: 15px;
  line-height: 1.8; /* ポリシー文書は行間を少し広めに見やすく */
}

.policy-content ul.custom-list li {
  margin-bottom: 8px;
}

.last-updated {
  margin-top: 30px;
  font-size: 0.9em;
  color: #777;
  text-align: right;
}
/* profile.html 関連スタイル */
.profile-container {
  display: flex; /* 画像とテキストを横並びにするため */
  flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
  align-items: flex-start; /* 上揃え */
  gap: 30px; /* 要素間の隙間を少し広げる (以前の提案から維持) */
  padding: 20px;
}

.profile-image-area {
  flex: 1; /* 利用可能なスペースの割合 */
  min-width: 200px; /* 最小幅 */
  max-width: 280px; /* 最大幅を調整 (以前の提案から維持) */
  margin: 0 auto 20px auto; /* 中央揃えと下マージン (以前の提案から維持) */
  display: flex; /* コンテナ内で画像を中央揃えしやすくするため */
  justify-content: center; /* 画像を水平中央に */
  align-items: center; /* 画像を垂直中央に */
}

/* 以前のプレースホルダースタイルは削除またはコメントアウト*/
/*
.placeholder-image.profile-photo-placeholder {
  width: 100%;
  padding-top: 100%;
  min-height: auto;
  background-color: #e9e9e9;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
*/

.profile-photo {
  width: 100%; /* 親要素(.profile-image-area)の幅に合わせる */
  max-width: 220px; /* 画像自体の最大幅を指定（この値を調整してバランスを見る） */
  height: auto; /* 幅に合わせて高さを自動調整し、アスペクト比を維持 */
  border-radius: 50%; /* 画像を円形にする */
  border: 4px solid #336699; /* テーマカラーに合わせた少し太めの枠線 */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); /* 少し濃いめの影で立体感を出す */
  object-fit: cover; /* 円形コンテナに合わせて画像をトリミングし、アスペクト比を保ちつつコンテナを埋める */
  aspect-ratio: 1 / 1; /* CSSでアスペクト比を1:1（正方形）に強制する（object-fitと併用で円形を綺麗に保つ）*/
}

.profile-text-area {
  flex: 2; /* 利用可能なスペースの割合 (以前の提案から維持) */
  min-width: 300px; /* テキストエリアの最小幅 (以前の提案から維持) */
}

.affiliation {
  font-size: 1.1em;
  font-weight: bold;
  color: #555;
  margin-bottom: 15px;
}

#research-philosophy p.articleP {
  margin-bottom: 20px;
  text-indent: 1em;
}

.section-title.no-border-bottom {
  border-bottom: none;
  padding-bottom: 0;
}
/* research.html - 参考文献セクション関連スタイル */

#references-section {
  background-color: #f8f9fa; /* 背景色を少し変える */
  border-top: 2px solid #336699; /* 上部に区切り線 */
  margin-top: 40px;
}

#references-section .sub-section-title {
  margin-bottom: 15px;
}

.apa-list li {
  margin-bottom: 10px;
  line-height: 1.7;
  padding-left: 1.5em; /* インデント（ぶら下げインデント風） */
  text-indent: -1.5em; /* ぶら下げインデント */
}

#references-section p.articleP em { /* 注釈部分のスタイル */
  font-size: 0.9em;
  color: #555;
}