/*2024-07-05 設定開始。news.indexから*/

body,td,th {font-family:"メイリオ", "Verdana", "Arial", "Meiryo", sans-serif; font-size:16px;} /* FIXED 2026-09-04: "san-serif"(誤字/クォート付き)はジェネリックフォントとして機能しないため修正 */


.style1 {font-size:x-large; font-weight: bold;} /* FIXED 2026-09-04: 完全重複していた定義を統合 */
.style2 {font-size:larger; font-weight: bold;}
.style3 {font-size:large}
.style6 {font-size: medium}
.style7 {font-size: x-small}
.style8 {font-size: larger; font-weight: bold; line-height:140% }
.style9 {font-size: small}
.style10 {font-size: small; font-weight: bold; margin-left:5px; margin-right:5px }
.style11 {font-size: larger; font-weight: bold; color: #336699; }
.style12 {font-size: medium; color: #336699; }
.style13 {font-size: medium; color: #FFFFFF; }
.style15 {font-size: larger; font-weight: bold; color: #666666; }
.style22 {font-size: large; font-weight: bold;}
.style24 {font-size: larger}
.style31 {font-size: medium; color: #FFFFFF; }
.style32 {font-size: 12px; color: #FFFFFF; }
.style33 {font-size: 15px; font-weight: bold; color: #FFFFFF;}
.style34 {font-size: small}
.style35 {font-size: 12px;}
.style36 {font-size: x-large; color: #FFFFFF; font-weight: bold;}
.style37 {color: #FF0000}
.style38 {color: #336699}
.style39 {color: #6DB60F; font-weight:bold}
.style40 {color: #E45050; font-weight:bold}
.style41 {color: #FF9933; font-weight:bold}
.style42 {color: #666666; font-weight:bold}

/*もと36*/
.style43 {font-size: small; font-weight: bold; margin-left:5px; margin-right:5px }

/*.style47 {font-size: medium}*/
.style50 {font-size: 13px; color: #FFFFFF;}

/* --------------------水平線-------------------*/
hr {
	border:0;
	border-bottom:1px dashed #DDDDDD;
	max-width:980px; /* MODIFIED */
	width:100%; /* ADDED */
    margin-left: auto; /* ADDED */
    margin-right: auto; /* ADDED */
}
hr.style2 {
    border: 0;
    /*height: 0;f 2024-08-22f削除*/
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    max-width: 100%; /* ADDED */
    width: 100%; /* ADDED */
    margin-left: auto; /* ADDED */
    margin-right: auto; /* ADDED */
}

/* ADDED 2026-09-04: 001.html/002.htmlのようにページ内に埋め込まれた古い<style>ブロックのみに
   存在し、style.css/style-re.css側には無かったクラス群。これらのページが実際に使用しているため、
   埋め込み<style>を削除してstyle-re.cssに一本化するにあたり、こちらに移設した。 */
hr.style3 {
    border: 0;
    border-bottom: 1px dashed #DDDDDD;
    max-width: 630px; /* MODIFIED: 元は固定630px */
    width: 100%; /* ADDED */
}
.h1 {
    border-left: 5px solid #42684A;
    padding: 3px 10px;
    font-size: x-large;
    font-weight: bold;
    margin-bottom: 15px;
}
.h2 {
    font-size: medium;
    font-weight: bold;
    padding: 10px 0px 0px 15px;
}
/* 人物写真などを左右に浮かせ、本文を回り込ませるパターン（インタビュー記事で使用） */
div.image_left {
    float: left;
    padding: 0 10px 10px 0px;
}
div.image_right {
    float: right;
    padding: 0 5px 10px 10px;
}
.image_left span,
.image_right span {
    display: block;
    font-size: small;
    text-align: center;
}

/* --------------------ボタン-------------------*/
#button {
  width:400px;
  color:#ffffff;
  background:#337fcc;
  font-size:26px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:5px;
}
#button:hover {
  background-color:#5394D5;
}

a#button:hover {
  background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));
  background:-webkit-gradient(linear, 100% 100%, 0% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));
}

#button1 {
  width:280px;
  background:#FFCCFF;
  font-size:larger;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:8px;
}
#button1:hover {
color:#ff0000;
opacity:0.8;
}



#button2 {
  width:400px;
  color:#ffffff;
  background:#6DB60F;
  font-size:26px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #4D8F0B;
  padding:12px 0 8px 0;
  border-radius:5px;
}

#button2:hover {
opacity:0.8;
}

#button3 {
  width:290px;
  background:#FECE8D;
  font-size:larger;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:8px;
}
#button3:hover {
color:#ff0000;
opacity:0.8;
}

/*
#button3 {
  width:290px;
  color:#ffffff;
  background:#699BCD;
  font-size:large;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:8px;
}
#button3:hover {
opacity:0.8;
}
*/


#button4 {
  width:138px;
  color:#ffffff;
  background:#F28A24;
  font-size:15px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #E67C17;
  padding:2px 0 2px 0;
  border-radius:5px;
}
#button4:hover {
opacity:0.8;
}

#button5 {
  width:290px;
  color:#ffffff;
  background:#6DB60F;
  font-size:larger;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #4D8F0B;
  padding:12px 0 8px 0;
  border-radius:5px;
}
#button5:hover {
opacity:0.8;
}

