@charset "utf-8";

/* head */

#header .head .box img {width: 100%; height: 100%; aspect-ratio: 31 / 9; border-radius: 30px; display: block; object-fit: cover;}

@media screen and (max-width:590px) {

    #header .head .box img {aspect-ratio: 2 / 1;}

    #header .head .box h1 {top: 40%;}

    #header .head .box span {transform: translate(-50%,0);}

}

/* main */

main {display: flex;}

@media screen and (max-width:768px) {

    main {display: block;}

}

/* search */

#search {width: 250px;}

#search .wrap {margin: 150px 20px; position: sticky; top: 90px;}

#search .wrap .ttl {font-size: 24px; color: #003687; margin: 0 auto 1em; display: flex; justify-content: center;}

#search .wrap .ttl span {display: none;}

#search .wrap .comment {display: none; text-align: center;}

#search .wrap .search .select {width: 100%; margin: 0 auto 30px;}

#search .wrap .search .select>div h3 {font-size: 20px; margin: 0 auto 0.5em}

#search .wrap .search .select>div .box select {background: #fff; border-radius: 999px; width: 100%; padding: 10px 20px; cursor: pointer;}

#search .wrap .search .select>div .box select option {cursor: pointer;}

#search .wrap .search .select>div .box {position: relative; margin: 0 auto 0.5em;}

#search .wrap .search .select>div .box::before {position: absolute; top: 50%; right: 15px; transform: translate(0,-25%); content: ""; border: 10px solid transparent; border-top: 15px solid #707070; pointer-events: none;}

#search .wrap .search .trip {width: 100%; max-width: 1200px; margin: 0 auto 30px;}

#search .wrap .search .trip ul {list-style: none; display: flex; gap: 5%; justify-content: center; flex-wrap: wrap;}

#search .wrap .search .trip ul li {background: #fff; border: 2px solid #707070; color: #707070; text-align: center; border-radius: 999px; padding: 5px 0; margin-bottom: 0.5em; width: 100%; cursor: pointer; transition: .5s;}

#search .wrap .search .trip ul li.is-active {background: #333; border: 2px solid #333; color: #fff;}

#search .wrap .search .route {width: 100%; max-width: 1200px; margin: 0 auto 30px; display: none;}

#search .wrap .search .route ul {list-style: none; display: flex; gap: 5%; justify-content: center; flex-wrap: wrap;}

#search .wrap .search .route ul li {background: #fff; border: 2px solid #707070; color: #707070; text-align: center; border-radius: 999px; padding: 5px 0; min-width: 160px; cursor: pointer; transition: .5s;}

#search .wrap .search .route ul li.is-active {background: #003687; border: 2px solid #003687; color: #fff;}

#search .wrap .search .favorite {width: 100%; max-width: 1200px; margin: 0 auto 30px; display: none;}

#search .wrap .search .favorite h2 {text-align: center; font-size: 28px; color: #003687; margin: 0 auto 1em;}

#search .wrap .search .favorite ul {list-style: none; display: flex; justify-content: space-around; flex-wrap: wrap;}

#search .wrap .search .favorite ul li {width: 30%;}

#search .wrap .search .favorite ul li span {width: 100%; display: inline-block; line-height: 2.5; color: #fff; background: #003687; border-radius: 999px; font-weight: bold; text-align: center; cursor: pointer; transition: .5s;}

#search .wrap .search .favorite ul li span:hover {opacity: .7;}

#search .wrap .search .btn {display: none; background: #fff; color: #003687; line-height: 2.5; text-align: center; font-weight: bold; border-radius: 999px; cursor: pointer; transition: .5s;}

#search .wrap .search .btn:hover {opacity: .7;}

@media screen and (max-width:1200px) {

    #search .wrap {margin: 150px 10px;}

}

@media screen and (max-width:1000px) {

    #search .wrap {margin: 100px 10px;}

}

@media screen and (max-width:768px) {

    #search {width: 100%;}

    #search .wrap {margin: 70px 10px 0; position: static;}

    #search .wrap .comment {display: block;}

    #search .wrap .search {padding: 50px 10px 0; display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #003687; z-index: 9999; transition: .5s;}

    #search .wrap .search.is-open {display: block; opacity: 1;}

    #search .wrap .search .select .departure, #search .wrap .search .select .arrival {width: 100%;}

    #search .wrap .ttl {font-size: 20px; margin: 0 auto; background: #003687; color: #fff; border-radius: 999px; cursor: pointer; line-height: 3; transition: .5s;}

    #search .wrap .ttl span {display: block;}

    #search .wrap .ttl:hover {opacity: .7;}

    #search .wrap .search .select>div h3, #search .wrap .search .favorite h3 {font-size: 18px; margin: 0 auto 0.5em; color: #fff; text-align: center;}

    #search .wrap .search .btn {display: block;}

}

