/* Common CSS setting */


/* CSS Document */


#wrapper{
	background-image: url("../images/03-light-carpet.png");
}

nav ul li:hover{
	opacity: 0.5;	
}

@media screen and (max-width:599px){	/* SmartPhone */
	html, body{
		max-width:750px;
		min-width:320px;
	}

	#wrapper{
		margin:4px;
		min-height:760px;
	}
	
	nav{
		width:100%;
		height: 40px;
		background-color: white;
		opacity: 0.7;
	}
	
/*
	nav ul li:first-of-type{
		margin-left:30px;
	}	
*/
	
	nav ul{
		width:100%;
		height:100%;
		margin:0 auto;
	}

	nav ul li{
		width:25%;
		height:100%;
		float:left;
		display:table-cell;
		vertical-align: middle;
		text-align: center;
		
		position: relative;
/*		margin-right:0px;	*/
/*
		font-size:36px;
*/
	}

	nav ul li a{
/*		background-color: yellow;	*/
		position: absolute;
		top:50%; 
		left:50%;
		margin-right:-50%;
		transform: translate(-50%, -50%);
		
/*		height:100%; */
	}

	@media screen and (max-width:389px){
		nav ul li{
			font-size:15px;
		}
	}

	@media screen and (min-width:390px){
		nav ul li{
			font-size:18px;
		}
	}
}

@media screen and (min-width:600px){	/* PC */
	html, body{
		min-width:960px;
	}
	#wrapper{
		margin:24px;
	}
	
	nav{
		width:100%;
		height: 75px;
		background-color: white;
		opacity: 0.7;
	}
	

	nav ul li:first-of-type{
		margin-left:200px;
	}

	nav ul{
		width:880px;
		margin:0 auto;
		padding-top:22px;
	}

	nav ul li{
		float:left;
		margin-right:40px;
		font-size:24px;
	}
}

/* index.html CSS Setting */
@media screen and (max-width:599px){	/* SmartPhone */
	#main{
		width:96%;
		margin:10px auto 60px auto;
	}

	#main section{
		width:100%;
/*		padding:8px;	*/
		margin:0 auto;
	}

	#main h1{
		font-weight: normal;
		text-align: center;
	}

	h2{
		margin-top:0px;
		font-weight: normal;
		text-align: center;
	}
	@media screen and (max-width:389px){	/* SmartPhone */
		#main h1{
			font-size:36px;
			margin-top:14px;
		}
		h2{font-size:22px;}
		p{
			font-size:16px;
			line-height: 30px;
		}
	}
	@media screen and (min-width:390px){	/* SmartPhone */
		#main h1{
			font-size:52px;
			margin-top:20px;
		}
		h2{font-size:28px;}	
		p{
			font-size:18px;
			line-height: 34px;
		}
	}

	#main div{
		width:96%;
		margin:40px auto 0 auto;
	}
	


	#main_image{
		width:80%;
		background-image: url("../images/mainimg.jpg");
		background-size:cover;	
/*		width:393px;	*/
/*		height:395px;*/
		min-height: 200px;
	}

}
@media screen and (min-width:600px){	/* PC */
	#main{
		width:880px;
		margin:10px auto 180px auto;
	}

	#main section{
		width:440px;
		float:left;
		padding:8px;
	}

	#main h1{
		font-size:48px;
		margin-top:117px;
		font-weight: normal;
	}

	h2{
		font-size:32px;
/*		margin-top:40px; */
		font-weight: normal;
		margin-top:0px;
		text-align: center;
	}
	#main div{
		float:right;
	}

	p{
		font-size:20px;
	}

	#main_image{
		background-image: url("../images/mainimg.jpg");
		background-size:contain;
		width:393px;
		height:262px;
		
	}

}


#main section p{
	margin-top:30px;
}


/* Self-Introduction */
/*
#introduction{
	width:750px;
	margin:10px auto 100px auto;
}
*/



@media screen and (max-width:599px){	/* SmartPhone */
	#introduction{
		width:96%;
		overflow: hidden;
	}
	section{
		width:96%;
		margin:0 auto;
		overflow: hidden;
	}
	
	#introduction h1 ,#product h1, #contact h1, #conf h1, #send h1, #error h1{
		text-align: center;
		margin-top:20px;
		font-weight: normal;
	}
	
	#introduction h3, #product h3{
		font-weight:normal;
		border-bottom: solid 1px #2E0000;
		border-left: solid 4px #2E0000;
		margin:40px auto 20px auto;
		width:100%;
	}	
	

	#introduction dl dd{
		width:100%;
		margin-bottom:20px;
	}
	
	@media screen and (max-width:389px){	/* SmartPhone */
		#introduction h1 ,#product h1, #contact h1, #conf h1, #send h1, #error h1{
			font-size:36px;
			margin-top:14px;
		}
		#introduction h3, #product h3{
			line-height: 48px;
			text-indent: 20px;
			font-size:24px;			
		}
		#introduction dl dt{
			line-height: 40px;
			padding-left:0px;
			font-size:20px;
		}
		#introduction dl dd{
			line-height: 30px;
			font-size:16px;
			padding-left:20px;
		}
		#introduction p{
			line-height: 30px;
			font-size:16px;
		}
	}
	@media screen and (min-width:390px){	/* SmartPhone */
		#introduction h1 ,#product h1, #contact h1, #conf h1, #send h1, #error h1{
			font-size:52px;
			margin-top:20px;
		}
		#introduction h3, #product h3{
			line-height: 48px;
			text-indent: 20px;
			font-size:28px;			
		}
		#introduction dl dt{
			line-height: 40px;
			margin-left:20px;
