@charset "utf-8";
/*
#case .mainTitle{
background: url("../images/title_bg_g.png")
}
*/

/*header whitestyle*/
header:not(.fixed):not(.active){
 border-bottom: none;
 background: none;
}
header:not(.fixed):not(.active) > div{
 border-bottom: 1px rgba(255,255,255,.2) solid;
}
header:not(.fixed):not(.active) #logo{
 background: url("../images/logo_wh.svg") no-repeat left top /100% auto;
}
header:not(.fixed):not(.active) #logo img{
 opacity: 0;
}

@media screen and (min-width: 769px) {/*PC white header */
header:not(.fixed) #gnaviList > li > a{
  color: #fff;
 }
}/*-PC only-*/
@media screen and (max-width: 768px) {/*SP white header */
header:not(.fixed):not(.active) .menu span{
  background: #fff;
 }
}/*-SP only-*/

/**/
.mainTitle{
background: url("../images/case_mv.jpg") no-repeat left top/cover;
 padding-bottom: 96px;
}
.mainTitle h1 .en,
.mainTitle h1 .ja{
 color: #fff;
}
@media screen and (max-width: 768px) {/* SP mainTitle*/
.mainTitle{
background: url("../images/case_mv_sp.jpg") no-repeat left top/cover;
 padding-top: 211px;
 padding-bottom: 183px;
}

}/*-SP only-*/

#caseDetail h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

/* archive */

.termLink{
	display: flex;
 flex-flow: row wrap;
	gap:1em
}


.termLink li a{
	border: 1px solid var(--gray);
	border-radius: calc(infinity * 1px);
  font-size: min(1vw , 13px);
	padding: .5em 1em;
	line-height: 1;
	color: var(--gray);
	display: block;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}


.termLink li.current a{
	color: var(--wh);
	background: var(--base);
	border-color: var(--base);
}
/* ホバーで反転 */
.termLink li a:hover{
	color: var(--wh);
	background: var(--base);
	border-color: var(--base);
}
/* ALLボタン：少し大きく。全件表示(アーカイブ)時は選択状態に */
.termLink a[href$="/case/"]{
	font-size: 15px;
	padding: .62em 1em;
	width: 123px;          /* 「店舗・商業施設」ボタンと横幅を統一 */
	text-align: center;
	box-sizing: border-box;
}
body.post-type-archive-case .termLink a[href$="/case/"]{
	color: var(--wh);
	background: var(--base);
	border-color: var(--base);
}

#caseList ul{
	gap:50px;
	flex-wrap: wrap;
  justify-content: flex-start;
}

#caseList ul li {
  width: calc((100% - 150px) /4);
}
/* カードのホバー：画像・文字ともに少し薄く */
#caseList ul li a:hover,
#caseRecentList li a:hover{
  opacity: .7;
}

#caseList ul li figure {
	margin-bottom: 30px;
}
#caseList ul li figure img{
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#caseList ul li h2{
	font-size: 16px;
	margin-bottom: .8em;
	line-height: 1.5; /* 2行になったときの行間を広げる */
}

#caseList li p {
  color: var(--gray);
  font-size: 12px;
	margin-bottom: .3em
}




/* detail*/

#caseDetail .outlineBox{
	gap:5.8vw;
	align-items: center;
	margin-bottom: 100px;
}
#caseDetail .outlineBox > div{
	width: calc(50% - 5.8vw);
}

#caseDetail .outlineBox > figure{
	width: 50%
}

#caseDetail .outlineBox dt,
#caseDetail .outlineBox .details h3{
	color: var(--gray);
  font-size: 12px;
}
#caseDetail .outlineBox .details h3{
	margin-bottom: 1em;
}

#caseDetail .outlineBox .details{
	margin-bottom: 1.5em;
	font-size: 14px
}

#caseDetail .outlineBox dl{
	display: flex;
	color: var(--gray);
  flex-wrap: wrap;
	gap:2em 0
}

#caseDetail .outlineBox dl dt{
	width: 5em;
	border-right: 1px solid #eee;
  line-height: 1;
	font-size: 12px;
}


#caseDetail .outlineBox dl dd{
	padding-left: 1em;
	width: calc(100% - 5em);
	line-height: 1;
	font-size: 12px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(50% - 10px), 1fr));
  gap: 20px;
	padding-bottom: 82px;
	border-bottom: 1px #DDDDDD solid;
}
.gallery figure{
	max-height: 400px;
	overflow: hidden;
}
.gallery img {
  width: 100%;
	height: 400px;
object-position: center;
  object-fit: cover;
  
}

#caseRecentList h3{
 display: flex;
 align-items: center;
 gap:0 10px;
 margin-bottom: 50px;
 font-size: 14px;
 color: var(--green);
}
#caseRecentList h3 .en{
 display: flex;
 align-items: center;
 gap:0 10px;
 color: var(--gray);
 font-size: 16px;
}
#caseRecentList h3 .en::after{
 content: "";
 display: block;
 width: 13px;
 height: 1px;
 background: #EEEEEE;
}

#caseRecentList ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 50px;
}

#caseRecentList li {
  width: calc((100% - 150px) /4);
}

#caseRecentList li figure {
	margin-bottom: 30px;
}
#caseRecentList li figure img{
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#caseRecentList li h4{
	font-size: 16px;
	margin-bottom: .8em;
	line-height: 1.5; /* 2行になったときの行間を広げる */
}

#caseRecentList li p {
  color: var(--gray);
  font-size: 12px;
	margin-bottom: .3em
}

@media screen and (max-width: 768px){
	.post-type-archive .acTrg{
		border: 1px solid var(--base);
  border-radius: calc(infinity * 1px);
  font-size: 13px;
  padding: .5em 1em;
  line-height: 1;
  color: var(--wh);
  display: block;
		background: var(--base);
		width: 88.3%;
		margin:0 auto 1em;
	}
	
	.termLink{
		gap:10px;
		flex-wrap: wrap
	}
	.termLink li{
		width: auto;
	}
	.termLink li a {
  font-size: 13px;
	}
	#caseList ul li{
		width: 100%;
		margin-bottom: 40px
	}
	#caseList ul li figure {
  margin-bottom: 15px;
}
	.single-case .mainTitle{
		margin-bottom: 0
	}
	#caseDetail .inner{
		width: 100%;
	}
	#caseDetail .outlineBox{
	margin-bottom: 50px;
		display: flex;
		flex-direction: column-reverse;
}
	#caseDetail .outlineBox > div{
		margin-bottom: 30px;
		width: 88.3%;
	}
	#caseDetail .outlineBox dl{
		gap:1.2em 0;
	}
	#caseDetail .outlineBox > figure {
  width: 100%;
}
	#caseDetail .gallery {
  display: block;
		width: 88.3%;
		margin: auto
}
	#caseDetail .gallery figure{
		margin-bottom: 10px
	}
 #caseDetail .right{
  text-align: center !important;
 }
	#caseRecentList ul{
		display: block;
  padding-right:12.85vw;
	}
	/*
	#caseRecentList ul li{
		width: 100%
	}*/

 #caseRecentList .slick-list{
  overflow: visible;
 }
 #caseRecentList .slick-slide{
  margin-right: 12.3vw;
 }
}