@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: 栃木県住宅協会
	Author: Yamazen Communications co.,ltd.
	Comment: memories sp
	Since2012.10
----------------------------------------------------------- */
	
/*Index
	1.pagetitle
	2.common
	3.list
	4.form
	
----------------------------------------------------------- */






/*1.pagetitle
----------------------------------------------------------------------------------*/
div#contents h1.pttl{
	background:url(../img/sideNav_bk5.gif) repeat 0 0;
}
div#contents h1#memories span.txt{
	background:url(../../photo/img/memories_pttl.png) no-repeat 15px center;
}
div#contents h1#form span.txt{
	background:url(../../photo/img/form_pttl.png) no-repeat 15px center;
}
div#contents h1#memories span.notes{display:none;}





/*2.common
----------------------------------------------------------------------------------*/
div#memories-Top{
	position:relative;
	min-height:155px;
	max-width:600px;
	background-size:100% auto;
}
div#memories-Top a#facebook{
	position:absolute;
	right:0px;
	top:-10px;
}
div#memories-Top img#memories-ttl{
	display:none;
}
div#memories-Top img{
	max-width:100%;
	height:auto;
}
div#memories-Top img#form-btn{
	position:absolute;
	right:5px;
	bottom:50px;
	width:100px;
	z-index: 1000;
}
@media only screen and (orientation : landscape) {
div#memories-Top img#form-btn{
	width:150px;
}
}




/*3.list
----------------------------------------------------------------------------------*/
div#memories-Top ul#memories-Nav{
	position:relative;
	min-height:53px;
	margin:10px 0 20px;
	text-align:center;
	background:url(../img/sideNav_bk5.gif) repeat scroll 0 0;
}
div#memories-Top ul#memories-Nav li{
	display:inline-block;
	font-size:12px;
}
div#memories-Top ul#memories-Nav li.sort{
	width:60px;
	height:25px;
	margin:7px 0 0;
	padding:20px 0 0;
	text-align:center;
	background:url(../../photo/img/nav_sort.png) no-repeat center top;
}

div#memories-Top ul#memories-Nav li.name a,
div#memories-Top ul#memories-Nav li.style a,
div#memories-Top ul#memories-Nav li.keyword img{
	display:none;
}
div#memories-Top ul#memories-Nav li.name,
div#memories-Top ul#memories-Nav li.style,
div#memories-Top ul#memories-Nav li.keyword{
	width:73px;
	height:43px;
	margin:5px 4px 5px 0;
}
div#memories-Top ul#memories-Nav li.name{
	background:url(../../photo/img/btn_name.png) no-repeat 0 0;
}
div#memories-Top ul#memories-Nav li.style{
	background:url(../../photo/img/btn_style.png) no-repeat 0 0;
}
div#memories-Top ul#memories-Nav li.keyword{
	background:url(../../photo/img/btn_word.png) no-repeat 0 0;
}
div#memories-Top ul#memories-Nav li.name ul,
div#memories-Top ul#memories-Nav li.style ul,
div#memories-Top ul#memories-Nav li.keyword span{
	display:none;
	position:absolute;
	top:63px;
	left:50%;
	width:300px;
	margin:0 0 0 -150px;
	border-top:1px solid #329600;
	border-left:1px solid #329600;
}
div#memories-Top ul#memories-Nav li.name ul li,
div#memories-Top ul#memories-Nav li.style ul li{
	float:left;
	width:149px;
	margin:0;
	font-size:14px;
	text-align:center;
	border:1px solid #329600;
	border-top:none;
	border-left:none;
}
div#memories-Top ul#memories-Nav li.name ul li a,
div#memories-Top ul#memories-Nav li.style ul li a{
	display:block;
	padding:5px 0;
	background:#ffffff;
}
div#memories-Top ul#memories-Nav li.name ul li a:hover,
div#memories-Top ul#memories-Nav li.style ul li a:hover{
	color:#ffffff;
	background:#329600;
}
div#memories-Top ul#memories-Nav li.keyword{
	margin:5px 0;
}
div#memories-Top ul#memories-Nav li.keyword span{
	display:block;
	position:absolute;
	top:63px;
	left:50%;
	width:298px;
	margin:0 0 0 -150px;
	text-align:center;
	border:1px solid #329600;
	background:#ffffff;
}
div#memories-Top ul#memories-Nav li.keyword input{
	margin:10px 0 10px;
}
div#memories-Top ul#memories-Nav li.keyword input.w100px{
	width:100px;
}
div#memories-Top ul#memories-Nav li.keyword a{
	display: inline-block;
	padding: 1px 5px;
	color: #000;
	text-decoration: none;
	vertical-align: middle;
	border: 1px solid #adadad;
	background: #e1e1e1;
}
div#memories-Top ul#memories-Nav li.keyword a:hover{
	border: 1px solid #0078d7;
	background: #e5f1fb;
}
ul#memories-list{
	clear:both;
	text-align:center;
}
ul#memories-list li{
	display:inline-block;
	width:140px;
	margin:0 0 10px;
	padding:0 5px;
}
/*ul#memories-list li a img{
	position:relative;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	behavior:url(../common/js/PIE.htc);
}*/

ul#memories-list li a{
	display:block;
	width:140px;
	height:104px;
	background-size:100% auto;
	border-radius:10px;
/*	box-shadow:3px 3px 10px 3px #999999 inset;*/
	-webkit-background-size: cover!important;
	background-size: cover!important;
	background-blend-mode: multiply;
}
ul#memories-list li p{
	margin:5px 0 0;
	font-weight:bold;
}
ul#memories-list li a.vertical{
	width:77px;
	margin:0 auto;
}
ul#memories-list li.c-orange  a:hover{
	box-shadow:0px 0px 0px 5px #ff6400 inset;
}
ul#memories-list li.c-blue  a:hover{
	box-shadow:0px 0px 0px 5px #00a0e6 inset;
}
ul#memories-list li.c-pink  a:hover{
	box-shadow:0px 0px 0px 5px #e82994 inset;
}
ul#memories-list li.c-green  a:hover{
	box-shadow:0px 0px 0px 5px #8ec31f inset;
}

ul#memories-list li.c-orange p{color:#ff6400;}
ul#memories-list li.c-blue   p{color:#00a0e6;}
ul#memories-list li.c-pink   p{color:#e82994;}
ul#memories-list li.c-green  p{color:#8ec31f;}





/*4.form
----------------------------------------------------------------------------------*/

div#contents-Inner h2{
	margin:10px 0;
	padding:15px 10px 10px;
	background:url(../img/sideNav_bk5.gif) repeat 0 0;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	behavior:url(../common/js/PIE.htc);
}
p.txt{
	margin:10px 0 30px;
}

dl#step dt{
	padding:10px 0;
}
dl#step dt img{
	max-width:100%;
	height:auto;
	margin:0 0 10px;
}
dl#step dd{
	padding:0 0 10px;
	border-bottom:1px solid #facde6;
	overflow:hidden;
}
dl#step dd ul.check-btn{
	float:left;
	width:140px;
}
dl#step dd ul.check-btn li{
	margin:0 0 10px;
}
dl#step dd ul.check-btn li input{
	margin:0 5px 0 0;
}

.w100{width:97%;}

div#agreement{
	clear:both;
	height:250px;
	margin:0 0 30px;
	padding:10px 10px 10px 20px;
	border:1px solid #969696;
	background:#ffffff;
	overflow:auto;
}
div#agreement ol li{
	list-style:inside decimal;
	margin:0 0 30px;
}
div#agreement ol ol li{
	list-style:none;
	margin:0;
}

div#submit{text-align:center;}