@charset "UTF-8";
/* CSS Document */

.content_examples{
}
.content_examples ul{
	width:90%;
	max-width:1400px;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}
.content_examples ul li{
	width:23.5%;
	list-style:none;
	margin:0 2% 70px 0;
	position:relative;
	border-bottom:0.5px solid #666;
	padding-bottom:40px;
	
}
.content_examples ul li:nth-child(4n){
	margin:0 0 70px 0;
}
.content_examples ul li dt{
	overflow:hidden;
	position:relative;
	height:40vw;
	max-height:380px;
}
.content_examples ul li dt img{
	object-fit:cover;
	height:100%;
	width:100%;
}
.content_examples ul li dd{
	position:relative;
}
.content_examples ul li .arrowbtn{
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	position:absolute;
	bottom:0;
}
.content_examples ul li:hover .arrowbtn::after{
    right: 10px;
    width: 30px;
    border-right: 2px solid #004098;
    border-bottom: 1px solid #004098;
}

.content_examples ul li dt h2{
	position:absolute;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	top:0;
	left:0;
	font-weight:normal;
	line-height:1em;
}
.content_examples ul li dt h2 span{
	background:#fff;
	padding:0.5em 0.2em;
	text-align:center;
}
.content_examples ul li h3{
	font-size:105%;
	line-height:1.5em;
	margin:1em 0;
}
.content_examples ul li p{
	font-size:70%;
	line-height:1.7em;
}
.content_examples ul li p a{
	border:1px solid #ccc;
	line-height:1em;
	padding:3px 10px;
	margin-right:5px;
	margin-bottom:5px;
	display:inline-block;
}
.content_examples ul li p a:first-child{
	display:none;
}
.content_examples ul li a .arrowbtn{
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	margin:10px 0 0 0;
	position:absolute;
	bottom:0;
}
.content_examples ul li a:hover .arrowbtn::after{
    right: 10px;
    width: 30px;
}


