@charset "UTF-8";

/*------------------------------
  PageHeader
------------------------------*/
.transit_title{
    --x: 52%;
    --y: 98%;
    --size-x: 20%;
}
.transit_subtitle{

}
@media (max-width: 769px) {
    .transit_title{
       /* font-size:40px !important;*/
        --x: 50%;
        --y: 94%;
        --size-x: 16%;
    }
    .transit_subtitle{
        /*font-size:20px !important;*/
    }
}

/* ==========================================
   Media Category
========================================== */
#train-bus{
    padding-top: 80px;
    position: relative;
    padding-bottom: 50px;
}
#sea{
    padding-top: 80px;
    position: relative;
    /*    background: var(--color-accent-light); */
    background: var(--color-border);
    padding-bottom: 50px;
}
#airport{
    padding-top: 80px;
    padding-bottom: 50px;
    position: relative;
}
/*------------------------------
  Header
------------------------------*/
.transit-category_header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:40px;
    position:relative;
}
.transit-category_header::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* タイトルの下線位置 */
    top: 105px;
    height: 1px;
    background: var(--color-black);
    z-index: 1;
}

@media (max-width: 1100px) {
    .transit-category_header{
        display:block;
    }
    .transit-category_header::after{
        /* タイトルの下線位置 */
        top: 55px;
    }

}
/*------------------------------
  Info
------------------------------*/
.transit-category_info{
    width:20%;
    padding-top:30px;
    background-color: var(--color-bg);
    display: block;
}
#sea .transit-category_info{
    /*    background: var(--color-accent-light); */
    background: var(--color-border);

}

@media (max-width: 1100px) {
    .transit-category_info{
        width:100%;
        margin: 0;
        padding: 0;
        min-height: 15vh;
    }
}

/*------------------------------
  title
------------------------------*/
#train-bus .transit-category_bun_title{
    --x: 46%;
    --y: 95%;
    --size-x: 43%;
    white-space: nowrap;
}
#train-bus .transit-category_bun_subtitle{}

@media (max-width: 1100px) {
    #train-bus .transit-category_bun_title{
        --x: 44%;
        --y: 80%;
        --size-x: 42%;
        font-size:40px !important;
    }
    #train-bus .transit-category_bun_subtitle{
        font-size:20px !important;
        margin-left: 10px;
    }
}

#sea .transit-category_bun_title{
    --x: 12%;
    --y: 29%;
    --size-x: 55%;
    white-space: nowrap;
}
#sea .transit-category_bun_subtitle{}

@media (max-width: 1100px) {
    #sea .transit-category_bun_title{
        --x: 12%;
        --y: 29%;
        --size-x: 55%;
        font-size:40px !important;
    }
    #sea .transit-category_bun_subtitle{
        font-size:20px !important;
        margin-left: 10px;
    }
}

#airport .transit-category_bun_title{
    --x: 47%;
    --y: 80%;
    --size-x: 33%;
    white-space: nowrap;
}
#airport .transit-category_bun_subtitle{
}

@media (max-width: 1100px) {
    #airport .transit-category_bun_title{
        --x: 47%;
        --y: 80%;
        --size-x: 33%;
        font-size:40px !important;
    }
    #airport .transit-category_bun_subtitle{
        font-size:20px !important;
        margin-left: 10px;
    }
}

/*------------------------------
  Image
------------------------------*/
.transit-category_image{
    width:80%;
    aspect-ratio:16 / 7;
    position:relative;
    z-index:2;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    overflow: hidden;

    clip-path:polygon(
        20% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
@media (max-width: 1100px) {
    .transit-category_image{
        width:100%;
    }
}

#train-bus .transit-category_image{
    background-image:url("../../service/transit/images/train_main.jpg");
}

#sea .transit-category_image{
    background-image:url("../../service/transit/images/ship_main.jpg");
}

#airport .transit-category_image{
    background-image:url("../../service/transit/images/airport_main.jpg");
}

/*------------------------------
  Description
------------------------------*/
.transit-category_description{
    max-width:900px;
    margin:50px auto 0;
}

.transit-category_heading{
    margin-bottom:20px;
}

/*------------------------------
  Image Slider
------------------------------*/
.transit-category_slider{
    display:flex;
    align-items:center;
    gap:30px;
    max-width:1100px;
    margin:60px auto 0;
}

.transit-category_slider_images{
    flex:1;
}
.transit-category_slider_item{
    flex-shrink:0;
}

.transit-category_slider_item img{
    width:100%;
    /*height:100%;*/
    height:240px;
    object-fit:cover;
    display:block;
}

.transit-category_slider_caption{
    text-align: center;
}

.transit-category_slider_arrow{
    position: static;
}

@media (max-width: 769px) {
     .transit-category_slider{
        gap:10px;
        margin-top:40px;
    }

    .transit-category_slider_caption{
        text-align: center;
        margin: 0;
    }

    .transit-category_slider_arrow{
        width:30px;
        height:30px;
        font-size:24px;
    }

}

/*------------------------------
  Description
------------------------------*/
.transit-category_mediabutton{
    max-width:250px;
    margin:50px auto 0;
}
@media (max-width: 769px) {
    .transit-category_mediabutton{
        margin:30px auto 0;
    }
}


/*------------------------------
  SEA用のカラー反転
------------------------------*/
#sea .c-carousel__prev,
#sea .c-carousel__next{
    background: var(--color-white);
    border: 1px solid var(--color-main);
}
#sea .c-carousel__prev::after,
#sea .c-carousel__next::after{
    color: var(--color-main);
}