@charset "utf-8";
/* service */
#service .wrap {padding: 0 20px;}
#service .wrap .box {display: flex; margin: 150px 0;}
#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 .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: 8px 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 .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%;}
}
@media screen and (max-width:768px) {
    #service .wrap .box {margin: 0 0 70px;}
    #service .wrap .box .text .link {max-width: 200px;}
    #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;}
}