/* ==========================================================================
   style_ohiram_modern.css
   大平昌敬 教員ページ – style.css のトークンを流用した追加スタイル
   （style.css → responsive-tabs.css → style-tabs.css → style_ohiram.css の
    後に読み込むことで、既存の見た目を上書きします）
   ========================================================================== */
/* ---- パンくず ---- */
.staff-breadcrumb {
  background: var(--color-gray-50);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 0.7rem 0;
  font-size: 0.82rem;
  color: var(--color-gray-600);
}

/* ---- 単一カラムのコンテンツ幅 ---- */
.contents-wrap--single {
  display: block;
  max-width: var(--max-width);
}

.main-col--full {
  max-width: 1024px;
  margin: 0 auto;
}

/* ---- 教員名見出し ---- */
.staff-name {
  font-size: 1.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-navy);
  position: relative;
}

.staff-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-maroon);
  border-radius: 50%;
  margin-right: 0.6rem;
  vertical-align: middle;
}

/* ---- 見出し類 ---- */
#main h3 {
  font-size: 1.2rem;
  color: var(--color-navy);
  margin-top: var(--space-lg);
  margin-bottom: 0.9rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--color-maroon);
}

#main h4 {
  font-size: 1.02rem;
  color: var(--color-navy);
  margin-top: var(--space-md);
  margin-bottom: 0.7rem;
  background: var(--color-gray-50);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
}

#main h5 {
  font-size: 0.92rem;
  color: var(--color-gray-600);
  margin-top: var(--space-sm);
  margin-bottom: 0.4rem;
  font-weight: 700;
}

/* ---- 区切り線 ---- */
#main hr {
  border: none;
  border-top: 1px solid var(--color-gray-200);
  margin: var(--space-lg) 0;
}

/* ---- リスト ---- */
#main ul,
#main ol {
  padding-left: 1.4rem;
  margin: 0 0 1rem;
}

#main ul { list-style: disc; }
#main ol { list-style: decimal; }

#main li {
  margin-bottom: 0.55rem;
  line-height: 1.8;
  font-size: 0.96rem;
}

#main ul ul,
#main ul ol {
  margin-top: 0.4rem;
}

/* 太字リンク（自著者ハイライト用の <u> タグ）を少し落ち着かせる */
#main u {
  text-decoration: none;
  font-weight: 700;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-gray-200);
}

/* 受賞・招待論文などの <font color=red> をバッジ風に */
#main font[color="red"] {
  display: inline;
  background: rgba(122, 16, 48, 0.1);
  color: var(--color-maroon) !important;
  border: 1px solid rgba(122, 16, 48, 0.25);
  border-radius: 5px;
  padding: 0.15rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.9;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- テーブル（卒業生・修了生 一覧など） ---- */
#main table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-md);
  font-size: 0.92rem;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius);
  overflow: hidden;
}

#main table th,
#main table td {
  border: 1px solid var(--color-gray-200);
  padding: 0.65rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

#main table th {
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 600;
  white-space: nowrap;
}

#main table tr:nth-child(even) td {
  background: var(--color-gray-50);
}

/* ---- 画像（デザイン集・図版） ---- */
#main img.shadowimg {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-gray-200);
  margin: 0.4rem 0.6rem 1.2rem 0;
  max-width: 100%;
}

/* ---- Googleカレンダー(iframe)の枠 ---- */
#schedule iframe {
  border-radius: var(--radius);
  border: 1px solid var(--color-gray-200) !important;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Responsive Tabs (jquery.responsiveTabs) – ナビゲーション部分のみ上書き
   ========================================================================== */
@media (min-width: 761px) {
  #responsiveTabsDemo > ul {
    display: flex;
    flex-wrap: nowrap;          /* 横一列に並べる（折り返さない） */
    gap: 0.3rem;
    list-style: none;
    padding: 0 0 0.5rem 0;
    margin: 0 0 var(--space-md);
    border-bottom: 0px solid var(--color-gray-200);
    overflow-x: auto;           /* 横幅からはみ出た場合、横スクロールできるようにする */
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
  }

  /* スクロールバーの見た目を細くしてデザインを損なわないようにする（任意） */
  #responsiveTabsDemo > ul::-webkit-scrollbar {
    height: 4px;
  }
  #responsiveTabsDemo > ul::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 2px;
  }
}

/* スマホ幅では横並びタブを確実に非表示にする（アコーディオン表示のみ残す） */
@media (max-width: 760px) {
  #responsiveTabsDemo > ul {
    display: none !important;
  }
}

#responsiveTabsDemo > ul li {
  margin: 0;
  flex-shrink: 0;
  background: transparent !important; /* 背景を透明にする */
  border: none !important;            /* プラグインが付与する枠線を強制消去 */
  box-shadow: none !important;
}

/* 2. 通常時の a タグの設定（ここでもプラグインの枠線をクリアしておく） */
#responsiveTabsDemo > ul li a {
  display: block;
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-gray-600);
  border: none !important;            /* 枠線をクリア */
  border-radius: 8px;        
  background: transparent;
  transition: background var(--transition), color var(--transition);
}

#responsiveTabsDemo > ul li a:hover {
  background: var(--color-gray-50);
  color: var(--color-navy);
  border-radius: 8px !important; 

}

/* 3. アクティブタブの角を綺麗にする（お好みの設定に合わせてください） */
#responsiveTabsDemo > ul li.active a,
#responsiveTabsDemo > ul li.r-tabs-state-active a {
  background: var(--color-navy) !important;
  color: var(--color-white) !important;
  border: none !important;            /* 枠線がはみ出るのを防ぐため強制消去 */
  
  /* 前のターンで設定した丸角の指定（例：4隅丸角の場合） */
  border-radius: 8px !important; 
}

/* アコーディオン表示時（スマホ）のタブ見出し */
.r-tabs-accordion-title {
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.r-tabs-accordion-title .r-tabs-anchor {
  display: block;
  padding: 0.8rem 1rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-gray-50);
}

.r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
  background: var(--color-navy);
  color: var(--color-white);
}

/* ---- レスポンシブ調整 ---- */
@media (max-width: 760px) {
  .staff-name { font-size: 1.3rem; }

  #main table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* タブパネルの枠線を4辺とも確実に描画し、すべての角を丸める */
#responsiveTabsDemo .r-tabs-panel,
#responsiveTabsDemo > div[id] {
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;          
  box-sizing: border-box;
  padding: 1.5rem;
  background: var(--color-white);
}

/* ==========================================================================
   スマホ版（アコーディオン）専用の高さ・余白完全リセット
   ========================================================================== */
@media (max-width: 760px) {
  /* 親要素の余計な高さを完全に排除 */
  #responsiveTabsDemo {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
  }

  /* 閉じているパネルは高さを0にして、スペースを一切占有させない */
  #responsiveTabsDemo .r-tabs-panel {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
  }

  /* 開いている（アクティブな）パネルだけを、コンテンツの高さで正しく表示 */
  #responsiveTabsDemo .r-tabs-panel.r-tabs-state-active {
    display: block !important;
    height: auto !important;
    padding: 1rem !important; /* スマホ用にややタイトに */
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 0 0 10px 10px !important;
    margin-bottom: 0.5rem !important; /* アコーディオン同士の隙間 */
  }
}

/* ==========================================================================
   PC版・共通要素の最終調整
   ========================================================================== */
@media (min-width: 761px) {
  /* PC版でのみ、全パネルに共通のクリアと高さ自動を適用 */
  #responsiveTabsDemo .r-tabs-panel {
    height: auto !important;
    clear: both;
  }
}

#responsiveTabsDemo > ul {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0.5rem;
}