@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.container{
	margin-top:100px;
}

/* works archive */
.works_list{
	
}

.works_list .main{
	width:auto;
	margin:0;
	padding:3px;
}
.works_list ul{
	list-style:none;
}
.works_list_element{
	display:flex;
	flex-wrap:wrap;
	border:1px #ccc solid;
	padding:6px;
}

.works_list_element div{
    color: #333;
    padding: 3px;
    /*margin-bottom: 3px;*/
}
.works_list_element .photo img{
	/*display:block;*/
	width:240px;
	height:auto;

}
.a-wrap {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 1.5%;
    margin-bottom: 3%;
    transition: all 0.3s ease-in-out;
}

/* works single */
.works_frame{
	display:flex;
	flex-wrap:wrap;
	border: 1px solid #ccc;
}
.works_frame div{
	margin:6px;
}
.works_frame .photo_area{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.works_frame .photo_area img{
	display:block;
	max-width:320px;
	margin:6px;
    box-shadow: 2px 2px 6px 2px #999;
    border-radius: 5px;
}
  
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}