@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

body{
margin: 0px;
padding: 0px;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Roboto', sans-serif;
}
html { scroll-behavior: smooth;}


img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

a:link {	color: #000099;text-decoration: none;}
a:visited {	color: #330066;text-decoration: none;}
a:hover {
color: #FF6600;
text-decoration: underline;
}
a:active {
color: #FF6600;
text-decoration: none;
}
a:hover img{
-ms-filter: "alpha(opacity=85 )";
opacity:0.85;
filter: alpha(opacity=85);
background: #fff;
}



#header {
padding:0;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
max-width:1000px;
}
#header h1 {
float: left;
margin:  0px;
padding: 15px;
}
#header ul li {
float: left;
list-style-type: none;
font-size: 90%;
}
#header #header_r {
float: right;
padding:5px 0 0;
}
#header_r p {
margin: 0px;
}
#header_lang {
float: right;
padding:5px 0 0;
}
#header_lang ul {
float: right;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
#header_lang ul li a {
color: #fff;
text-decoration: none;
}

#header_lang li {
margin: 0px;
padding: 5px 15px;
background-color: #FF6600;
border: 1px solid #FFF;
border-radius: 20px;	/*角丸の指定*/
}
i {
padding: 0 4px 0 0 ;
}





/*メニューブロック*/
#menubar {
clear: both;
height: 45px;		/*メニューの高さ。下の「#menubar ul li a」の「height」と「padding-top」の数字を合計した数字に合わせる。*/
text-align: center;	/*文字を中央に*/
background: #00A0E9;	/*背景色*/
border-bottom: 0px solid #fff;	/*下線の幅、線種、色*/
}
#menubar ul {
margin: 0px;
padding: 0px;
text-shadow: 1px 1px 1px #000;

}

/*メニュー１個あたりの設定*/
#menubar li {
float: left;	/*左に回り込み*/
width: 12.5%;	/*メニュー幅（100÷6個=16.66%）　もし４個にするなら100÷4=25%になる。*/
list-style-type: none;
}
#menubar li a {
text-decoration: none;display: block;
line-height: 1;	/*行間を少し狭く*/
color: #fff;		/*文字色*/
height: 30px;		/*高さ*/
padding-top: 15px;	/*上に追加する余白*/
border-right: 1px solid #fff;	/*メニューの右側の線の幅、線種、色（古いブラウザ用）*/
border-right: 1px solid rgba(255,255,255,0.5);	/*右の線の幅、線種、255,255,255は白の事で0.5は50%色がついた状態の事。*/
}
/*１つ目のメニューへの追加設定*/
#menubar li:first-child a {
border-left: 1px solid #fff;	/*メニューの線の幅、線種、色（古いブラウザ用）*/
border-left: 1px solid rgba(255,255,255,0.5);	/*左の線の幅、線種、255,255,255は白の事で0.5は50%色がついた状態の事。*/
}

/*マウスオン時と、現在表示中(current)のメニューの設定*/
#menubar li a:hover, #menubar li.current a {
background: #023059;	/*背景色*/
}



/*fixmenu設定（メニューが画面上部に到達した際のスタイル）
---------------------------------------------------------------------------*/
/*上部固定メニュー用fixmenu設定*/
body.is-fixed-menu .nav-fix-pos {
width: 100%;z-index: 100;position: fixed;top: 0;left: 0;
}
body.is-fixed-menu header {
margin-bottom: 45px;	/*メニューの高さを指定。menubarのborderが1px分ありますが大差ないので75でOKです。*/
}
/*上の設定の「is-fixed-menu」を「is-fixed」に変更したものをそのまま記入します。fixmenuスクリプトを２つ使う為に必要な設定になります。*/
body.is-fixed .nav-fix-pos {
width: 100%;z-index: 100;position: fixed;top: 0;left: 0;
}
body.is-fixed header {
margin-bottom: 45px;
}



.wrap {
padding: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
max-width: 1000px;
clear: both;
}



