@charset "utf-8";


html {
  font-family:MyYuGothicM,YuGothic,-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src: local("YuGothic-Medium"),  /* Postscript name */
local("Yu Gothic Medium"), /* for Chrome */ local("YuGothic-Regular"); /* Mediumがない場合 */
}
@font-face {
  font-family: "MyYuGothicM";
  font-weight: bold;
  src: local("YuGothic-Bold");
}
html,body{
	position: relative;
	height: 100%;
	margin:0;
	padding:0;
	font-size: 62.5%;
}
#wrapper{
	position: relative;
	margin:30px auto 0 auto;
	padding:0 50px;
	min-height: 100%;
	height:auto!important;
	height: 100%;
	width: 1000px;
}
.cf:after{
	content: '';
	display: block;
	clear: both;
}
a img{
	transition: 0.5s;
}
a img:hover{
	opacity: 0.7;
}
/*head========================*/
header{
	height:420px;
	width: 200px;
	float: left;
	margin:0 0 0 50px;
}


/*contents========================*/
#title{
	background-color:#dae000;
	padding: 10px;
	width:630px;
	margin-bottom: 5px;
}
#title:after{
	display: block;
	clear: both;
	content: '';
}
h2{
	font-size: 30px;
	width:570px;
	float: left;
	line-height: 1;
	margin:0;
	padding:0;
	font-family: serif;
	text-align: center;
}
h2 #nom{
	font-size: 1.4rem;
	margin-right: 30px;
	font-weight: normal;
	letter-spacing: 0;
	font-family: sans-serif;
	float: left;
	padding-top: 12px;
	height: 18px;
}
#title #page{
	display:table-cell;
	background: url(../img/bg_ink.png) no-repeat center center;
	color: #fff;
	width: 15px;
	height: 6px;
	font-size: 12px;
	margin:0;
	float: right;
	padding:15px;
	vertical-align: middle;
}
#title3 #maintitle{
	width:400px; float: right; text-align: center; line-height: 1.3; font-size: 22px;
}
#title3 #subtitle{
	display:block;font-size: 14px; font-weight: normal; text-align: center;
}

#signiture{
	font-size: 14px;
	margin-left: 10px;
	font-weight: bold;
	text-align: right;
}
#sentence{
	margin-top: 30px;
}
#sentence p{
	line-height: 1.8;
	margin:2em 0;
	color:#333;
	font-size: 18px;
	font-size: 1.8rem;
}
#content{
	width:650px;
	min-height: 100%;
	height: 100%;
	height: auto;
	margin:0 50px;
	background-color:#fff;
	float: right;
	padding-bottom: 80px;
}

#page{
	width:440px;
	height: 50px;
	margin:30px auto;
}
#page li{
	width:60px;
	height: 32px;
	float: left;
	list-style-type: none;
	padding-top: 14px;
	font-size: 18px;
	font-weight: bold;
}
#page:after{
	display: block;
	content: '';
	clear: both;
}
#now{
	background: url(../img/bg_ink.png) no-repeat center top;
	color:#fff;
	text-align: center;
}
#prev{
	background:#fff url(../img/bg_prev.png) no-repeat left center;
	padding-left: 30px;
	text-align: right;
	margin-right: 100px;
	color:#222;
}
#next{
	background:#fff url(../img/bg_next.png) no-repeat right center;
	padding-right: 30px;
	margin-left: 100px;
	color:#222;
}
a #prev:hover,a #next:hover{
	text-decoration: underline;
}
#pagenation{
	width: 50%;
	margin:2em auto 0 auto;
}
#pagenation:after{
	content: '';
	display: block;
	clear: both;
}
#pagenation li{
	float: left;
	border: 1px solid #333;
	list-style-type: none;
	margin-right:10px;
	margin-bottom: 20px;
}
#pagenation li:last-child{
	margin-right:0;
}
#pagenation li a{
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	padding-top: 10px;
	width: 30px;
	height: 30px;
	display: block;
	text-align: center;
	color:#333;
}
#pagenation li a:hover{
	text-decoration: underline;
}
#body1 #pagenation li #a1,#body2 #pagenation li #a2,#body3 #pagenation li #a3,#body4 #pagenation li #a4,#body5 #pagenation li #a5,#body6 #pagenation li #a6,#body7 #pagenation li #a7,#body8 #pagenation li #a8,#body9 #pagenation li #a9,#body10 #pagenation li #a10{
	display: none;
}