#button6 {
  width:150px;
  background:#FFCCFF;
  font-size:large;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:3px;
  margin:8px 0 8px 5px;
}

#button6:hover {
color:#ff0000;
opacity:0.8;
}


#button7 {
  width:150px;
  background:#FECE8D;
  font-size:large;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:3px;
  margin:8px 0 8px 5px;
}

#button7:hover {
color:#ff0000;
opacity:0.8;
}


#button8 {
  width:290px;
  font-family:"メイリオ";
  color:#FFFFFF;
  background:#699BCD;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:4px 0 4px 0;

}

#button8:hover {
opacity:0.8;
}


#button9 {
  width:309px;
  color:#ffffff;
  background:#E45050;
  font-size:large;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:8px 0 5px 0;
  border-radius:0px;
}
#button9:hover {
opacity:0.8;
}

/*よく使われる、ブルー白抜き文字のボタン*/
#button10 {
  width:309px;
  color:#ffffff;
  background:#699BCD;
  font-size:large;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:8px 0 5px 0;
  border-radius:0px;
}
#button10:hover {
opacity:0.8;
}



#button_end {
  width:150px;
  background:#CCCCCC;
  font-size:large;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  padding:3px;
  margin:8px 0 8px 5px;
}
#button_close {
  width:280px;
  font-family:"メイリオ";
  color:#FFFFFF;
  background:#999999;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #999999;
  padding:4px 0 4px 0;
  border-radius:5px;
}





#blue a{
text-decoration:none;
color:#332b1a;
}
#blue a:hover{
text-decoration:underline;
}

table#table1 tr#tr1:hover {
background-color: #E9E9E9;	/* 行の背景色 */
}

/* --------------------段組み（２段）-------------------*/
#box_left {
          float: left;
          width: 670px;
		  clear: both;
}

/* FIXED 2026-09-04: 「#box_left内の画像は一律500pxまで」というブランケットルールを撤廃。
   009.html（単純な1カラム構成）の想定では問題なかったが、トップページのインタビューカードや
   コース一覧のような「入れ子テーブルのオートレイアウトが画像のwidth属性を列幅計算のヒントに
   使っている」構成では、この決め打ち値が列幅計算と矛盾し、画像・列ごと縮んでしまう不具合が
   判明したため。
   今後は、各画像が元々持っていたwidth値をそのまま活かし（例: style="max-width:610px"のように
   個別に指定）、グローバルな img{max-width:100%; height:auto;} だけでレスポンシブ対応する方針とする。
   変換ツール側でも、img の width 属性を単純に削除するのではなく、同じ数値を
   style="max-width:Npx; height:auto;" に移し替える形に変更する。 */


