/*---------------
works
---------------*/
.works-header{
  height: 205px;
  width: 100%;
  display: flex;
}
.works-head {
  width: 50%;
  padding: 25px 0 25px 16.6vw;
}
.works-head02 {
  width: 50%;
  background-color: var(--main-color);
}
.works-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--main-color);
}
.works-subtitle {
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--main-color);
}
.works-breadcrumb {
}
.works-breadcrumb span{
  opacity: 0.6;
}
@media all and (max-width: 786px){
	.works-header{
	  height: 267px;
	}
	.works-head {
	  padding: 160px 0 0 20px;
	  width: 45%;
	  height: 100vh;
	  position: initial;
	}
	.works-head02 {
	  width: 55%;
	  background-color: var(--main-color);
	}
	.works-content {
	}
	.works-title {
	  margin-bottom: 8px;
	}
	.works-subtitle {
	}
	.works-breadcrumb {
	}
	.works-breadcrumb span{
	}
}

/*------ article -----*/
.jinr-article.works{
  margin-top: 120px!important;
  min-height: 1800px;
}

/*---------------
works-list
---------------*/
#works-list{
	display: flex;
}
.works-bg{
	width: 16.6vw;
  background-image: url('https://test.landall.jp/wp-content/themes/jinr-child/images/works/works-bg.jpg'); 
}
.works-list{
	margin: 100px auto 0;
	width: 83.4vw;
	max-width: 83.4vw;
	min-height: 1500px;
}
.works-wrap{
  margin: 0 auto;
  max-width: 69.4vw;
}
.works-wrap > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.works-wrap > ul > li{
	position: relative;
	width: calc((100% - 100px) / 3);
	height: auto;
	aspect-ratio: 300 / 195;
	margin-bottom: 24px;
}
.works-wrap > ul:after {
  content: "";
  display: block;
	width: calc((100% - 100px) / 3);
	height: auto;
	aspect-ratio: 300 / 195;
	margin-bottom: 24px;
}
.works-wrap > ul > li .works-img{
	margin-bottom: 24px;
}
.works-wrap > ul > li .works-img img{
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 195;
	object-fit: cover;
}
.works-wrap > ul > li .address{
	color: var(--text-main);
	margin-bottom: 16px;
	letter-spacing: 0.2em;
	text-align: center;
}
.works-wrap > ul > li .works-cat{
	color: var(--text-main);
	letter-spacing: 0.2em;
	text-align: center;
}
@media all and (max-width: 786px){
	#works-list{
		padding-bottom: 950px;
	}
	.works-bg{
		display: none;
	}
	.works-list{
		max-width: 100%;
		margin: 24px 20px;
    width: 100vw;
    padding: 0;
    min-height: initial;
	}
	.works-count{
		margin-bottom: 10px;
		font-size: 20px;
	}
	.works-count span{
		font-size: 32px;
	}
	.works-wrap{
		margin: auto;
		max-width: 100%;
	}
	.works-wrap > ul{
	}
	.works-wrap > ul > li{
		height: 175px;
		width: calc((100% - 12px) / 2);
		padding: 0;
		margin-bottom: 12px;
	}
	.works-wrap > ul:after {
	  display: none;
	}
	.works-wrap > ul > li .works-img{
		margin-bottom: 10px;
	}
	.works-wrap > ul > li .works-img img{
		width: 100%;
	}
	.works-wrap > ul > li .address{
		margin-bottom: 10px;
	}
	.works-wrap > ul > li .works-cat{
	}
}

/*---------------
works-return
---------------*/
#works-return{
  height: 60px;
  padding-bottom: 800px;
}
.works-return{
  height: 60px;
  width: 240px;
  padding: 20px 45px 20px 24px;
  display: flex;
  background: #fff;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}
.works-return .works-return-inner{
  display: flex;
  justify-content: space-between;
  height: 60px;
  width: 240px;
}
.works-return .works-return-inner img{
  transition: transform 0.3s ease-out;
  height: 5px;
  width: 51.5px;
  margin: 7.5px 0;
}
.works-return .works-return-inner p{
  color: var(--main-color);
  font-weight: bold;
  margin: 0;
}
.works-return .works-return-inner:hover img {
  transform: translateX(-10px);
}
@media all and (max-width: 786px){
	#works-return{
		height: 60px;
		width: 100%;
		margin: 80px 0 0;
		padding-bottom: 0px;
	}
	.works-return{
		height: 60px;
	  width: 240px;
	  padding: 20px 45px 20px 24px;
	  display: flex;
	  background: #fff;
	  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
	}
	.works-return .works-return-inner {
	  display: flex;
	  justify-content: space-between;
		height: 60px;
	  width: 240px;
	}
	.works-return .works-return-inner img {
	  transition: transform 0.3s ease-out;
	  height: 5px;
	  width: 51.5px;
	  margin: 7.5px 0;
	}
	.works-return .works-return-inner p {
	  color: var(--main-color);
	  font-weight: bold;
	  margin: 0;
	}
	.works-return .works-return-inner:hover img {
	  transform: translateX(-10px);
	}
}

/*---------------
single-works
---------------*/
/*--
.breadcrumbs{
	margin: 100px auto 0px;
	padding: 30px 0;
	max-width: 960px;
	font-weight: bold;
}
@media all and (max-width: 786px){
	.breadcrumbs{
		margin: 50px auto 0px;
		padding: 20px 0;
		max-width: initial;
		width: calc(100% - 30px);
	}
}
--*/