/*aside========================*/
aside{
	margin-top:100px;
}
#returntop{
	display: block;
	width:300px;
	background-color: #444;
	color:#fff;
	margin:40px auto;
	text-align: center;
	text-decoration: none;
	color:#fff;
	padding:10px;
	transition: 0.5s;
}
#returntop:hover{
	background-color: #aaa;
	color:#666;
}
#link ul li{
display: inline-block; width: 300px; margin: 0 5px 0 10px;
}
#link ul li p em{ font-size: 1.2rem; font-weight: bold;
width: 300px; display: table-cell; vertical-align: middle; background-color: #8fc31f; height: 20px; text-align: center; color:#222;
}
#link ul li h4{ text-align: center;
	height: 50px; background: #efefef url('../img/bg_lipen.png') no-repeat 10px 10px; margin: 5px 0 0 0; padding-top: 10px; color:#222; padding-left:10px; font-size: 40px;
	transition: 0.5s;
	font-family: serif;
}
#link ul li p.name{font-size:1.6rem;
width: 300px; display: table-cell; vertical-align: middle; background-color: #898989;
            color:#fff; height: 30px; margin-top: 5px; text-align: center;
}
#link ul li a:hover h4{
	color:#aaa !important;
}

/*foot========================*/
footer{
	border-top:3px solid #000;
	text-align: center;
	clear: both;
	position: absolute;
	width:900px;
	bottom: 0;
	height: 50px;
	padding:10px 50px 10px 50px;
	background-color: #eee;
	font-size: 12px;
}
footer b a{
	text-decoration:none;
	color:#222;
	font-size: 1.6rem;
	transition: 0.5s;
}
footer b a:hover{
	color:#999;
}
small{
	display: block;
	text-align: center;
	margin:20px auto;
}
p#last{
	text-align: right;
	font-size: 14px;
	font-size: 1.4rem;
}
/*foot========================*/
.coro{
	font-style: italic;
	font-weight: bold;
	color:#832 !important;
}
#arab{
	margin:3em auto;
	text-align: center;
	font-size:18px;
}
#arab pre{
	font-size: 21px;
	text-align: center;
	height: 26px;
	margin:20px 0 0 0;

}
#arab i{
	font-size: 80%;
}
@media only screen and (max-width : 736px){
	header{
		width: 100%;
		height: auto;
		float: none;
		background-color: #c30e23;
		margin:0 0 4em 0;
	}
	header h1 img{
		height: 150px;
		width: auto;
		border: 2px solid #fff;
		padding: 10px;
		margin: 1em;
	}
	#wrapper{
		width: 100%;
	}
	article{
		position: relative;
	}
	#content{
		width:90%;
		float: none;
		margin: 0 auto;
		padding-bottom: 0;
	}
	#title {
			box-sizing: border-box;
	    width: 100%;
	}
	h2{
		width:auto;
	}
	h2 #nom{
		font-size: 2rem;
		margin-right: 0;
		float: none;
		height: auto;
		display: block;
		text-align: left;
	}
	#sentence p{
		font-size: 2rem;
	}
	#signiture {
	    font-size: 2rem;
	}
	#title3 #maintitle{
		width:auto; float: none; font-size: 4rem; display: block;
		text-align: left;
	}
	#title3 #subtitle {
	    font-size: 2rem;
	}
	#arab {
		font-size: 2rem;
	}
	#arab pre{
		word-break: break-all;
	}
	#page {
	    width: 100%;
	    height: auto;
	    margin: 10em auto;
	    display: flex;
	    justify-content: space-around;
	}
	#page li {
	    width: 100px;
	    height: auto;
	    float: left;
	    font-size: 2rem;
	    padding: 0;
	 }
	#now{
		display: none;
	}
	#prev{
		background:#fff url(../img/bg_prev.png) no-repeat left center;
		margin-right: 0;
	}
	#next{
		background:#fff url(../img/bg_next.png) no-repeat right center;
		margin-left: 0;
	}
	#page:after {
		display: none;
	}
	#pagenation {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	    width: 100%;
	    margin: 1em auto 0 auto;
	}
	#pagenation li {
		margin: 15px;
	}
	#pagenation li a {
	    font-size: 2rem;
	    width: 4em;
	    height: 1em;
	    padding: 10px 5px;
	}
	#body1 #pagenation li #a1,#body2 #pagenation li #a2,#body3 #pagenation li #a3,#body4 #pagenation li #a4,#body5 #pagenation li #a5,#body6 #pagenation li #a6,#body7 #pagenation li #a7,#body8 #pagenation li #a8,#body9 #pagenation li #a9,#body10 #pagenation li #a10{
		display: block;
		background-color: #000; color: #fff;
	}
	#link{
		margin: 4em auto;
	}
	#link ul li {
	    display:block;
	    width: 80%;
	    margin: 0 auto 4em;
	}
	#link ul li p em {
	    font-size: 1.6rem;
	    height: auto;
	    letter-spacing: -1px;
	 }
	#link ul li p.name {
	    font-size: 1.6rem;
	 }

	#returntop{
		width: 10em;
		font-size: 2rem;
		margin: 4em auto;
	}
	#wrapper{
		padding: 0;
		margin: 0;
	}
	footer {
			box-sizing: border-box;
			position: relative;
	    width: 100%;
	    height: auto;
	    font-size: 1.6rem;
	    margin: 6em auto 0;
	    padding: 3em 1em;
	}
	footer b a {
	    font-size: 1.6rem;

	}
}