@charset "utf-8";

.text-pink{
    color: #F53C7F;
}

.mainbanner {
    width: 100%;
    padding: 0px 15px 15px;
    text-align: center;
}
.mainbanner__slider img {
    width: 100%;
    height: auto;
}
.mainbanner__text {
    width: 100%;
    padding-bottom: 20px;
}
.mainbanner__text h1 {
    font-size: 7vw;
    font-weight: bold;
    line-height: 1.4;
}
.mainbanner__text p {
    font-size: 2.5vw;
    font-weight: bold;
    color: #f53c7f;
    padding-top: 10px;
}
.mainbox {
    font-size: 14px;
    padding-bottom: 60px;
}
.mainbox__con {
    margin-top: 70px;
}
.mainbox__con > figure,
.mainbox__con > h1,
.mainbox__con > h2 {
    text-align: center;
}
.mainbox__con > h1,
.mainbox__con > h2 {
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0 40px;
}
.mainbox__list,
.mainbox__list-02 > li {
    display: flex;
    flex-direction: column;
	justify-content: center;
}
.mainbox__list figure {
	text-align: center;
}
.mainbox__list > li {
    width: 100%;
    padding-bottom: 0px;
	padding-left: 8px;
	padding-right: 8px;
}
.mainbox__list > li + li{
    border-top: 1px #fff dotted;
}
.mainbox__list img,
.mainbox__list-02 img {
    /*width: 100%;
    height: 160px;
    object-fit: cover;*/
    border-radius: 10px;
}
/*.mainbox__list img.left-top {
    object-position: 0 0;
}
.mainbox__list img.left-top02 {
    object-position: 0 35%;
}
.mainbox__list img.left-bottom {
    object-position: 0 50%;
}*/
.mainbox__list h2,
.mainbox__list-02 h2 {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    display: block;
    width: 100%;
    background: #ffeff5;
    padding: 15px 15px;
    margin: 0 auto 0;
    cursor: pointer;
    color: #4f001d;
    position: relative;
}
.mainbox__list h2 .badge{
    position: relative;
    top: -2px;
    line-height: 1;
    font-weight: normal;
    font-size: 12px;
    border-radius: 3px;
}
.badge-01{
    background: #29a2ff;
}
.badge-02{
    background: #ca65ff;
}
.mainbox__list h2:after,
.mainbox__list-02 h2:after{
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.mainbox__list > li:first-child dt h2{
    border-radius: 8px 8px 0 0;
}
.mainbox__list > li:last-child dt h2{
    border-radius: 0 0 8px 8px;
}
.mainbox__list dt.switchactive h2:after{
    content: "\f077";
}
.mainbox__list > li:first-child dt.switchactive h2,
.mainbox__list > li:last-child dt.switchactive h2{
    border-radius: 0;
}
.mainbox__list dd,
.mainbox__list-02 dd {
    padding: 10px 5px 20px;
    display: none;
}
.mainbox__list dt.switchactive + dd,
.mainbox__list-02 dt.switchactive + dd {
    display: block;
}
.mainbox__list a {
    text-decoration: underline;
}
.mainbox__check {
    padding: 8px 0;
}
.mainbox__check li{
    padding-left: 20px;
    position: relative;
    font-size: 14px;
}
.mainbox__check li + li{
    margin-top: 6px;
}
.mainbox__check li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f058';
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}
.mainbox__check__notice {
    font-size: 12px;
}
.mainbox .service,
.mainbox .access {
    padding: 0 15px;
}
.mainbox .mainbox__title {
    width: 30%;
    height: auto;
}
.mainbox__notice {
    font-weight: bold;
    margin-top: 15px;
}
.mainbox__notice i {
    margin-right: 5px;
}
.mainbox .mainbox__info {
    font-weight: bold;
    padding-top: 20px;
}
.mainbox .mainbox__info--access {
    background: url("/static/img/guide/bus_terminal/wbt_osaka/icon_add.png") no-repeat;
    padding-left: 55px;
}
.mainbox .mainbox__info--access span {
    padding: 3px 0 0;
}
.mainbox .mainbox__info--access a {
    text-decoration: underline;
}
.mainbox .mainbox__info--access i {
    color: #007bff;
    margin-left: 3px;
}
.mainbox .mainbox__info--time {
    background: url("/static/img/guide/bus_terminal/wbt_osaka/icon_clock.png") no-repeat;
    padding-left: 55px;
	padding-bottom: 0.65rem;
    margin-top: 20px;
}
.mainbox .mainbox__info--time span {
    color: #F53C7F;
}
.service .mainbox__list-02  ul {
    list-style: disc;
    margin: 15px 0 0 15px;
}
.pctab {
    display: none !important;
}
@media screen and (min-width:370px) {
    /*.mainbox__list img,
    .mainbox__list-02 img {
        height: 200px;
    }*/
}
@media screen and (min-width:480px) {
    .mainbanner__text h1 {
        font-size: 36px;
    }
    .mainbanner__text p {
        font-size: 18px;
    }
    /*.mainbox__list img,
    .mainbox__list-02 img {
        height: 300px;
    }*/
}
@media screen and (min-width:576px) {
    .mainbox .mainbox__title {
        width: 22%;
        height: auto;
    }
}
@media screen and (min-width:768px) {
    .onlysm {
        display: none !important;
    }
    .pctab {
        display: block !important;
    }
    .mainbanner {
        width: 100%;
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        padding: 25px;
        text-align: left;
    }
    .mainbanner__slider {
        width: 63%;
    }
    .mainbanner__slider img {
        width: 100%;
        height: auto;
    }
    .mainbanner__text {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 20px;
        padding-bottom: 0;
    }
    .mainbanner__text h1 {
        font-size: 2.5vw;
        font-weight: bold;
    }
    .mainbanner__text p {
        font-size: 1vw;
        font-weight: bold;
        color: #f53c7f;
    }
    .mainbox .service,
    .mainbox .access {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .mainbox__list > li {
        width: 49%;
        padding-bottom: 65px;
    }
    .mainbox__list > li.li_parking {
        width: 64%;
    }
    .mainbox__list,
    .mainbox__list-02 > li {
				-ms-flex-direction: row;
				flex-direction: row;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				/*justify-content: space-around;*/
    }
    .mainbox__list h2,
    .mainbox__list-02 h2 {
        font-size: 18px;
        width: 100%;
        padding: 20px 5px 15px;
        margin-bottom: 25px;
        background: none;
        border-bottom: 2px dotted #707070;
        cursor: initial;
        color: initial;
    }
    .mainbox__list-02 h2 {
        padding: 0 5px 25px;
    }
    .mainbox__list > li:first-child dt h2{
        border-radius: 0;
    }
    .mainbox__list > li:last-child dt h2{
        border-radius: 0;
    }
    .mainbox__list dt h2:after{
        display: none;
    }
    .mainbox__list dd,
    .mainbox__list-02 dd{
        display: block;
        padding: 0 5px;
    }
    .mainbox__list-02 > li {
        width: 100%;
    }
    .mainbox__list-02 figure {
        width: 50%;
    }
    .mainbox__list-02 dl,
    .mainbox__list-02 .mainbox__info {
        width: 50%;
        padding-left: 4%;
    }
    /*.mainbox__list img,
    .mainbox__list-02 img {
        width: 100%;
        height: auto;
        object-fit:none;
    }*/
    .mainbox .mainbox__title {
        width: 16%;
        height: auto;
    }
    .mainbox .mainbox__info {
        display: flex;
        align-items: center;
    }
}
@media screen and (min-width:992px) {
    .mainbanner__text {
        padding-left: 20px;
    }
}
@media screen and (min-width:1200px) {
    .mainbox .service,
    .mainbox .access {
        width: 1160px;
        padding: 0;
    }
    .mainbox__list > li {
        width: 386px;
        height: auto;
    }
    .mainbox__con > h1,
    .mainbox__con > h2 {
        margin: 30px 0;
    }
    
}
@media screen and (min-width:992px) {

}

/* API route customise */
#reservation {
    background: none;
}
#reservation .content {
    padding: 0;
}
#reservation .seat-set {
    border-top: none;
}
.btn-selectwbt{
    background: none;
    font-size: 14px;
    cursor: pointer;
    line-height: 1.8;
    margin-top: 12px;
    padding: 0;
}
@media (max-width: 767px) {
    #reservation .rosen-api-search-btn-set {
        width: 100%;
    }
}

