@charset "UTF-8";

#page__voice p{
    color: #1e1e1e;
}

.main-text{
    margin: 100px 0;
}

.main-text p{
    font-size:clamp(14px, 1.8vw, 18px);
    line-height: 1.8;
    letter-spacing: 0.06em;
    text-align: center;
}

.sec-nav{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    justify-content: center;
    gap: 35px;
}

.sec-nav li {
    width: calc((100% - 70px)/3);
    max-width: 320px;
}

.sec-nav li a{
    position: relative;
    font-size: 16px;
    max-width: 320px;
    border: 2px solid #5b7d7c;
    display: block;
    text-align: center;
    padding: 22px 0;
    letter-spacing: 0.06em;
    color: #5b7d7c;
    transition: background-color 0.3s;
}

.sec-nav li a:hover{
    background-color: #5b7d7c;
    color: #fff;
}

.sec-nav li a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  width: 2em;
  height: 2em;
  content: "";
  transform: translate(0%, -50%);
  background-color: #5b7d7c;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.56 5.91'%3E%3Cpath d='M24.56,5.91H0v-1h21.44L15.71.81l.58-.81,8.27,5.91Z'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.56 5.91'%3E%3Cpath d='M24.56,5.91H0v-1h21.44L15.71.81l.58-.81,8.27,5.91Z'/%3E%3C/svg%3E") no-repeat center center;
  transition: background-color 0.3s;
}

.sec-nav li a::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 60px;            /* 表示したい幅 */
    height: 25px;           /* 表示したい高さ */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    transition: filter 0.3s;
}

.sec-nav li:nth-child(1) a::before{
    background-image: url("../images/voice/no-nav01.svg");
}

.sec-nav li:nth-child(2) a::before{
    background-image: url("../images/voice/no-nav02.svg");
}

.sec-nav li:nth-child(3) a::before{
    background-image: url("../images/voice/no-nav03.svg");
}

.sec-nav li a:hover::before {
    filter: brightness(0) invert(1);
}


.sec-nav li a:hover::after{
    background-color: #fff
}

.sec-nav li a .text-nav{
    margin: 0 auto;
}

.text-nav img{
    height: 20px;
    width: auto;             
    display: block;         
    margin: 0 auto;
    transition: filter 0.3s;
}

.sec-nav li a:hover img {
    filter: brightness(0) invert(1);
}
/* セクション共通 */

.sec-no img{
    margin: 0 auto;
    height: 45px;
}

.sec-ttl img{
    margin: 25px auto 0;
    height: 28px;
}

.sec-copy {
    text-align: center;
    margin-top: 30px;
    font-size: clamp(14px, 1.6vw, 16px);
    letter-spacing: 0.06em;
}

.voice-area{
    margin: 75px 0 0;
}

.voice-area.minute{
    margin: 30px 0 0;
}