#content {
padding:15px 10px;
}

#content h1 {
border-bottom: solid 5px #ccc;   /* 線指定 */
margin-bottom: 15px;        /* 周りの余白指定 */
position:  relative;        /* 位置調整 */
font-weight:  100;       /* 文字の太さ調整 */
font-size: 250%;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
clear: both;
margin-top: 0px;
font-family: 'Roboto', sans-serif;
}

#content h1:before {
content:  '';                   /* 空白の要素を作る */
width: 200px;                    /* 幅指定 */
height: 5px;                    /* 高さ指定 */
background-color: #FFAE42;      /* 背景色指定 */
display:  block;                /* ブロック要素にする */
position:  absolute;            /* 位置調整 */
left:  0;                       /* 位置調整 */
bottom: -5px;                   /* 位置調整 */
}


#content h2{
text-align: left;
clear: both;
font-size: 115%;
font-weight: bold;
color: #FFF;
text-shadow: 1px 1px 1px #000;
background-image: url(../images/h2.png);
background-repeat: no-repeat;
border: 1px solid #00A0E9;
background-color: #00A0E9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-top: 2em;
padding-top: 6px;
padding-right: 12px;
padding-bottom: 6px;
padding-left: 12px;
background-position: right;
}
#content h3 {
position: relative;
padding-left: 25px;
}

#content h3::after {
content: '';
position: absolute;
top: 45%;
left: 0;
transform: translateY(-50%);
width: 10px;
height: 10px;
border: 4px solid #FFAE42;
border-radius: 100%;
}


#content  h4 {
font-size: 110%;
}

#content  h5 {
font-size: 1em;
margin: 0px;
padding: 0px;
}


#content p,#content td,#content th,#content li {
line-height: 150%;
text-align: justify;
}



#footer {
color: #FFF;
clear: both;
background-color: #666;
padding: 20px;
text-align: center;
font-size: 90%;
}
#footer a {
text-decoration: none;
}
.class01 table{margin:0;padding:0;border-collapse:collapse;}
.class01 td{
margin:0;
padding:8px;
border:1px solid #ccc;
}
.class01 th{
margin:0;
text-align:left;
color:#000000;
border:1px solid #ccc;
font-weight: normal;
background-color: #F8F8F5;
padding: 8px;
}
.class01{margin: 0 0 20px 0;padding:0;width:}


.fontsize_80 {	font-size: 80%;}
.fontsize_90 {	font-size: 90%;}
.fontsize_100 {	font-size: 100%;}
.fontsize_110 {	font-size: 110%;}
.fontsize_120 {	font-size: 120%;}
.fontsize_130 {	font-size: 130%;}
.fontsize_140 {	font-size: 140%;}



.img_r {
float: right;
padding-left:10px;
padding-bottom: 10px;
font-size: small;
}
.img_l {
float: left;
padding-right:10px;
padding-bottom: 10px;
font-size: small;
}
.name {
font-size: x-large;
font-weight: bold;
color: #00805A;
}
.name_e {
font-family: Arial, Helvetica, sans-serif;
}
.red {
color: #F00;
}
.date {
font-family: Arial, Helvetica, sans-serif;
color: #666;
padding-right: 15px;
}
.td_midashi {
padding-right: 15px;
}
.article {
font-weight: bold;
padding-right: 1em;
}
.footnote {
font-size: 90%;
background-color: #EDEDED;
border: 1px solid #CCC;
padding: 10px 20px;
}
.contact {
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #FFEED6;
}
.toPageTop {
clear: both;
text-align: right;
}

.inlineframe {
background-color:#FFFFFF;
height:300px;
overflow:auto;
overflow-y:scroll;
overflow-x:hidden;
}

#content .r {
text-align: right;
}

#content .c {
text-align: center;
}

.wrap #content .link {
text-align: center;
margin-right: auto;
margin-bottom: auto;
margin-top: 50px;
margin-left: 10px;
}


