/*-----------------------------------------------------------------------------------------------------
ALL SIZE
-------------------------------------------------------------------------------------------------------*/

/*-----------------------works_index*/

/*********************************/
#btn{
	overflow:hidden;
	margin: 0 0 20px;
	}
#btn li{
	padding:4px 12px;
	margin-right:10px;
	float:left;
	cursor:pointer;
	-moz-border-radius:3px;
	-ms-border-radius:3px;
	-o-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:2px;
}
#btn li.active{
	background-color:#FFFFFF;
}
/*********************************/

.navigation {
    float: left;
}

.navigation ul li {
    float: left;
    padding: 0 0 20px 0;
}


ul.latest_list {
list-style: none;
position: relative;
margin: 0 auto;
height: auto;
}
ul.latest_list li {
display: block;
color: #636363;
}



ul li .list_title {
width: auto;
padding: 0 15px;
line-height: 22px;
margin-bottom: 15px;
}
ul li .list_title h4 {
padding: 10px 0;
margin-bottom: 5px;
font-weight: normal;
border-top: #666464 1px solid;
border-bottom: #666464 1px solid;
}
ul li .list_title h4 a {
text-decoration: none;
color: #666464;
}
ul li .list_title h4 a:hover {
	text-decoration: none;
		color: #878787;
}
ul li p.list_category {
font-weight: bold;
border-bottom: #666464 1px solid;
padding-bottom: 10px;
margin-bottom: 10px;
}
ul li p.works_title, .works_category {
font-weight: bold;
margin-bottom: 7px;
}

/*-----------------------works_single*/

.works_outline {
margin: 0 auto;
font-weight: bold;
}
.works_outline p.title {
font-size: 15px;
float: left;
width: 48%;
}
.works_outline p.category {
font-size: 15px;
float: right;
width: 48%;
margin-bottom: 20px;
}
.works_detail {
padding-top: 20px;
border-top: 1px #666464 solid;
}
.works_detail img {
/*margin:0 auto 10px; */
margin:0 10px 10px 0px;
max-width: 100%;
height: auto;
display:block;
}
.works_text {
margin-bottom: 60px;
}

/*-----------pager*/
#pager {
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
padding: 0px 0 40px 0;

}
#pager ul {
padding-top: 40px;
line-height: 100%;
}
#pager li {
padding: 0 40px;
display: inline;
line-height: 100%;
}

/*-----------------------news*/


/*------main*/

.news_area .main {
margin: 0;
width: 75%;
float: left;
}
.news_area article {
margin-bottom: 60px;
}
.news_area article h3 {
color: #666464;
font-size: 14px;
text-align: left;
margin-bottom: 30px;
}
.news_area article h3 a:hover {
color: #878787;
text-decoration: none;
}
.news_area article .post_data {
font-size: 12px;
margin: -2px 0 4px;
color: #666464;
}
.news_area article .post_data a:hover {
color: #878787;
}
.news_area article .post_text {
padding-bottom: 60px;
border-bottom: #666464 1px solid;
}
.news_area article .post_text p {
margin-bottom: 25px;
}
.news_area article .post_text p:last-child {
margin-bottom: 0;
}
.news_area article .post_text p a {
text-decoration: underline;
}
.news_area article .post_text p a:hover {
text-decoration: none;
color: #878787;
}
.news_area article .post_text p img {
margin: 0 auto 30px;
display: block;
max-width: 100%;
height: auto;
}


/*--------------wp-caption*/

.wp-caption img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}



/*---------------workshop*/
p.ws_before, p.ws_close{
width:100%;
text-align:center;
font-weight:bold;
padding:10px 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:20px auto;
}

