@charset "utf-8";
/* CSS Document */

body {
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
  	-moz-text-size-adjust: none;
  }

header{
	height:370px;
	background-image:url(../image/top10.png);
	background-size:cover;
	background-position:right top;
	background-repeat: no-repeat;
	background-attachment:fixed;
}

header h1{
	width: 400px;
	height: 250px;
	position: relative;
	left: 20px;
	top: 20%;
}

header h1 img{
	width: 100%;
	height: 100%;
}


nav{
	height:56px;
	background-color:rgba(55,28,20,1);
	color:#fffffd;

}

nav ul{
	width:1100px;
	margin:0 auto;
	padding-top:20px;
	padding-left:40px;
	display:flex;
}

nav ul li{
	display:block;
	width:120px;
	margin-right:30px;
	padding-left:37px;
	background-image:url(../image/bookicon.png);
	background-repeat:no-repeat;
	background-position:left 10%;
	background-size:25px;
}

nav ul #topnav{
	margin-right: 12px;
}

#top #topnav,#book #listnav,nav ul li:hover{
	background-image:url(../image/icon_white.png);	
}

#homefont{
	font-size:18px;
}

body #contentArea{
	background:/*url(../image/bookshelf_line.png),url(../image/bookshelf_line_left.png),*/url(../image/paper_line2.png),linear-gradient(rgba(215,225,223,1),rgba(192,205,197,1));
	background-repeat:repeat-x,no-repeat;
	background-position:/*right bottom,left bottom,*/center bottom -5px,center center;
	background-size:/*15% 50%,15% 50%,*/70%,cover;
	min-height:74vh;
	box-sizing:border-box;
}

#content{
	width:1120px;
	margin:0 auto;
	padding:40px 30px 100px;
	min-height:74vh;
}

#contentColor{
	box-sizing:content-box;
	display:flex;
	align-items: flex-start;
	padding:10px;
	background:linear-gradient(rgba(215,225,223,1),rgba(195,208,200,1));
}

#maincolor{
	background-color:rgba(255,255,255,0.5);
	padding: 0 60px;
	margin-left:30px;
}

main{
	width:525px;
	padding:20px;
}

article{
	font-family: 'Open Sans','BIZ UDMincho', serif;
	height:410px;
	padding:60px 15px;
	padding-top: 60px;
	writing-mode:vertical-rl;
	column-gap:45px;
	column-rule:inset 1px #fafafa;
	column-fill:auto;
	color: #454540;
	background-image: url(../image/pin.png);
	background-position: left top 2%;
	background-repeat: no-repeat;
	text-align: justify;
}

article h1{
	font-size: 23px;
	text-indent: 1em;
	margin-left: 1em;
	margin-right: 1em;
	line-height: 1.5em;
}

article h2{
	font-size: 17px;
	margin-right: 1.3em;
	margin-left: 0.7em;
	text-indent: 0.5em;
	line-height: 1.5em;
}

article section{
	margin-left: 1em;
}

article p{
	line-height: 1.5em;
	font-size: 13.5px;
	padding-top:0.5em;
}

#signature{
	text-align: right;
	margin-left: 0;
	vertical-align: middle;
}

#signName{
	font-size: 15px;
	margin-left: 5px;
	margin-right: 5px;
}

#postcode{
	font-size: 13px;
}

.text-combine{
	text-combine-upright: all;
	-webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  display: inline-block;
  vertical-align:top;
}


aside{
	width:335px;
	margin-right:30px;
}

#bookshelf{
	height:370px;
	margin-bottom:46px;
	margin-top:8px;
	padding-top:10px;
	padding-right: 8px;
	background-image:url(../image/bookshelf5.png);
	background-position:left 10% bottom;
	background-repeat:no-repeat;
	background-size:97%;
}

#bookshelf ul{
	position:relative;
	top:40px;
	width:260px;
	margin:0 auto;
}

#bookshelf ul li{
	float:right;
	margin-bottom: 15px;
}

#newbook{
	background-color:rgba(255,255,255,0.5);
	text-align:center;
	padding:30px 0 43px;
}

#newbook img{
	width:185px;
	height:265px;
}

#new2,#new3{
	display: none;
}

#newbook h2{
	width:120px;
	margin:0 auto 20px;
	font-size: 21px;
	color: #696966;
	letter-spacing: 0.1em;
	padding-left:1.5em;
	background-image:url(../image/kazari2.png);
	background-repeat:no-repeat;
	background-size:contain;
}

#newbook #newsmall{
	display:none;
}

#twitterbox{
	width: 335px;
	margin: 50px auto;
}

#twittericon{
	//width: 32px;
	height: 32px;
	margin:0 30px;
	display: none;
}