.list{
font-size: 110%;
}


nav {
clear: both;
background-color: #00A0E9;
}
#nav {
background-color: #00A0E9;
text-align: center;
clear: both;
}

.new {
margin: 0 0 0 10px;
padding: 0 6px;
float: none;
display: inline-block;
*display: inline;
*zoom: 1;
color: #FFF;
font-size: 0.7em;
background: #e02d26;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}


.new1 {margin: 0 0 0 10px;
padding: 0 6px;
float: none;
display: inline-block;
*display: inline;
*zoom: 1;
color: #FFF;
font-size: 0.7em;
background: #333;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}


#main_img {
background-color: #A5E2FF;
text-align: center;
clear: both;
}

.staff {
clear: both;
}
.staff_face {
float: left;
width: 20%;
padding: 1em  0;
}
.staff_name {
float: right;
width: 78%;
padding: 1em 0;
}

#content .staff  h4 {
	margin:10px 0;
	font-size:150%;
}

.staff  p{
margin: 0px;
padding: 0px;
}

.staff_face img {
border-radius:10px;


}
#content .btn {
color: #FFF;
}
.prof_year {
padding-right: 1em;
}

.btn {
display: inline-block;
padding: .3em 1.5em;
color: #fff;
text-decoration: none;
user-select: none;
border-radius: 100px;
transition: 0.4s ease;
background-color: #FF6600;
}

.btn:hover {
color: #fff;
background: #CC0000;
}

#footer a {
color: #FFF;
}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}



/*btn2（青い色のボタン）
---------------------------------------------------------------------------*/
a.btn2 {
display: inline-block;text-decoration: none;
background: #2e8bdb;	/*背景色（古いブラウザ用）*/
background: linear-gradient(#51a9f3, #2e8bdb);	/*グラデーション*/
color: #fff;		/*文字色*/
text-align: center;	/*文字をセンタリング*/
padding: 2px 10px;	/*上下、左右へのボタン内の余白*/
border-radius: 2px;	/*角丸のサイズ*/
font-size: 12px;	/*文字サイズ*/
}
/*マウスオン時*/
a.btn2:hover {
opacity: 0.7;	/*色が70%ついた状態*/
}

/*その他
---------------------------------------------------------------------------*/
.thumbnail {width: 80px;margin-bottom: 5px;}
.look {background: #eee;border: 1px solid #ccc;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb30 {margin-bottom: 30px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #6fbfd1 !important;}
.color2, .color2 a {color: #999 !important;}
.red, .red a {color: #ff0000 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
img.fr {float: right;margin-left: 10px;margin-bottom: 10px;}
img.fl {float: left;margin-right: 10px;margin-bottom: 10px;}
.big1 {font-size: 24px;letter-spacing: 0.2em;}
.mini1 {font-size: 11px;}
.sh {display: none;}
.ofx {overflow-x: hidden;}
.panorama-img {width: 600px !important;height: 400px !important;}



/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:700px){

#menubar {
clear: both;
height: 90px;		/*メニューの高さ。下の「#menubar ul li a」の「height」と「padding-top」の数字を合計した数字に合わせる。*/
text-align: center;	/*文字を中央に*/
background: #00A0E9;	/*背景色*/
}
#menubar li {
float: left;	/*左に回り込み*/
width: 25%;	/*メニュー幅（100÷6個=16.66%）　もし４個にするなら100÷4=25%になる。*/
list-style-type: none;
border-bottom: 1px solid #fff;	/*下線の幅、線種、色*/
}
.img_r,img.fr,img.fl {float: none;margin: 0;width: 100%;}




/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
	.album{
	columns:3;
	}	
.staff {
clear: both;
}

.staff_face {
width: 30%;
}
.staff_name {
width: 68%;
}




}


@media only screen and (max-width: 768px) {
	.album{
	columns: 2;
	}	
	

}


.gray {
	color: #999;
}