@charset "utf-8";
.under-line {
	display: inline-block;
	position: relative;
}
.under-line::after {
    background-color: #FFFF00;
    bottom: clamp(4px, 0.41666666666666666667vw,7px);
    content: "";
    display: inline-block;
    height: 4px;
    left: 0;
    position: absolute;
    transform: scale(0, 1) translate3d(0, 0, -10px);
    transform-origin: left top;
    transition: transform 1.8s ease;
    width: 100%;
    z-index: -1;
}
.on .under-line::after { transform: scale(1, 1) translate3d(0, 0, -10px);}
.sec-voice {
    background: url(../imgs/voice_bg.png) no-repeat top center/ 100% clamp(300px,33.928571428571428571vw,570px), #fff;
    padding: clamp(40px, 5.3571428571428571429vw,90px) 0 clamp(60px, 6.8452380952380952381vw,115px);
}
.sec-voice .voice-head {
    text-align: center;
    margin-bottom: clamp(20px, 1.4880952380952380952vw, 25px);
}
.sec-voice .voice-head .ttl {
    font-size: clamp(5rem, 6.8452380952380952381vw, 11.5rem);
    letter-spacing: 0.12em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    margin-bottom: 5px;
}
.sec-voice .voice-head .ttl-sub { position: relative;}
.sec-voice .voice-head .ttl-sub .topic img { max-width: clamp(320px, 41.071428571428571429vw, 690px);}
.sec-voice .voice-head .ttl-sub .icon {
    width: clamp(90px, 9.8214285714285714286vw,165px);
    display: inline-block;
    position: absolute;
    bottom: -4px;
    margin-left: clamp(20px,1.7857142857142857143vw,30px);
}
.sec-voice .txt { text-align: center;}
.sec-voice .txt img { max-width: clamp(320px, 43.571428571428571429vw, 732px);}
.sec-voice .img {
    max-width: 1480px;
    margin: 0 auto clamp(20px,1.7857142857142857143vw, 30px);
}
@media screen and (max-width: 767px){
    .sec-voice { background-size: 100% 64%;}
    .sec-voice .voice-head .ttl-sub .icon {
        display: block;
        position: static;
        margin: 5px auto 0;
    }
    .sec-voice .img { margin: 0 15px 20px;}
}
.merit-block {
    background: url(../imgs/merit_bg.png) repeat center center;
    color: #383839;
}
.merit-head {
    position: relative;
    text-align: center;
    height: clamp(70px, 6.8452380952380952381vw,115px);
}
.merit-head .arrow {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -39px;
    width: 90px;
    height: 40px;
    z-index: -1;
    -webkit-clip-path: polygon(100% 0, 0 0, 50% 100%);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    overflow: hidden;
}
.merit-head .arrow::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    left: 50%;
    top: 0;
}
.merit-head .ttl {
    font-size: clamp(3.8rem, 4.5833333333333333333vw, 7.7rem);
    letter-spacing: 0.12em;
    line-height: 0.65;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}