footer{
	width:100%;
	margin:10px auto 0;
	color:#fffffd;
	position:absolute;
	bottom:0;
	padding:20px;
	height:130px;
	background-color:rgba(55,28,20,1);
	border-top:15px solid #fcffff;
}

#footerText{
	width:550px;
	margin:0 auto;
	padding-top:15px;
	text-align:center;
}


#footerFixed{
	min-height:100vh;
	position:relative;
	padding-bottom:130px;
	box-sizing:border-box;
	min-width:1120px;
	margin:0;
	color: #454540;	
}

#book header{
	height:280px;
}

#book header h1{
	width: 320px;
	height: 200px;
}


#book #contentArea #content #contentColor{
	background:none;
	background-color:rgba(255,255,255,0.5);
}

#book #booklist{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

#book figure{
	//float:left;
	padding:30px;
	box-shadow: 1px 1px 3px #cbcbc0;
	font-family: 'Open Sans','BIZ UDMincho', serif;
	line-height: 1.5em;
}

#book figure img{
	width:118px;
	height:167px;
	margin:20px;
}

#book figure img:hover{
	padding-top: -1px;
	padding-left:-1px;
	box-shadow: 3px 3px 10px #cbcbc0;
}

#book figure figcaption{
	width: 286px;
	//height: 435px;
	margin-top:20px;
	padding-left: 10px;
	border-left:3px double #a6978c;
	line-height: 1.3em;
	letter-spacing:0.03em;
	font-size:15px;
}

#book figure figcaption .booktitle{
	font-size: 17px;
	height: 60px;
	margin-bottom: 10px;
	margin-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom:1px dotted #a6978c;
	line-height: 1.3em;
}

#book figure figcaption .author{
	font-size: 16.5px;
	margin-bottom: 5px;
}

#book figure figcaption .comment{
	margin-top: 10px;
	font-size: 14.5px;
}

#book #contentColor{
	display: block;
}

#book #contentColor p{
	width: 100%;
	float: none;
	clear: both;
	text-align: center;
	font-size: 21px;
	padding-top: 40px;
	padding-bottom: 50px;
}

#book #contentColor #toAmazon{
	text-align:right;
	font-size: 15px;
	padding: 15px 15px 10px 15px;
	color: rgb(86, 110, 106);
}

#book #contentColor #toAmazon p{
	text-align: left;
	padding: 0;
	font-size:15px;
	width: fit-content;
	display: inline-block;
}


@media screen and (max-width:1040px){

#contentColor{
	display:block;
}

#content{
	width:800px;
	padding-left:0;
	padding-right:0;
	padding-top:25px;
	padding-bottom:70px;
}

aside{
	display:flex;
	width:600px;
	margin:0 auto;
}

#newbook{
	width:990px;
	height:250px;
	padding:10px;
	background-color:rgba(255,255,255,0);
	margin:0 auto;
}

#newbook h2{
	width:500px;
	margin:0 auto 15px;
	padding-bottom:0;
	text-align:left;
}

#newbook ul{
	display: flex;
	justify-content:space-evenly;
}

#newbook img{
	width:111px;
	height:159px;	
}

#new2,#new3{
	display: block;
}


#bookshelf{
	display:none;
	margin-bottom:38px;
}

#twitterbox{
	display: none;
}

#twittericon{
	//width: 32px;
	height: 32px;
	margin:0 0 0 35px;
	display: inline-block;
}

#top #footerText{
	text-align: right;
	width: 300px;
}

#maincolor{
	width: 720px;
	margin: 0 auto;
}

main{
	margin:0 auto;
	padding:0 13px;
}

#footerFixed{
	min-width:840px;
}

nav ul{
	width:800px;
	padding-left:20px;
	justify-content:space-evenly;
}

#book figure figcaption{
	width: 325px;
	//height: 395px;
}


}


@media screen and (max-width:800px){

header{
	background-image: url(../image/top13.png);
	background-position: right 40% top -17%;
}

header h1{
	width: 400px;
	height: 250px;
}

#content{
	width:640px;
}

#maincolor{
	width: 620px;
	margin: 0 auto;
}

#footerFixed{
	min-width:640px;
}

nav ul{
	width:640px;
}

#top #footerText{
	width: 280px;
}

#book #footerFixed #contentColor #booklist{
	height:auto;
}

#book figure{
	padding: 25px;
}


#book figure figcaption{
	width: 260px;
	//height: 440px;
}

#book figure figcaption .booktitle{
	font-size: 16px;
}

#book figure figcaption .author{
	font-size: 16px;
}

#book figure figcaption .comment{
	font-size: 14px;
}
}


@media screen and (max-width:640px){

body{
	min-width:480px;
}

#content{
	width:100%;
	margin:0;
}

#contentColor{
	width:100%;
	margin:0 auto;
	padding:0;
}