/*			padding-left:20px;	*/
			font-size:24px;
		}
		#introduction dl dd{
			line-height: 34px;
			font-size:18px;
			margin-left:40px;
/*			padding-left:40px;	*/
		}
		#introduction p{
			line-height: 30px;
			font-size:16px;
		}
	}
}

@media screen and (min-width:600px){	/* PC */
	.nodisp{
		display:none;
	}
	#introduction{
		width:750px;
		margin:0 auto;
	}
	#introduction section{
		margin-top:20px;
		margin-bottom: 40px;
	}
	
	#introduction h1, #product h1, #contact h1, #conf h1, #send h1, #error h1{
		text-align: center;
		font-size:48px;
		margin-top:60px;
		font-weight: normal;
		margin-bottom:30px;
	}

	#introduction h3, #product h3{
		line-height: 40px;
		text-indent: 20px;
		font-size:24px;
		font-weight:normal;
		border-bottom: solid 1px #2E0000;
		border-left: solid 4px #2E0000;
		margin-bottom: 20px;
	}

	#introduction dl dt{
		line-height: 32px;
		margin-left:40px;
		font-size:22px;
	}
	#introduction dl dd{
		line-height: 32px;
		margin-left:80px;
		font-size:18px;
		margin-bottom:20px;
	}
}


/* Product CSS Setting */
.link{
	text-decoration-line: underline;
	color: blue;
	line-height: 40px;
	margin-left:40px;
}

.link:hover{
	opacity: 0.5;
}

@media screen and (max-width:599px){	/* SmartPhone */
	#product{
		width:96%;
		margin:10px auto 100px auto;
	}

	#product img{
		width:90%;
		margin:0 auto 10px auto;
	}

	#product img:hover{
		opacity: 0.5;
		transform: scale(1.02);
		transition: 0.1s;
	}

	#product section div:first-of-type{
		margin-top:10px;
	}

	#product section div:last-of-type{
		width:90%;
	}

	#product section{
		margin-bottom: 40px;
	}
	
	#product dl dt{
		line-height: 40px;
		padding-left:20px;
		font-size:32px;
	}
	#product dl dd{
		line-height: 40px;
		padding-left:40px;
		font-size:28px;
		margin-bottom:20px;
	}
	#product p{
		margin-top:40px;
		margin-bottom: 20px;
	}
	
	@media screen and (max-width:389px){	/* SmartPhone */
		#product dl dt{
			line-height: 40px;
			padding-left:0px;
			font-size:20px;
		}
		#product dl dd{
			line-height: 30px;
			font-size:16px;
			padding-left:20px;
		}
		#product p{
			line-height: 30px;
			font-size:16px;
		}
	}
	@media screen and (min-width:390px){	/* SmartPhone */
		#product dl dt{
			line-height: 40px;
			padding-left:20px;
			font-size:24px;
		}
		#product dl dd{
			line-height: 34px;
			font-size:18px;
			padding-left:40px;
		}
		#product p{
			line-height: 30px;
			font-size:16px;
		}
	}
}

@media screen and (min-width:600px){	/* PC */
	#product{
		width:750px;
		margin:10px auto 100px auto;
	}

	#product img{
		width:360px;
	}

	#product img:hover{
		opacity: 0.5;
		transform: scale(1.02);
		transition: 0.1s;
	}

	#product section div:first-of-type{
		float:left;
		margin-top:40px;
	}

	#product section div:last-of-type{
		float:right;
		width:360px;
	}

	#product section{
		margin-bottom: 40px;
	}
	
	#product dl dt{
		line-height: 32px;
		font-size:22px;
	}
	#product dl dd{
		line-height: 32px;
		padding-left:30px;
		font-size:18px;
		margin-bottom:10px;
	}
	#product p{
		margin-top:20px;
		margin-bottom: 20px;
	}
}
/* Contact CSS Setting */
@media screen and (max-width:599px){	/* SmartPhone */

	#contact{
		width:94%;
		margin:10px auto 100px auto;
	}

	#name_address{
		margin-top:40px;
		width:100%;
	}

	#contact input{
		width:100%;
		height: 40px;
		margin-bottom:27px;
		border:solid 1px #e0e0e0;
		font-size:24px;
	}
	
	@media screen and (max-width:389px){	/* SmartPhone */
		#contact p{
			line-height: 30px;
			font-size:16px;
			margin-top:20px;
		}
	}
	@media screen and (min-width:390px){	/* SmartPhone */
		#contact p{
			line-height: 34px;
			font-size:20px;
			margin-top:30px;
		}
	}
	
	#comment{
		width:100%;
	}

	#comment_text{
		width:100%;
		height:140px;
		border:solid 1px #e0e0e0;
		font-size:24px;
	}

	#contact #submit_wrap{
		text-align: center;
	}

	#contact input#submit{
		-webkit-appearance: none;
		width:140px;
		height:60px;
		background-color: #918780;
		color:white;
		margin:40px auto;
		font-size:28px;
	}
}