@media screen and (max-width:590px) {

    #search .wrap {margin: 70px 5px;}

    #search .wrap .search .trip ul li, #search .wrap .search .route ul li {min-width: 100px;}

    #search .wrap .search .favorite ul li {width: 45%; margin: 0 auto 10px;}

    #search .wrap .search .favorite ul li:last-child {margin: 0 auto;}

}

/* list */

#list {width: calc(100% - 250px);}

#list .wrap {margin: 150px 20px;}

#list .wrap .list {width: 100%; margin: 0 auto;}

#list .wrap .list h2 {text-align: center; font-size: 28px; color: #003687; margin: 0 auto 1em;}

#list .wrap .list .text {width: 100%; margin: 0 auto 70px;}

#list .wrap .list ul {list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;}

#list .wrap .list ul li {display: none;}

#list .wrap .list ul li.is-show {display: block;}

#list .wrap .list ul li .card {display: flex; align-items: stretch; transition: .5s; cursor: pointer;}

#list .wrap .list ul li .card:hover {opacity: .7;}

#list .wrap .list ul li .card .airport {width: 60%; background: #003687; border-radius: 20px 0 0 20px; display: flex; justify-content: center;}

#list .wrap .list ul li .card .airport .departure, #list .wrap .list ul li .card .airport .arrival {display: flex; flex-direction: column; text-align: center; padding: 10px 0;}

#list .wrap .list ul li .card .airport .departure p, #list .wrap .list ul li .airport .arrival p {font-size: 18px; font-weight: bold; color: #fff;}

#list .wrap .list ul li .card .airport .departure p::after {content: "→";}

#list .wrap .list ul li .card .airport .departure time, #list .wrap .list ul li .airport .arrival time {font-size: 14px; color: #fff;}

#list .wrap .list ul li .card .price {width: 30%; background: #fff; border-radius: 0 20px 20px 0; display: flex; justify-content: center; align-items: center;}

#list .wrap .list ul li .card .price p {color: #003687; font-weight: bold; font-size: 18px;}

#list .wrap .list ul li .card .airline {width: 40%; background: #0075c1; border-radius: 0 20px 20px 0; display: flex; justify-content: center; align-items: center;}

#list .wrap .list ul li .card .airline p {color: #fff; font-weight: bold; font-size: 15px; text-align: center;}

#list .wrap .list ul li .full {display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(34, 34, 34, 0.9); z-index: 9999; transition: .5s;}

#list .wrap .list ul li .full.is-show {display: block; opacity: 1;}

#list .wrap .list ul li .full .content {width: 100%; height: 100%; position: relative;}

#list .wrap .list ul li .full .content .close {position: absolute; top: 5%; left: 5%; background: #fff; border-radius: 999px; cursor: pointer; transition: .5s; padding: 10px 20px 10px 40px;}

#list .wrap .list ul li .full .content .close::before {content: url(../img/ticket/reply.svg); width: 20px; height: 20px; position: absolute; top: 50%; left: 10px; transform: translate(0,-50%);}

/* #list .wrap .list ul li .full .content .close::before, #list .wrap .list ul li .full .content .close::after {content: ""; position: absolute; top: 50%; left: 50%; background: #222; width: 30px; height: 2px; transform: translate(-50%,-50%) rotate(-45deg); pointer-events: none;}

#list .wrap .list ul li .full .content .close::after {transform: translate(-50%,-50%) rotate(45deg);} */

#list .wrap .list ul li .full .content .close:hover {opacity: .7;}

/* #list .wrap .list ul li .full .content .box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%; max-width: 560px;}

#list .wrap .list ul li .full .content .box .head {display: flex; justify-content: space-between; background: #003687; border-radius: 30px 30px 0 0; padding: 20px;}

#list .wrap .list ul li .full .content .box .head p {font-size: clamp(20px, 1.75vw, 30px); font-weight: bold; color: #fff;}

#list .wrap .list ul li .full .content .box .body {display: flex; flex-wrap: wrap; align-items: center; background: #fff; border-radius: 0 0 30px 30px; padding: 20px 50px;}

#list .wrap .list ul li .full .content .box .body .arrival {width: 50%; font-size: clamp(25px, 2.25vw, 40px); font-weight: bold;}

#list .wrap .list ul li .full .content .box .body .price {width: 50%; font-size: clamp(20px, 1.75vw, 30px); font-weight: bold;}

#list .wrap .list ul li .full .content .box .body .departure_time, #list .wrap .list ul li .full .content .box .body .arrival_time {width: 50%; font-size: clamp(16px, 1.25vw, 23px);}

#list .wrap .list ul li .full .content .box .body .week {width: 80%; font-size: clamp(16px, 1.25vw, 23px);}

#list .wrap .list ul li .full .content .box .body .round-trip {width: 20%; font-size: clamp(16px, 1.25vw, 23px); color: #fff; background: #333; border-radius: 10px; text-align: center;} */

#list .wrap .list ul li .full .content .contact {position: absolute; bottom: 10%; left: 50%; transform: translate(-50%,0); white-space: nowrap;}

