@charset "UTF-8";

html{
	font-size: 100%;
}

body{
	margin: 0 10% 0 10%;
	font-family:	"Times New Roman";
}

#bodyid{
	background: url('image/back.png'); 
}

#page{
	border:1px solid #ddd;
	background: #fff;
	margin:0 auto;
	padding: 10px 0 5px 0;
}

.header-left{
	width:60%;/*400px;*/
	float:left;
	padding:10px 0;
	/*margin-bottom: 50px;*//*メニューバーをなくす場合*/
	margin-right:auto;
	text-align:left;	
}
.header-right{
	width:35%;
	float:right;
	padding:10px 0;
	text-align:right;
	color: #834138;
}

#menuwaku{
	border:1px solid #dcc;
	width:90%;/*710px;*/
	margin:0 auto;
	border-collapse: collapse;
}
#menuwaku td{
	padding: 0;
}
#menu{
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	font-size:16px;
	font-weight:bold;
	color:#666;
	width:100%;
	border-collapse: collapse;
}
#menu a{
	color:#666;
	text-decoration:none;
	width:100%;
}
#menu td{
	border-left:1px solid #dcc;
	background:#fde9e9 url('image/menubg.JPG') repeat-x top left;
	padding:3px 10px;
	text-align:center;
	width:10%;
}

.nav{
	margin-bottom: 50px;
	text-align: left;
	color: #834138;
}
.nav a{
	color:#f18585;
}
.nav a:hover{
	color: #834138;
}

#main{
	width:82%;/*690px;*/
	margin:0 auto;
	padding:10px 0;
	font-size:16px;
}

/* 本文 */
.container{
	float:center;
	padding:10px 0;
	text-align: center;
	clear: both;
}
.container a{
	color:#f18585;
}
.container a:hover{
	color: #834138;
}

.hr{
	float:center;
	text-align: center;
	clear: both;
	font-weight:normal;
	padding:30px 0;
	font-size:16px;
	line-height:150%;
}

.hr p{
	text-align: center;
	font-weight:normal;
	margin:10px 10px 10px 10px;
	padding:0 10px 15px 10px;
	font-size:16px;
	line-height:150%;
	color: #4D484A;
	
}

.hr h1{
	color: #91181D;
	display: inline-block;
	margin-top: 5%;
}

.container h1{
	color: #834138;
	display: inline-block;
	margin-top: 10%;
	font-size: 28px;
}

.container h2{
	width:auto;
	border:1px solid #dcc;
	background:#fef4f4 url('image/banbg.JPG') repeat-x bottom left;
	color: #666;
	padding:3px 10px;
	font-size:16px;
	margin: 0 0 10px 0;
}
.container h3{
	color:#834138;
	padding:1px 4px;
	font-size:20px;
	margin:50px 0 20px 0;
}
.container p{
	font-weight:normal;
	margin:10px 10px 10px 10px;
	padding:0 10px 15px 10px;
	text-align:left;
	color:#666;
	font-size:16px;
	line-height:150%;
}

/*画像*/
.f1 img{
	height:300px;
	margin: 0 0 20px 0;
}

.f1 figcaption{
	margin: 0 0 30px 0;
}

.f2 img{
	height: 60%;
	width: 100%;
	margin: 0 0 30px 0;
}

.f2 figcaption{
	margin: 0 0 30px 0;
}

.parallel{
	display: flex;
}

.parallel img{
	height: 60%;
	width: 50%;
	margin: 0 0 30px 0;
}

.parallel figcaption{
	margin: 0 0 30px 0;
}


/* 表 */

/* テーブル全体を中央揃え + 余白を折りたたむ */
table {
	margin: 0 auto;             /* 中央揃え */
	border-collapse: collapse;  /* 線を重ねて表示 */
	font-size: 90%;
}

/* キャプションを表の下に表示 */
table caption {
	caption-side: bottom;
	padding: 8px 0;
	font-size: 16px;
}

/* 見出し行のスタイル */
table thead th {
	border-bottom: 1px solid #000; /* 見出しとデータの間に線を入れる */
	padding: 8px;
	text-align: center;
	background-color: #f5f5f5;     /* 見出し背景色（任意で調整） */
}