/* 2024/08/22　変更。-を→ _に変更。およびclear指定以降削除
#box-right {
          float: right;
          width: 320px;
		  clear: both;
          width: 990px;
}
*/

#box_right {
          float: right;
          width: 320px;
}
/* FIXED 2026-09-04: 以前は#box_rightをデフォルトで中央寄せにし、.style9だけ左寄せに戻す
   実装だったが、「関連コース」サムネイル（画像＋タイトルを中央寄せにしたい）以外の
   コンテンツ（講座情報テーブル・講師一覧・翻訳ボランティア謝辞など、本来すべて左寄せ）が
   軒並み中央寄せになってしまう不具合が判明したため方針を反転。
   デフォルトは左寄せのままとし、中央寄せにしたい塊にだけ明示的に
   class="center-block" を付ける方式にする。 */
#box_right .center-block {
    text-align: center;
}
/* 中央寄せブロックの中でも、キャプション文（.style9）だけは左寄せに戻す
   （例：「関連コース」サムネイル画像は中央寄せ、下のリンクテキストは左寄せ） */
#box_right .center-block .style9 {
    text-align: left;
}


#footer_bar {
		  clear: both;
          width: 990px;
          max-width: 100%; /* ADDED 2026-09-04: 769〜989px幅で横スクロールが発生するのを防止 */
}

div.clear{
	clear: both;
	margin: 0 0 10px 0;
}


.shuryo {
	position:absolute;
	font-size:medium;
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;
	background-color:#FF0000;
	width:270px;
	top: 0px;
	left: 0px;
}




/* --------------------表組み-------------------*/
.table_01	{
width:600px;margin:0px 0px 10px 0px;padding:0px;
max-width:100%; /* ADDED 2026-09-04: 狭い画面での横はみ出し防止 */
border-collapse:collapse;
border-top:1px dotted #999999;
}
.table_01 th	{
width:25%;padding:4px 2px 2px 4px;
text-align:left;vertical-align:top;color:#666666;
background-color:#EEEEEE;
border-bottom:1px dotted #999999;border-left:5px solid #778899;border-right:3px double #CCCCCC;
}
.table_01 td	{
padding:4px 2px 2px 4px;
border-bottom:1px dotted #999999;border-left:3px double #CCCCCC;border-right:3px double #CCCCCC;
}

/* --------------------中見出し-------------------*/
/* FIXED 2026-09-04: .orange_h1/.orange_h2 がそれぞれ2回定義されていたのを1つに統合。
   カスケードにより実際に適用されていた計算結果（border-left/paddingは後勝ち、
   color/backgroundは前の定義のまま）は変えていません。 */
.orange_h1 {
border-left:5px solid #42684A;
padding:3px 10px;
font-size: x-large; font-weight: bold;
color: #6E6E6E;
background:#FBF5EF;
margin-bottom:15px;
}
.orange_h2 {
	font-size: medium;
	font-weight: bold;
	padding:10px 0px 0px 15px;
}



.green_h1 {
border-left:5px solid #006600;
padding:5px 10px;
font-size: x-large; font-weight: bold; color: #006600;
margin-top:30px;
margin-bottom:15px;
}
.green_h2 {
	font-size: medium;
	font-weight: bold; color: #006600;
	padding:10px 0px 0px 0px;
}


.blue_h1 {
border-left:5px solid #4473C5;
padding:5px 10px;
font-size: x-large; font-weight: bold; color: #4473C5;
margin-top:30px;
margin-bottom:15px;
}

.blue_h2 {
	font-size: medium;
	font-weight: bold; color: #4473C5;
margin-bottom:10px;
}

