/* =======================================
 二瓶先生HP用スタイルシート 
========================================*/

/* ===全体的な指定。個々に設定しなかった文字等はここに記した通りになります===*/

body{
width:100%;
font-family: Arial;
overflow-x: hidden;
}

p{text-align:justify;
 font-size:1.5vw;
line-height: 150%; /* 文字と文字の間の余白 */}

a:hover{color: #008080;} /*　リンクにマウスを乗せた時に色が変わります */



/*====全体的な指定終了================*/

/*===ヘッダーに関する指定===*/

.header
{width:70%;
 margin:0 auto;
 } 

/*===div class=titletop（天然物有機化学）に関する指定===*/

.titletop
{
float:left; /*「左側に表示しろ」と命令しています */
font-size: 4.4vw; /* 文字の大きさ指定。数が大きいほど字も大きくなります。 */
} 

/*===div class=title1（宇都宮大学農学部応用生命化学科）に関する指定===*/

.title1
{
padding-top: 4%; /* 文字がタイトルと横並びになった時に、下側が揃うように余白を設定。 */
font-size:2vw; /* 文字の大きさ指定。数が大きいほど字も大きくなります。 */
} 


/*===div class=title2（Natural Products Chemistry）に関する指定===*/

.title2
{
font-size:3.5vw; /* 文字の大きさ指定。数が大きいほど字も大きくなります。 */
color: #0000ff;
clear:both;/* ↑で設定したfloatに影響されないように解除 */

} 

/*（日本語/ENGLISH）に関する指定*/
.select{width:70%;
margin:0 auto;
text-align:center;
padding-top:3%;
padding-bottom:1%;
}

p.s1{font-size:3vw;
display:inline-block;
margin:0 auto;
}

p.s1 a{color: #00008b;}
p.s1 a:hover{color: #b22222;}



/*===更新日に関する指定===*/

p.s2{width:70%;
color: #006400;
font-size:2.5vw;
margin:5% auto;
text-align:center;
}

p.s3{color:#800000;
width:90%;
margin:auto;
text-align:center;
font-size:2vw;}

/*===h1（概要・メンバー等）の文字設定===*/

h1
{
width:70%;
margin:auto;
padding-top:5%;
font-size: 4vw; /* 文字の大きさ指定。数が大きいほど字も大きくなります。 */
} 

h2{font-size:2.5vw;
margin-top:5%;
margin-bottom:0;
}


/*===div class=naiyou（本文）に関する指定===*/


.naiyou
{
width:70%;
margin: auto;
padding-bottom: 3%;  /* フッターの高さの分余白を取る*/    
}

/*===naiyouに関する指定の終了===== */


/*===indexページの写真（リンク）の設定===== */

.photot{width:100%;
display:inline-block;
 margin:0 auto;
text-align: center;}

.photot img{
width:45%;
text-align:center;
margin:0 auto;
}


/*===div class=topimage（トップページの画像）に関する指定===*/
.topimage
{
width: 100%;
margin: auto;
text-align: center ;	/* テキスト、画像の真ん中寄せ */
}

/*===概要ページのイラストに関する指定===*/
.image
{
width: 70%;
margin: auto;
text-align: center ;	/* テキスト、画像の真ん中寄せ */
}


/*===div class=footer（各ページ下部のリンク）に関する指定===*/
.footer
{margin: auto;
text-align: center ;
position: relative;
padding-top:5%;
}

ul.bottom{
display: flex;
justify-content:space-around;
max-width: 100%; 
margin:auto;
padding-bottom:3%;
padding-left:0;
list-style:none;
}

ul.bottom li{
/*width: calc(100%/3); メニュー3項目当たりの幅*/
margin: auto;
padding: 0; }

ul.bottom li a{
color: #ff1493;　/* マウスを乗せる前の文字の色 */
text-align: center;
font-size: 2vw;
}

ul.bottom li a:hover{
color: #66083a; /* マウスを乗せた時の文字の色 */}

/*===footerに関する指定の終了===== */



/*===メンバーページのレイアウトに関する指定===*/
.photo
{width:100%;
 display:inline-block;
 margin:0 auto;
text-align: center;
}


.photo img{
width:33%;
text-align:center;
margin:0 auto;
/* SPの長押し禁止、PCでは右クリック等の操作禁止 */
	    -webkit-touch-callout:none;
	    -webkit-user-select:none;
	    -moz-touch-callout:none;
	    -moz-user-select:none;
	    user-select:none;
pointer-events: none;
}


/*===現役メンバーのレイアウトに関する指定===*/

table.member1{width:100%;
margin:0 auto;
padding-top:5%;
padding-bottom:5%;} 

td.member
{width:30%;
border-bottom: 1px dashed #808080; /* 各tdの下部に破線をグレイで1pxで表示 */
 font-size:1.5vw;}

td.grade{
width:10%;
border-bottom: 1px dashed #808080; /* 各tdの下部に破線をグレイで1pxで表示 */
font-size:1.5vw;}

td.member1
{width:60%;
border-bottom: 1px dashed #808080; /* 各tdの下部に破線をグレイで1pxで表示 */
 font-size:1.5vw;
 color: #0000cd;}



/*===卒業生メンバーのレイアウトに関する指定===*/

ul.memberalu{width:100%;
display:grid;
grid-template-columns: repeat(3, auto); /* 3行目で自動的に改行 */
font-size:1.5vw;
margin: 2% auto;
padding-left:1%;
list-style:none;
}

li.a{color: #800000;}
li.b{color: #006400;}


/*===研究業績ページのリスト===== */

ul.publication
{width:100%;
 margin: auto;
 list-style:square; /* リスト冒頭の■を指定 */
 font-size: 1.5vw;
 padding-left:2%;
 padding-bottom:2%;
 padding-top:5%;
}

ul.publication li{padding-bottom:2%;}


/* =======以下、ドロップメニューの設定(CSSの知識がない場合は絶対にいじらないこと) =======*/
/* -- ul#drop ------------------------------------------- */

ul#menu {
	list-style-type: none;
	width: 100%;
	background: #ffffff;
	opacity: 0.9;
	position: absolute;
	left: 0px;
	top: 60px;
	z-index: 990;
	display: none;
}

ul#menu li {
	text-align: center;
}

ul#menu li a {
	text-decoration: none;
	display: block;
	padding: 15px 0;
}

ul#menu li a:hover {
	background: #a9a9a9;
	opacity: 0.7;
}



/* -- div#sp-icon -------------------------------------------------------------------------------- */

/*ハンバーガーメニューの表示位置 */
div#sp-icon {
	width: 70px;
	height: 60px;
	position: absolute;
	right: 0px;
	top: 0%;
	z-index: 999;
}

div#sp-icon:hover {
	cursor: pointer;
	opacity: 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: block;
	width: 30px; /*ハンバーガーの幅*/
	height: 2px; /*ハンバーガーの太さ*/
	background: #000000;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}

div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}


div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}

/* ドロップメニューの設定ここまで---------------------------------------------------------- */
/* (ここから上はCSSの知識がない場合は絶対にいじらないこと) */