/* ドロップメニューの設定(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: 50px;
	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: inline-block;
	width: 30px;
	height: 3px;
	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の知識がない場合は絶対にいじらないこと) */

/* ****************全体の細かい設定**************** */

body{
width:100%;
font-family: 
"fot-tsukuardgothic-std",
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
"Yu Gothic UI",
"Helvetica",
    sans-serif;
font-size:15px;}

a[href*="tel:"] {
	pointer-events: none;
}



/* ****************ここまで全体の細かい設定**************** */

/* ****************ヘッダー**************** */

.header
{margin:0 auto;
width: 100%;
padding-top:3%;
}

.header2{
width:90%;
margin:0 auto;}

.header2 p{font-size:0.9em;}

.header2 p a{text-decoration:none;
color:#000000;
}

p.small{font-size:0.8em;}

/* ****************ここまでヘッダー**************** */



/* ****************トップ写真**************** */

.topphoto
{margin:0 auto;
padding-top:2%;
text-align:center;
width:100%;}

.topphoto img
{width: 100%}

/* ****************トップページ以外のコンテンツ**************** */

.topphotomoji{
margin-top:1%;
height:3.5em;
background:#333333;
color:#ffffff;}

p.menu{
font-size:1em;}

/* ****************contents**************** */

.contents{width:100%;}

/* ****************トップページのレイアウト**************** */

.toppage{width:100%;
margin:0 auto;
padding-top:2%;
padding-bottom:2%;}

.toppage p{
text-align:center;
font-size:0.9em;}


/* ****************トップページのメニューレイアウト**************** */

.toppage2{width:100%;
margin:0 auto;
background:#ffffff;
padding-bottom:5%;}

/*kakomiと言う枠の中に写真や文字を敷き詰めているイメージ */
.kakomi{width:100%;
display:flex;}

.kakomi a {text-decoration:none;}

/* z1は写真。画面の1/2の大きさの枠内に100%の大きさで表示 */
.z1{width:50%;}

.z1 img{width:100%;}

/* z2は画面の左側のコンテンツの文字 */
.z2{width:50%;
position:absolute;}

.z2 p{font-size:1.2em;
width:100%;
position:relative;
top:10px;
left:5%;
color:#ffffff;
text-shadow: 1px 2px 3px #808080;}


/* z3は画面の右側のコンテンツの文字 */
.z3{width:50%;
position:absolute;}

.z3 p.e{font-size:1.2em;
width:100%;
position:absolute;
top:10px;
left:105%;
color:#ffffff;
text-shadow: 1px 2px 3px #808080;}

.z3 p.j{font-size:1.2em;
width:100%;
position:absolute;
top:30px;
left:105%;
color:#ffffff;
text-shadow: 1px 2px 3px #808080;}



/* ****************ページの一番下部（フッター）の設定**************** */


.footer{width:100%;
margin:0 auto;}

.footer p{font-size:0.8em;
text-align:center;
padding-top:1%;}


/* ****************各ページの文字や幅の指定**************** */

p.naiyou{
font-size:1em;
width:90%;
margin:0 auto;
padding-top:1%;
text-align:left;}

p.line{width:100%;
height:2em;
background:#203744;
margin-top:3%;
margin-bottom:1%;
}

p.line2{
width:99%;
font-size:1.2em;
text-align:left;
margin-top:1%;
margin-bottom:0.5%;
padding-left:1%;
padding-top:0.5%;
padding-bottom:1%;
background:#203744;
color:#ffffff;}


p.title{font-size:1.3em;
font-weight:bold;
margin-top:1%;}


/* ****************スタッフ紹介**************** */

.staff{
width:100%;}

/* 先生の写真の設定 */
.pphoto{width:90%;
margin:0 auto;}

.pphoto img{
display:block;
width:100%;}

/* 先生の説明文を書く部分の設定 */
.staffmemo{
width:90%;
margin:0 auto;
background:#cccccc;}

/* 学生の説明文を書く部分の設定 */
.staffmemo2{width:90%;
margin:0 auto;}


/* 先生のお名前の大きさ、名前の下の余白 */
p.name{font-size:1.5em;
text-align:left;
margin-left:1%;
padding-bottom:2%;}

/* メールアドレスや研究内容 */
p.memo1{font-size:1.2em;
text-align:left;
margin-left:1%;
word-break: break-all;
}

/* 学生数、就職先 */
ul.member{
font-size:1.2em;
margin-left:1%;
list-style:none;
padding-bottom:1%;}

p.smemo{
text-align:left;
margin-left:1%;
font-size:0.5em;
padding-bottom:3%;}

/* ****************研究業績のページ**************** */

ul.publication{font-size:1.2em;
margin-left:1%;
list-style:none;}

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


/* ****************写真**************** */

.photo1{width:90%;
margin:0 auto;}

.photo1 img{width:100%;
pointer-events: none;
-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;}

.photo2{width:90%;
margin:0 auto;
padding-bottom:3%;}

p.photo{
width:100%;
font-size:1.2em;
text-align:left;
margin-left:1%;}


/* ****************高校生の皆さんへ**************** */

ul.youtube{
font-size:0.9em;
margin-left:5%;
}

ul.youtube li{margin-top:1%;}

.aphoto{
width:80%;
margin:0 auto;
padding-top:1%;
text-align:left;}

.aphoto img{width:100%;}