.kakomi {
  width: 550px;
  max-width: 100%; /* ADDED 2026-09-04: 狭い画面での横はみ出し防止 */
  height: 40px;
  background-color: #FE642E;
  border: 1px solid #C8C5C5;
  padding:15px 0px 0px 15px;
}


/* REMOVED 2026-09-04: 「調査中」の未使用・構文が壊れた入れ子コメントブロック(#right-box-content案)を削除。
   元の内容は修正方針.mdの変更履歴に記録。 */

/*navigation bar*/
#navibar{
  margin: 0;
  padding: 0;
  width: 990px;
  max-width: 100%; /* ADDED 2026-09-04: 769〜989px幅で横スクロールが発生するのを防止 */
}
#navibar ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#navibar li{
  float: left;
  /*width: 121.6px;*/
  width: 107.9px;
  height:40px;
  margin: 0;
  padding: 0;
  border-right: 1px solid #699BCD;
}
#navibar li.activebar{
  float: left;
  width: 979px;
  height: 5px;
  margin: 0;
  padding: 0;
  background-color: #699BCD;
}
#navibar a{
  text-align: center;
  text-decoration:none;
  font-weight:bold;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: #336699;
  color: white;
}
#navibar a:hover{
  background-color: #699BCD;
  font-weight:bold;
  text-decoration:none;
  color: white;
}
#navibar a.active{
  text-align: center;
  text-decoration:none;
  font-weight:bold;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: #699BCD;
  color: white;
}
#navibar2 li{
  float: left;
  width: 121.6px;
  /*width: 107.9px;*/
  margin: 0;
  padding: 0;
  border-right: 1px solid #699BCD;
}
#navibar2 a{
  text-align: center;
  text-decoration:none;
  font-weight:bold;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: #42684A;
  color: white;
}

#navibar2 a:hover{
  background-color: #8AB796;
  font-weight:bold;
  text-decoration:none;
  color: white;
}

#navibar2 a.active{
  text-align: center;
  text-decoration:none;
  font-weight:bold;
  display:block;
  padding: 0.5em 0;
  width: 100%;
  background-color: #8AB796;
  color: white;
}


/* --------------------アコーディオン-------------------*/

.demo dt　がクリックする見出し
.demo dd　が展開される部分*/


.demo {
	position:relative;
}
.demo dt {
	font-size: 120%;
	font-weight: bold;
    	cursor:pointer;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
}
.demo dt.active	{
	color: #d74646;
	border-bottom: 1px solid #d74646;
}
.demo dd {
	position:relative;
	margin: 0 0 15px 15px;
	line-height: 170%; /* FIXED 2026-09-04: line-hight(誤字)を修正、行間指定が有効に */
}


/* -----------アコーディオン（.demo）を使うページでは、下記のスクリプトをHTML側に記載する-------------------
   FIXED 2026-09-04: 生の<script>タグがCSSファイル内に直接混入していたため削除（無効なCSSであり、
   このファイルをテキストとして扱うツールが誤動作する原因にもなっていた）。
   該当のJSコードは修正方針.mdの変更履歴に転記済み。アコーディオンを使用するHTMLページの
   </body>直前などに、jQuery読み込み＋下記相当のスクリプトを個別に記載すること。
------------------------------------------------------------------------------------------------------- */



/* Responsive Design Additions */
* {
    box-sizing: border-box; /* ADDED */
}

img {
    max-width: 100%; /* ADDED */
    height: auto; /* ADDED */
}

iframe {
    max-width: 100%; /* ADDED */
    height: 300px; /* ADDED */
}


/* FIXED 2026-09-04: 構造系のブレークポイントを768px→990pxに拡大。
   #main / ヘッダー等のラッパーはmax-width:990pxで可変化済みだが、#navibar・#footer_bar・
   #box_left・#box_rightはCSS側で固定px幅のままだったため、769〜989px幅の画面（小型ノートPCや
   タブレット縦向きなど）で横スクロールが発生していた。990pxを境に構造を切り替えることで、
   #mainが可変になる範囲と矛盾なく揃えている。
   文字サイズ(font-size:14px)だけは、タブレット幅でも縮小する必要は薄いため、
   従来通り768px以下のみに適用する形で残している。 */