#maincolor{
	margin: 0;
	width:100%;
	padding:0;
}

#contentColor #maincolor main/*,article*/{
	width:460px;
	margin:0 auto;
	background-color:rgba(255,255,255,0);

}

article{
	font-size:14px;
	font-size:15px;
	padding:53px 5px 52px;
	margin:0 auto;
	background-color:rgba(255,255,255,0);
	background-image:none;	
}

aside{
	width:420px;
}

#newbook{
	width:405px;
}

#newbook h2{
	width:400px;
}


main{
	background-color:rgba(255,255,255,0.5);	
}

#footerFixed{
	min-width:480px;
}

nav ul{
	width:420px;
}


#footerText{
	width:280px;
}

#book figure img{
	width:106px;
	height:150px;
}


#book #content #contentColor #booklist figure{
	float: none;
	display: block;
	width: 440px;
	margin: 0 auto;
}


#book figure figcaption{
	width: 380px;
	//height: 335px;
}

#book #contentColor #toAmazon{
	text-align: center;
	//font-size: 14px;
	padding: 30px 5px 20px 5px;
}

}

@media screen and (max-width:440px){
	body{
	min-width: 340px;	
	}

header h1{
	width: 80vw;
	height:50vw;
	left: 0;
}	
	

header{
	height:35vh;
}

#content{
	width:100%;
	margin:0;
}

#contentColor{
	width:100%;
	margin:0 auto;
	padding:0;
}

#contentColor #maincolor main{
	padding: 15px 33px;	
	width: 340px;
}

main article{
	height:400px;
	font-size:14px;
	padding:60px 0;
	margin:0 auto;
	background-color:rgba(255,255,255,0);	
}

main article h1{
	font-size:19px;
}

#content aside{
	width:280px;
	margin:0 auto;
	padding:10px 0 0;
}

#newbook{
	width:280px;
	padding:0;
}

#newbook #newlarge{
	display:none;
}

#newbook #newsmall{
	display:flex;
	width:280px;
	justify-content:space-around;
}

#newbook #newsmall img{
	height:70px;
	width:70px;
}

#newbook h2{
	width:260px;
}

#footerFixed{
	min-width:340px;
	padding-bottom:150px;
}

nav{
	z-index:100;
	position:fixed;
	bottom:0;
	width:100%;	
}

nav ul{
	width:260px;
	font-size:13px;
	padding-left:0;
}

nav ul li{
	width: 70px;
	padding-right: 20px;
}

nav ul #topnav{
	width: 60px;
}

nav ul li #homefont{
	font-size:16px;
}


#top #footerFixed nav ul li,#book #footerFixed nav ul li{
	background-image:none;
	margin:0;
	padding:0;
}

#top #topnav,#book #listnav,nav ul li:hover{
	background-image:none;
	font-weight:bolder;	
}

footer{
	height:150px;
	background-color:rgba(62,35,22,1);
}


#footerText{
	width:260px;
}

#top #footerText{
	text-align: right;
	width: 260px;
}

aside{
	width:260px;
	height:150px;
}

#book #content #contentColor #booklist figure{
	width: 340px;
}


#book figure figcaption{
	width: 300px;
	//height: 420px;
}




}


@media screen and (max-width:340px){

header h1{
	width: 80vw;
	height: 50vw;
	top: 10%;
}

#book header h1{
	width: 250px;
	height:170px ;
}
	

nav ul{
	width:100%;
	font-size:10px;
	padding-left:0;
}

nav ul li{
	margin:0;
	padding:0;
	width: 50px;
}

nav ul #topnav{
	width: 40px;
}


#book #topnav{
	margin-right: 0;
}

nav ul li #homefont{
	font-size:10px;
}

#newbook #newsmall img{
	height:60px;
	width:60px;
}

#contentColor #maincolor main{
	width: 268px;	
}


#contentColor #maincolor main article{
	padding:60px 2px;
	height:360px;
}

main article p{
	font-size:13px;
}

main article h2{
	font-size:16px;
}

#footerFixed,body{
	min-width:280px;
}
footer{
	min-width: 280px;
}

#top #footerText{
	text-align: center;
	width: 240px;
}

nav ul li{
	background-image:none;
}

#book figure img{
	width:95px;
	height:135px;
}


#book #content #contentColor #booklist figure{
	width: 265px;
	padding: 25px 8px;
}


#book #content #contentColor #booklist figure figcaption .booktitle{
	font-size: 16px;
	height: 70px;
}


#book figure figcaption{
	width: 234px;
	//height: 500px;
	margin-right: 3px;
}

#book #contentColor #toAmazon{
	font-size: 13px;
	padding: 30px 5px 20px 5px;
}

#book #contentColor #toAmazon p{
	font-size: 13px;
}

}