@charset "UTF-8";

.vocDetail_header{
}
.vocDetail_header .inner{
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
/* Wide Breakpoint */
@media screen and (max-width: 1000px) {
	.vocDetail_header .inner{
		width: calc(100% - 30px);
	}
}

.vocDetail_content{
}

.vocDetail_content .inner{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

/* Wide Breakpoint */
@media screen and (max-width: 1200px) {
	.vocDetail_content .inner{
		width: calc(100% - 30px);
	}
}


/* ----------
vocDetail_header
  ---------- */
.vocDetail_header {
	padding-bottom:100px;
}
.vocDetail_header .inner {
}

/* ---- */
.vocDetail_header .voc_mainVisual {
	margin-bottom:30px;
}
.vocDetail_header .voc_mainVisual img {
	width:100%;
	height:auto;
	border-radius:8px;
}

/* ---- */
.vocDetail_header .voc_titArea {
}
.vocDetail_header .voc_titArea .voc_titArea_mainTit {
	color:#006633;
	font-weight:bold;
	font-size:36px;
	padding-bottom:1em;
	margin-bottom:1em;
	border-bottom:solid 2px #258C56;
}
.vocDetail_header .voc_titArea .voc_titArea_mainLead {
	margin-bottom:50px;
}

/* ---- */
.vocDetail_header .voc_contents {
	background:#F7F6EE;
	padding:30px;
	border-radius:8px;
	
	display:flex;
	justify-content:center;
	flex-direction:column;
	gap:20px;
}
.vocDetail_header .voc_contents .voc_contents_tit {
  color: #006633;
  font-weight:bold;
 
}

.vocDetail_header .voc_contents .voc_contents_lst {
  list-style: none;
  counter-reset: contentsCounter;
}

.vocDetail_header .voc_contents .voc_contents_lst li {
  position: relative;
  counter-increment: contentsCounter;
  padding-left: 1.5em; /* マーカー分の余白 */
}

.vocDetail_header .voc_contents .voc_contents_lst li::before {
  content: counter(contentsCounter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #006633;
  font-family: "Jost", sans-serif;
  font-weight:bold;
}

/* リンク色はそのまま */
.vocDetail_header .voc_contents .voc_contents_lst li a {
  color: #153E0E;
}


/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .example {
    /* placeholder */
  }
}

/* SP */
@media screen and (max-width: 767px) {
	.vocDetail_header {
		padding-bottom:50px;
	}
	.vocDetail_header .voc_titArea .voc_titArea_mainTit {
		font-size:20px;
	}
	.vocDetail_header .voc_contents {
		padding:15px;
	}
}




/* ----------
vocDetail_content
---------- */
.vocDetail_content{
}
.vocDetail_content .inner{
	display:flex;
	justify-content:center;
	flex-direction:column;
	gap:100px;
}

/* ----------
interviewBlock
---------- */
.interviewBlock {
	display:flex;
	justify-content:center;
	flex-direction:column;
	gap:30px;
}
.interviewBlock .setTitBlock.gardenListSec__titleBlock {
}
.interviewBlock .setTitBlock.gardenListSec__titleBlock .setTitBlock__title {
}


.interviewBlock .interview {
}
.interviewBlock .interview +  .interview  {
	margin-top:80px;
}
.interviewBlock .interview .interview-comment {
	display:flex;
	justify-content:center;
	flex-direction:column;
	gap:30px;
}


.interviewBlock .interview .interview-comment .interview-tit {
	color:#86774D;
	font-size: 1.375rem;/*  → 22px */
	position:relative;
	padding-left:120px;
}
.interviewBlock .interview .interview-comment .interview-tit:before {
	position:absolute;
	content:"";
	width:100px;
	height:1px;
	top:23px;
	left:0;
	background:#86774D;

}


.interviewBlock .interview .interview-comment .comment {
}



.interviewBlock .interview .interview-comment .comment .name {
}

.interview .interview-comment .comment .name.parson01{
	font-weight:bold;
	color:#B77693;
}
.interview .interview-comment .comment .name.parson02{
	font-weight:bold;
	color:#B6ACD1;
}

/* ---- */
.interviewBlock .interview.has-pic {
	display:flex;
	flex-wrap:wrap;
	gap:25px 3%;
}
.interviewBlock .interview.has-pic .interview__image {
	width:33%;
}
.interviewBlock .interview.has-pic .interview__image img {
	width:100%;
	max-width:400px;
	vertical-align:bottom;
	border-radius:8px;
}
.interviewBlock .interview.has-pic .interview__image .interview__caption {
	text-align:center;
	padding-top:8px;
}
.interviewBlock .interview.has-pic .interview__image .interview__caption span {
}

/* ---- */
.interviewBlock .interview.has-pic .interview-comment {
	width:calc(100% - (33% + 3%) );
}

.interviewBlock .interview.has-pic.pic-left .interview__image {
	order:1;
}
.interviewBlock .interview.has-pic.pic-left .interview-comment {
	order:2;
}
.interviewBlock .interview.has-pic.pic-right .interview__image {
	order:2;
}
.interviewBlock .interview.has-pic.pic-right .interview-comment {
	order:1;
}




/* Wide Breakpoint */
@media screen and (max-width: 1100px) {
  .example {
    width: calc(100% - 30px);
  }
}

/* SP */
@media screen and (max-width: 950px) {
	.interviewBlock .interview .interview-comment .interview-tit {
		font-size: 1.1rem;
		padding-left:50px;
	}
	.interviewBlock .interview .interview-comment .interview-tit:before {
		width:40px;

	}
}

/* SP */
@media screen and (max-width: 767px) {
	.vocDetail_content .inner{
		gap:40px;
	}
	.interviewBlock {
		gap:10px;
	}
	.interviewBlock .setTitBlock{
		padding-bottom:0;
		margin-bottom:0;
	}
	.interviewBlock .interview +  .interview  {
		margin-top:40px;
	}
}

/* SP */
@media screen and (max-width: 550px) {

	/* ---- */
	.interviewBlock .interview.has-pic {
		flex-direction:column;
		gap:25px;
	}
	.interviewBlock .interview.has-pic .interview__image {
		text-align:center;
		width:100%;
	}
	.interviewBlock .interview.has-pic .interview__image img{
		width:100%;
		max-width:100%;
	}

	.interviewBlock .interview.has-pic .interview-comment {
		width:100%;
	}

	.interviewBlock .interview.has-pic.pic-left .interview__image {
		order:1;
	}
	.interviewBlock .interview.has-pic.pic-left .interview-comment {
		order:2;
	}
	.interviewBlock .interview.has-pic.pic-right .interview__image {
		order:1;
	}
	.interviewBlock .interview.has-pic.pic-right .interview-comment {
		order:2;
	}




}


.interview_teien__link {
	display: inline-block;
	margin-top: 12px;
	color: #268764;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
	transition: color 0.2s;
}
.interview_teien__link a {
	border-bottom: solid 1px #399D27;
	color: #399D27;
	display: inline-block;
	padding-bottom: 5px;
}
.interview_teien__link span {
	background: url(../img/btn--arrow--white.png) no-repeat right 5px center;
	background-size: auto 100%;
	display: inline-block;
	padding-right: 3rem;
	border:none;
}

/* SP */
@media screen and (max-width: 767px) {
	.interview_teien__link span {
		background-size: auto 30px;
		padding-right: 40px;
	}
}
@media screen and (max-width: 500px) {
	.interview_teien__link {
		text-decoration:none !important;
	}
	.interview_teien__link a {
		display:block;
		font-size:15px;
	}
	.interview_teien__link span {
		display:block;
		padding-top:3px;
		padding-bottom:3px;
		text-decoration:none !important;
		text-decoration: underline;
	}
}