.voice-item{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.voice-item:nth-of-type(2n) .voice-img {
order: 2;
}

.voice-item:nth-of-type(2n) .voice-text {
order: 1;
}

.voice-area.minute .voice-item:not(:first-of-type){
    margin-top: 50px;
}

.voice-area .voice-item:not(:first-of-type){
    margin-top: 90px;
}


.voice-area .voice-img{
    width:50%;
}

.voice-area .voice-text{
    width:calc(50% - 60px);
    margin-left: 60px;
}

.voice-item:nth-of-type(2n) .voice-text{
    margin-left: 0px;
    margin-right: 60px;
}

.voice-area.minute .voice-text{
    margin-top: 4%;
}

.voice-category img{
    height: 42px;
}

.voice-ttl img{
    height: 28px;
    margin: 40px 0 30px;
}

.voice-ttl.kaigyo img{
    height: 72px;
}

.voice-area .voice-text p{
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 2;
    letter-spacing: 0.06em;
    text-align: justify;
}

.more-btn{
    position: relative;
    font-size: 16px;
    width: 90%;
    max-width: 320px;
    border: 1px solid #5b7d7c;
    display: block;
    text-align: center;
    padding: 16px 0;
    letter-spacing: 0.06em;
    color: #5b7d7c;
    margin: 70px auto 0;
    transition: background-color 0.3s;
}

.more-btn:hover{
    background-color: #5b7d7c;
    color: #fff;
}

.more-btn::after {
  position: absolute;
  top: 50%;
  right: 38px;
  display: block;
  width: 2em;
  height: 2em;
  content: "";
  transform: translate(0%, -50%);
  background-color: #5b7d7c;
  mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.56 5.91'%3E%3Cpath d='M24.56,5.91H0v-1h21.44L15.71.81l.58-.81,8.27,5.91Z'/%3E%3C/svg%3E") no-repeat center center;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.56 5.91'%3E%3Cpath d='M24.56,5.91H0v-1h21.44L15.71.81l.58-.81,8.27,5.91Z'/%3E%3C/svg%3E") no-repeat center center;
  transition: background-color 0.3s;
}

.more-btn:hover::after{
    background-color: #fff
}

.sec01,
.sec02,
.sec03{
    padding: 120px 0;
}

.sec01,
.sec03{
    background-color: #fff;
}

.voice-area .voice-text p.note{
    font-size: 12px;
    letter-spacing: 0;
}


.btn-area{
    background-image: url(../images/voice/sec04-bk.webp);
    padding: 160px 0;
    background-size: cover;
}

.btn-area h3{
    font-size: clamp(28px, 5.4vw, 54px) ;
    color: #5b7d7c;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 45px;
}

@media screen and (max-width: 1000px){
.sec-nav{
    gap: 20px;
}

.sec-nav li {
    width: calc((100% - 40px)/3);
}

.text-nav img{
    height: 18px;
}

.sec-nav li a::before {
    width: 50px;            /* 表示したい幅 */
    height: 22px;           /* 表示したい高さ */
}

.sec-no img{
    margin: 0 auto;
    height: 38px;
}

.sec-ttl img{
    margin: 25px auto 0;
    height: 23px;
}

.voice-ttl img{
    height: 23px;
    margin: 35px 0 25px;
}

.voice-ttl.kaigyo img{
    height: 60px;
}

.voice-category img{
    height: 38px;
}

.voice-area .voice-img{
    width:50%;
}

.voice-area .voice-text{
    width:calc(50% - 35px);
    margin-left: 35px;
}

.voice-item:nth-of-type(2n) .voice-text{
    margin-left: 0px;
    margin-right: 35px;
}
}

@media screen and (max-width: 900px){


    .voice-ttl img{
    height: 21px;
    margin: 20px 0 20px;
}

.voice-ttl.kaigyo img{
    height: 54px;
}

.voice-category img{
    height: 32px;
}
}

@media screen and (max-width: 800px){
    
.sec-nav li a::before {
    width: 45px;            /* 表示したい幅 */
    height: 20px;           /* 表示したい高さ */
}

.text-nav img{
    height: 16px;
}

}

@media screen and (max-width: 768px) {
.sec-nav{
    gap: 15px;
    width: 100%;
}

.sec-nav li {
    width: 100%;
}

.main-text{
    margin: 60px 0 80px;
}


.sec-no img{
    height: 30px;
}

.sec-ttl img{
    margin: 25px auto 0;
    height: 24px;
}

    .voice-area .voice-img{
    width:  100%;
}

.voice-area .voice-text{
    width:100%;
    margin-left: 0;
}

.voice-item:nth-of-type(2n) .voice-text{
    margin-right: 0;
}

.voice-item:nth-of-type(2n) .voice-img {
order: 1;
}

.voice-item:nth-of-type(2n) .voice-text {
order: 2;
}

.voice-category img{
    height: 32px;
}

.voice-ttl img{
    height: 21px;
    margin: 20px 0 20px;
}

.voice-ttl.kaigyo img{
    height: 54px;
}

.voice-item{
    gap: 30px;
}

.voice-area.minute .voice-text {
    margin-top: 0;
}

.sec01,
.sec02,
.sec03{
    padding: 80px 0;
}

.voice-area.minute .voice-item:not(:first-of-type){
    margin-top: 45px;
}

.voice-area .voice-item:not(:first-of-type){
    margin-top: 60px;
}


.btn-area{
    background-image: url(../images/voice/sec04-bk.webp);
    padding: 80px 0;
    background-size: cover;
    background-position: center;
}

.btn-area h3{
    margin-bottom: 30px;
}

.voice-area {
    margin: 50px 0 0;
}

.voice-area .voice-text p{
    line-height: 1.8;
}
}