@charset "UTF-8";

.main_content{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/*//////////////////////////// content ////////////////////////////*/
.works_cat{
	font-size: 16px;
  font-weight: 700;
  background-color: var(--col02);
  color: var(--white);
  display: inline-block;
  padding: 0.4em 1em 0.5em 1em;
}
.page_ttl{
	font-size: 30px;
	line-height: 1.6;
	margin-top: 45px;
}
.main_content .content_tags ul{
	display: flex;
	margin-top: 35px;
}
.main_content .content_tags ul li{
	font-size: 16px;
	border: 1px solid #93a2aa;
	border-radius: 20px;
  padding: 0.3em 1em 0.4em 1em;
}
.main_content .content_tags ul li + li{
	margin-left: 25px;
}
.main_img{
	margin-top: 45px;
}
.main_copy{
	font-size: 36px;
	line-height: 1.6;
	padding-bottom: 30px;
	border-bottom: 1px solid #000;
	margin-top: 40px;
}
.prof_wrap{
	margin-top: 35px;
}
.prof_wrap .katagaki{
	font-size: 16px;
	font-weight: 700;
}
.prof_wrap .name{
	font-size: 24px;
	font-weight: 700;
	margin-top: 25px;
}
.prof_wrap .year{
	font-size: 14px;
	margin-top: 15px;
}
.content_wrap{
	border-bottom: 1px solid #000;
	margin-top: 85px;
	padding-bottom: 100px;
}
.singleColumn.typeTtl{
	font-size: 24px;
	line-height: 1.6;
}
.singleColumn.typeText{
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
}

.typeTtl + .typeText{
	margin-top: 35px;
}
.typeText + .typeText{
	margin-top: 30px;
}
.typeText + .typeImg{
	margin-top: 45px;
}
.typeImg + .typeImg{
	margin-top: 40px;
}
.typeImg + .typeTtl{
	margin-top: 90px;
}


/*--------------------PCmax--------------------*/
@media all and (min-width:1481px){
}
/*--------------------PC--------------------*/
@media all and (min-width:768px){
}
/*--------------------SP--------------------*/
@media all and (max-width:767px){
	/*.works_cat{
		font-size: 16px;
	  font-weight: 700;
	  background-color: var(--col02);
	  color: var(--white);
	  display: inline-block;
	  padding: 0.4em 1em 0.5em 1em;
	}*/
	.page_ttl{
		font-size: 22px;
	/*	line-height: 1.6;*/
		margin-top: 30px;
	}
	.main_content .content_tags ul{
	/*	display: flex;*/
		margin-top: 20px;
	}
	.main_content .content_tags ul li{
		font-size: 14px;
		/*border: 1px solid #93a2aa;
		border-radius: 20px;*/
	/*  padding: 0.3em 1em 0.4em 1em;*/
	}
	.main_content .content_tags ul li + li{
		margin-left: 12px;
	}
	.main_img{
		margin-top: 30px;
	}
	.main_copy{
		font-size: 28px;
/*		line-height: 1.6;*/
		padding-bottom: 15px;
/*		border-bottom: 1px solid #000;*/
		margin-top: 20px;
	}
	.prof_wrap{
		margin-top: 20px;
	}
	/*.prof_wrap .katagaki{
		font-size: 16px;
		font-weight: 700;
	}*/
	.prof_wrap .name{
		font-size: 20px;
	/*	font-weight: 700;*/
		margin-top: 15px;
	}
/*	.prof_wrap .year{
		font-size: 14px;
		margin-top: 15px;
	}*/
	.content_wrap{
	/*	border-bottom: 1px solid #000;*/
		margin-top: 40px;
		padding-bottom: 50px;
	}
	.singleColumn.typeTtl{
		font-size: 20px;
	/*	line-height: 1.6;*/
	}
	.singleColumn.typeText{
		font-size: 15px;
		/*font-weight: 700;
		line-height: 2;*/
	}

	.typeTtl + .typeText{
		margin-top: 20px;
	}
	.typeText + .typeText{
		margin-top: 15px;
	}
	.typeText + .typeImg{
		margin-top: 20px;
	}
	.typeImg + .typeImg{
		margin-top: 20px;
	}
	.typeImg + .typeTtl{
		margin-top: 45px;
	}

}

/*//////////////////////////// aaa ////////////////////////////*/
.content_list {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 6%;

	li{
 		max-width: 400px;
	 	width: 29%;
	 	a {
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 7px 0px rgba(182, 203, 205, 1);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      background: var(--white);
      padding: 4%;
      	.content_cat{
      		font-size: 16px;
      		font-weight: 700;
      		background-color: var(--col02);
      		color: var(--white);
      		padding: 0.5em 0.2em 0.5em 0.8em;
      	}
        .img {
          width: 100%;
          height: auto;
          aspect-ratio: 37 / 23;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          display: block;
          margin-bottom: 20px;
      	}
      	.content_ttl_s{
      		line-height: 2.25;
      		font-size: 16px;
          margin-bottom: 20px;
      	}
      	.content_tags{
      		margin-top: auto;
    			ul{
        		display: flex;
        		flex-wrap: wrap;
    				li {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 0.3em 0.7em 0.4em;
              border: 1px solid var(--black);
              border-radius: 50px;
              margin-right: 10px;
              margin-bottom: 10px;
              white-space: nowrap;
              width: auto;
            }
      		}
        }
      &:hover{
      	opacity: .7;
      }
    }
 }

}

/*.content_more{
  border-radius: 30px;
  max-width: 350px;
  width: 80%;
  height: 50px;
  padding: 0.6em 2em;
  background-color: var(--col02);
  color: var(--white);
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}*/

/*--------------------PCmax--------------------*/
@media all and (min-width:1481px){
}
/*--------------------PC--------------------*/
@media all and (min-width:768px){
	/*.content_more:hover {
	  background-color: #005cb2;
	}*/
}
/*--------------------SP--------------------*/
@media all and (max-width:767px){
	.content_list {
    gap: 30px 0;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
    padding-top: 50px;
			li {
        max-width: 100%;
        width: 100%;
	        & a {
            .content_ttl_s {
              line-height: 1.72;
              font-size: 16px;
              margin-bottom: 16px;
            }
						.content_tags {
					    & ul {
				        li {
				            margin-right: 5px;
				            font-size: 14px;
				        }
					    }
						}

	        }
      }
	}

	/*.content_more {
    width: 70%;
  	margin-top: 30px;
  }*/

}





/*//////////////////////////// aaa ////////////////////////////*/

/*--------------------PCmax--------------------*/
@media all and (min-width:1481px){
}
/*--------------------PC--------------------*/
@media all and (min-width:768px){
}
/*--------------------SP--------------------*/
@media all and (max-width:767px){
}