/* styles-2.css */

/* Reset default margin and padding */
body, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
}

/* Set body font and background color */
body {
  font-family: "游ゴシック", Arial, sans-serif;
  background-color: #ffffff;
}

/* Header styles */
nav {
  background-color: #333;
  padding: 10px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 20px; /* 項目間の間隔を指定 */
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px;
  border-radius: 5px;
}

nav ul li a:hover {
  background-color: #fff;
  color: #333;
}


/* Profile section styles */
#profile {
  padding: 20px;
  background-color: #fff;
  text-align: center;
}

.profile-image {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  margin-top: 30px;
}

.profile-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

.profile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 20px;
  text-align: left;
  padding: 10px 20px 100px 100px;
}

.profile-overlay h2 {
  font-size: 42px;
  margin-bottom: 10px;
  border-bottom: 2px solid; /* 下線を追加 */
  padding-bottom: 0px; /* 下線との間隔を調整 */
}

.profile-overlay h2 span {
  font-size: 28px; /* "拓真"のフォントサイズを調整 */
  }

.profile-overlay p {
  font-size: 32px;
  margin-bottom: 5px;
}

/* Introduction section styles */
#introduction {
  padding: 20px;
  background-color: #ffffff;
  color: #777; /* 文字の色を灰色に設定 */
  font-family: "游ゴシック", Arial, sans-serif; /* おしゃれなフォントを適用 */
  text-align: center;
  margin-bottom: 40px; /* careerセクションと下線の距離を調整 */
  border-bottom: 2px solid #dcdcdc;
  }

#introduction h2 {
  font-size: 40px;
  margin-bottom: 10px;
}

/* Career section styles */
#career {
  padding: 20px;
  background-color: #ffffff;
  column-count: 2; /* 二段組にする */
  column-gap: 20px; /* カラム間の余白を設定 */
  border-bottom: 2px solid #dcdcdc;
  margin-top: 30px; /* careerセクションの上の余白を追加 */
  }

#career h2 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#career .section-title {
  color: #0000cc;
}

#career ul {
  list-style-type: none; /* リストのマーカーを削除 */
  margin-left: 20px;
  color: #333;
  font-size: 18px;
  break-inside: avoid-column; /* ulをカラム内で改ページさせない */
}

#career li {
  margin-bottom: 30px;
}

#career h3 {
  position: relative;
  color: #333;
  font-size: 20px;
}

#career h3::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; /* 横線の太さを変更 */
  height: 3px;
  background-color: #0000cc;
}

#career h3 {
  padding-left: 5px; /* 文字と横線の間隔を空ける */
}




/* Hobby section styles */
#hobby {
  padding: 20px;
  background-color: #ffffff;
  column-count: 2; /* 二段組にする */
  column-gap: 20px; /* カラム間の余白を設定 */
  border-bottom: 2px solid #dcdcdc;
  margin-top: 30px; /* careerセクションの上の余白を追加 */
}

#hobby h2 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#hobby .section-title {
  color: #0000cc;
}

#hobby ul {
  list-style-type: none; /* リストのマーカーを削除 */
  margin-left: 20px;
  color: #333;
  font-size: 18px;
  break-inside: avoid-column; /* ulをカラム内で改ページさせない */
}

#hobby li {
  margin-bottom: 30px;
}

#hobby h3 {
  position: relative;
  color: #333;
  font-size: 20px;
}

#hobby h3::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; /* 横線の太さを変更 */
  height: 3px;
  background-color: #0000cc;
}

#hobby h3 {
  padding-left: 5px; /* 文字と横線の間隔を空ける */
}




/* Presentations section styles */
#presentations {
  padding: 20px;
  background-color: #ffffff;
  column-count: 1;
  column-gap: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  border-bottom: 2px solid #dcdcdc;
}

#presentations h2 {
  margin-bottom: 10px;
  color: #0000cc;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#presentations ul {
  list-style-type: none;
  margin-left: 0; /* マージンをリセット */
  padding-left: 80px; /* 左側の余白を追加 */
  color: #333;
  font-size: 18px;
  break-inside: avoid-column;
}

#presentations li {
  margin-bottom: 30px;
}




/* Awards section styles */
#awards {
  padding: 20px;
  background-color: #ffffff;
  column-count: 2;
  column-gap: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  border-bottom: 2px solid #dcdcdc;
}

#awards h2 {
  margin-bottom: 10px;
  color: #0000cc;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#awards ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 20px;
  color: #333;
  font-size: 18px;
  break-inside: avoid-column;
}

#awards li {
  margin-bottom: 30px;
}

#awards li {
  position: relative;
  color: #333;
  font-size: 20px;
}

#awards li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; /* 横線の太さを変更 */
  height: 3px;
  background-color: #0000cc;
}

#awards li {
  padding-left: 5px; /* 文字と横線の間隔を空ける */
}




/* Publications section styles */
#publications {
  padding: 20px;
  background-color: #ffffff;
  column-count: 1;
  column-gap: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  border-bottom: 2px solid #dcdcdc;
}

#publications h2 {
  margin-bottom: 10px;
  color: #0000cc;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#publications ul {
  list-style-type: none;
  margin-left: 0; /* マージンをリセット */
  padding-left: 80px; /* 左側の余白を追加 */
  color: #333;
  font-size: 18px;
  break-inside: avoid-column;
}

#publications li {
  margin-bottom: 30px;
}




/* Patents section styles */
#patents {
  padding: 20px;
  background-color: #ffffff;
  column-count: 1;
  column-gap: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  border-bottom: 2px solid #dcdcdc;
}

#patents h2 {
  margin-bottom: 10px;
  color: #0000cc;
  font-size: 28px;
  margin-left: 60px; /* 左側の余白を調整 */
}

#patents ul {
  list-style-type: none;
  margin-left: 0; /* マージンをリセット */
  padding-left: 80px; /* 左側の余白を追加 */
  color: #333;
  font-size: 18px;
  break-inside: avoid-column;
}

#patents li {
  margin-bottom: 30px;
}





/* Footer styles */
footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}