@charset "utf-8";
/* slider */
#header .swiper-box {padding: 90px 20px 0; position: relative;}
#header .swiper-box .swiper-main {width: 100%; height: 100%;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide {position: relative;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .slide {width: 100%; height: 100%; aspect-ratio: 90 / 34; display: block; object-fit: cover; position: relative; border-radius: 30px;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .link {position: absolute; top: 50%; right: 5%; transform: translate(0,-50%); opacity: 0; transition: 1s 1s;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide-active .link {opacity: 1;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .link a {display: inline-block; text-align: center; text-decoration: none; padding: 10px 75px; color: #003687; background: #fff; border: 5px solid #003687; font-size: clamp(20px, 1.75vw, 30px); font-weight: bold; border-radius: 999px; transition: .5s;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .link a:hover {color: #fff; background: #003687;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .catch {position: absolute; top: 10%; right: 5%; font-size: clamp(25px, 2.5vw, 40px); font-weight: bold; color: #fff; text-shadow: 0 0 10px #000; text-align: right; opacity: 0; transition: 1s 1s;}
#header .swiper-box .swiper-main .swiper-wrapper .swiper-slide-active .catch {opacity: 1;}
#header .swiper-box .swiper-wrap .swiper-thumbnail {position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); width: 80%; height: 140px;}
#header .swiper-box .swiper-wrap .swiper-thumbnail .swiper-wrapper .swiper-slide .wrap {width: 100%; height: 100%; margin: 0 auto; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; transition: .5s; position: relative; cursor: pointer;}
#header .swiper-box .swiper-wrap .swiper-thumbnail .swiper-wrapper .swiper-slide .wrap .border {position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #003687; border-radius: 0 0 20px 20px; opacity: 0; transition: .5s;}
#header .swiper-box .swiper-wrap .swiper-thumbnail .swiper-wrapper .swiper-slide-thumb-active .wrap .border {opacity: 1;}
#header .swiper-box .swiper-wrap .swiper-thumbnail .swiper-wrapper .swiper-slide .wrap h2 {font-size: 16px; font-weight: normal; text-align: center;}
#header .swiper-box .swiper-wrap .swiper-thumbnail .swiper-wrapper .swiper-slide .wrap h2 span {font-family: 'Josefin Sans', sans-serif; font-size: 20px; font-weight: bold;}
#header .swiper-box .swiper-wrap .swiper-button-prev,
#header .swiper-box .swiper-wrap .swiper-button-next {height: 50px; width: 50px;}
#header .swiper-box .swiper-wrap .swiper-button-prev {left: 20px; right: auto; bottom: 0; top: auto; transform: translate(0, 50%); z-index: 1;}
#header .swiper-box .swiper-wrap .swiper-button-next {left: auto; right: 20px; bottom: 0; top: auto; transform: translate(0, 50%); z-index: 1;}
#header .swiper-box .swiper-wrap .swiper-button-prev::after,
#header .swiper-box .swiper-wrap .swiper-button-next::after {background-repeat: no-repeat; background-size: auto 50%; background-position: center; background-color: #fff; border-radius: 999px; content: ""; height: 50px; margin: auto; width: 50px;}
#header .swiper-box .swiper-wrap .swiper-button-prev::after {background-image: url(../img/top/angle.svg);}
#header .swiper-box .swiper-wrap .swiper-button-next::after {background-image: url(../img/top/angle.svg); transform: rotate(180deg);}
@media screen and (max-width:1200px) {
    #header .swiper-box {padding: 90px 10px 0;}
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .slide {aspect-ratio: 2 / 1; border-radius: 20px;}
}
@media screen and (max-width:1000px) {
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .slide {aspect-ratio: 4 / 3;}
    #header .swiper-box .swiper-wrap .swiper-thumbnail {width: 70%;}
}
@media screen and (max-width:768px) {
    #header .swiper-box {padding: 60px 5px 0;}
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .slide {aspect-ratio: 1 / 1;}
    #header .swiper-box .swiper-wrap .swiper-thumbnail {width: 50%;}
}
@media screen and (max-width:590px) {
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .slide {aspect-ratio: 4 / 5;}
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .catch {font-size: 18px; top: 50%; right: 50%; transform: translate(50%, -100%); text-align: center; width: 100%;}
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .link {right: 50%; transform: translate(50%, 0); white-space: nowrap;}
    #header .swiper-box .swiper-main .swiper-wrapper .swiper-slide .link a {padding: 5px 30px; font-size: 16px; border: 2px solid #003687;}

}
/* catch */
#catch {margin: 100px 0;}
#catch .wrap {padding: 70px 0; width: 100%; position: relative;}
#catch .wrap h2 {font-size: clamp(30px, 2.75vw, 50px); text-align: center;}
#catch .wrap h2::before {position: absolute; top: 0; left: 20px; content: "GLOBAL"; color: #fff; font-size: clamp(75px, 8vw, 150px); font-family: 'Josefin Sans', sans-serif; z-index: -1;}
#catch .wrap h2::after {position: absolute; bottom: 0; right: 20px; content: "GATEWAY"; color: #fff; font-size: clamp(75px, 8vw, 150px); font-family: 'Josefin Sans', sans-serif; z-index: -1;}
@media screen and (max-width:1200px) {
    #catch .wrap h2::before {left: 10px;}
    #catch .wrap h2::after {right: 10px;}
}
@media screen and (max-width:768px) {
    #catch {margin: 70px 0;}
    #catch .wrap {padding: 30px 0;}
}
@media screen and (max-width:590px) {
    #catch .wrap h2 {font-size: 25px; padding: 0 5px;}
    #catch .wrap h2::before {left: 5px; font-size: 50px;}
    #catch .wrap h2::after {right: 5px; font-size: 50px}
    
}
/* service */
#service .wrap {padding: 0 20px;}
#service .wrap .box {display: flex; margin: 0 0 150px;}
#service .wrap .box:first-child {margin: 0 0 50px;}
#service .wrap .box.reverse {flex-direction: row-reverse;}
#service .wrap .box .text {width: 50%; padding: 0 20px 0 0;}
#service .wrap .box.reverse .text {padding: 0 0 0 20px;}
#service .wrap .about {background: url(../img/logo_w.svg) no-repeat center/auto 50%;}
#service .wrap .box .text .ttl {color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold;}
#service .wrap .box .text h2 {font-size: clamp(20px, 2vw, 35px); color: #003687; margin: 0 0 50px;}
#service .wrap .box .text p {margin: 0 0 50px;}
#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 .box .img {width: 50%; padding: 0 0 0 20px;}
#service .wrap .box.reverse .img {padding: 0 20px 0 0;}
#service .wrap .box .img img {width: 100%; border-radius: 20px;}
#service .wrap>.link {width: 100%; max-width: 300px; margin: 50px auto 150px;}
#service .wrap>.link a {text-decoration: none; background-color: #003687; color: #fff; border: 2px solid #003687; border-radius: 999px; text-align: center; display: block; line-height: 2; font-size: 25px; transition: .5s;}
#service .wrap>.link a:hover {opacity: .7;}
#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;}
@media screen and (max-width:1200px) {
    #service .wrap {padding: 0 10px;}
    #service .wrap .box .text h2 {margin: 0 0 25px;}
    #service .wrap .box .text p {margin: 0 0 25px;}
}
@media screen and (max-width:1000px) {
    #service .wrap .box {display: block; margin: 0 0 100px;}
    #service .wrap .box .text, #service .wrap .box.reverse .text, #service .wrap .box .img, #service .wrap .box.reverse .img {width: 100%; padding: 0;}
    #service .wrap .box .text {margin: 0 auto 25px;}
    #service .wrap .about {background: url(../img/logo_w.svg) no-repeat center/contain;}
    #service .wrap>.link {margin: 40px auto 100px;}
    #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;}
}
@media screen and (max-width:768px) {
    #service .wrap .box {margin: 0 0 70px;}
    #service .wrap .box .text .link {max-width: 200px;}
    #service .wrap>.link {margin: 30px auto 70px;}
    #service .wrap>.link a {font-size: 18px; border: 1px solid #003687;}
    #service .wrap .ticket {margin: 0 0 70px;}
    #service .wrap .ticket .bg_img .img {width: calc(100% / 3);}
}
@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;}
}
/* news */
#news .wrap {padding: 0 20px; display: flex; margin: 0 0 150px;}
#news .wrap .box {width: 40%; padding: 0 20px 0 0; display: flex; flex-direction: column; justify-content: space-between;}
#news .wrap .box .cont {margin: 0 0 100px;}
#news .wrap .box .cont .ttl {color: #222; font-size: clamp(30px, 2.75vw, 50px); font-family: 'Josefin Sans', sans-serif; font-weight: bold;}
#news .wrap .box .cont h2 {font-size: clamp(20px, 1.5vw, 25px); color: #003687;}
#news .wrap .box .link {width: 100%; max-width: 300px;}
#news .wrap .box .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;}
#news .wrap .box .link a:hover {background: #003687; color: #fff;}
#news .wrap .box .link a::before {position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 10px; background: #003687; border-radius: 0 0 10px 10px;}
#news .wrap .list {width: 60%;}
#news .wrap .list ul {list-style: none;}
#news .wrap .list ul li {padding: 20px; border-bottom: 1px solid #707070; display: flex; align-items: center;}
#news .wrap .list ul li:first-child {border-top: 1px solid #707070;}
#news .wrap .list ul li time {font-family: 'Josefin Sans', sans-serif; font-weight: bold; font-size: 22px; width: 20%;}
#news .wrap .list ul li a {text-decoration: none; width: 80%; transition: .5s;}
#news .wrap .list ul li a:hover {opacity: .7;}
#news .wrap .list ul li a h3 {color: #222; font-size: 22px; font-weight: normal;}
@media screen and (max-width:1200px) {
    #news .wrap {padding: 0 10px; flex-direction: column;}
    #news .wrap .box, #news .wrap .list {width: 100%; padding: 0;}
    #news .wrap .box {display: contents;}
    #news .wrap .box .cont {order: 1; margin: 0 0 50px;}
    #news .wrap .box .link {order: 3; margin: 0 0 0 auto;}
    #news .wrap .list {order: 2; margin: 0 0 50px;}
}
@media screen and (max-width:1000px) {
    #news .wrap {margin: 0 0 100px;}
    #news .wrap .list ul li {display: block;}
    #news .wrap .list ul li time, #news .wrap .list ul li a {width: 100%;}
    #news .wrap .list ul li time, #news .wrap .list ul li a h3 {font-size: 18px;}
}
@media screen and (max-width:768px) {
    #news .wrap {margin: 0 0 70px;}
    #news .wrap .box .link {max-width: 200px;}
    #news .wrap .list ul li time, #news .wrap .list ul li a h3 {font-size: 18px;}
}
@media screen and (max-width:590px) {
    #news .wrap {padding: 0 5px;}
}
/* about */
#about .wrap {padding: 0 20px;}
#about .wrap .box {display: flex; margin: 0 0 150px;}
#about .wrap .box.reverse {flex-direction: row-reverse;}
#about .wrap .box .text {width: 50%; padding: 0 20px 0 0;}
#about .wrap .box.reverse .text {padding: 0 0 0 20px;}
#about .wrap .about {background: url(../img/logo_w.svg) no-repeat center/auto 50%;}
#about .wrap .box .text .ttl {color: #222; font-size: clamp(40px, 4.25vw, 80px); font-family: 'Josefin Sans', sans-serif; font-weight: bold;}
#about .wrap .box .text h2 {font-size: clamp(20px, 2vw, 35px); color: #003687; margin: 0 0 50px;}
#about .wrap .box .text p {margin: 0 0 50px;}
#about .wrap .box .text .link {width: 100%; max-width: 300px; margin: 0 0 0 auto;}
#about .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;}
#about .wrap .box .text .link a:hover {background: #003687; color: #fff;}
#about .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;}
#about .wrap .box .img {width: 50%; padding: 0 0 0 20px;}
#about .wrap .box.reverse .img {padding: 0 20px 0 0;}
#about .wrap .box .img img {width: 100%; border-radius: 20px;}
@media screen and (max-width:1200px) {
    #about .wrap {padding: 0 10px;}
    #about .wrap .box .text h2 {margin: 0 0 25px;}
    #about .wrap .box .text p {margin: 0 0 25px;}
}
@media screen and (max-width:1000px) {
    #about .wrap .box {display: block; margin: 0 0 100px;}
    #about .wrap .box .text, #about .wrap .box.reverse .text, #about .wrap .box .img, #about .wrap .box.reverse .img {width: 100%; padding: 0;}
    #about .wrap .box .text {margin: 0 auto 25px;}
    #about .wrap .about {background: url(../img/logo_w.svg) no-repeat center/contain;}
}
@media screen and (max-width:768px) {
    #about .wrap .box {margin: 0 0 70px;}
    #about .wrap .box .text .link {max-width: 200px;}
}
@media screen and (max-width:590px) {
    #about .wrap {padding: 0 5px;}
}
/* related */
#related .wrap {padding: 0 20px; margin: 0 0 150px;}
#related .wrap .head .ttl {color: #222; font-size: clamp(30px, 2.75vw, 50px); font-family: 'Josefin Sans', sans-serif; font-weight: bold;}
#related .wrap .head h2 {font-size: clamp(20px, 1.5vw, 25px); color: #003687; border-left: 10px solid #003687; padding: 0 0 0 20px;}
#related .wrap .content .swiper_related .swiper-wrapper {transition-timing-function: linear;}
#related .wrap .content .swiper_related .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#related .wrap .content .swiper_related .swiper-wrapper .swiper-slide a {transition: .5s;}
#related .wrap .content .swiper_related .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#related .wrap .content .swiper_related .swiper-wrapper .swiper-slide a img {width: 100%;}
#related .wrap .content .swiper_related .swiper-wrapper .swiper-slide.double {height: 150px; width: 500px;}
#related .wrap .content .swiper_related_1 .swiper-wrapper, #related .wrap .content .swiper_related_2 .swiper-wrapper {transition-timing-function: linear;}
#related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide {height: 150px; width: 250px;}
#related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide a, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide a {transition: .5s;}
#related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide a:hover, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide a:hover {opacity: .7;}
#related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide a img, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide a img {width: 100%;}
#related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide.double {height: 150px; width: 500px;}
@media screen and (max-width:1200px) {
    #related .wrap {padding: 0 10px;}
}
@media screen and (max-width:1000px) {
    #related .wrap {margin: 0 0 100px;}
}
@media screen and (max-width:768px) {
    #related .wrap {margin: 0 0 70px;}
    #related .wrap .head {margin: 0 0 50px;}
    #related .wrap .content .swiper_related .swiper-wrapper .swiper-slide, #related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide {height: 75px; width: 125px;}
    #related .wrap .content .swiper_related .swiper-wrapper .swiper-slide.double, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide.double {height: 75px; width: 250px;}
}
@media screen and (max-width:590px) {
    #related .wrap {padding: 0 5px;}
    #related .wrap .content .swiper_related .swiper-wrapper .swiper-slide, #related .wrap .content .swiper_related_1 .swiper-wrapper .swiper-slide, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide {height: 60px; width: 100px;}
    #related .wrap .content .swiper_related .swiper-wrapper .swiper-slide.double, #related .wrap .content .swiper_related_2 .swiper-wrapper .swiper-slide.double {height: 60px; width: 200px;}
}