@charset "utf-8";
/* archives  */
.interviewGr{width:100%;}
.interviewBoxSet{margin:0 auto;}
.interviewBox{
	position:relative;
	display:block;
}
.interviewArticle .interviewBox,
.interviewBox > a{
	display:grid;
	position:relative;
	line-height:1.0;
}
.interviewBox > a:hover img{opacity:0.5;}
.interviewBox img{transition:opacity 0.8s ease-out;}
.interviewBox .fg{
	grid-area:cfg;
	position:relative;
}
.interviewBox .fg:before,
.interviewBox .fg:after{
	content:"";
	display:block;
	position:absolute;
	cursor:pointer;
	z-index:1;
}
.interviewBox[data-cat="newhouse"] .fg:before{background:url("../img/interview/interview-pin01.svg") no-repeat left top;}
.interviewBox[data-cat="newhouse"] .fg:after{background:url("../img/interview/interview-pin02.svg") no-repeat right bottom;}
.interviewBox[data-cat="reform"] .fg:before{background:url("../img/interview/interview-pin03.svg") no-repeat left top;}
.interviewBox[data-cat="reform"] .fg:after{background:url("../img/interview/interview-pin04.svg") no-repeat right bottom;}
.interviewBox .caseTag{
	grid-area:catTag;
	margin:0 auto;
}
.interviewBox .caseInt{
	grid-area:volInt;
	width:100%;
	display:block;
	line-height:1.0;
	text-align:center;
}
.interviewBox .customerAddress{
	grid-area:cadd;
	display:block;
	font-weight:bold;
	line-height:1.0;
}
.interviewBox .customerName{
	grid-area:cname;
	display:block;
	font-weight:bold;
	line-height:1.0;
}
.interviewBox .moreLink{
	grid-area:cmore;
	text-align:center;
}
.interviewBox .moreLink > span{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	margin:0 auto;
	border:1px solid;
	transition:all 0.4s ease-out;
}
.interviewBox a:hover .moreLink > span{
	background-color:#006039;
	color:#fff;
}
.interviewBox .moreLink > span svg{transition:all 0.4s ease;}
.interviewBox a:hover .moreLink svg{transform: translateX(10px);}
.interviewBox a:hover .moreLink svg use{fill:#fff;}
.interviewBox[data-cat="newhouse"]{color:#006039;}
.interviewBox[data-cat="newhouse"] .moreLink > span{
	border-color:#006039;
	color:#006039;
}
.interviewBox[data-cat="newhouse"] a svg use{fill:#006039;}
.interviewBox[data-cat="reform"]{color:#c46800;}
.interviewBox[data-cat="reform"] .moreLink > span{
	border-color:#c46800;
	color:#c46800;
}
.interviewBox[data-cat="reform"] > a:hover .moreLink > span{background-color:#c46800;}
.interviewBox[data-cat="reform"] .moreLink svg use{fill:#c46800;}
.interviewBox[data-cat="reform"] > a:hover .moreLink svg use{fill:#fff;}

.interviewArticle .interviewBox{margin:0 auto;}
.interviewDetails{
	margin:0 auto;
	background-color:#ebf0ef;
}
.interviewDetails > *{
	margin-right:auto;
	margin-left:auto;
}
.interviewDetails h2{
	text-align:center;
	color:#006039;
}
.interviewDetails p{line-height:2.0;}
.bubbleSpeech{
	width:100%;
	display:grid;
	margin:0 auto;
	line-height:2.0;
	color:#333;
}
.bubbleSpeech:before{
	grid-area:bf;
	display:block;
	height:100%;
}
.bubbleSpeech .bBox{
	grid-area:bubble;
	position:relative;
	display:flex;
	align-items:center;
	min-height:92px;
	background-color:#fff;
	transform:scale(0);
}
.bubbleSpeech .bBox.show{transform:scale(1);}
.bubbleSpeech[data-type="customer"] .bBox{transform-origin: center right;}
.bubbleSpeech[data-type="nishino"] .bBox{transform-origin: center left;}
.bubbleSpeech .bBox:after{
	content:"";
	display:block;
	position:absolute;
  background:#fff;
}
.bubbleSpeech[data-type="customer"] .bBox:after{clip-path:polygon(0 0,100% 50%,0 100%);}
.bubbleSpeech[data-type="nishino"] .bBox:after{clip-path:polygon(0 50%,100% 0,100% 100%);}
.bubbleSpeech .man{
	grid-area:bman;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.bubbleSpeech[data-type="customer"] .man{right:0;}
.bubbleSpeech[data-type="nishino"] .main{left:0;}
.bubbleSpeech .man img{
	display:block;
	background-color:#fff;
	border-radius:50%;
	overflow:hidden;
}
.single-interview .reLink a{border:1px solid #006039;}
.single-interview .reLink a:hover{
	background-color:#006039;
	color:#fff;
}
.single-interview .reLink a:hover svg use{fill:#fff;}
.interviewBnr{text-align:center;}
.interviewBnr a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 0 0 auto;
	background-color:#fff;
	border-bottom-left-radius:26px;
	line-height:1.0;
	overflow:hidden;
}
.interviewBnr[data-type="newhouse"] a{color:#006039;}
.interviewBnr[data-type="reform"] a{color:#c46800;}
.interviewBnr a:hover{color:#fff;}
.interviewBnr[data-type="newhouse"] a:hover{background-color:#006039;}
.interviewBnr[data-type="reform"] a:hover{background-color:#c46800;}
.interviewBnr span{display:block;}
.intervieTxt{
	position:relative;
	text-align:left;
}
.intervieTtl{font-weight:bold;}
.intervieTxt svg{
	display:block;
	margin:0 0 0 auto;
	transition:all 0.4s ease;
}
.interviewBnr[data-type="newhouse"] .intervieTxt svg use{fill:#006039;}
.interviewBnr[data-type="reform"] .intervieTxt svg use{fill:#c46800;}
.interviewBnr a:hover .intervieTxt svg{transform: translateX(10px);}
.interviewBnr a:hover .intervieTxt svg use{fill:#fff!important;}
@media (max-width:768.98px){
	.interviewGr .interviewBox,
	.interviewArticle .interviewBox{
		width:290px;
		margin:100px auto 0;
	}
	.interviewArticle .interviewBox,
	.interviewBox > a{grid-template:"volInt volInt" auto "cfg cfg" auto "cname catTag" 1fr "cadd catTag" auto / 1fr auto;}
	.interviewBox .caseInt{
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:2px;
		text-indent:3px;
		text-align:right;
	}
	.interviewBox+.interviewBox{margin-top:63px;}
	.interviewBox .fg{margin-top:14px;}
	.interviewBox .fg:before,
	.interviewBox .fg:after{
		width:33px;
		height:33px;
	}
	.interviewBox .fg:before{
		top:-8px;
		left:-8px;
	}
	.interviewBox .fg:after{
		bottom:-8px;
		right:-8px;
	}
	.interviewBox .caseTag{
		width:50px;
		height:50px;
		margin:32px 8px 0 0;
	}
	.interviewBox .caseTag.newhouse span{
		font-size:calc(12.666 / 16 * 1rem);
		letter-spacing:10px;
		text-indent:10px;
	}
	.interviewBox .caseTag.reform span{
		font-size:calc(11 / 16 * 1rem);
		letter-spacing:-2px;
		text-indent:-2px;
	}
	.interviewBox .customerName{
		margin-top:32px;
		padding-left:20px;
		font-size:calc(23 / 16 * 1rem);
		letter-spacing:21px;
	}
	.interviewBox .customerAddress{
		margin-top:16px;
		padding-left:22px;
		font-size:calc(16 / 16 * 1rem);
		letter-spacing:1.4px;
	}

	.interviewDetails{
		width:100%;
		margin-top:68px;
		padding:32px 8vw;
	}
	.interviewDetails h2{
		margin-bottom:26px;
		font-size:calc(20 / 16 * 1rem);/***19>20***/
		letter-spacing:3.6px;
		text-align:left;
		line-height:2.0;
	}
	.interviewDetails p{
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:0.8px;
	}
	.interviewDetails *+p,
	.interviewDetails p+.bubbleSpeech{margin-top:24px;}
	.bubbleSpeech[data-type="customer"]{
		grid-template-areas:"bubble bman";
		grid-template-columns:1fr 64px;
	}
	.bubbleSpeech[data-type="nishino"]{
		grid-template-areas:"bman bubble";
		grid-template-columns:64px 1fr;
	}
	.bubbleSpeech+.bubbleSpeech{margin-top:24px;}
	.bubbleSpeech .bBox{
		padding:14px 14px;
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:0.8px;
	}
	.bubbleSpeech .bBox:after{
		width:10px;
		height:calc(tan(60deg) * 10px / 2);
		top:calc(50% - 5px);
	}
	.bubbleSpeech[data-type="customer"] .bBox:after{right:-10px;}
	.bubbleSpeech[data-type="nishino"] .bBox:after{left:-10px;}
	.bubbleSpeech[data-type="customer"] .man{padding-left:10px;}
	.bubbleSpeech[data-type="nishino"] .man{padding-right:10px;}
	.bubbleSpeech .man img{
		width:50px;
		height:50px;
	}
	.interviewDetails > figure{margin-top:74px;}
	.interviewDetails > figure+figure{margin-top:18px;}
	.interviewDetails > figure+.bubbleSpeech,
	.interviewDetails > *+h2{margin-top:78px;}
	.interviewBnr{margin-top:48px;}
	.interviewBnr a{width:250px;}
	.interviewBnr img{width:83px;}
	.intervieTxt{
		width:calc(100% - 83px);
		padding:7.5px 16px 4px 19px;
	}
	.intervieTtl{
		margin-right:-4px;
		font-size:calc(13 / 16 * 1rem);
		letter-spacing:1.333px;
	}
	.intervieEn{
		margin:9px 0 7px;
		font-size:calc(5.833 / 16 * 1rem);
		letter-spacing:2.5px;
	}
	.intervieTxt svg{width:25px;}
}
@media (min-width:769px){
	.interviewGr{margin-bottom:150px;}
	.interviewBoxSet{margin-top:144px;}
	.interviewBox+.interviewBox{margin-top:102px;}
	.interviewArticle .interviewBox,
	.interviewBox:nth-child(odd) > a{grid-template:"cfg catTag catTag" auto "cfg volInt volInt" auto "cfg cadd cname" 1fr "cfg cmore cmore" auto / 650px 1fr 1fr;}
	.interviewBox:nth-child(even) > a{grid-template:"catTag catTag cfg" auto "volInt volInt cfg" auto "cadd cname cfg" 1fr "cmore cmore cfg" auto / 1fr 1fr 650px;}
	.interviewBox .fg:before,
	.interviewBox .fg:after{
		width:66px;
		height:66px;
	}
	.interviewBox:nth-child(odd) .fg:before{
		top:-12px;
		left:-12px;
	}
	.interviewBox:nth-child(odd) .fg:after{
		bottom:-12px;
		right:-12px;
	}
	.interviewBox:nth-child(even) .fg:before{
		top:-12px;
		right:-12px;
		transform:rotate(90deg);
	}
	.interviewBox:nth-child(even) .fg:after{
		bottom:-12px;
		left:-12px;
		transform:rotate(90deg);
	}
	.interviewBox .caseTag{
		width:80px;
		height:80px;
	}
	.interviewBox .caseTag.newhouse span{
		font-size:calc(18 / 16 * 1rem);
		letter-spacing:10px;
		text-indent:10px;
	}
	.interviewBox .caseTag.reform span{
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:-1px;
		text-indent:-1px;
	}
	.interviewBox .caseInt{
		margin:21px auto 36px;
		font-size:calc(18 / 16 * 1rem);
		letter-spacing:2px;
		text-indent:3px;
	}
	.interviewBox .customerAddress{
		padding-right:12px;
		writing-mode:vertical-rl;
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:1.6px;
	}
	.interviewBox .customerName{
		padding-left:12px;
		justify-self:flex-start;
		writing-mode:vertical-rl;
		font-size:calc(26 / 16 * 1rem);
		letter-spacing:23px;
	}
	.interviewBox .moreLink{align-self:flex-end;}
	.interviewBox .moreLink > span{
		padding:11px 13px 11px 12px;
		border-radius:4px;
		font-size:calc(11 / 16 * 1rem);
	}
	.interviewBox .moreLink span span{letter-spacing:2px;}
	.interviewBox .moreLink svg{
		width:22px;
		margin-left:10px;
	}
	.interviewBox:nth-child(even) .caseTag,
	.interviewBox:nth-child(even) .caseInt,
	.interviewBox:nth-child(even) .moreLink{transform:translateX(-6px);}
	.interviewBox:nth-child(even) .customerAddress{transform:translateX(-8px);}
	.interviewBox:nth-child(even) .customerName{transform:translateX(-11px);}
	.interviewArticle{margin-top:145px;}
	.interviewDetails{
		width:min(96%,960px);
		margin-top:90px;
		padding:78px 0;
		border-radius:72px;
	}
	.interviewDetails h2{
		margin-bottom:34px;
		font-size:calc(27 / 16 * 1rem);
		letter-spacing:1px;
		text-indent:14px;
		line-height:1.85;
	}
	.interviewDetails p{
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:0.8px;
	}
	.interviewDetails *+p,
	.interviewDetails p+.bubbleSpeech{margin-top:30px;}
	.bubbleSpeech+.bubbleSpeech{margin-top:30px;}
	.bubbleSpeech[data-type="customer"]{grid-template-areas:"bf bubble bman";}
	.bubbleSpeech[data-type="nishino"]{grid-template-areas:"bman bubble bf";}
	.bubbleSpeech:before{content:"";}
	.bubbleSpeech .bBox{
		padding:20px 42px;
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:0.8px;
	}
	.bubbleSpeech .bBox:after{
		width:18px;
		height:calc(tan(60deg) * 18px / 2);
		top:calc(50% - 9px);
	}
	.bubbleSpeech[data-type="customer"] .bBox:after{right:-18px;}
	.bubbleSpeech[data-type="nishino"] .bBox:after{left:-18px;}
	.bubbleSpeech .man img{
		width:92px;
		height:92px;
	}
	.interviewDetails > figure{margin-top:96px;}
	.interviewDetails > figure+figure{margin-top:24px;}
	.interviewDetails > figure+.bubbleSpeech,
	.interviewDetails > *+h2{margin-top:100px;}
	.interviewBnr{margin-top:60px;}
	.interviewBnr a{width:300px;}
	.interviewBnr img{width:100px;}
	.intervieTxt{
		width:calc(100% - 100px);
		padding:9px 20px 5px 23px;
	}
	.intervieTtl{
		margin-right:-5px;
		font-size:calc(16 / 16 * 1rem);
		letter-spacing:1.6px;
	}
	.intervieEn{
		margin:11px 0 9px;
		font-size:calc(7 / 16 * 1rem);
		letter-spacing:3px;
	}
	.intervieTxt svg{width:25px;}
}
@media (min-width:769px) and (max-width:959.98px){
	.interviewBoxSet,
	.interviewArticle .interviewBox{width:96%;}
	.interviewBox:nth-child(odd) > a{grid-template-columns:1fr 81px 81px;}
	.interviewBox:nth-child(even) > a{grid-template-columns:81px 81px 1fr;}
	.interviewBox .moreLink{padding-bottom:20px;}
	.interviewDetails > *:not(.bubbleSpeech){width:calc(100% - 240px);}
	.bubbleSpeech{grid-template-columns:120px 1fr 120px;}
}
@media (min-width:960px){
	.interviewBoxSet,
	.interviewArticle .interviewBox{width:812px;}
	.interviewBox .caseTag{margin-top:28px;}
	.interviewBox .moreLink{padding-bottom:40px;}
	.interviewDetails > *:not(.bubbleSpeech){width:560px;}
	.bubbleSpeech{grid-template-columns:1fr 560px 1fr;}
	.bubbleSpeech[data-type="customer"] .man img{transform:translateX(-7px);}
	.bubbleSpeech[data-type="nishino"] .man img{transform:translateX(7px);}
}