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


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

.header
{margin:0 auto;
padding: 0.5%;
width: 90%;
}

.header2 p{
font-size:1.5rem;}

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



p.small{font-size:1.2rem;}

/* ****************メニューのレイアウト**************** */

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

.dropmenu{
  list-style-type: none;
  width: 100%;
  display:flex;
 flex-wrap: nowrap;
  margin: 0 auto;
background:#203744;
   }

.dropmenu li{
  width: 12%;
  margin: 0 auto;
  height:2.5vw;
  text-align: center; }

.dropmenu li a{
  margin: 0 auto;
  font-size: 1.6vw;
  text-decoration: none;
color:#ffffff;
}

.dropmenu li a:hover{color:#800000;}


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

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

.topphoto img
{width:100%;}


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

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

p.menu{
padding-top:0.5%;
font-size:1.5rem;}



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

.contents{width:100%;
}

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

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

.toppage p{
text-align:center;
}

p.top{width:100%;
margin:0 auto;
padding-bottom:1%;
font-size:1.8em;}

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

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

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

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

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

.z1 img{width:100%;}


/*z2とz3はPC版では全く同じ。スマホ版レイアウトの為に別々に指定している */

/* z2は画面の左側のコンテンツの文字 */
.z2{width:25%;
background:#d3d3d3;}

.z2 p{font-size:1.5em;
margin-top:5%;
margin-left:3%;}


/* z3は画面の右側のコンテンツの文字 */
.z3{width:25%;
background:#d3d3d3;}

.z3 p{font-size:1.5em;
margin-top:5%;
margin-left:3%;}



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


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

.footer p{font-size:1.3em;
text-align:left;
padding-top:1%;
padding-bottom:1%;}


/* ****************文字や幅の指定**************** */

p.naiyou{
font-size:1.2em;
width:70%;
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.5em;
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:2em;
font-weight:bold;
margin-top:1%;}


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

/* staffと言う紙に、先生の写真と説明文を左右に分けて貼るイメージ */
.staff{
width:100%;
display:flex;}

/* 先生の写真の設定 */
.pphoto{width:30%;}

.pphoto img{width:100%;}

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

.staffmemo2{width:70%;}


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

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

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

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

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

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

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


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

.kakomi2{width:80%;
margin:0 auto;
display:flex;}


.photo1{width:25%;}

.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:25%;}

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


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

ul.youtube{
font-size:1.4em;
margin-left:3%;
}

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

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

.aphoto img{width:100%;}