/*---------------
single-work
---------------*/
.works-detail{
  padding-bottom: 800px;
}
.works-dt-bg{
	display: flex;
	height: 80px;
	width: 100%;
}
.works-dt-bg-l{
	height: 80px;
	width: 12vw;
}
.works-dt-bg-r{
	height: 80px;
	width: 88vw;
	background-color: var(--main-color);
}
.works-visual{
  width: 100%;
  height: 50vw;
  object-fit: cover;
}
.works-visual img{
	width: 100%;
  height: 50vw;
  object-fit: cover;
}
@media all and (max-width: 786px){
	.works-detail{
	  padding-bottom: 950px;
	}
	.works-dt-bg{
		display: flex;
		height: 267px;
		width: 100%;
	}
	.works-dt-bg-l{
		height: 267px;
		width: 45vw;
	}
	.works-dt-bg-r{
		height: 267px;
		width: 55vw;
	}
	.works-visual{
	  height: 195px;
	}
	.works-visual img{
	  height: 195px;
	}
}

/*----- return -----*/
.work-return-wrap{
	margin-top: -30px;
	height: 60px;
	width: 240px;
}
.work-return{
	height: 60px;
  width: 240px;
  padding: 20px 44px 20px 24px;
  display: flex;
  background: #fff;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}
.work-return .work-return-inner {
  display: flex;
  justify-content: space-between;
	height: 60px;
  width: 240px;
}
.work-return .work-return-inner img {
  transition: transform 0.3s ease-out;
  height: 5px;
  width: 51.5px;
  margin: 7.5px 0;
}
.work-return .work-return-inner p {
  color: var(--main-color);
  font-weight: bold;
  margin: 0;
}
.work-return .work-return-inner:hover img {
  transform: translateX(-10px);
}
@media all and (max-width: 786px){
	.work-return-wrap{
		margin-top: 0;
	}
	.work-return{
	}
	.work-return .work-return-inner {
	}
	.work-return .work-return-inner img {
	}
	.work-return .work-return-inner p {
	}
	.work-return .work-return-inner:hover img{
	}
}

/*------ header -----*/
.works-header-dt{
  height: 205px;
  width: 100%;
  display: flex;
}
.works-head-dt {
  width: 50%;
  padding: 25px 0 25px 16.6vw;
}
.works-title-dt {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--main-color);
}
.works-subtitle-dt {
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--main-color);
}
.works-breadcrumb-dt {
}
.works-breadcrumb-dt span{
  opacity: 0.6;
}
@media all and (max-width: 786px){
	.works-header-dt{
		position: absolute;
		top: 0;
	  height: 267px;
	}
	.works-head-dt {
	  padding: 160px 0 0 20px;
	  width: 45%;
	  height: 100vh;
	  position: initial;
	}
	.works-content {
	}
	.works-title-dt {
	  margin-bottom: 8px;
	}
	.works-subtitle-dt {
	}
	.works-breadcrumb-dt {
	}
	.works-breadcrumb-dt span{
	}
}

/*------ content -----*/
.works-content-wrap{
	position: relative;
	min-height: 1500px;
}
.works-content-block01{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 66.9vw;
	background-color: var(--main-color);
	padding: 70px 0 0 16.6vw;
	color: var(--text-sub);
}
.works-content-block01 .contact-header{
	margin-top: 320px;
}
.works-content-block01 .contact-header h2 {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-sub);
}
.works-content-block01 .contact-header h3 {
  font-weight: 700;
  color: var(--text-sub);
}
.works-address{
	letter-spacing: -0.011em;
	font-weight: 700;
	color: var(--text-sub);
}
.works-purpose{
	letter-spacing: -0.011em;
	font-weight: 700;
	color: var(--text-sub);
}
.entry-content{
	margin-top: 40px;
	letter-spacing: -0.011em;
	color: var(--text-sub);
}
@media all and (max-width: 786px){
	.works-content-wrap{
		position: relative;
		min-height: 1350px;
	}
	.works-content-block01{
		position: absolute;
		top: -60px;
		left: 0;
		min-height: 350px;
		width: 100%;
		background-color: #fff;
		padding: 100px 0 0 20px;
		color: var(--text-main);
		z-index: -1;
	}
	.works-content-block01 .contact-header{
		display: none;
	}
	.works-content-block01 h2 {
	  font-weight: 700;
	  margin-bottom: 10px;
	  color: var(--text-sub);
	}
	.works-content-block01 h3 {
	  font-weight: 700;
	  color: var(--text-sub);
	}
	.works-address{
		font-weight: 700;
		color: var(--text-main);
	}
	.works-purpose{
		font-weight: 700;
		color: var(--text-main);
	}
	.entry-content{
		margin-top: 40px;
		letter-spacing: -0.011em;
		color: var(--text-main);
	}
}

/*------ contact -----*/
.works-content-block02{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 58vw;
	background-color: #f5f5f5;
}
.works-content-block02 .container{
	margin: 80px 0 0 115px;
}
.works-content-block02 .contact-header{
	display: none;
}
@media all and (max-width: 786px){
	.works-content-block02{
		position: absolute;
		bottom: auto;
		top: 350px;
		right: 0;
		left: 0;
		width: 100%;
		padding: 80px 20px 0;
	}
	.works-content-block02 .container{
		margin: 35px 0 0;
	}
	.works-content-block01 .contact-header{
		margin-top: 0;
	}
	.works-content-block02 .contact-header h2 {
	  margin-bottom: 8px;
	  color: var(--main-color);
	  font-weight: 700;
	}
	.works-content-block02 .contact-header h3 {
	  color: var(--main-color);
	  font-weight: 700;
	}
	.works-content-block02 .contact-header{
		display: block;
	}
}