.merit-head .txt {
    font-size: clamp(1.4rem, 1.4285714285714285714vw, 2.4rem);
    letter-spacing: 0.1em;
    margin-top: -5px;
    line-height: 1.4;
}
.merit-head .person {
    position: absolute;
    bottom: -12%;
}
.merit-head .person01 {
    width: 9%;
    left: 7.1%;
}
.merit-head .person02 {
    width: 19%;
    right: 6.8%;
    bottom: -26%;
}
.merit-head .person03 {
    width: 11.9%;
    left: 9.3%;
    bottom: -19%;
}
.merit-head .person04 {
    width: 22.2%;
    right: 7%;
    bottom: -24%;
}
.merit-head .person05 {
    width: 9%;
    left: 11.1%;
}
.merit-head .person06 {
    width: 21%;
    right: 4.5%;
}
.merit-body {
    padding: clamp(30px,3.5714285714285714286vw,60px) 0 clamp(60px,5.6547619047619047619vw,95px);
    position: relative;
}
.merit-body .img-circle {
    position: absolute;
    z-index: 2;
}
.merit-body .img-circle01 {
    width: 24%;
    left: -4.5%;
    bottom: 21.5%;
    max-width: 404px;
}
.merit-body .img-circle .pic-cap {
    bottom: -20px;
}
.merit-body .img-circle01 .pic-cap { right: 20%;}
.merit-body .img-circle02 {
    width: 21.5%;
    right: -5.5%;
    bottom: 44%;
    max-width: 360px;
}
.merit-body .img-circle03 {
    width: 22.2%;
    left: -4.5%;
    bottom: 20%;
    max-width: 372px;
}
.merit-body .img-circle04 {
    width: 21%;
    right: 5%;
    bottom: 44%;
    max-width: 352px;
}
.merit-body .img-circle05 {
    width: 22.3%;
    left: -3.5%;
    bottom: 34.5%;
    max-width: 374px;
}
.merit-body .img-circle06 {
    width: 31.5%;
    right: -7%;
    bottom: 5%;
    max-width: 528px;
}
.merit-body .img-circle06 .pic-cap { right: 39%;}
.merit-body .txt {
    font-size: clamp(1.2rem,1.3095238095238095238vw, 2.2rem);
    letter-spacing: 0.05em;
    line-height: 1.6;
}
.merit-body .txt .under-line {
    font-size: 128%;
    font-weight: bold;
}
.merit-body .img {
    max-width: clamp(400px, 40vw,672px);
    margin: clamp(20px, 2.6785714285714285714vw,45px) auto 0;
}
.merit-body .img .caption-area { padding: clamp(20px,1.7857142857142857143vw, 30px) 0 0;}
.merit-area {
    position: relative;
    max-width: clamp(500px,59.52380952380952381vw,1000px);
    margin: -30px auto 0;
    padding-bottom: 25px;
}
.merit-area .pic-cap {
    right: 17%;
}
.merit-list li {
    display: flex;
    position: relative;
    padding: clamp(0px, 2.6785714285714285714vw,45px) 0 clamp(5px, 0.89285714285714285714vw,15px) clamp(15px,1.1904761904761904762vw,20px);
}
.merit-list li::after {
    content: "";
    border-bottom: 1px dotted;
    position: absolute;
    bottom: 0;
    width: 83%;
    left: 0;
}
.merit-list .icon {
    width: clamp(90px, 9.8214285714285714286vw,165px);
    margin-right: clamp(10px, 2.0833333333333333333vw,35px);
}
.merit-list .txt { flex: 1;}
.merit-block.orange .merit-head .arrow::before,
.merit-block.orange .merit-head {
    background: -webkit-gradient(linear,  left top, right top,  from(rgba(208,138,94,0.7)),to(rgba(228,179,94,0.7))), #fff;
    background: -o-linear-gradient(left,  rgba(208,138,94,0.7) 0%,rgba(228,179,94,0.7) 100%), #fff;
    background: linear-gradient(to right,  rgba(208,138,94,0.7) 0%,rgba(228,179,94,0.7) 100%), #fff;  
}
.merit-block.orange .merit-list li::after { border-color: #D08A5E;}
.merit-block.orange .merit-body .txt .under-line { color: #D08A5E;}
.merit-block.green .merit-head .arrow::before,
.merit-block.green .merit-head {
    background: -webkit-gradient(linear,  left top, right top,  from(rgba(127,175,131,.7)),to(rgba(142,210,95,.7))), #fff;
    background: -o-linear-gradient(left,  rgba(127,175,131,.7) 0%,rgba(142,210,95,.7) 100%), #fff;
    background: linear-gradient(to right,  rgba(127,175,131,.7) 0%,rgba(142,210,95,.7) 100%), #fff;
}
.merit-block.green .merit-head::before {
    background: -webkit-gradient(linear,  left top, right top,  from(rgba(127,175,131,.7)),to(rgba(142,210,95,.7))), #fff;
    background: -o-linear-gradient(left,  rgba(127,175,131,.7) 0%,rgba(142,210,95,.7) 100%), #fff;
    background: linear-gradient(to right,  rgba(127,175,131,.7) 0%,rgba(142,210,95,.7) 100%), #fff;   
}
.merit-block.green .merit-list li::after { border-color: #7FAF83;}
.merit-block.green .merit-body .txt .under-line { color: #7FAF83;}
.merit-block.green .merit-list li { padding-bottom: 5px;}
.merit-block.pink .merit-head {
    background: -webkit-gradient(linear,  left top, right top,  from(rgba(193,118,132,0.7)),to(rgba(239,118,132,0.7))),#fff;
    background: -o-linear-gradient(left,  rgba(193,118,132,0.7) 0%,rgba(239,118,132,0.7) 100%),#fff;
    background: linear-gradient(to right,  rgba(193,118,132,0.7) 0%,rgba(239,118,132,0.7) 100%),#fff;
}
.merit-block.pink .merit-head .arrow::before,
.merit-block.pink .merit-head::before {
    background: -webkit-gradient(linear,  left top, right top,  from(rgba(193,118,132,0.7)),to(rgba(239,118,132,0.7))),#fff;
    background: -o-linear-gradient(left,  rgba(193,118,132,0.7) 0%,rgba(239,118,132,0.7) 100%),#fff;
    background: linear-gradient(to right,  rgba(193,118,132,0.7) 0%,rgba(239,118,132,0.7) 100%),#fff;
}
.merit-block.pink .merit-body .txt .under-line { color: rgba(193, 118, 132, 0.7);}
@media screen and (max-width: 1200px){
    .merit-head .arrow { 
        width: 40px;
        height: 20px;
        bottom: -19px;
    }
}
@media screen and (max-width: 1024px){
    .merit-area { margin-top: -10px;}
    .merit-block.green .merit-list li:nth-child(4) { margin-right: -25px;}
    .merit-body .img-circle04 { right: 0;}
    .merit-body .txt { letter-spacing: 0.01em;}
    .merit-head .person05,
    .merit-head .person03,
    .merit-head .person01 { left: 5px;}
    .merit-head .person02,
    .merit-head .person04,
    .merit-head .person06 { right: 5px;}
    .merit-head .txt { letter-spacing: 0.01em;}
}
@media screen and (max-width: 767px){
    .merit-area { margin-top: 0;}
    .merit-list li { padding: 20px 0 10px 0;}
    .merit-block.green .merit-list li:nth-child(4) { margin-right: 0;}
    .merit-head .txt { margin-top: -2px;}
    .merit-body {  padding: 40% 0;}
    .merit-body .img-circle { 
        top: 2%;
        bottom: 4%;
        width: 40%;
        height: max-content;
    }
    .merit-body .img-circle01 { width: 42%;}
    .merit-body .img-circle01 .pic-cap { 
        right: -10%;
        bottom: 0;
    }
    .merit-body .img-circle02 { top: auto;}
    .merit-body .img-circle03 { 
        left: auto;
        right: -4.5%;
        top: auto;
    }
    .merit-body .img-circle03 .pic-cap { 
        right: 20%;
    }
    .merit-body .img-circle04 { 
        width: 35%;
        left: 0;
    }
    .merit-body .img-circle05 {
        left: auto;
        right: -3.5%;
        top: auto;
    }
    .merit-body .img-circle05 .pic-cap {
        right: 20%;
    }
    .merit-body .img-circle06 { 
        width: 45%;
        left: 2%;
        top: 4%;
    }
    .merit-body .img-circle06 .pic-cap {
        right: -35%;
        bottom: 0;
    }
    .merit-block.orange .merit-list li::after { width: 100%;}
   
}