@charset "utf-8";

/*===============================================
	works
===============================================*/
#works {
	max-width: var(--main-wid);
	margin: 0 auto;
}
#works .menu {
	margin: 0 0 50px;
	display: flex;
	flex-flow: row wrap;
	justify-content:flex-start;
}

#works .menu li {
	width:23%;
	margin: 0 1% 15px;
}
#works .menu li button {
	display: block;
	width:100%;
	padding:10px;
	color:#FFF;
	text-decoration: none;
	text-align: center;
	background-color: var(--main-bg);
	border-radius: 50px;
	border:0;
}
#works .menu li button:hover {
	color:var(--main-bg);
	background-color:#DEDEDE;
}
#works .worksList {
	margin: 0 0 50px;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
#works .worksList::after {
	display: block;
	content:"";
	width:47%;
}
#works .worksList .listItem {
	width:47%;
	margin:0 0 50px;
}
#works .worksList .listItem .img {
	margin: 0 0 5px;
}
#works .worksList .listItem .img img {
	border-radius: 10px;
}
#works .worksList .listItem .tag {
	margin: 0 0 10px;
}
#works .worksList .listItem .tag ul li {
	display: inline-block;
	padding:1px 10px;
	font-size:0.7rem;
	color:#FFF;
	background-color:var(--main-bg);
	border-radius: 30px;
}
#works .worksList .listItem .owner {
	margin:0 0 5px;
	font-size:0.8rem;
}
#works .worksList .listItem .title {
	margin:0 0 10px;
	font-size:1.2rem;
	font-weight: 600;
}
#works .worksList .listItem .txt {
	margin:0 0 10px;
	font-size:0.9rem;
}
#works .worksList .listItem .link {
	text-align: right;
}
#works .worksList .listItem .link a {
	position: relative;
	padding:3px 30px 3px 10px;
	color:#000;
	text-decoration: none;
	border-bottom: 2px dashed #000;
	
}
#works .worksList .listItem .link a:hover {
	color:#FFF;
	background-color:#707070;
}
#works .worksList .listItem .link a::after {
	position: absolute;
	top:4px;
	right: 5px;
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-image: url("../images/common/arrow.svg");
	background-size: contain;
	vertical-align: middle;
}
#works .worksList .listItem .link a:hover::after {
	background-image: url("../images/common/arrow2.svg");
}

@media screen and (max-width:900px){
#works .menu {
	margin: 0 3% 20px;
}
#works .menu li {
	width:48%;
	margin: 0 1% 15px;
}
#works .menu li button {
	font-size:0.9rem;
}
#works .worksList {
	display: block;
	margin: 0 6% 50px;
}
#works .worksList .listItem {
	width:100%;
	margin:0 0 50px;
}
}



/*===============================================
	catalog
===============================================*/
#catalog {
	max-width: 900px;
	margin: 0 auto;
}
#catalog h3 {
	margin: 0 0 25px;
	padding:3px 0 3px 10px;
	font-size:1.2rem;
	border-left: 3px solid var(--main-bg);
}


#catalog .catalogList {
	margin: 0 0 30px;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}


#catalog .catalogList div {
	width: calc(25% - 12px);
	margin: 0 6px 12px;
}
#catalog .catalogList div.b {
	width: calc(33% - 12px);
	margin: 0 6px 12px;
}
/* web */
#catalog .catalogList div.w {
	width: calc(50% - 24px);
	margin: 0 12px 24px;
}
#catalog .catalogList div.w2 {
	width: calc(25% - 12px);
	margin: 0 6px 24px;
}

/*#catalog .catalogList {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120vw;
}
#catalog .catalogList div {
	width: calc(33% - 4px);
	margin: 0 2px 3px;
}


@media screen and (max-width:900px){
#catalog .catalogList{
        height:220vw;
      }
#catalog .catalogList .item{
        width: 50%;
      }
    }*/






@media screen and (max-width:900px){
#catalog {
	margin: 0 5%;
}
#catalog .catalogList div {
	width: calc(33% - 12px);
}
#catalog .catalogList div.b {
	width: calc(50% - 12px);
}
}

/*#catalog .catalogList2 {
display: grid;
gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
#catalog .catalogList2 div {
}*/





/*===============================================
	work
===============================================*/

#work {
	margin: 50px auto 70px;
}
#work .head {
	margin: 0 0 20px;
	padding:0 0 20px;
	border-bottom: 1px solid #CCC;
}
#work .head .mainImg {
	margin: 0 0 50px;
	text-align: center;
}
#work .head .mainImg .tate {
	width: 500px;
}
#work .head .mainImg .yoko {
	width: 800px;
}
#work .head h2 {
	max-width: 900px;
	margin: 0 auto;
	font-size:1.8rem;
	line-height: 1.4;
}
#work .head span {
	display: block;
	font-size:0.8rem;
	color:#808080;
}


@media screen and (max-width:900px){
#work .head {
	margin: 0 0 10px;
	padding:0 0 10px;
}
#work .head .mainImg .tate {
	width: 70%;
}
#work .head .mainImg .yoko {
	width: 100%;
}
#work .head h2 {
	margin: 0 5%;
	font-size:1.3rem;
}
#work .head span {
	font-size:0.8rem;
}	
}


/* detail　*/
.detail {
	max-width: 900px;
	margin: 0 auto 40px;
}
.detail ul.production {
	margin: 0 0 60px;
	font-size:0.9rem;
}
.detail ul.production li {
	margin: 0 0 5px;
}
.detail .detailTxt {
	margin: 0 0 60px;
}
.detail .detailTxt h3 {
	margin:0 0 25px;
	padding:0 0 0 10px;
	font-size:1.4rem;
	font-weight: 500;
	border-left: 3px solid var(--main-bg);
}
.detail .detailTxt p {
	margin:0 0 25px;
	line-height: 1.6;
	font-size:0.9rem;
}

.detail .detailTxt p.site::before {
	content: "WEBサイト";
	margin-right: 5px;
	padding:1px 5px;
	color:#FFF;
	font-size:0.8rem;
	background-color: var(--main-bg);
}
.detail .detailImg {
	max-width: 600px;
	margin: 0 auto 60px;
}
.detail .detailImg p {
	margin: 0 0 25px;
}

.detail .herf {
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
.detail .herf p {
	width:48%;
}


@media screen and (max-width:900px){
.detail {
	margin: 0 5% 40px;
}	
}


/* movie */
#movie {
     max-width: 800px;
     margin: 50px auto 0;
}
.movie_inner {
     position: relative;
     padding-bottom: calc(315 / 560 * 100%);
}
iframe {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: 100%;
}