@charset "utf-8";
/* ============================================================
   このサイトについて（about）ページ専用スタイル
   元サイト（基本動詞バンク）の about スタイルを踏襲し、
   アクセント色だけを本サイトのグリーン基調（#2d7a2d / #176117）に変更。
   グレー系の中立色・レイアウトは元サイトのまま。
   ============================================================ */

/* 目次（サブメニュー） */
.content .sub-menu {
  width: fit-content;
  max-width: 70%;
  font-size: 13px;
  margin: 10px auto 30px;
  line-height: 25px;
  text-align: left;
}
#about .sub-menu {
  text-align: center;
}
#about .sub-menu br {
  display: inline;
}
.content .sub-menu a {
  color: #525252;
  font-weight: 600;
  letter-spacing: 0.09em;
  margin-right: 1.50em;
  display: inline-block;
}
div.sub-menu a::before {
  content: url(../images/bullet_small.svg);
  width: 32px;
  position: relative;
  top: 2px;
  margin-right: 3px;
}
.content .sub-menu a:hover {
  color: #176117;
}

/* セクション間隔は基本動詞バンクの about に合わせる。
   共通CSSは下余白 70px・左右パディング 15px。960px以上では .content が
   flex になり上下余白が潰れないため、このページだけ通常の流れに戻す。 */
#about .content {
  display: block;
  overflow: visible;
}
#about .content .section {
  padding: 10px 20px;
  margin-bottom: 28px;
}

/* 小見出し（db-title） */
#about .db-title {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #2d7a2d;
  border-bottom: 2px solid #e2e2e2;
}

/* 下線・リンク */
#about .underline {
  border-bottom: 1px solid #000;
}
a.dotted-link {
  padding-bottom: 1px;
  border-bottom: 2px dotted #333333;
}
a.dotted-link:hover {
  border-bottom-color: #2d7a2d;
}
#about a.data-link {
  color: #2d7a2d;
}

/* 分類表 */
#about .about-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 10px 0 20px;
}
#about .about-table-scroll .about-table {
  margin: 0;
}
#about .about-table {
  width: 100%;
  margin: 10px 0 20px;
  font-size: 12px;
  line-height: 1.5em;
  border-collapse: collapse;
}
#about .about-table.fixed {
  table-layout: fixed;
  min-width: 36em;
}
#about .about-table td {
  padding: 6px 10px;
  vertical-align: top;
  border: 1px solid #333;
}
#about .about-table td.head {
  background: #eef7ee;
  color: #176117;
  font-weight: 700;
}
#about .about-table td.label {
  font-weight: 700;
  white-space: nowrap;
}
#about .about-table td.rule {
  white-space: nowrap;
  text-align: center;
  color: #2d7a2d;
  font-weight: 700;
}

/* ダミーボタン（機能名） */
#about .dummy-button {
  display: block;
  text-align: center;
  font-size: 12px;
  width: 148px;
  line-height: 23px;
  color: #323232;
  background-color: white;
  border: 1px solid #7b7676;
}

/* 例示・ローマ字分解の枠 */
#about .example-line {
  display: inline-block;
  background: #f3f3f3;
  padding: 5px 15px;
  font-size: 12px;
  margin: 10px 10px 20px;
  width: 95%;
  line-height: 1.90em;
  box-sizing: border-box;
}

/* 例④：意味役割と文法上の役割の対応図 */
#about .role-figure {
  margin: 6px 0 22px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#about .role-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* メンバーの小見出し・一覧 */
.content .section .subsection {
  margin: 10px 0 5px;
  font-size: 14px;
  font-weight: 600;
}
.content .section .subsection:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0c0";
  margin-right: 0.5em;
  color: #2d7a2d;
  display: inline-block;
}
.content .section .subsection.single:before {
  content: "\f007";
}
.content .section ul li {
  margin-left: 1.5em;
  font-size: 13px;
}

/* 見出しの右トップリンクアイコン */
#about h1 i.right {
  font-size: 80%;
  color: #8fbf8f;
}

@media only screen and (max-width: 640px) {
  .content .sub-menu {
    max-width: 85%;
  }
}

/* ============================================================
   ダークモード（グリーン基調に合わせて上書き）
   ============================================================ */
html.dark-mode .content .sub-menu a { color: #c2c2c2; }
html.dark-mode .content .sub-menu a:hover { color: #bfe6bf; }
html.dark-mode #about a.data-link,
html.dark-mode #about .db-title { color: #8fce8f; }
html.dark-mode #about .db-title { border-bottom-color: #2d3f2d; }
html.dark-mode #about .underline { border-bottom-color: #d6d6d6; }
html.dark-mode a.dotted-link { border-bottom-color: #9a9a9a; }
html.dark-mode a.dotted-link:hover { border-bottom-color: #8fce8f; }

html.dark-mode #about .about-table td { border-color: #6a6a6a; }
html.dark-mode #about .about-table td.head { background: #2d3f2d; color: #cfe6cf; }
html.dark-mode #about .about-table td.rule { color: #8fce8f; }

html.dark-mode #about .dummy-button {
  color: #d6d6d6;
  background-color: #2b2b2b;
  border-color: #6b6b6b;
}
html.dark-mode #about .example-line { background: #2b2b2b; }

html.dark-mode .content .section .subsection:before { color: #8fce8f; }
html.dark-mode #about h1 i.left,
html.dark-mode #about h1 i.right { color: #8fce8f; }