@charset "utf-8";
#work .wrap ,
#message .wrap ,
#benefits .wrap ,
#voice .wrap ,
#requirements .wrap {padding: 200px 0 0;}

#message .wrap .message {display: flex; margin: 100px 100px 0;}
#message .wrap .message .img {width: 50%;}
#message .wrap .message .img .mask {width: 100%; position: relative; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
#message .wrap .message .img .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
#message .wrap .message .desc {width: 50%; padding: 0 0 0 50px;}
#message .wrap .message .desc .catch h3 {display:inline; line-height: 2; font-size: 30px; color: var(--color-primary); background:url("../img/line.svg") repeat-x left 100%; background-size:auto 8px; padding-bottom: 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
#message .wrap .message .desc .content {width: 100%; margin: 70px auto 0;}
#message .wrap .message .desc .content p {margin: 0 auto 1em; font-weight: bold;}
#message .wrap .message .desc .content .sign {text-align: right;}
@media screen and (max-width:1280px) {
    #message .wrap .message {margin: 100px 50px 0;}
    #message .wrap .message .desc {padding: 0 0 0 40px;}
    #message .wrap .message .desc .catch h3 {font-size: 26px; padding-bottom: 8px; }
    #message .wrap .message .desc .content {margin: 50px auto 0;}
}
@media screen and (max-width:960px) {
    #message .wrap .message {display: block;}
    #message .wrap .message .img {width: 100%; max-width: 650px; margin: 50px auto; padding: 28px;}
    #message .wrap .message .desc {width: 100%; padding: 0;}
}
@media screen and (max-width:768px) {
    #message .wrap .message {margin: 100px 20px 0;}
    #message .wrap .message .desc .catch h3 {font-size: 24px; padding-bottom: 6px;}
}
@media screen and (max-width:700px) {
    #message .wrap .message .img {padding: 4.3%;}

}

#voice .wrap .common-col .desc .link a {justify-content: flex-start;}
@media screen and (max-width:960px) {
    #voice .wrap .common-col .desc .link a {justify-content: center;}
}

#requirements .wrap .requirements {margin: 100px 150px 200px;}
#requirements .wrap .requirements .table {width: 100%; max-width: 1000px; margin: 0 auto;}
#requirements .wrap .requirements .link {margin: 100px auto 0;}
@media screen and (max-width:1280px) {
    #requirements .wrap .requirements {margin: 100px 50px 200px;}
}
@media screen and (max-width:768px) {
    #requirements .wrap .requirements {margin: 100px 20px 200px;}
}

.voice .main {margin: 100px auto 0;}

/* single */
/* basic */
#basic .wrap {margin: 150px 100px 0;}
#basic .wrap .content {display: flex; max-width: 1280px; margin: 0 auto;}
#basic .wrap .content .img {width: 50%;}
#basic .wrap .content .img .mask {width: 100%; -webkit-mask-image: url("../img/mask_02.svg"); mask-image: url("../img/mask_02.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center;}
#basic .wrap .content .mask img {width: 100%; height: 100%; object-fit: cover; display: block;}
#basic .wrap .content .text {width: 50%; padding: 0 0 0 50px;}
#basic .wrap .content .text h1 {font-size: 20px; position: relative; padding-bottom: 0.25em; margin-bottom: 2rem;}
#basic .wrap .content .text h1::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient(to right, var(--color-accent-blue) 0 2px, transparent 2px 4px);}
#basic .wrap .content .text h1::before {content: attr(data-sub); position: absolute; right: 0; top: 50%; transform: translate(0,-50%); font-size: 24px; font-weight: normal; font-family: "Homemade Apple", cursive; color: var(--color-text-light);}
#basic .wrap .content .text span {font-size: 24px; color: var(--color-primary);}
#basic .wrap .content .text .catch {display:inline; font-weight: bold; line-height: 2; font-size: 22px; color: var(--color-primary); background:url("../img/line.svg") repeat-x left 100%; background-size:auto 8px; padding-bottom: 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
#basic .wrap .content .text .catch .list-br {display: none;}
#basic .wrap .content .text .table {margin: 40px auto 0;}
@media screen and (max-width:1280px) {
    #basic .wrap {margin: 150px 50px 0;}
    #basic .wrap .content .text h1 {font-size: 18px;}
    #basic .wrap .content .text h1::before {font-size: 22px;}
    #basic .wrap .content .text span {font-size: 22px;}
}
@media screen and (max-width:960px) {
    #basic .wrap .content {display: block;}
    #basic .wrap .content .img {width: 100%;}
    #basic .wrap .content .text {width: 100%; padding: 0; margin: 50px auto 0;}

}
@media screen and (max-width:768px) {
    #basic .wrap {margin: 150px 20px 0;}
    #basic .wrap .content .text h1 {font-size: 16px;}
    #basic .wrap .content .text h1::before {font-size: 20px;}
    #basic .wrap .content .text span {font-size: 20px;}
}
@media screen and (max-width:590px) {
    #basic .wrap .content .text .catch .list-br {display: block;}
}
/* qanda */
#qanda .wrap {margin: 150px auto; max-width: 860px;}
#qanda .wrap .content .ttl {text-align: center;}
#qanda .wrap .content .ttl h3 {font-size: 22px; position: relative; padding-bottom: 0.25em; margin-bottom: 3rem; display: inline-block;}
#qanda .wrap .content .ttl h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-image: repeating-linear-gradient(to right, var(--color-primary) 0 2px, transparent 2px 4px);}
#qanda .wrap .content p {margin: 0 auto 100px;}
@media screen and (max-width:960px) {
    #qanda .wrap {margin: 150px 50px;}
    #qanda .wrap .content .ttl h3 {font-size: 20px;}
}
@media screen and (max-width:768px) {
    #qanda .wrap {margin: 150px 20px;}
    #qanda .wrap .content .ttl h3 {font-size: 18px;}
}
/* images */
#images .wrap {margin: 0 auto 200px;}
#images .wrap .swiper {margin: 0 auto 150px;}
#images .wrap .swiper .note {font-size: 14px;}
@media screen and (max-width:1280px) {
    #images .wrap .swiper .note {font-size: 12px;}
}
@media screen and (max-width:768px) {
    #images .wrap .swiper .note {font-size: 10px;}
}