@charset "UTF-8";
#billboard .bg {
	background: transparent url(../img/voice/mv_01_pc.jpg) no-repeat;
	background-size: cover;
	background-position: 30% center;
}
/* =====================================================================
*    実例一覧 / お客様の声
* =================================================================== */

.voice-wrap{
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
	gap: 40px 0;
}

.voice-box{
	
	width: 49%;
	
	background: #ffe1c7;
	
	position: relative;
}
#voiceList #section01 .ttl {
	display: block;
	position: relative;
	color: #fff;
	font-size: 112.5%;
	font-weight: bold;
	text-align: center;
	line-height: 3em;
	background: #ed6c00;
	transition: 0.4s;
}
#voiceList #section01 {
	padding: 3%;
}
#voiceList #section01 > div {
	width: 49%;
	margin-right: 2%;
	float: left;
}
#voiceList #section01 > div .imgWrap {
	position: relative;
	aspect-ratio: 470 / 310;
}

#voiceList #section01 > div .imgWrap img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#voiceList #section01 > div .imgWrap .tag {
	position: absolute;
		display:none;
	width: 20%;
	top: 2%;
	left: 2%;
	padding: 0.55em 1em 0.4em;
	text-align: center;
	border: 1px solid #ed6c00;
	background: #fff;
}
#voiceList #section01 > div .imgWrap .tag.nobrand {
	display: none;
}
#voiceList #section01 > div:nth-child(even) {
	margin-right: 0;
}
#voiceList #section01 .inner p:nth-child(1) {
	border-right: 1px solid #646464;
}
#voiceList #section01 .btn a {
	display: block;
	color: #fff;
	padding: 1em 0 0.9em;
	text-align: center;
	background: #353535;
	position: relative;
	transition: 0.4s;
}
#voiceList #section01 .btn a:after {
	position: absolute;
	display: block;
	content: '〉';
	font-size: 100%;
	top: calc(50% - 0.5em);
	left: auto;
	right: 3%;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
	transition: 0.2s;
}
#voiceList #section01 > div:hover .btn a,
#voiceList #section01 .btn a:hover {
	background: #121212;
}
#voiceList #section01 > div:hover .btn a:after,
#voiceList #section01 .btn a:hover:after {
	right: 3.5%;
}



#voiceList #section01 .navigation,#voiceList #section01 .navigation .nav-links{
	width: 100%;
	text-align: center;
}

#voiceList #section01 .navigation .nav-links a,
#voiceList #section01 .navigation .nav-links span {
	font-size: 112.5%;
	display: inline-block;
	padding: 0 1em;
}
#voiceList #section01 .navigation .nav-links span.current {
	color: #fff;
	background: #ed6c00;
}
#voiceList #section01 .navigation .nav-links a,
#voiceList #section01 .navigation .nav-links span {
	color: #ed6c00;
	display: inline-block;
	padding: 0.8em 1em;
	margin: 0 0.25em;
	background: transparent;
	border: 1px solid #ed6c00;
	transition: 0.4s;
}
#voiceList #section01 .navigation .nav-links a.next,
#voiceList #section01 .navigation .nav-links a.prev {
	border: none;
	padding: 0.8em 0.5em;
}
#voiceList #section01 .navigation .nav-links a.next {
	margin-right: -4.5em;
}
#voiceList #section01 .navigation .nav-links a.prev {
	margin-left: -4.5em;
}
#voiceList #section01 .navigation .nav-links a:hover {
	opacity: 0.6;
	transition: 0.4s;
}

/* =====================================================================
*    実例詳細 / お客様の声
* =================================================================== */
#voiceDetail #section01 {
	padding: 3%;
}
#voiceDetail #section01 .columnWrap {
	margin-bottom: 5%;
}
#voiceDetail #section01 .ttl {
	display: block;
	position: relative;
	color: #fff;
	font-size: 150%;
	margin-bottom: 3%;
	text-align: center;
	line-height: 2.2em;
	background: #ed6c00;
	transition: 0.4s;
}
#voiceDetail #section01 > div .tag {
	text-align: center;
	margin-bottom: 3%;
}
#voiceDetail #section01 > div .tag span {
	font-size: 150%;
}
#voiceDetail #section01 > div .imgWrap {
	position: relative;
}
#voiceDetail #section01 .column li {
	margin-bottom: 10%;
}
#voiceDetail #section01 > div ul li .txt01 {
	font-size: 137.5%;
	font-weight: bold;
	text-align: center;
	padding-bottom: 2em;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
