@charset "UTF-8";
@media (min-width: 809px) {
  .p-voice__ttl {
    position: relative;
  }
  .webp .p-voice__ttl {
    background: url(../images/owner-voice/bg_ttl.webp) no-repeat top center/cover;
  }
  .no-webp .p-voice__ttl {
    background: url(../images/owner-voice/bg_ttl.jpg) no-repeat top center/cover;
  }
}
.p-voice__ttl h2 img {
  width: 100%;
}
@media (min-width: 809px) {
  .p-voice__ttl h2 {
    width: 85%;
    text-align: left;
    max-width: 1200px;
    margin-inline: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 1;
  }
  .p-voice__ttl h2 img {
    width: 40%;
    max-width: 532px;
  }
}
@media (min-width: 1199px) {
  .p-voice__ttl h2 {
    width: 100%;
  }
  .p-voice__ttl h2 img {
    width: 44.333%;
  }
}
.p-voice__ttl > figure {
  display: none;
}
@media (min-width: 809px) {
  .p-voice__ttl > figure {
    text-align: right;
    display: block;
  }
  .p-voice__ttl > figure img {
    width: 48.6979%;
  }
}
.p-voice__reason {
  padding: 60px 5% 80px;
}
.webp .p-voice__reason {
  background: url(../images/owner-voice/bg_reason.webp) no-repeat top center/cover;
}
.no-webp .p-voice__reason {
  background: url(../images/owner-voice/bg_reason.jpg) no-repeat top center/cover;
}
@media (min-width: 809px) {
  .p-voice__reason {
    padding: 110px 40px 130px;
  }
}
.p-voice__reason h3 {
  font-weight: 500;
  margin-bottom: 20px;
  font-size: 1.25rem;
}
@media (min-width: 809px) {
  .p-voice__reason h3 {
    margin-bottom: 45px;
    font-size: 1.5625rem;
  }
}
@media (min-width: 1169px) {
  .p-voice__reason h3 {
    font-size: 1.875rem;
  }
}
.p-voice__reason h3 + p {
  font-weight: 500;
  font-size: 120%;
  margin-bottom: 50px;
}
@media (min-width: 809px) {
  .p-voice__reason h3 + p {
    font-size: 1rem;
    margin-bottom: 100px;
  }
}
@media (min-width: 1169px) {
  .p-voice__reason h3 + p {
    margin-bottom: 140px;
  }
}