@media screen and (min-width:600px){	/* PC */

	#contact{
		width:750px;
		margin:10px auto 100px auto;
	}

	#contact p{
		margin-top:20px;
	}
	
	#name_address{
		margin-top:40px;
		float:left;
		width:350px;
	}

	#contact input{
		width:350px;
		height: 40px;
		margin-bottom:27px;
		border:solid 1px #e0e0e0;
		font-size:18px;
	}

	#comment{
		float:right;
		width:350px;
		margin-top:40px;
	}

	#comment_text{
		width:350px;
		height:140px;
		border:solid 1px #e0e0e0;
		font-size:18px;
	}

	#contact #submit_wrap{
		text-align: center;
	}

	#contact input#submit{
		-webkit-appearance: none;
		width:132px;
		height:40px;
		background-color: #918780;
		color:white;
		margin:40px auto;
		font-size:22px;
	}
}
	
/* conf.tmpl, send.tmpl CSS Setting */
@media screen and (max-width:599px){
	#conf, #send, #error{
		width:98%;
		margin:10px auto 200px auto;
	}

	#conf form{
		width:90%;
		margin:40px auto;
	}

	#send form{
		width:60%;
		margin:40px auto;
	}

	#error form{
		width:60%;
		margin:40px auto;	
	}

	#send p, #error p{
		margin-top:40px;
		margin-bottom:40px;
		text-align: center;
	}

	#conf input, #send input, #error input{
		-webkit-appearance: none;
		height:60px;
		background-color: #918780;
		color:white;
		font-size:24px;
		margin:0 7px;
	}
	#conf input[type="button"]{
		width:120px;
		float:left;
	}
	#conf input[type="submit"]{
		width:120px;
		float:right;
	}
	#error input{
		width:160px;
	}
	#send input{
		width:160px;
	}
	
	#conf p{
		line-height: 36px;
		margin-left:20px;
		margin-top:16px;
	}

	#conf p:first-of-type{
		margin-left: 0px;
	}
}
@media screen and (min-width:600px){
	#conf, #send, #error{
		width:500px;
		margin:10px auto 100px auto;
	}

	#conf form{
		width:300px;
		margin:40px auto;
	}

	#send form{
		width:134px;
		margin:40px auto;
	}

	#error form{
		width:150px;
		margin:40px auto;	
	}

	#send p, #error p{
		text-align: center;
	}

	#conf input, #send input, #error input{
		width:132px;
		height:40px;
		background-color: #918780;
		color:white;
		font-size:22px;
		margin:0 7px;
	}

	#error input, #send input{
		width:148px;
	}

	#conf p{
		line-height: 36px;
		margin-left:20px;
	}

	#conf p:first-of-type{
		margin-left: 0px;
	}
}

/* Footer */
@media screen and (max-width:599px){
	#wrapper footer p{
		text-align: center;
		padding-top:10px;
		padding-bottom:20px;
		font-size:24px;
	}
}
@media screen and (min-width:600px){
	#wrapper footer p{
		text-align: center;
		padding-top:10px;
		padding-bottom:180px;
	}
}

#wrapper h1, #wrapper footer p{
	font-family: 'Alex Brush', cursive;
}

/* SiteMap */
#sitemap{
	width:750px;
	margin:10px auto 100px auto;
}

@media screen and (max-width:599px){	/* SmartPhone */
	#sitemap section{
		width:94%;
		margin:0 auto;
	}
	
	#sitemap h1{
		text-align: center;
		font-size:60px;
		margin-top:30px;
		font-weight: normal;
	}
	
	#sitemap h3{
		line-height: 48px;
		text-indent: 20px;
		font-size:32px;
		font-weight:normal;
		border-bottom: solid 1px #2E0000;
		border-left: solid 4px #2E0000;
		margin:40px 0 20px 0;
	}	
	
	#sitemap ul li{
		line-height: 40px;
		padding-left:40px;
		font-size:32px;
		margin-top:30px;
		margin-bottom:30px;
	}
}

@media screen and (min-width:600px){	/* PC */
	.nodisp{
		display:none;
	}
	
	#sitemap section{
		margin-top:20px;
		margin-bottom: 40px;
	}
	
	#sitemap h1{
		text-align: center;
		font-size:48px;
		margin-top:60px;
		font-weight: normal;
		margin-bottom:30px;
	}

	#sitemap h3{
		line-height: 40px;
		text-indent: 20px;
		font-size:24px;
		font-weight:normal;
		border-bottom: solid 1px #2E0000;
		border-left: solid 4px #2E0000;
		margin-bottom: 20px;
	}

	#sitemap ul li{
		line-height: 32px;
		padding-left:40px;
		font-size:22px;
		margin-top:20px;
		margin-bottom:20px;
	}
}

#sitemap ul li:hover{
	opacity:0.5;
}