p.ws_before{	background:#DFDFDF;}
p.ws_close{	background:#F5DBDB;color:#d80f2c;}


/*table _ contactform*/
.wsform{
	width:100%;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #CCC;
	margin:30px auto;
}	
.wsform th, td{
	padding:20px 0px;
	border:none;
}
	
.wsform th{width:25%; }
.wsform td{width:75%; padding-left:20px;}
.mark{color:#d80f2c; font-weight:bold;}
.red{color:#d80f2c; display:inline-block; margin-left:15px;}

.check{text-align:center; }
.attention{
	 -moz-box-sizing: border-box;
    box-sizing: border-box;
	width:100%;
	background-color:#d8d5d3;
	 padding:30px 25px;
	 font-weight:bold;
	 margin:25px auto;}

.wsform span.wpcf7-list-item {
display: block;
margin:3px 0;
height:auto;
}


/*------aside*/
aside {
margin: 0;
width: 20%;
float: right;
}
aside .widget {
margin-bottom: 25px;
}
aside .widget h4 {
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: #666464 1px solid;
}
aside .widget ul {
margin: 20px auto 90px;
list-style: none;
overflow: hidden;
}
aside .widget ul li {
margin-bottom: 10px;
}
aside .widget ul li a:hover {
color: #878787;
}

aside .widget ul.children{
/*display:none;*/
margin: 10px 0 0;
}
aside .widget ul.children li{
padding-left: 10px;
font-size:12px;
letter-spacing:1;
}


/*************************************************************
pagenavi
*************************************************************/
.wp-pagenavi {
clear: both;
margin: 30px auto 30px;
text-align:center;
width:100%;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
/*border: 1px solid #666464;*/
padding: 4px 6px;
margin: 0 8px 0 0;
font-size: 14px;
color: #666464;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-bottom: 1px solid #878787;
color: #666464;
}
.wp-pagenavi span.current {
font-weight: nomal;
}




/*-----------------------------------------------------------------------------------------------------
1025px以上
-------------------------------------------------------------------------------------------------------*/

@media screen and (min-width : 1025px) {

#btn{
padding-left:15px;
}


/*  Top_Works section  */
ul.latest_list li {
float: left;
width: 33%;
/*height:370px; */
height:320px;



/*margin: 0 10px 40px 0;*/
}
/*ul.latest_list li:nth-child(3n+0) {margin-right: 0;}*/

ul.latest_list li img.list_img {
width: 300px;
/*height: 170px; */
padding: 15px 15px 20px 15px; 
vertical-align: top;
border-left:#f3f2f1  1px solid;
}
ul.latest_list li:hover {
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
background: #FFFFFF;
border-radius: 5px;        /* CSS3草案 */
-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
-moz-border-radius: 5px;   /* Firefox用 */
}

}

/*-----------------------------------------------------------------------------------------------------
ブラウザの幅1024pxまで
-------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {
/*  Top_Works section  */
ul.latest_list{
	height:auto;}


ul.latest_list li {
display: block;
color: #636363;
width:45%;
margin-right:5%;
/*float: left;*/
/*width: 30%;*/
height:440px;
}

ul.latest_list li img.list_img {
width: 100%;
height: auto;
padding: 0 0 20px;
}
ul li .list_title {
width: auto;
padding: 0;
}

.faq_contact .button{
width:90%;}


/*filter*/
ul.filter_list{padding-left:0;}
.filter_w .mix{
	display:inline-block;
	width:45%;
}
	

}

/*-----------------------------------------------------------------------------------------------------
ブラウザの幅768pxまで
-------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:767px) {
/*  Top_Works section  */
ul.latest_list {
max-width: 100%;
margin: 0 auto;
}
ul.latest_list li {
display: block;
color: #636363;
float: left;
width: 100%;
height: auto;
margin: 0 auto 30px;
}
ul.latest_list li img.list_img {
width: 100%;
height: auto;
padding: 0 0 20px;
}
ul li .list_title {
width: auto;
padding: 0;
}
/*-----------------------works_single*/

.works_outline p.title {
float: none;
width: 100%;
}
.works_outline p.category {
float: none;
width: 100%;
}
.works_detail {
padding-top: 20px;
}
.works_detail img {
margin-bottom: 5%;
}
.works_text {
margin-bottom: 20px;
}
.faq_contact .button {
    width: 90%;
}


/*-----------pager*/
#pager {
margin: 0 auto;
text-align: center;
margin-bottom: 0;
}
#pager li {padding: 0 10%;}



/*-----------------------news*/

/*------main*/

.news_area .main {
margin: 0 auto 100px;
width: 100%;
float: none;
}



/*-----------------------workshop*/

p.ws_before, p.ws_close{padding:5%;  width:auto;}


/*table contactform*/
.wsform{
	border:none;
	overflow:hidden;}

.wsform th{
  width:98%;
  display:block;
  margin: 0 auto;
  border:none;
  background-color:#D8D8D8;
  padding:10px;
}
.wsform td{
  display: list-item;
  list-style-type:none;
  width: 100%;
  padding-left:0;
  border-top: none !important;
}





/*------aside*/
aside {
margin: 0;
width: 100%;
float: none;
}
aside .widget {
margin-bottom: 25px;
}
aside .widget h4 {
font-weight: bold;
text-align: center;
margin-bottom: 0;
padding-bottom: 10px;
border-bottom: #666464 1px solid;
}
aside .widget ul {
margin: 0 auto 90px;
list-style: none;
overflow: hidden;
}
aside .widget ul li {
margin-bottom: 0;
}
aside .widget ul li a {
display: block;
height: auto;
padding: 10px;
border-bottom: #666464 1px dotted;
}
aside .widget ul li a:hover {
background-color: #fff;
}
}