/* データ行のセルスタイル */
table tbody td {
	padding: 8px;
	text-align: center;
	color:#666;
}

/* 縦書きの3点リーダー用クラス（⋮） */
.vertical-ellipsis {
	writing-mode: vertical-rl;  /* 縦書きの向き（右から左へ縦書き） */
	text-orientation: mixed;    /* ブラウザによっては 'upright' */
	text-align: center;
	font-weight: bold;          /* 縦書きの強調（任意） */
	/* 高さや余白の調整が必要なら下記を適宜使う 
		line-height: 2em;
		padding: 1em;
		*/
}


/* 少し小さい文字 */
.indent {
	text-align: left;
}
.indent p{
	font-size: 90%;
	margin: 0 3rem 0 3rem;
	padding: 0 0 1.5em 1em;
	text-indent: 1em;
}

.indent ul{
	background: #f5f5f5;
	font-size: 90%;
	text-indent: 1em;
	color:#666;
	margin: 3rem, 3rem, 3rem, 3rem;
}


/*数字付きリスト(参考文献など)*/
ol {
	margin: 10px 10px 30px 10px;
	background: #f5f5f5;
	position: relative;
	text-align: left;
	color:#666;
	font-size: 90%;
}

ol li{
	margin: 10px 10px 30px 10px;
}


/* 注釈 */
.cmt {
	margin: 10px 10px 30px 10px;
	background: #f5f5f5;
	position: relative;
}
.cmt p{
	padding: 1em 0 1em 1em;
	text-indent: -1em;
}
.cmt p::before{
	content : "※"
}

/*バックナンバー*/
.backnumber {
	margin: 30px 10px 10px 10px;
	padding: 1em 1em 4em 2em;
	background: #f5f5f5;
	text-align: left;
	position: relative;
	display: grid;
	grid-template-columns:  1fr 1fr;
	gap: 10%;
	align-content: space-around;
}

.backnumber p{
	padding: 1em 1em 1em 1em;
	text-indent: -1em;
}

.backnumber.item{
	padding: 1em 1em 1em 1em;
	text-indent: -3em;
}

.backnumber.item a{
	padding: 1em 1em 1em 1em;
	text-indent: -3em;
}

/*トップページ*/
.topmenu {
	text-align: left;
	margin: 30px 10px 10px 10px;
	padding: 1em 1em 1em 2em;
	/*background: #f5f5f5;*/
	position: relative;
}

.topmenu p{
	font-size: 16px;
	color: #834138;
}

.topmenu a{
	margin: 5%;
	font-size: 28px;
	color:#666;
}

.topmenu a:hover{
	color:#f18585
}

/*上へ戻る*/
.pagetop{
	padding:10px 2px 0 0;
	text-align:right;
}

/*アニメーション*/
.LtoR{
	animation: Lefttoright 2.0s;
}

@keyframes Lefttoright {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.TtoD{
  animation: Toptodown 1.6s;
}

@keyframes Toptodown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/*線を伸ばす*/
.animate-link {
	text-decoration: none; 
	color:	#f18585;
	background-image: linear-gradient(90deg, #f18585, #f18585); /* 線の色 */
	background-repeat: no-repeat;
	background-position: left bottom; /* 線の起点を左・下に設定 */
	background-size: 0 1px; /* 線の横幅を0、縦幅を1pxに */
	transition: background-size 0.6s; /* 線を伸ばすアニメーション実行時間を指定 */
}

.animate-link:hover {
	color:#f18585;
	background-size: 100% 1px; /* 線の横幅を100%にする */
}


/* レスポンシブ対応 */
@media only screen and (max-width:480px){
	#page{
		width: 100%;
	}
	#menuwaku td{
		width: 100%;
		border:1.5px solid #ff9999;
	}
	#menu,#menu td{
		border:1.5px solid #ff9999;
    	border-collapse: collapse;
	}
	#menu td{
	display: block;
    border-top: none;
    text-align: center;
    table-layout: auto;
    box-sizing: border-box;
    
    border-left: none;
    border-right: none;
	}
    .teacher th,.teacher td,.professor th,.professor td{
    display: block;
    border-top: none;
    text-align: center;
    }
    .professor td.right{
    	text-align: center;
    }
    .teacher-top td span.gray{
	white-space: normal;	 
	}
}