@charset "utf-8";
/* CSS Document */
.voice_detail {
  --gap: clamp(30px, 6vw, 80px);
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap);
}

.voice_detail .voice_imgbox {
  width: calc((100% - var(--gap)) * 0.34);
}

.voice_detail .voice_txtbox {
  width: calc((100% - var(--gap)) * 0.66);
}
.voice_detail .voice_txtbox.voice_txtbox1 {
  width: 100%;
}


.voice_detail .main_img {
  border-radius: 10px;
  overflow: hidden;
}

.voice_detail .main_img img {
  width: 100%;
  display: block;
}

.voice_detail .sub_img_list {
  gap: 10px;
  margin-top: 10px;
}

.voice_detail .sub_img_list .thumb {
  width: calc((100% - 20px) / 3);
  aspect-ratio: 1 / 1;
  background: #d8d8d8;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.voice_detail .sub_img_list .thumb.active,
.voice_detail .sub_img_list .thumb:hover {
  opacity: 1;
}

.voice_detail .sub_img_list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.voice_detail .voice_cate {
  display: inline-block;
  background: #f3eee7;
  padding: 6px 12px;
  line-height: 1;
}

.voice_detail h2 {
  padding-bottom: 18px;
  border-bottom: 1px solid #ddd8d5;
  font-weight: 400;
}

.voice_detail .voice_point {
  padding-bottom: 28px;
  border-bottom: 1px solid #ddd8d5;
}
.voice_detail .staff_box {
  justify-content: flex-start;
  gap: 14px;
}

.voice_detail .staff_img {
  width: 54px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.voice_detail .staff_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1080px) {
  .voice_detail {
    flex-direction: column;
      max-width: 700px;
          margin-right: auto;
     margin-left: auto;
  }

  .voice_detail .voice_imgbox,
  .voice_detail .voice_txtbox {
    width: 100%;
  }
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}