.mainbanner__slider > li:not(:first-child) {
    display: none;
}

/* slick arrow customise */
.slick-slider {
    margin-bottom: 0;
}
.slick-next{
    right: 18px !important;
}
.slick-prev{
    left: 10px !important;
}
.slick-arrow{
    z-index:2!important;
}
.slick-prev:before, .slick-next:before {
    font-size: 30px;
}
.slick-prev, .slick-next {
    width: 30px;
    height: 30px;
}
@media (min-width: 767px) {
    .slick-next {
        right: 20px !important;
    }
    .slick-prev {
        left: 15px !important;
    }
    .slick-prev:before, .slick-next:before {
        font-size: 40px;
    }
    .slick-prev, .slick-next {
        width: 40px;
        height: 40px;
    }
}


dd.switchactive{
    display: block;
}
.bg-blue{
    padding: 0.5em 1em;
    background: #efffff;
    border: solid 2px #c5e7e8;
}



.localnav{
    padding: 15px 0 0 0;
}
.list-localnav{
    display: flex;
    justify-content: space-around;
    margin-bottom: 0px;
    background: #f53c7f;
    border-radius: 8px;
}
.list-localnav > li{
    width: 100%;
}
.list-localnav > li a{
    display: block;
    text-align: center;
    width: 100%;
    padding: 10px 6px;
    color: #fff;
    text-decoration: none;
    position: relative;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.list-localnav > li a:hover{
    background: #FFE869;
    color: #090504;
}
.list-localnav > li:first-child a{
    border-left: none;
}
.list-localnav > li:last-child a{
    border-right: none;
}
.list-localnav > li a:before{
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    content: "\f0d7";
    font-size: 0.8em;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
@media(max-width:768px) {
.list-localnav{
    margin-bottom: 20px;
}
.list-localnav > li a{
    font-size: 13px;
    line-height: 1.2;
    padding: 6px 3px 14px 3px;
}
.list-localnav > li a:before{
    position: absolute;
    top: auto;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%), 0;
}
}

.link-service{
    background: none;
    cursor: pointer;
    padding: 0;
    color: #007bff;
    text-decoration: underline;
}
.link-service:hover{
    text-decoration: none;
}



.modal-header{
    background: #f53c7f;
    color: #fff;
}
.title-modal{
    width: 100%;
    font-weight: bold;
    font-size: 18px;
    padding: 20px 5px 5px;
    margin-bottom: 5px;
    border-bottom: 2px dotted #707070;
}
.btn-tol{
    text-decoration: none !important;
    background:#F53C7F;
    border: none;
}

/*  /static/css/membership/style.cssより
================================================== */
a.btn-pink-01 {
	text-decoration: none;
}
.btn-pink-01{
  display: inline-block;
  padding: 15px 15px;
  border: 1px solid #F53D7E;
  text-align: center;
  border-radius: 4px;
  color: #F53D7E;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
}
.btn-pink-01.btn-big{
  border: 3px solid #F53D7E;
  font-size: 18px;
}
.btn-pink-01:hover{
  opacity: 0.5;
  color: #F53D7E;
  text-decoration: none;
}
.btn-pink-01 {
	padding: 16px 10px;
	border: 1px solid #F53D7E;
	text-align: center;
	border-radius: 4px;
	color: #F53D7E;
	font-weight: 700;
	background: #fff;
	cursor: pointer;
	font-size: 16px;
}
.btn-pink-01:hover{
	text-decoration: none;
	background: #F53D7E;
	color: #fff;
}

/* 注釈追加
----------------------------------------------------*/
.frame-pink {
	border: 4px solid #F53C7F;
	border-radius: 10px;
	padding: 0.5rem 0.8rem;
}