#list .wrap .list ul li .full .content .contact a {background: #F01C1C; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 999px; font-weight: bold; transition: .5s;}

#list .wrap .list ul li .full .content .contact a:hover {opacity: .7;}

#list .wrap .list ul li .full .content .note {position: absolute; left: 0; bottom: 0; color: #fff;}

@media screen and (max-width:1200px) {

    #list .wrap {margin: 150px 10px;}

    #list .wrap .list ul {grid-template-columns: repeat(2,1fr);}

}

@media screen and (max-width:1000px) {

    #list .wrap {margin: 100px 10px;}

    #list .wrap .list ul {grid-template-columns: repeat(1,1fr);}

}

@media screen and (max-width:768px) {

    #list {width: 100%;}

    #list .wrap {margin: 70px 10px;}

    /* #list .wrap .list ul li .full .content .box {transform: translate(-50%,-100%);}

    #list .wrap .list ul li .full .content .contact {top: 65%;} */

    #list .wrap .list .text {margin: 0 auto 50px;}

}

@media screen and (max-width:590px) {

    #list .wrap {margin: 70px 5px;}

    /* #list .wrap .list ul li .full .content .box .head {border-radius: 20px 20px 0 0; padding: 10px;}

    #list .wrap .list ul li .full .content .box .body {border-radius: 0 0 20px 20px; padding: 10px 25px;} */

    #list .wrap .list .text {margin: 0 auto 35px;}

}

#list .wrap .list ul li .full .content .ticket {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%; max-width: 768px;}

#list .wrap .list ul li .full .content .ticket .head {display: flex; justify-content: space-between; background: #003687; border-radius: 20px; padding: 20px; margin-bottom: 20px;}

#list .wrap .list ul li .full .content .ticket .head p {font-size: clamp(20px, 1.75vw, 30px); font-weight: bold; color: #fff;}

#list .wrap .list ul li .full .content .ticket .out, #list .wrap .list ul li .full .content .ticket .home {background: #fff; border-radius: 20px; padding: 0 0 10px 0; margin-bottom: 20px;}

#list .wrap .list ul li .full .content .ticket .out .ttl, #list .wrap .list ul li .full .content .ticket .home .ttl {display: flex; padding: 0 20px; border-bottom: 1px solid #333;}

#list .wrap .list ul li .full .content .ticket .out .ttl img, #list .wrap .list ul li .full .content .ticket .home .ttl img {width: 30px; margin-right: 20px;}

#list .wrap .list ul li .full .content .ticket .out .ttl p, #list .wrap .list ul li .full .content .ticket .home .ttl p {font-size: clamp(20px, 1.75vw, 30px);}

#list .wrap .list ul li .full .content .ticket .out .ttl p span, #list .wrap .list ul li .full .content .ticket .home .ttl p span {font-size: clamp(16px, 1.5vw, 26px); padding-left: 1rem; text-transform: uppercase;}

#list .wrap .list ul li .full .content .ticket .out .body .box, #list .wrap .list ul li .full .content .ticket .home .body .box {display: flex;}

#list .wrap .list ul li .full .content .ticket .out .body .box div, #list .wrap .list ul li .full .content .ticket .home .body .box div {width: calc(100% / 3); text-align: center; font-size: clamp(20px, 1.75vw, 30px); font-weight: bold;}

#list .wrap .list ul li .full .content .ticket .out .body .box div p, #list .wrap .list ul li .full .content .ticket .home .body .box div p {font-size: clamp(16px, 1.25vw, 20px);}

#list .wrap .list ul li .full .content .ticket .out .body .box .arrow, #list .wrap .list ul li .full .content .ticket .home .body .box .arrow {display: flex; justify-content: center; align-items: center; flex-direction: column;}

#list .wrap .list ul li .full .content .ticket .out .body .box .arrow .waypoint, #list .wrap .list ul li .full .content .ticket .home .body .box .arrow .waypoint {font-size: 0.8rem;}

#list .wrap .list ul li .full .content .ticket .out .body .week, #list .wrap .list ul li .full .content .ticket .home .body .week {text-align: center;}

#list .wrap .list ul li .full .content .ticket .out .body .week span::after, #list .wrap .list ul li .full .content .ticket .home .body .week span::after {content: "/";}

#list .wrap .list ul li .full .content .ticket .out .body .week span:last-child::after, #list .wrap .list ul li .full .content .ticket .home .body .week span:last-child::after {content: "";}

@media screen and (max-width:768px) {

    #list .wrap .list ul li .full .content .ticket {top: 45%;}

    #list .wrap .list ul li .full .content .close {top: 2.5%;}

    #list .wrap .list ul li .full .content .contact {bottom: 15%;}

}

#list .wrap .list .nodata {display: none; text-align: center; font-weight: bold;}

#list .wrap .list .nodata.is-active {display: block;}

.option_none{
	display: none;
}