@charset "utf-8";
/* 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 h2 {font-size: clamp(30px, 2.75vw, 50px); text-align: center; width: 100%; color: #222; position: relative; margin: 0 auto 50px;}
#flow .wrap .company h2::after {content: "AFFILIATED COMPANY"; font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #fff; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,0); width: 100%; line-height: 1; z-index: -1;}
#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/hotel.svg) no-repeat 15%/contain, url(../img/service/airport.svg) no-repeat  85%/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 .support {height: 200px; background: url(../img/service/arrow.svg) no-repeat center/contain; display: flex; align-items: center; justify-content: center;}
#flow .wrap .support 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%; background-size: 30%;}
    #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 .support 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 .support p {font-size: 20px;}
    #flow .wrap .support {height: 100px;}
    #flow .wrap .mands div img {height: 30px;}
}
/* agreement */
#agreement .wrap {margin: 0 20px 150px;}
#agreement .wrap .agreement {display: flex; justify-content: center; align-items: center;}
#agreement .wrap .agreement .item {display: flex; justify-content: center; align-items: center; min-width: 400px;}
#agreement .wrap .agreement .item:first-child {margin-right: 50px;}
#agreement .wrap .agreement .item a {transition: .5s; text-decoration: none; width: 100%; line-height: 2.5; color: #003687; font-size: 24px; font-weight: bold; border: 2px solid #003687; border-radius: 999px; text-align: center;}
#agreement .wrap .agreement .item a:hover {background-color: #003687; color: #fff;}
@media screen and (max-width:1000px) {
    #agreement .wrap .agreement {flex-direction: column;}
    #agreement .wrap .agreement .item:first-child {margin-right: 0; margin-bottom: 50px;}
}
@media screen and (max-width:590px) {
    #agreement .wrap .agreement .item {min-width: auto; width: 100%;}
    #agreement .wrap .agreement .item a {font-size: 18px;}
}
/* airport */
#airport .wrap {margin: 0 20px 150px;}
#airport .wrap .head {display: flex; align-items: center;}
#airport .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
#airport .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #airport .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#airport .wrap .swiper_airport .swiper-wrapper {transition-timing-function: linear;}
#airport .wrap .swiper_airport .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#airport .wrap .swiper_airport .swiper-wrapper .swiper-slide a {transition: .5s;}
#airport .wrap .swiper_airport .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#airport .wrap .swiper_airport .swiper-wrapper .swiper-slide a img {width: 100%;}
@media screen and (max-width:1200px) {
    #airport .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #airport .wrap {margin: 0 10px 100px;}
}
@media screen and (max-width:768px) {
    #airport .wrap {margin: 0 10px 70px;}
    #airport .wrap .swiper_airport .swiper-wrapper .swiper-slide {height: 75px; width: 125px;}
}
@media screen and (max-width:590px) {
    #airport .wrap {margin: 0 5px 70px;}
    #airport .wrap .head {display: block; margin: 0 0 30px;}
    #airport .wrap .head h2 {margin: 0;}
    #airport .wrap .swiper_airport .swiper-wrapper .swiper-slide {height: 60px; width: 100px;}
}
#airport .wrap .airport {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 150px;}
#airport .wrap .airport a img {display: block; width: 100%;}
#airport .wrap .airport a {transition: .5s;}
#airport .wrap .airport a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #airport .wrap .airport {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #airport .wrap .airport {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #airport .wrap .airport {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #airport .wrap .airport {grid-template-columns: repeat(3, 1fr);}
}
/* airlines */
#airlines .wrap {margin: 0 20px 150px;}
#airlines .wrap .head {display: flex; align-items: center;}
#airlines .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
#airlines .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #airlines .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#airlines .wrap .swiper .swiper-wrapper {transition-timing-function: linear;}
#airlines .wrap .swiper .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#airlines .wrap .swiper .swiper-wrapper .swiper-slide a {transition: .5s;}
#airlines .wrap .swiper .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#airlines .wrap .swiper .swiper-wrapper .swiper-slide a img {width: 100%;}
#airlines .wrap .list {display: grid; grid-template-columns: repeat(6, 1fr); gap: 0 5%;}
#airlines .wrap .list a {width: 100%; transition: .5s;}
#airlines .wrap .list a:hover {opacity: .7;}
#airlines .wrap .list a img {width: 100%;}
@media screen and (max-width:1200px) {
    #airlines .wrap {margin: 0 10px 150px;}
}
@media screen and (max-width:1000px) {
    #airlines .wrap {margin: 0 10px 100px;}
    #airlines .wrap .list {grid-template-columns: repeat(4, 1fr);}
}
@media screen and (max-width:768px) {
    #airlines .wrap {margin: 0 10px 70px;}
    #airlines .wrap .swiper .swiper-wrapper .swiper-slide {height: 75px; width: 125px;}
}
@media screen and (max-width:590px) {
    #airlines .wrap {margin: 0 5px 70px;}
    #airlines .wrap .head {display: block; margin: 0 0 30px;}
    #airlines .wrap .head h2 {margin: 0;}
    #airlines .wrap .list {grid-template-columns: repeat(3, 1fr);}
    #airlines .wrap .swiper .swiper-wrapper .swiper-slide {height: 60px; width: 100px;}

}
#airlines .wrap .airlines {display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 150px;}
#airlines .wrap .airlines a img {display: block; width: 100%;}
#airlines .wrap .airlines a {transition: .5s;}
#airlines .wrap .airlines a:hover {opacity: .7;}
@media screen and (max-width:1200px) {
    #airlines .wrap .airlines {column-gap: 100px;}
}
@media screen and (max-width:1000px) {
    #airlines .wrap .airlines {column-gap: 80px;}
}
@media screen and (max-width:768px) {
    #airlines .wrap .airlines {grid-template-columns: repeat(4, 1fr); column-gap: 50px;}
}
@media screen and (max-width:590px) {
    #airlines .wrap .airlines {grid-template-columns: repeat(3, 1fr);}
}
/* service */
#service .wrap {margin: 0 20px 150px;}
#service .wrap .ticket {background: #fff; border-radius: 30px; position: relative; margin: 0 0 150px;}
#service .wrap .ticket .bg_img {display: flex; flex-wrap: wrap; padding: 5% 0;}
#service .wrap .ticket .bg_img .img {width: 20%; padding: 2.5% 5%;}
#service .wrap .ticket .bg_img .img img {width: 100%;}
#service .wrap .ticket .content {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.8); border-radius: 30px; position: absolute; top: 0; left: 0;}
#service .wrap .ticket .content h2 {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px);}
#service .wrap .ticket .content p {margin: 0 0 50px;}
#service .wrap .ticket .content a {display: block; width: 100%; max-width: 900px; background: #003687; color: #fff; text-decoration: none; font-size: clamp(30px, 2.75vw, 50px); font-weight: bold; margin: 0 0 50px; text-align: center; border-radius: 999px; border: 5px solid #003687; transition: .5s;}
#service .wrap .ticket .content a:hover {background: #fff; color: #003687;}
#service .wrap .head {display: flex; align-items: center;}
#service .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
#service .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #service .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#service .wrap .box {display: flex; flex-direction: row-reverse; margin: 0 auto 100px;}
#service .wrap .box .text {width: 50%;}
#service .wrap .box .text h3 {font-size: clamp(25px, 2.5vw, 40px); margin: 0 auto 50px; color: #003687;}
#service .wrap .box .text p {margin: 0 auto 1em;}
#service .wrap .box .img {width: 50%; margin: 0 50px 0 0;}
#service .wrap .box .img img {width: 100%; border-radius: 30px;}
#service .wrap .box .text .link {width: 100%; max-width: 300px; margin: 0 0 0 auto;}
#service .wrap .box .text .link a {text-decoration: none; font-family: 'Josefin Sans', sans-serif; font-weight: bold; font-size: clamp(20px, 1.75vw, 30px); background: #fff; color: #003687; border-radius: 10px; display: block; line-height: 2.5; text-align: center; position: relative; transition: .5s;}
#service .wrap .box .text .link a:hover {background: #003687; color: #fff;}
#service .wrap .box .text .link a::before {position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 10px; background: #003687; border-radius: 0 0 10px 10px;}
#service .wrap .documents>ul {list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 50px;}
#service .wrap .documents>ul>li {width: calc(100% / 3); max-width: 400px;}
#service .wrap .documents>ul>li h3 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 25px 0;}
#service .wrap .documents>ul>li>ul{list-style: none;}
#service .wrap .documents>ul>li>ul li {margin: 0 0 15px 0;}
#service .wrap .documents>ul>li>ul li a {display: inline-block; transition: .5s; text-decoration: none; width: 100%; line-height: 2; color: #003687; font-size: 18px; font-weight: bold; border: 2px solid #003687; border-radius: 999px; text-align: center;}
#service .wrap .documents>ul>li>ul li a:hover {background-color: #003687; color: #fff;}
@media screen and (max-width:1200px) {
    #service .wrap {padding: 0 10px;}
    #service .wrap .box .text h3 {margin: 0 auto 30px;}
    #service .wrap .documents>ul>li {width: 100%;}
}
@media screen and (max-width:1000px) {
    #service .wrap .ticket {margin: 0 0 100px;}
    #service .wrap .ticket .bg_img .img {width: 25%;}
    #service .wrap .ticket .content {padding: 0 10px;}
    #service .wrap .ticket .content a {width: 75%; border: 2px solid #003687;}
    #service .wrap .box {display: block; margin: 0 auto 70px;}
    #service .wrap .box .text {width: 100%;}
    #service .wrap .box .img {width: 100%; margin: 0 auto;}
    #service .wrap .box .text .link {margin: 0 0 1rem auto;}
}
@media screen and (max-width:768px) {
    #service .wrap .ticket {margin: 0 0 70px;}
    #service .wrap .ticket .bg_img .img {width: calc(100% / 3);}
    #service .wrap .box .text .link {max-width: 200px;}
    #service .wrap .documents>ul>li>ul li a {font-size: 16px;}

}
@media screen and (max-width:590px) {
    #service .wrap {padding: 0 5px;}
    #service .wrap .ticket .bg_img {padding: 10% 0;}
    #service .wrap .ticket .content p {margin: 0 0 25px;}
    #service .wrap .ticket .content a {width: 100%; margin: 0 0 25px; font-size: 20px;}
    #service .wrap .head {display: block; margin: 0 0 30px;}
    #service .wrap .head h2 {margin: 0;}
    #service .wrap .documents>ul>li {min-width: auto;}

}
/* visa */
#visa .wrap {margin: 0 20px 150px;}
#visa .wrap .head {display: flex; align-items: center;}
#visa .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
#visa .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #visa .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#visa .wrap .box {display: flex; flex-direction: row-reverse; margin: 0 auto 100px;}
#visa .wrap .box .text {width: 50%;}
#visa .wrap .box .text h3 {font-size: clamp(25px, 2.5vw, 40px); margin: 0 auto 50px; color: #003687;}
#visa .wrap .box .text p {margin: 0 auto 1em;}
#visa .wrap .box .img {width: 50%; margin: 0 50px 0 0;}
#visa .wrap .box .img img {width: 100%; border-radius: 30px;}
/* #visa .wrap .handling {background: #fff; border-radius: 30px; padding: 50px; margin: 0 auto 100px;}
#visa .wrap .handling h3 {font-size: clamp(30px, 2.75vw, 50px); text-align: center; margin: 0 auto 50px;}
#visa .wrap .handling .list {display: flex; list-style: none;}
#visa .wrap .handling .list>li {width: 25%;}
#visa .wrap .handling .list>li h4 {font-size: clamp(20px, 1.75vw, 30px);}
#visa .wrap .handling .list>li ul {display: flex; flex-wrap: wrap; list-style: none;}
#visa .wrap .handling .list>li ul li {width: 50%; font-size: 20px;} */
#visa .wrap .handling {margin: 0 auto 100px;}
#visa .wrap .handling h3 {font-size: clamp(22px, 1.75vw, 30px); text-align: center; margin: 0 auto 30px;}
#visa .wrap .handling .list {display: flex; flex-wrap: wrap; list-style: none;}
/* #visa .wrap .handling .list>li {width: calc(100% / 3);} */
#visa .wrap .handling .list>li {width: 100%;}
#visa .wrap .handling .list>li:last-child {width: 100%;}
#visa .wrap .handling .list>li h4 {font-size: clamp(20px, 1.5vw, 25px); margin: 20px auto;}
#visa .wrap .handling .list>li h3 {font-size: 18px; margin: 20px auto 10px; text-align: left;}
#visa .wrap .handling .list>li ul {display: flex; flex-wrap: wrap; list-style: none;}
#visa .wrap .handling .list>li ul li {font-size: 18px;}
#visa .wrap .handling .list>li .schengen li {font-size: 14px;}
#visa .wrap .handling .list>li ul li::after {content: "/"; padding: 0 0.5em;}
#visa .wrap .handling .list>li ul li:last-child::after {content: ""; padding: 0;}
/* #visa .wrap .caution {margin: 0 auto 100px;}
#visa .wrap .caution h3 {font-size: clamp(30px, 2.75vw, 50px); text-align: center; margin: 0 auto 50px;}
#visa .wrap .caution h4 {font-size: clamp(20px, 1.75vw, 30px); margin: 0 auto 30px;}
#visa .wrap .caution p {margin: 0 auto 50px;} */
#visa .wrap .caution {margin: 0 auto 100px;}
#visa .wrap .caution h3 {font-size: clamp(22px, 1.75vw, 30px); text-align: center; margin: 0 auto 30px;}
#visa .wrap .caution h4 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 auto 20px;}
#visa .wrap .caution p {margin: 0 auto 20px;}
#visa .wrap .task {margin: 0 auto 100px;}
#visa .wrap .task h3 {font-size: clamp(22px, 1.75vw, 30px); text-align: center; margin: 0 auto 50px;}
/* #visa .wrap .task ul {list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
#visa .wrap .task ul li {background: #fff; border-radius: 20px; padding: 30px; text-align: center;}
#visa .wrap .task ul li div {width: 100%; height: 100%; max-width: 100px; max-height: 100px; margin: 0 auto 20px;}
#visa .wrap .task ul li div img {width: 100%; height: 100%;}
#visa .wrap .task ul li p {font-weight: bold;} */
#visa .wrap .task ul {list-style: none; display: flex; flex-wrap: wrap;}
#visa .wrap .task ul li::after {content: "/"; padding: 0 1rem;}
#visa .wrap .task ul li:last-child::after {content: ""; padding: 0;}
#visa .wrap .documents {margin: 0 auto 100px;}
#visa .wrap .documents h3 {font-size: clamp(22px, 1.75vw, 30px); text-align: center; margin: 0 auto 50px;}
#visa .wrap .documents ol {list-style: none; counter-reset: number;}
#visa .wrap .documents ol li {position: relative;padding-left: 1.5em;}
#visa .wrap .documents ol li::before {counter-increment: number; content: counter(number); position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 18px; height: 18px; border: 1px solid #000; border-radius: 50%; font-size: 15px; text-align: center; line-height: 1;}
#visa .wrap .documents ul {list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 50px;}
#visa .wrap .documents ul li {width: calc(100% / 3); max-width: 400px; margin: 0 0 15px 0;}
#visa .wrap .documents ul li a {display: inline-block; transition: .5s; text-decoration: none; width: 100%; line-height: 2; color: #003687; font-size: 18px; font-weight: bold; border: 2px solid #003687; border-radius: 999px; text-align: center;}
#visa .wrap .documents ul li a:hover {background-color: #003687; color: #fff;}
@media screen and (max-width:1200px) {
    #visa .wrap {margin: 0 10px 150px;}
    #visa .wrap .box .text h3 {margin: 0 auto 30px;}
    #visa .wrap .documents ul li {width: 100%;}
    /* #visa .wrap .handling .list {flex-wrap: wrap;}
    #visa .wrap .handling .list>li {width: calc(100% / 3); margin: 0 0 20px;} */
}
@media screen and (max-width:1000px) {
    #visa .wrap {margin: 0 10px 100px;}
    #visa .wrap .box {display: block; margin: 0 auto 70px;}
    #visa .wrap .box .text {width: 100%;}
    #visa .wrap .box .img {width: 100%; margin: 0 auto;}
    #visa .wrap .handling, #visa .wrap .caution {margin: 0 auto 70px;}
    /* #visa .wrap .handling .list>li {width: 50%;} */
    #visa .wrap .task ul {grid-template-columns: repeat(3,1fr);}
}
@media screen and (max-width:768px) {
    #visa .wrap {margin: 0 10px 70px;}
    /* #visa .wrap .handling {padding: 30px;}
    #visa .wrap .handling h3, #visa .wrap .caution h3, #visa .wrap .task h3 {font-size: 25px; margin: 0 auto 30px;}
    #visa .wrap .handling .list {display: block; }
    #visa .wrap .handling .list>li {width: 100%;}
    #visa .wrap .handling .list>li h4, #visa .wrap .caution h4 {font-size: 18px;}
    #visa .wrap .handling .list>li ul li {font-size: 16px;} */
    #visa .wrap .documents ul li {margin: 0 0 20px 0;}
    #visa .wrap .documents ul li a {font-size: 16px;}
}
@media screen and (max-width:590px) {
    #visa .wrap {margin: 0 5px 70px;}
    #visa .wrap .head {display: block; margin: 0 0 30px;}
    #visa .wrap .head h2 {margin: 0;}
    #visa .wrap .task ul {grid-template-columns: repeat(2,1fr);}
    #visa .wrap .documents ul li {min-width: auto; width: 100%;}

}
/* inbound */
#inbound .wrap {margin: 0 20px 150px;}
#inbound .wrap .head {display: flex; align-items: center;}
#inbound .wrap .head span {font-family: 'Josefin Sans', sans-serif; font-size: clamp(40px, 4.25vw, 80px); font-weight: bold; color: #222;}
#inbound .wrap .head h2 {font-size: clamp(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #inbound .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; color: #003687;} */
#inbound .wrap .box {display: flex; flex-direction: row-reverse; margin: 0 auto 100px;}
#inbound .wrap .box .text {width: 50%;}
#inbound .wrap .box .text h3 {font-size: clamp(25px, 2.5vw, 40px); margin: 0 auto 50px; color: #003687;}
#inbound .wrap .box .text p {margin: 0 auto 1em;}
#inbound .wrap .box .img {width: 50%; margin: 0 50px 0 0;}
#inbound .wrap .box .img img {width: 100%; border-radius: 30px;}
#inbound .wrap .support h3 {font-size: clamp(30px, 2.75vw, 50px); text-align: center; margin: 0 auto 50px;}
#inbound .wrap .support .example {display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 5%;}
#inbound .wrap .support .example .cont {width: 30%; margin: 0 auto 20px; background: #fff; border-radius: 20px; padding: 30px;}
#inbound .wrap .support .example .cont .img {margin: 0 auto 20px;}
#inbound .wrap .support .example .cont .img img {width: 100%; border-radius: 20px;}
#inbound .wrap .support .example .cont h4 {font-size: clamp(20px, 1.75vw, 30px); text-align: center;}
#inbound .wrap .agreement {margin: 100px auto; text-align: center;}
#inbound .wrap .agreement a {display: inline-block; width: 200px; line-height: 2.5; border-radius: 999px; background: #003687; color: #fff; text-decoration: none; transition: .5s;}
#inbound .wrap .agreement a:hover {opacity: .7;}
#inbound .wrap .documents ul {list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 50px;}
#inbound .wrap .documents ul li {width: calc(100% / 3); max-width: 400px; margin: 0 0 15px 0;}
#inbound .wrap .documents ul li a {display: inline-block; transition: .5s; text-decoration: none; width: 100%; line-height: 2; color: #003687; font-size: 18px; font-weight: bold; border: 2px solid #003687; border-radius: 999px; text-align: center;}
#inbound .wrap .documents ul li a:hover {background-color: #003687; color: #fff;}
@media screen and (max-width:1200px) {
    #inbound .wrap {margin: 0 10px 150px;}
    #inbound .wrap .box .text h3 {margin: 0 auto 30px;}
    #inbound .wrap .documents ul li {width: 100%;}
}
@media screen and (max-width:1000px) {
    #inbound .wrap {margin: 0 10px 100px;}
    #inbound .wrap .box {display: block; margin: 0 auto 70px;}
    #inbound .wrap .box .text {width: 100%;}
    #inbound .wrap .box .img {width: 100%; margin: 0 auto;}
    #inbound .wrap .support .example .cont {width: 47.5%;}
}
@media screen and (max-width:768px) {
    #inbound .wrap {margin: 0 10px 70px;}
    #inbound .wrap .support h3 {font-size: 25px; margin: 0 auto 30px;}
    #inbound .wrap .documents ul li {margin: 0 0 20px 0;}
    #inbound .wrap .documents ul li a {font-size: 16px;}
}
@media screen and (max-width:590px) {
    #inbound .wrap {margin: 0 5px 70px;}
    #inbound .wrap .head {display: block; margin: 0 0 30px;}
    #inbound .wrap .head h2 {margin: 0;}
    #inbound .wrap .support .example .cont {width: 100%;}
    #inbound .wrap .documents ul li {min-width: auto; width: 100%;}
}
/* 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(24px, 2.5vw, 38px); margin: 0 0 50px 0; color: #003687;}
/* #related .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); margin: 0 0 0 50px; 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);}
}