.pagination{
	text-align:center;
	font-size:130%;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	margin-bottom:50px;
}
.pagination .page-numbers{
	margin:0 0.2em;
}
.pagination .page-numbers.current{
	font-weight:bold;
	color:#004098;
}
.pagination .next.page-numbers,
.pagination .prev.page-numbers{
	font-size:70%;
}
.pagination .next.page-numbers{
	margin:0 0 0 20px;
}
.pagination .prev.page-numbers{
	margin:0 20px 0 0;
}
.pagination .next.page-numbers:after{
	content: url(https://www.kinoshita-koumuten.co.jp/img/arrow_a_b.svg);
	display: inline-block;
	width: 4px;
	height: 4px;
	margin:0 0 0 5px;
}
.pagination .prev.page-numbers:before{
	content: url(https://www.kinoshita-koumuten.co.jp/img/arrow_a_b_left.svg);
	display: inline-block;
	width: 4px;
	height: 4px;
	margin:0 5px 0 0;
}


/* ---- contents.examples_single ----- */
.content_examples_single{
	width:90%;
	max-width:1400px;
	margin:auto;
	
}
.content_examples_single .mainV{
}
.content_examples_single .mainV dt{
	overflow:hidden;
	text-align:center;
	background:#f5f5f5;
	height:500px;
}
.content_examples_single .mainV dt img{
	object-fit:cover;
	height:100%;
	width:100%;
	object-position:50% 50%;
}
.content_examples_single .mainV dt img.spView{
	display:none;
}


.content_examples_single .mainV .mainV_inner{
	width:100%;
	margin:50px auto 70px 0;
}
.content_examples_single .mainV .mainV_inner h3{
	font-size:110%;
	margin-bottom:0.5em;
}
.content_examples_single .mainV .mainV_inner h2{
	font-size:160%;
	line-height:1.5em;
	margin:0 0 30px 0;
}

.content_examples_single .mainV .mainV_inner .info{
	margin-top:50px;
	width:fit-content;
}
.content_examples_single .mainV .mainV_inner .info h2{
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	margin:0 0 10px 0;
	font-size:1.1rem;
}
.content_examples_single .mainV .mainV_inner .info table{
}
.content_examples_single .mainV .mainV_inner .info table tbody{
}
.content_examples_single .mainV .mainV_inner .info table tr{
		border-bottom:1px dotted #ccc;
}
.content_examples_single .mainV .mainV_inner .info table tr:first-child{
		border-top:1px dotted #ccc
}
.content_examples_single .mainV .mainV_inner .info table tr td{
	font-size:90%;
	line-height:1.7em;
	padding:0.3em 2em;
}
.content_examples_single .mainV .mainV_inner .info table tr td:first-child{
	width:6em;
}
.content_examples_single .mainV .mainV_inner .info table tr td:last-child{
	padding-left:1em;
}
.content_examples_single .mainV .mainV_inner .info table tr td:last-child:before{
	content:"|";
	font-size:100;
	color:#ccc;
	margin:0 1em 0 0;
}

.content_examples_single .detail{
		display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.content_examples_single .detail li{
	width:47%;
	list-style:none;
	margin:0 0 70px 0;
}
.content_examples_single .detail li dt{
	width:100%;
	height:400px;
	overflow:hidden;
	text-align:center;
	background:#f5f5f5;
	margin-bottom:30px;
}
.content_examples_single .detail li dt img{
	height:100%;
	width:100%;
	object-fit:contain;
}

.content_examples_single .detail li .detail_inner{
	width:100%;
	margin:10px auto 0;
}
.content_examples_single .detail li .detail_inner h2{
	font-size:120%;
	line-height:1.5em;
}

.content_examples_single .detail li .detail_inner h6{
	font-size:0.8rem;;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	margin-bottom:20px;
}


.content_examples_single .movie{
	background:#f5f5f5;
	text-align:center;
	margin-bottom:100px;
	position:relative;
}
.content_examples_single .movie a{
	width:100%;
	max-width:600px;
	display:block;
	margin:auto;
}
.content_examples_single .movie a img{
	width:100%;
}

.content_examples_single .movie:before{
	font-size:3rem;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	content:"MOVIE";
	position:absolute;
	top:-0.8rem;
	left:1rem;
}


.content_examples_single .voice{
	width:calc(100% - 100px);
	margin:auto;
	display:flex;
	justify-content:space-between;
}
.content_examples_single .voice li{
	list-style:none;
	width:48%;
	padding:50px 5%;
	border-radius:20px;
}
.content_examples_single .voice li h2{
	font-size:120%;
	display:block;
	width:100%;
	vertical-align:sub;
	line-height:1.2em;
	margin:0 0 1em 0;
}
.content_examples_single .voice li h2 span{
	text-align:right;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	font-size:70%;
	float:right;
}
.content_examples_single .voice li p{
}
.content_examples_single .voice li p{
	background-image: linear-gradient(180deg, #ccc 0.5px, transparent 1px);
	background-size: 100% 1.75rem;
	padding-bottom: 1px;
}
.content_examples_single .voice li:first-child{
	background:#faf3da;
	position:relative;
	margin:0 2% 0 0;
}
.content_examples_single .voice li:first-child:before {
  content: "";
  position: absolute;
  top: 20%;
  left: -60px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 50px solid #faf3da;
}
.content_examples_single .voice li:first-child:after{
	content:"木下工務店のここが良かった";
	font-size:0.8rem;
	font-weight:bold;
	position:absolute;
	top:15px;
	left:-2px;
	background:#e2cb7c;
	padding:0 30px;
	line-height:1.7em;
	border-radius:0px 20px 20px 0;
}
.content_examples_single .voice li:last-child{
	background:#f3f2ee;
	position:relative;
}
.content_examples_single .voice li:last-child:before {
  content: "";
  position: absolute;
  top: 70%;
  right: -60px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 50px solid #f3f2ee;
}

.content_examples_single .tag{
	font-size:90%;
	margin:40px 0 40px 0;
	border-top:1px dotted #ccc;
	border-bottom:1px dotted #ccc;
	padding:20px 0;
}
.content_examples_single .tag .tagTitle{
	font-size:150%;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	margin:0 0 10px 0;
}
.content_examples_single .tag a{
	padding:0.1em 1.5em;
	margin:0 7px 0 0;
	background:#f5f5f5;
	border:1px solid #eee;
	display:inline-block;
	margin-bottom:10px;
}

/* ---- contents.tag_list ----- */
.tag_list	{
	padding-bottom: env(safe-area-inset-bottom);
}
.tag_list .modalbtn {
	position:fixed;
	border:none;
	bottom:10px;
	left:10px;
	z-index:2;
	transition: 0.3s;
	height:100px;
	width:100px;
	background:#004098;
	border-radius:100px;
}
.tag_list .modalbtn:hover {
	opacity:1;
	height:110px;
	width:110px;
}
.tag_list .modalbtn a{
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	text-decoration:none;
	color:#fff;
	display:inline-block;
	text-align:center;
	line-height:1.2em;
	padding:5px 5px;
	font-size:120%;
	box-sizing:border-box;
}
.tag_list .modalbtn a img{
	width:20px;
	display:block;
	margin:auto;
	transition: 0.3s;
}
.tag_list .modalbtn:hover a img{
	width:30px;
}
.tag_list .modalbtn a p{
	font-size:12px;
}
.tag_list .modalbtn a span::before {
	content: "\A" ;
	white-space: pre ;
}
.tag_list .modalbtn .arrowbtn::after{
    border-right: 2px solid #000;
    border-bottom: 1px solid #000;
}

.tag_list .modal {
	display: none;
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}
.tag_list .modal-content {
	margin: 7% auto 0;
	width: 90%;
	max-width:900px;
	animation-name: modalopen;
	animation-duration: 1s;
}
@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}
.tag_list .modal-header {
	background:#fff;
	position:relative;
}
.tag_list  .modalClose {
	color:#fff;
	font-size: 2rem;
	background:#000;
	position:absolute;
	right:10px;
	top:10px;
	line-height:1em;
}
.tag_list .modalClose:hover {
  cursor: pointer;
}
.tag_list .modal-box{
	background:#fff;
	text-align:left;
	padding:30px;
	box-sizing:border-box;
}
.tag_list .modal-box h3{
	font-size:105%;
	margin:0 0 15px 0;
	line-height:1.2em;
	display: flex;
    align-items: center;
}
.tag_list .modal-box h3 span{
	font-size:70%;
	display:block;
	font-weight:100;
	font-family: 'Barlow', sans-serif;
	line-height:1.2em;
	margin:0 0 0 1em;
}
.tag_list .modal-box h3:after {
    content: "";
    height: 0.5px;
    flex-grow: 1;
    background-color: #ccc;
}
.tag_list .modal-box h3:after {
    margin-left: 1rem;
}

.tag_list .modal-box ul{
}
.tag_list .modal-box ul li{
	list-style:none;
}
.tag_list .modal-box ul li:not(:last-child){
	margin:0 0 35px 0;
}
.tag_list .modal-box ul li dt{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.tag_list .modal-box ul li dt a{
	font-size:90%;
	width:20%;
	border-left:1px solid #ccc;
	text-align:center;
	margin-bottom:10px;
	line-height:1.3em;
	box-sizing:border-box;
}
.tag_list .modal-box ul li dt a:nth-child(5n),
.tag_list .modal-box ul li dt a:last-child{
	border-right:1px solid #ccc;
}

@media screen and (max-width: 1199px) {
	.content_examples ul li{
		width:30%;
		list-style:none;
		margin:0 5% 70px 0;
	}
	.content_examples ul li:nth-child(4n){
		margin:0 5% 70px 0;
	}
	.content_examples ul li:nth-child(3n){
		margin:0 0 70px 0;
	}
}

@media screen and (max-width: 959px) {
	.content_examples_single .voice{
		display:block;
		justify-content:unset;
		width:85%;
	}
	.content_examples_single .voice li{
		list-style:none;
		width:calc(100% - 50px);
		padding:50px 25px;
		border-radius:20px;
	}
	.content_examples_single .voice li:first-child{
		margin:0 0 20px 0;
		position:relative;
	}
	.content_examples_single .voice li:first-child:before {
	  top: 50%;
	}
	.content_examples_single .voice li:last-child:before {
	  top: 50%;
	}
}
@media screen and (max-width: 834px) {
	.content_examples ul li{
		width:47.5%;
		list-style:none;
		margin:0 5% 70px 0;
	}
	.content_examples ul li:nth-child(3n){
		margin:0 5% 70px 0;
	}
	.content_examples ul li:nth-child(2n){
		margin:0 0 70px 0;
	}
	.content_examples ul li dt{
		overflow:hidden;
		position:relative;
		height:unset;
		max-height:380px;
	}
}
@media screen and (max-width: 768px) {
	.content_examples_single .mainV dt img.pcView{
		display:none;
	}
	.content_examples_single .mainV dt img.spView{
		display:unset;
	}
	.content_examples ul li dt h2{
		font-size:0.8rem;
	}
	.content_examples_single .mainV dt{
		height:unset;
		aspect-ratio: 1;
	    width: 100vw;
	   margin: 0 calc(50% - 50vw);
	}
	.content_examples_single .mainV .mainV_inner{
		width:100%;
		margin:50px auto 70px 0;
	}
	.content_examples_single .detail{
		display:block;
		justify-content:unset;
		flex-wrap:unset;
	}
	.content_examples_single .detail li{
		width:100%;
	}
	.content_examples_single .detail li .detail_inner{
		width:100%;
		margin:10px auto 0;
	}
	.content_examples_single .detail li dt{
		width:100%;
		height:unset;
		background:unset;
	}
	.content_examples_single .detail li dt img{
		width:100%;
	}
	.tag_list .modal-box ul li dt a{
		width:33%;
	}
	.tag_list .modal-box ul li dt a:nth-child(5n){
		border-right:none;
	}
	.tag_list .modal-box ul li dt a:nth-child(3n),
	.tag_list .modal-box ul li dt a:last-child{
		border-right:1px solid #ccc;
	}
	.tag_list .modalbtn {
		bottom:90px;
		height:70px;
		width:70px;
	}
	.tag_list .modalbtn a p{
		font-size:7px;
	}
	.tag_list .modalbtn:hover {
		height:80px;
		width:80px;
	}
	.content_examples_single .voice li p{
		background-image: none;
	}
}
@media screen and (max-width: 519px) {
	.content_examples_single .mainV dt{
		max-height:500px;
	}.content_examples_single .mainV .mainV_inner h2{
		font-size:1.3rem;
	}
	.content_examples ul li p{
	}
	.content_examples ul li dd{
	}
	.content_examples ul li h3{
		font-size:0.8rem;
	}
	.content_examples_single .voice li:first-child:after{
		content:"木下工務店のここが良かった";
		font-size:0.8rem;
		font-weight:bold;
		position:absolute;
		top:15px;
		left:-2px;
		background:#e2cb7c;
		padding:0 30px;
	}
	.content_examples_single .voice li:last-child:before {
	  top: 70%;
	  right: -50px;
	}
	.tag_list .modal-box ul li dt a{
		width:48%;
	}
	.tag_list .modal-box ul li dt a:nth-child(3n)
		border-right:none;
	}
	.tag_list .modal-box ul li dt a:nth-child(2n){
		border-right:1px solid #ccc;
	}
}