#voiceDetail #section01 > div ul li:nth-child(1) .txt01 {
	padding: 2em;
}
#voiceDetail #section01 > div ul li .txt02 {
	line-height: 2;
}
#voiceDetail #section01 .column li:nth-child(2) .imgWrap,
#voiceDetail #section01 .column li:nth-child(4) .imgWrap {
	float: left;
	width: 55%;
}
#voiceDetail #section01 .column li:nth-child(4) .txtWrap,
#voiceDetail #section01 .column li:nth-child(2) .txtWrap {
	float: left;
	width: 36%;
	padding: 4%;
}
#voiceDetail #section01 .column li:nth-child(3) .imgWrap {
	float: right;
	width: 55%;
}
#voiceDetail #section01 .column li:nth-child(3) .txtWrap {
	float: left;
	width: 36%;
	padding: 4%;
}
#voiceDetail #section01 .blandImg {
	margin: 0 0.1%;
	position: relative;
}
#voiceDetail #section01 .slick-prev,
#voiceDetail #section01 .slick-next {
	right: 0;
	left: 0;
	margin: auto;
	width: 45px;
	height: 45px;
	border-radius: 0;
	background: rgba(237,108,0,0.9);
	z-index: 990;
}
#voiceDetail #section01 .slick-prev {
	left: -80%;
}
#voiceDetail #section01 .slick-next {
	right: -80%;
}
#voiceDetail #section01 .slick-prev:before,
#voiceDetail #section01 .slick-next:before {
	display: block;
	margin-top: -0.1em;
	font-weight: bold;
}
#voiceDetail #section01 .slick-prev:before {
	content: '〈';
	padding-right: 0.6em;
}
#voiceDetail #section01 .slick-next:before {
	content: '〉';
	padding-left: 0.6em;
}
#voiceDetail #section01 .slick-dots {
	display: none !important;
}
#voiceDetail #section01 .inner {
	margin-top: 5%;
}
#voiceDetail #section01 .inner p:nth-child(1) {
	border-right: 1px solid #646464;
}
#voiceDetail #section01 .inner .btn {
	float: left;
	background: #333;
	text-align: center;
	width: 50%;
	height: 60px;
	box-sizing: border-box;
}
#voiceDetail #section01 .inner .btn.off {
	opacity: 0.3;
}
#voiceDetail #section01 .inner .btn a {
	display: block;
	color: #fff;
	line-height: 60px;
	text-decoration: none;
	position: relative;
	transition: 0.4s;
}
#voiceDetail #section01 .inner .btn.off a {
	pointer-events: none;
}
#voiceDetail #section01 .inner .btn a:hover {
	background: #505050;
	transition: 0.4s;
}

#voiceDetail .navigation {
	text-align: center;
}
#voiceDetail .navigation h2 {
	display: none;
}
#voiceDetail .navigation div div {
	display: inline;
	padding: 0 2em;
}
#voiceDetail .navigation div div:nth-child(2) {
	border-left: 1px solid #353535;
}

@media only screen and (max-width:1150px) {
}

@media only screen and (max-width:750px) {
	#billboard .bg {
		background: transparent url(../img/voice/mv_01_sp.jpg) no-repeat;
		background-size: cover;
		background-position: center center;
	}
	h2.fix03 {
    font-size: 162.5%;
	}
	h2.fix03 span {
    font-size: 75%;
	}
	
	/* =====================================================================
	*    実例一覧 / お客様の声
	* =================================================================== */
	#voiceList #section01 .voice-box {

    width: 100%;

	}

	#voiceList #section01 .navigation .nav-links a,
	#voiceList #section01 .navigation .nav-links span {
		padding: 0.7em 0.9em;
		margin: 0 0.15em;
	}

	/* =====================================================================
	*    実例詳細 / お客様の声
	* =================================================================== */
	#voiceDetail #section01 .column li {
    margin-bottom: 3%;
	}
	#voiceDetail #section01 .column li div {
		width: 100% !important;
		float: none !important;
		padding: 3% 0 2% !important;
	}
	#voiceDetail #section01 > div ul li .txt01 {
    padding-bottom: 0.5em;
	}
	#voiceDetail #section01 .inner .btn {
    height: 3em;
	}
	#voiceDetail #section01 .inner .btn a {
    line-height: 3;
	}
	

	
}



/* =====================================================================
*    add 2023/11/03
* =================================================================== */

#exhibition{
	margin: 50px 0 0 0;
}