.p-voice__photos {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;
}
.p-voice__photos.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
.p-voice__photos figure {
  width: 50%;
  position: relative;
}
.p-voice__photos figure figcaption {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 1.5%;
  font-size: 85%;
}
.p-voice__photos figure figcaption.-white {
  color: #fff;
}
.p-voice__photos figure img {
  width: 100%;
}
@media (min-width: 809px) {
  .p-voice__photos figure {
    width: 25%;
  }
}
@media (max-width: 670px) {
  .p-voice__photos figure:first-child, .p-voice__photos figure:nth-child(2) {
    display: none;
  }
}
.p-voice__comments {
  background-color: #e0f0ff;
  padding: 60px 5%;
}
@media (min-width: 809px) {
  .p-voice__comments {
    padding: 150px 40px 70px;
  }
}
.p-voice__comments h3 {
  margin-bottom: 40px;
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;
}
.p-voice__comments h3.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 809px) {
  .p-voice__comments h3 {
    margin-bottom: 85px;
  }
}
.p-voice__comments h3 img {
  width: 100%;
  max-width: 634px;
}
.p-voice__comments hgroup {
  margin-bottom: 30px;
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;
}
.p-voice__comments hgroup.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 809px) {
  .p-voice__comments hgroup {
    margin-bottom: 45px;
  }
}
.p-voice__comments hgroup h4 {
  margin-bottom: 15px;
}
@media (min-width: 809px) {
  .p-voice__comments hgroup h4 {
    margin-bottom: 25px;
  }
}
.p-voice__comments hgroup h4 img {
  width: 30%;
  max-width: 146px;
}
.p-voice__comments hgroup p {
  font-weight: 500;
}
.p-voice__comments-item {
  position: relative;
  bottom: -30px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;
  width: calc((100% - 20px) / 2);
}
.p-voice__comments-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
@media (min-width: 809px) {
  .p-voice__comments-items {
    gap: 50px 30px;
    max-width: 1200px;
    margin-inline: auto;
    margin-bottom: 75px;
  }
}
.p-voice__comments-items + p {
  font-weight: 500;
}
.p-voice__comments-items + p span {
  text-indent: 0;
}
.p-voice__comments-item.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}
@media (min-width: 809px) {
  .p-voice__comments-item {
    width: calc((100% - 60px) / 3);
  }
}
.p-voice__comments-item img {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}
.p-voice__modal {
  width: 90%;
  position: relative;
  margin-inline: auto;
  max-width: 650px;
}
.p-voice__bnrs {
  padding: 40px 5%;
}
.webp .p-voice__bnrs {
  background: url(../images/owner-voice/bg_reason.webp) no-repeat top center/cover;
}
.no-webp .p-voice__bnrs {
  background: url(../images/owner-voice/bg_reason.jpg) no-repeat top center/cover;
}
@media (min-width: 809px) {
  .p-voice__bnrs {
    padding: 70px 40px;
  }
}
.p-voice__bnrs ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
@media (min-width: 809px) {
  .p-voice__bnrs ul {
    gap: 30px;
  }
}
@media (hover: hover) {
  .p-voice__bnrs ul a {
    transition: opacity 0.5s;
  }
  .p-voice__bnrs ul a:hover {
    opacity: 0.6;
  }
}

@-webkit-keyframes anime01 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 37, 63;
  }
}

@keyframes anime01 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 37, 63;
  }
}
@-webkit-keyframes anime02 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 27, 73;
  }
}
@keyframes anime02 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 27, 73;
  }
}
@-webkit-keyframes anime03 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 14, 86;
  }
}
@keyframes anime03 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 14, 86;
  }
}
@-webkit-keyframes anime04 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 13, 87;
  }
}
@keyframes anime04 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 13, 87;
  }
}
@-webkit-keyframes anime05 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 9, 91;
  }
}
@keyframes anime05 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 9, 91;
  }
}
@-webkit-keyframes anime06 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 30, 70;
  }
}
@keyframes anime06 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 30, 70;
  }
}
@-webkit-keyframes anime07 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 28, 72;
  }
}
@keyframes anime07 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 28, 72;
  }
}
@-webkit-keyframes anime08 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 20, 80;
  }
}
@keyframes anime08 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 20, 80;
  }
}
@-webkit-keyframes anime09 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 12, 88;
  }
}
@keyframes anime09 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 12, 88;
  }
}
@-webkit-keyframes anime10 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 10, 90;
  }
}
@keyframes anime10 {
  0% {
    stroke-dasharray: 0, 100;
  }
  50%, 100% {
    stroke-dasharray: 10, 90;
  }
}
.mfp-close {
  display: none !important;
}

/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}

/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transition: all 0.3s ease-out;
}

/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}

/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.popup-modal-dismiss {
  position: absolute;
  right: -10px;
  top: -25px;
  width: 25px;
  height: 25px;
  aspect-ratio: 1;
  background: url(../images/owner-voice/ico_close.png) no-repeat center center/cover;
}
@media (min-width: 809px) {
  .popup-modal-dismiss {
    width: 37px;
    height: 37px;
    right: -30px;
    top: -30px;
  }
}



.p-voice__reason-item1{
margin: 0px 0;
  position: relative;
 bottom: -30px;
  opacity: 0;
  transition: bottom 0.5s, opacity 0.5s;}
.p-voice__reason-item1.active {
  bottom: 0;
  opacity: 1;
  visibility: visible;
}