@charset "UTF-8";
@media only screen and (max-width: 750px) {
  #voice {
    padding: 20px 20px;
  }
  #voice .voice_wrapper {
    background: #FEF3F4;
    max-width: 900px;
    padding: 20px 20px 30px;
    margin: 0 auto;
    border-radius: 7px;
  }
  #voice .voice_wrapper ul {
    width: 100%;
    margin: 0 0 20px;
    overflow: hidden;
  }
  #voice .voice_wrapper ul li {
    background: #FFF;
    border-radius: 4px;
    padding: 20px;
    margin: 0 0 40px;
  }
  #voice .voice_wrapper ul li .pet-detail {
    margin: 0 0 25px;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 12px;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon figure {
    margin: 0 6px 0 0;
    max-width: 62px;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon figure img {
    width: 100%;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div {
    flex: 1;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div h2 {
    font-size: 15px;
    color: #212121;
    margin: 0 0 4px;
    line-height: 120%;
    text-align: left;
    background: none;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div p {
    font-size: 11px;
  }
  #voice .voice_wrapper ul li .pet-detail .txt {
    font-size: 14px;
    text-align: justify;
    letter-spacing: 0.1em;
  }
  #voice .voice_wrapper ul li .pet-detail .txt span {
    border-bottom: 1px dashed #94DDFE;
    line-height: 230%;
  }
  #voice .voice_wrapper ul li a {
    background: #8E6B4E;
    border-radius: 4px;
    display: block;
    overflow: hidden;
  }
  #voice .voice_wrapper ul li a figure {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  #voice .voice_wrapper ul li a figure img {
    width: 30%;
    height: auto;
    border: 4px solid #8E6B4E;
    height: 60px;
    object-fit: cover;
  }
  #voice .voice_wrapper ul li a figure figcaption {
    width: 70%;
    background: #8E6B4E;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #voice .voice_wrapper ul li a figure figcaption::before {
    content: '';
    display: block;
    background: url("../images/zoom-in-line-wh.svg") no-repeat;
    background-size: 100%;
    justify-content: center;
    width: 20px;
    height: 20px;
  }
  #voice .voice_wrapper ul li a figure figcaption span::before {
    content: 'タップで';
  }
  #voice .voice_wrapper ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  #voice .voice_wrapper ol li {
    margin: 0 6px;
  }
  #voice .voice_wrapper ol li a {
    background: #FFF;
    border: 1px solid #8E6B4E;
    color: #8E6B4E;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #voice .voice_wrapper ol li a:hover {
    background: #8E6B4E;
    border: 1px solid #8E6B4E;
    color: #FFF;
  }
  #voice .voice_wrapper ol li.current a {
    background: #8E6B4E;
    border: 1px solid #8E6B4E;
    color: #FFF;
    pointer-events: none;
  }

  .lightcase-icon-close {
    font-size: 60px !important;
  }
}
@media only screen and (min-width: 751px) {
  #voice {
    padding: 100px 20px;
  }
  #voice .voice_wrapper {
    background: #FEF3F4;
    max-width: 900px;
    padding: 40px 40px 60px;
    margin: 0 auto;
    border-radius: 30px;
  }
  #voice .voice_wrapper ul {
    width: 100%;
    margin: 0 0 20px;
    overflow: hidden;
  }
  #voice .voice_wrapper ul li {
    background: #FFF;
    border-radius: 8px;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 0 40px;
  }
  #voice .voice_wrapper ul li .pet-detail {
    width: 61.3%;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 30px;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon figure {
    max-width: 114px;
    width: 100%;
    margin: 0 30px 0 0;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon figure img {
    width: 100%;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div {
    flex: 1;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div h2 {
    font-size: 24px;
    color: #212121;
    margin: 0 0 4px;
    text-align: left;
    background: none;
  }
  #voice .voice_wrapper ul li .pet-detail .pet-icon div p {
    font-size: 16px;
  }
  #voice .voice_wrapper ul li .pet-detail .txt {
    font-size: 16px;
    text-align: justify;
    letter-spacing: 0.1em;
  }
  #voice .voice_wrapper ul li .pet-detail .txt span {
    border-bottom: 1px dashed #94DDFE;
    line-height: 230%;
  }
  #voice .voice_wrapper ul li a {
    width: 32.7%;
    background: #8E6B4E;
    border-radius: 4px;
    display: inline-block;
    overflow: hidden;
  }
  #voice .voice_wrapper ul li a figure img {
    width: 100%;
    height: auto;
    border-top: 4px solid #8E6B4E;
    border-left: 4px solid #8E6B4E;
    border-right: 4px solid #8E6B4E;
  }
  #voice .voice_wrapper ul li a figure figcaption {
    background: #8E6B4E;
    text-align: center;
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #voice .voice_wrapper ul li a figure figcaption::before {
    content: '';
    display: block;
    background: url("../images/zoom-in-line-wh.svg") no-repeat;
    background-size: 100%;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin: 0 4px 0 0;
  }
  #voice .voice_wrapper ul li a figure figcaption span::before {
    content: 'クリックで';
  }
  #voice .voice_wrapper ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  #voice .voice_wrapper ol li {
    margin: 0 6px;
  }
  #voice .voice_wrapper ol li a {
    background: #FFF;
    border: 1px solid #8E6B4E;
    color: #8E6B4E;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #voice .voice_wrapper ol li a:hover {
    background: #8E6B4E;
    border: 1px solid #8E6B4E;
    color: #FFF;
  }
  #voice .voice_wrapper ol li.current a {
    background: #8E6B4E;
    border: 1px solid #8E6B4E;
    color: #FFF;
    pointer-events: none;
  }

  #lightcase-case {
    zoom: 1.1;
  }

  .lightcase-icon-close {
    font-size: 80px !important;
  }
}
#lightcase-overlay {
  background: #100708;
  z-index: 50001;
}

#lightcase-case {
  z-index: 50002;
}

.lightcase-icon-close {
  z-index: 50002 !important;
}