ul.cf {
	max-width: 1024px;
	margin: 5% auto;
	border-bottom: 1px solid rgba(255,255,255,0.6);
	padding-bottom: 3%;
	flex-wrap: wrap;
	display: flex;
}
ul.cf > li {
	width: 32%;
	margin: 0 2% 2% 0;
	background: #ffe1c7;
	float: left;
	position: relative;
}
ul.cf > li > img {
	height: 13vw;
	object-fit: cover;
	font-family: 'object-fit: cover;'; /*IE対策*/
}
ul.cf > li:nth-child(3n) {
	margin-right: 0;
}
ul.cf > li .inner {
	padding: 0 3% 6%;
}
ul.cf > li.fix01 .inner {
    padding: 6% 3% 20%;
}
ul.cf > li .ttl-v {
	text-align: center;
	padding: 5% 0 2%;
	position: relative;
	font-size: 150%;
	letter-spacing: 0.1em;
	border-right: none !important;
}
ul.cf > li .ttl-v img {
	width: auto;
	display: inline;
	max-width: 135px;
}
ul.cf > li .txt01-v {
	font-size: 87.5%;
	text-align: center;
	/*letter-spacing: -0.1em;*/
	margin-bottom: 1em;
	height: 3em;
	line-height: 1.5;
	border-right: none !important;
}
ul.cf > li.fix01 .txt01-v span {
	font-weight: bold;
}
ul.cf > li .txt01-v.fix01 {
	line-height: 1.4;
}
ul.cf > li .txt02-v {
	font-size: 87.5%;
	text-align: center;
	line-height: 1.5;
	height: 4em;
}
ul.cf > li .btnWrap {
	text-align: center;
	width: 80%;
	margin: 3% auto 0;
}
ul.cf > li.fix01 .btnWrap {
	width: 80%;
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;
}
ul.cf > li .btnWrap p {
	width: 48%;
	margin: 0 1%;
	float: left;
	text-align: center;
	border-right: none !important;
}
ul.cf > li.fix01 .btnWrap p {
	width: 80%;
	margin: 0 auto;
	float: none;
}
ul.cf > li .btnWrap p a {
	color: #353535;
	font-size: 75%;
	display: block;
	border: 1px solid #353535;
	border-radius: 40px;
	line-height: 2.5em;
	text-decoration: none;
	position: relative;
	transition: 0.4s;
}
ul.cf > li .btnWrap p a:hover {
	color: #fff;
	background: #353535;
	transition: 0.4s;
}
ul.cf > li .btnWrap p a i {
	font-size: 137.5%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto;
	height: 0.9em;
}
ul.cf > li.fix01 .btnWrap p a i {
	left: 23%;
}
ul.cf > li .btnWrap.fix01 p {
	margin: 0 auto;
	float: none;
}
ul.cf > li.ex .inner .map {
	width: 38%;
	margin: 0 auto 5%;
	text-align: center;
}
ul.cf > li.ex .inner .map a {
	color: #353535;
	font-size: 75%;
	display: block;
	border: 1px solid #353535;
	border-radius: 40px;
	line-height: 2.5em;
	text-decoration: none;
	position: relative;
	transition: 0.4s;
}
ul.cf > li.ex .inner .map a:hover {
	color: #fff;
	background: #353535;
	transition: 0.4s;
}
ul.cf > li.ex .inner .map a i {
	font-size: 137.5%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto;
	height: 0.9em;
}
ul.cf > li.ex .inner .txt01 {
	height: 2em;
	margin-bottom: 0.5em;
}



ul.cf li.ex .dateWrap ul li {
	margin-bottom: 3%;
}
ul.cf li.ex .dateWrap ul li .day-v {
	width: 48%;
	float: left;
	font-size: 87.5%;
	line-height: 1.5;
	border-right: none !important;
}
ul.cf li.ex .dateWrap ul li .btn-v {
	width: 48%;
	float: right;
}
ul.cf li.ex .dateWrap ul li .btn-v a {
	color: #fff;
	text-align: center;
	padding: 0.7em 0 0.6em;
	display: block;
	background: #ed6c00;
	border: 1px solid #ed6c00;
	position: relative;
	transition: 0.4s;
}
ul.cf li.ex .dateWrap ul li .btn-v a:after {
	position: absolute;
	display: block;
	content: '〉';
	font-size: 50%;
	top: calc(50% - 0.5em);
	left: auto;
	right: 3%;
}
ul.cf li.ex .dateWrap ul li .btn-v a:hover {
	opacity: 0.7;
	transition: 0.4s;
}
ul.cf li.ex .note {
	text-align: left;
	font-size: 75%;
}

.navigation.pagination{
	clear: both;
}

@media only screen and (max-width: 750px) {
	#exhibition{
		margin: 40px 0 0 0;
	}
	ul.cf > li {
	  width: 100%;
	  float: none;
	  margin: 0 0 10%;
	}
	ul.cf > li > img {
		height: 64vw;
	}
  }