@media (max-width: 990px) {
    /* General container adjustments for full width and padding.
       ADDED 2026-09-04: 属性セレクタ（インラインstyleの文字列一致）は、
       スペースや順序が少しでも異なると静かにマッチしなくなり壊れやすい。
       今後の自動変換ツールでは wrapper-980 / wrapper-980-pad / footer-970 クラスを
       付与する方針とし、ここではクラス名指定を優先しつつ、既存ページ互換のために
       旧来の属性セレクタも残している。 */
    .wrapper-980,
    div[style*="margin-left:auto; margin-right:auto;"][style*="max-width:980px;"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    .wrapper-980-pad,
    div[style*="padding:8px; max-width:980px;"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    #main {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ADDED 2026-09-04: 画像ごとのmax-width(例: min(500px,100%))は、PC版#box_left(670px幅)を
       基準にした上限値。990px以下では#box_leftが画面いっぱいに広がる縦積みレイアウトになるため、
       この上限のままだと画像が相対的に小さく、余白だらけに見えてしまう（iPad縦向き等で実機確認）。
       縦積みレイアウトの範囲では、画像ごとの上限を無視してコンテナ幅いっぱいまで拡大する。
       インラインstyleのmax-widthより優先させる必要があるため!importantを使用。 */
    #main img {
        max-width: 100% !important;
    }

    /* ADDED 2026-09-04: ボタン群（#navibar）の下の余白を少し詰める。
       HTML側にも<br /><br />が続けて入っているため、ここでの調整はCSSで効く分のみ。 */
    #navibar {
        margin-bottom: 8px !important;
    }

    /* Stack floated columns */
    #box_left {
        width: 100%; /* MODIFIED */
        float: none; /* MODIFIED */
        margin-right: 0; /* MODIFIED */
    }
    /* ADDED 2026-09-04: PC版では#box_left内のラッパーdivに、隣の#box_rightとの間の
       ガター（隙間）を作るための固定px margin-right（例: margin-right:25px）が
       インラインstyleで指定されていることがある。モバイルで#box_leftが縦積みになり
       隣にbox_rightが無くなると、この余白だけが残って本文の右側だけが不自然に狭くなり、
       見出し画像など margin-right の指定がない要素と横幅がずれて見える不具合が判明したため、
       #box_left直下の要素のmargin-rightを一律で無効化する。 */
    #box_left > div {
        margin-right: 0 !important;
    }

    #box_right {
        width: 100%; /* MODIFIED */
        float: none; /* MODIFIED */
        /* FIXED 2026-09-04: text-align:centerのデフォルト適用を撤廃（PC版と同じ理由）。
           中央寄せが必要な塊は class="center-block" 側で対応する。 */
    }

    /* ADDED 2026-09-04: .image_left/.image_right（人物写真＋回り込みテキスト）は、
       狭い画面でfloatのまま残すと本文の折り返し幅が極端に狭くなり読みにくくなるため、
       モバイルではfloatを解除して縦積みにする。 */
    div.image_left,
    div.image_right {
        float: none;
        padding: 0 0 15px 0;
    }

    /* Adjust fixed-width buttons to be full width */
    #button, #button1, #button2, #button3, #button4, #button5, #button6, #button7, #button8, #button9, #button10, #button_close {
        width: 100% !important; /* MODIFIED: Set to 100% with !important to override fixed inline/CSS widths */
        margin-left: auto; /* ADDED */
        margin-right: auto; /* ADDED */
        padding-left: 10px; /* ADDED */
        padding-right: 10px; /* ADDED */
    }
    #button6, #button7 {
        margin: 8px auto !important; /* MODIFIED: Ensure centering */
    }

    /* FIXED 2026-09-04: #navibar（例: index.htmlの「People/MIT/Yale/...」チャンネルタブ）は、
       項目数が多いページ（9個等）だと縦積みにすると画面の大半を占めてしまい実用上使いにくい。
       横スクロール案も試したが、実機確認でボタン幅が不揃いに見える・見切れて右にずれて
       見える等、かえって崩れた印象になったため撤回。
       折り返し可能な角丸「ピル型タグ」デザインに変更。幅が項目ごとに違っても、
       角丸チップが並ぶデザインなら不揃いさが気にならず、画面外に隠れる項目も無くなる。 */
    #navibar {
        width: 100%; /* MODIFIED */
    }
    #navibar ul {
        display: flex; /* MODIFIED */
        flex-wrap: wrap; /* ADDED */
        gap: 8px; /* ADDED */
    }
    #navibar li {
        float: none; /* MODIFIED */
        flex: 0 0 auto; /* ADDED */
        width: auto; /* MODIFIED */
        border-right: none; /* MODIFIED */
        height: auto; /* ADDED */
    }
    #navibar li.activebar {
        display: none; /* MODIFIED: 帯状インジケータはこのデザインでは不要 */
    }
    #navibar a,
    #navibar a.active {
        padding: 8px 16px; /* MODIFIED */
        border-radius: 999px; /* ADDED: ピル型 */
        white-space: nowrap; /* ADDED */
        font-size: 13px; /* ADDED */
    }
    /* FIXED 2026-09-04: 「active=緑」という誤った理解で#navibar a.activeの背景色を緑に
       上書きしていたが、実際は「People＝事例ページなので緑、他は大学等ごとに青」という
       カテゴリ配色であり、現在地はそれぞれの色を薄くしたもの(#navibar a.active:#699BCD /
       #navibar2 a.active:#8AB796)で表現する設計だった。誤った上書きを削除し、
       既存の配色ロジックにモバイル側は一切手を加えないようにした。 */
    #navibar2 li {
        border-right: none; /* MODIFIED */
    }
    #navibar2 a,
    #navibar2 a.active {
        /* FIXED 2026-09-04: Peopleボタンだけ旧デザイン(padding:10px 0)のままで、
           他の角丸ピルボタンと余白・形が揃っていなかったのを修正。色は変更しない。
           さらに、class="active"時（現在地表示中）は #navibar2 a.active という詳細度の
           高い別ルールが優先されるため、#navibar2 a だけを直しても現在地表示中は反映
           されない不具合があった。両方に同じ指定をする形に修正。 */
        padding: 8px 16px; /* MODIFIED */
        border-radius: 999px; /* ADDED */
        white-space: nowrap; /* ADDED */
        font-size: 13px; /* ADDED */
    }

    /* Footer paragraphs and links to stack and center */
    .footer-970 p,
    div[style*="max-width:970px;"] p { /* MODIFIED: Targeting footer paragraphs using max-width */
        float: none !important; /* MODIFIED */
        width: 100%; /* ADDED */
        text-align: left; /* MODIFIED: Change to left for mobile footer text */
        margin-bottom: 10px; /* ADDED */
    }
    .footer-970 p a,
    div[style*="max-width:970px;"] p a {
        display: inline-block; /* MODIFIED: Change to inline-block for horizontal flow */
        padding: 5px 5px; /* MODIFIED: Add horizontal padding for spacing */
    }

    /* Social media icons adjustments */
    div[align="center"][style*="margin-bottom:10px"] a img {
        margin-right: 5px !important; /* MODIFIED */
        margin-left: 5px !important; /* MODIFIED */
    }
}

@media (max-width: 768px) { /* 文字サイズはスマートフォン幅のみで縮小 */
    body,td,th {font-size:14px;} /* MODIFIED: Adjusted font size for readability */
}