a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html,
body{
	padding:0;
	margin:0;
	font-family: "メイリオ", "Meiryo", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#232020;
	font-size:14px;
	line-height:24px;
	background:#fff;
}

#wrapper{
	min-width:900px;
}

.inner{
	max-width:900px;
	margin:0 auto;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

img{vertical-align:bottom;}

/* header */

#header{
	border-top:solid 24px #271b11;
	background:#463220;
	color:#fff;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	padding:10px 0;
	box-shadow:0 2px 5px rgba(0,0,0,0.35);
	position:relative;
}

#header h1{
	text-align:center;
	font-weight:bold;
	margin:0 10px 10px;
}

#header ul{
	text-align:center;
}

#header ul li{
	display:inline-block;
}

/* content */

#sec1{
	background:#fff1d6;
	padding:60px 0;
}

#sec1 .item{
	width:433px;
	float:left;
	margin-right:34px;
	background:#fff9f0;
}

#sec1 .item:nth-child(2n+0){margin-right:0;}


#sec1 .item .img{
	position:relative;
	border:solid 4px #774b38;
}

#sec1 .item .img .img_logo{
	position: absolute;
    width: 190px;
    height: 75px;
    z-index: 2;
    bottom: -45px;
    right: -7px;
}

#sec1 .item .box_inner{
	padding:30px 20px 20px;
}

#sec1 .item h2{
	font-size:17px;
	font-weight:bold;
	margin-bottom:20px;
}

#sec1 .item p.text{
	font-size:11px;
	margin-bottom:10px;
	height:100px;
}

#sec1 .item .btn{text-align:center;}

#sec1 .item .btn a{
	display:inline-block;
	height:55px;
	width:170px;
	background:#ccc;
	border-radius:5px;
	box-shadow:0 3px 5px rgba(0,0,0,0.3);
	margin-left:-4px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:15px;
	color:#fff;
	text-decoration:none;
	position:relative;
}

#sec1 .item .btn a:before{
	content:'';
	position:absolute;
	right:5px;
	top:50%;
	margin-top:-4px;
	border-top:solid 5px transparent;
	border-bottom:solid 5px transparent;
	border-left:solid 8px #fff;
	
}

#sec1 .item .btn a:first-child{
	margin-right:20px;
}

#sec1 .item .btn a:last-child{letter-spacing:-2px;}
#sec1 .item .btn a:last-child span span{letter-spacing:0;}

#sec1 .item .btn a.btn_red{background:#bc4616;}

#sec1 .item .btn a.btn_green{background:#7e8e37;}

#sec1 .item .btn a > span{
	position:relative;
	top:50%;
	transform:translateY(-50%);
	display:inline-block;
	text-shadow: 0 5px 5px rgba(0,0,0,0.4);
	padding-top:3px;
}

#sec1 .item .btn a > span span{
	display: block;
    font-size: 13px;
    color: #fff1cb;
    text-shadow: none;
    margin-top: -5px;
}

#sec1 .item .btn a:hover{
	opacity:0.8;
}

#sec2{
	background:#473220;
	padding:55px 0 0px;
	color:#fff;
}

#sec2 h3{
	color:#fff;
	border-bottom:solid 1px #998d83;
	font-size:22px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align:center;
	padding-bottom:18px;
	margin-bottom:30px;
	font-weight:bold;
	text-shadow: 0 2px 5px rgba(0,0,0,0.35);
}

#sec2 ul{
	max-width:556px;
	margin:0 auto;
	text-align: center;
	font-size: 0;
}

#sec2 ul > li{
	display: inline-block;
	margin:0 30px 25px 0;
	
}

#sec2 ul > li:last-child{margin-right:0;}

#sec2 ul > li span{
	display:block;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size:12px;
	text-align:center;
	padding-top:8px;
}

#sec2 ul li a{
	display: block;
	text-decoration:none;
}

#sec2 ul li a:hover{
	opacity:0.8;
}
#sec2 ul li img{
	width: 100%;
}

/* footer */

#footer address{
	background:#271b11;
	font-size:12px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight:bold;
	text-align:center;
	font-style:normal;
	line-height:12px;
	color:#fff;
	padding:10px 0;
	margin:0;
}

/* login */
.login{
	display: table;
	margin: 20px auto;
}

.login input[name="username"], .login input[name="pass"]{
	margin-left: 10px;
}

.login input[type="submit"]{
	display: table;
	margin: 20px auto;
	padding: 5px 20px;
	border-radius: 6px;
	border: solid 4px #463220;
	background-color: #6E4E31;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
}

/* login over */


@media (max-width: 750px) {
	
	#wrapper{min-width:auto;}
	
	#sec1{
		padding-left:10px;
		padding-right:10px;
	}
	
	#sec1 .item{
		float:none;
		margin:0 auto !important;
	}
	
	#sec1 .item:first-child{margin-bottom:30px !important;}
	
	#sec2 h3{
		margin-left:10px;
		margin-right:10px;
	}
	#sec1 .item .btn a{
		display: inline-block;
		vertical-align: top;
		margin-right: 0;
		width: calc(50% - 5px);
		font-size: 12px;
	}
	#sec1 .item .btn a:first-of-type{
		margin-right: 10px;
	}
	#sec2 ul{
		padding: 10px;
		font-size: 0;
	}
	#sec2 ul > li{
		display: inline-block;
		vertical-align: top;
		margin-right: 10px;
		width: calc(50% - 10px);
	}
	#sec2 ul > li:nth-last-of-type(2n){
		margin-right: 0;
	}
	#sec2 ul > li > a{
		display: block;
	}
	#sec2 ul > li img{
		width: 100%;
	}
}

@media (max-width: 560px) {
	
}

@media (max-width: 480px) {
	
	#header ul li:first-child{margin-bottom:10px;}
	
	#sec1{padding:30px 10px;}
	
	#sec1 .item{
		width:100%;
	}
	
	#sec1 .item .img > img:first-child{width:100%;}
	
	#sec1 .item .img .img_logo{
		height:auto;
		width: 45%;
		bottom:-15%;
	}
	
	#sec1 .item p.text{
		height:auto;
	}
}

@media (max-width: 375px) {
	
	#sec2{padding-bottom:30px;}
}

@media screen and (min-width: 769px){
	#sec2 ul > li{
		width: calc((100% - 60px) / 3);
	}
	#sec2 ul > li:nth-last-of-type(3){margin-right:0;}
}