@charset "utf-8";
/* comment */
#comment .wrap table {width: 100%; max-width: 1000px; margin: 0 0 0 auto;}
#comment .wrap table tbody tr th {font-weight: normal; text-align: left; text-wrap: nowrap; vertical-align: top;}
/* flow */
#flow .wrap {margin: 0 20px 150px;}
#flow .wrap .company {position: relative; margin: 0 auto 200px;}
#flow .wrap .company::after {content: ""; background: url(../img/service/arrow.svg) no-repeat center/contain; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,100%); width: 30px; height: 200px;}
#flow .wrap .company .box {display: flex; justify-content: center; align-items: center; gap: 12.5%; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; background: url(../img/service/building.svg) no-repeat center/contain}
#flow .wrap .company .box p {width: 25%; background: #003687; border-radius: 999px; font-size: clamp(30px, 2.75vw, 50px); text-align: center; font-weight: bold; color: #fff; margin: 0 auto 50px;}
#flow .wrap .mands {width: 100%; background: #003687; border-radius: 999px; padding: 20px 0;}
#flow .wrap .mands div {display: flex; align-items: center; justify-content: center;}
#flow .wrap .mands div img {height: 70px; margin: 0 50px 0 0;}
#flow .wrap .mands div p {font-size: clamp(30px, 2.75vw, 50px); font-family: 'Noto Serif JP', '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif; font-weight: 600; color: #fff;}
#flow .wrap .sale {height: 200px; background: url(../img/service/arrow.svg) no-repeat center/contain; display: flex; align-items: center; justify-content: center;}
#flow .wrap .sale p {font-size: clamp(30px, 2.75vw, 50px); font-weight: bold; display: inline-block; padding: 0 70px; background: #fff; border-radius: 999px;}
#flow .wrap .customer {display: flex; align-items: stretch;justify-content: space-around;}
#flow .wrap .customer .box {width: 45%; background: #fff; border-radius: 30px; padding: 50px;}
#flow .wrap .customer .box h3 {text-align: center; font-size: clamp(30px, 2.75vw, 50px); font-weight: bold; color: #003687; margin: 0 auto 30px;}
#flow .wrap .customer .box h4 {font-size: clamp(20px, 1.75vw, 30px); font-weight: bold; color: #222;}
#flow .wrap .customer .box p {padding: 0 0 0 1em;}
@media screen and (max-width:1200px) {
    #flow .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #flow .wrap {margin: 0 10px 100px;}
    #flow .wrap .company .box {gap: 20%;}
    #flow .wrap .company .box p {width: 40%;}
    #flow .wrap .customer .box {width: 47.5%; padding: 30px;}
}
@media screen and (max-width:768px) {
    #flow .wrap {margin: 0 10px 70px;}
    #flow .wrap .company h2 {font-size: 25px;}
    #flow .wrap .mands {padding: 10px;}
    #flow .wrap .mands div {flex-direction: column;}
    #flow .wrap .mands div img {height: 50px; margin: 0 auto;}
    #flow .wrap .mands div p {font-size: 25px;}
    #flow .wrap .sale p {font-size: 25px; padding: 0 50px;}
    #flow .wrap .customer {display: block;}
    #flow .wrap .customer .box {width: 100%;}
    #flow .wrap .customer .box:first-child {margin: 0 auto 50px;}
}
@media screen and (max-width:590px) {
    #flow .wrap {margin: 0 5px 70px;}
    #flow .wrap .company {margin: 0 auto 100px;}
    #flow .wrap .company::after {height: 100px;}
    #flow .wrap .company .box {gap: 10%;}
    #flow .wrap .company .box p {width: 45%; font-size: 20px; margin: 0 auto 30px;}
    #flow .wrap .company h2, #flow .wrap .mands div p, #flow .wrap .sale p {font-size: 20px;}
    #flow .wrap .sale {height: 100px;}
    #flow .wrap .mands div img {height: 30px;}
}
/* maker */
#maker .wrap {margin: 0 20px 150px;}
#maker .wrap .head {display: flex; align-items: center;}
#maker .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
/* #maker .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#maker .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
#maker .wrap .swiper .swiper-wrapper {transition-timing-function: linear;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a {transition: .5s;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#maker .wrap .swiper .swiper-wrapper .swiper-slide a img {width: 100%;}
@media screen and (max-width:1200px) {
    #maker .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #maker .wrap {margin: 0 10px 100px;}
}
@media screen and (max-width:768px) {
    #maker .wrap {margin: 0 10px 70px;}
    #maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 75px; width: 125px;}
}
@media screen and (max-width:590px) {
    #maker .wrap {margin: 0 5px 70px;}
    #maker .wrap .head {display: block; margin: 0 0 30px;}
    #maker .wrap .head h2 {margin: 0;}
    #maker .wrap .swiper .swiper-wrapper .swiper-slide {height: 60px; width: 100px;}
}
#maker .wrap .maker {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 150px;}
#maker .wrap .maker a img {display: block; width: 100%;}
#maker .wrap .maker a {transition: .5s;}
#maker .wrap .maker a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #maker .wrap .maker {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #maker .wrap .maker {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #maker .wrap .maker {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #maker .wrap .maker {grid-template-columns: repeat(3, 1fr);}
}
/* related */
#related .wrap {margin: 0 20px 150px;}
#related .wrap .head {display: flex; align-items: center;}
#related .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
/* #related .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#related .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
#related .wrap .related {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 150px;}
#related .wrap .related .item {display: flex; justify-content: center; align-items: center;}
#related .wrap .related a img {display: block; width: 100%;}
#related .wrap .related a {transition: .5s; text-decoration: none; color: #003687; font-size: clamp(16px, 1.6vw, 26px); font-weight: bold; text-wrap: nowrap;}
#related .wrap .related a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #related .wrap {margin: 0 10px 150px;}
    #related .wrap .related {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #related .wrap {margin: 0 10px 100px;}
    #related .wrap .related {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #related .wrap {margin: 0 10px 70px;}
    #related .wrap .related {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #related .wrap {margin: 0 5px 70px;}
    #related .wrap .head {display: block; margin: 0 0 30px;}
    #related .wrap .head h2 {margin: 0;}
    #related .wrap .related {grid-template-columns: repeat(3, 1fr);}
}