@charset "utf-8";
/* =========================================================
		フェリーUSJ
========================================================= */

.img-fluid2 {
	width: 100%;
	height: auto;
}

.slick-dots {
    bottom: -20px !important;
}

/* ○○から探す　ボックスの調整 */
.search-box{
	margin-bottom: 25px;
}
.itembox02{
	text-align: left;
	margin-bottom: 10px;
}
.feature-img{
	width: 100%;
	float: left;
	border-radius: 0;
	margin-right: 10px;
}
.itembox02 .feature-img img{
	border-radius: 0;
}


/* ○○から探す　ボックス内の装飾 */
.itembox02 h3{
	background: #018ad8 url(/tour/campaign/usj/img/2017/bg-dotted01.png) ;
	color: #fff;
	text-decoration: none;
	margin: 0 -5px 10px -5px;
	text-align: center;
	padding: 10px 5px 10px 5px;
}
.example-txt{
	margin-bottom: 10px;
}
.price-line{
	text-align: center;
}
.label-access{
	background: #f67818;
	display: inline-block !important;
	margin-bottom:5px !important;
	padding: 5px 8px 4px 1px !important;
	font-weight: normal;
}

.search-plan-set i.wico-exchange,
.search-plan-set i.wico-arrow-long-right{
	font-size: 80%;
	margin:0 !important;
}
.departure-list01 ul li:first-child a{
	border-top: 1px solid #ccc;
}
#information-area #description-area{
	float: none;
	margin-left: 0;
	padding-left: 0;
}

.search-plan-list{
	display: flex;
}
.search-plan-list li{
	display: block;
	width: 100%;
}

.description-text{
	margin-bottom: 10px;
}

/* 初めての方へのエリア調整 */
.first-text-hosoku{
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.description-text p.title-miryoku{
	font-size: 18px;
}
.btn-beginner-wrap{
	text-align: right;
	margin-top: 20px;
}
.btn-beginner{
	background: #018ad8;
	color: #fff !important;
	display: inline-block;
	padding: 8px 10px;
	border-radius: 5px;
	font-size: 14px;
}
.slick-slider{
	margin-bottom: 30px;
}
.list-miryoku li{
	font-size: 16px;
	margin-bottom: 10px;
}


.slide-cpn li{
	position: relative;
}
.slide-cpn li img{
	width: 100%;
}
.slide-cpn li span{
	position: absolute;
	bottom:0;
	width: 100%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	display: block;
	left: 0;
	padding: 2px 3px;
	font-size: 16px;
}
.slick-prev:before, .slick-next:before{
    color: #333 !important;
    background-color: #bbb;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 14px;
}


@media (max-width: 768px) {
.slide-cpn li span{
	font-size: 14px;
}
.slick-prev:before, .slick-next:before{
    font-size: 14px;
}
ul#social_btn{
	margin-top: 0;
}


/* ローカルナビの調整 */
#content-wrap .next-btn.onlysm{
	display: none !important;
}
#local-nav .container{
	overflow-x: initial;
}
.list-nav{
	max-width: 100%;
	min-width: 100%;
    padding-right: 0px;
}
.list-nav li{
	width: 33.33%;
}


/* ○○から探す　ボックス内の装飾 */
.itembox02 .itembox-body{
	margin-left: 0;
	padding: 0;
}
.itembox02{
	padding-top: 0;
}
.itembox02 h3{
    margin: 0 -7px 10px -7px;
}
.feature-img{
	/*width: 45%;
	float: left;*/
	border-radius: 0;
	margin-right: 10px;
}
.itembox02 .feature-img img{
	width: 100%;
}

.search-plan-list{
	display: block;
}
.search-plan-list li{
	width: 100%;
}

.ferry-img{
	padding: 0 15px;
}
.ferry-img img{
	margin-bottom: 10px !important;
}

/* 初めての方へのエリア調整 */
#first-area{
	margin-bottom: 30px;
}


.btn-beginner{
	font-size: 14px;
}
.list-miryoku li{
	font-size: 16px;
}

}

/*-------20211207追記--------*/
#meimon_announce{
	background: #fff;
	padding: 10px 0;
}
#meimon_announce .card{
	border-radius: 8px;
	overflow: hidden;
}
#meimon_announce .card-header{
	background: #018ad8;
}
#meimon_announce h3{
	padding: 8px 8px 0px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}
#meimon_announce h3 .wico-chevron-circle-down{
	display: block;
	margin-top: 0.5em;
}
#meimon_announce p{
	padding: 16px;
	font-size: 14px;
	text-align: left;
	display: inline-block;
}
@media (min-width:768px) {

	#meimon_announce h3{
		padding: 8px;
		font-size: 16px;
	}
	#meimon_announce h3 .wico-chevron-circle-down{
		display: inline-block;
		margin-top: 0;
	}
	.d-md-none{
		display: none;
	}
}


#pickup-area{
	background: #fff3cd;
	padding: 10px 10px 10px;
	margin: 15px auto 5px;
	width: 90%;
}
.pickup-body{
	background: #fff;
	padding: 10px;
	border-radius: 4px;
}
.pickup-body .itembox02 .itembox-body p{
	font-size: 14px;
}
.pickup-body a{
	text-decoration: none;
	color: initial;
}
.price-text .num {
    font-size: 20px;
    font-weight: bold;
    color: #F14482;
}
.price-text .num.min:after {
    content: "～";
    font-size: 12px;
    margin-right: 3px;
}
.price-text .num.max:after {
    content: "円";
    font-size: 12px;
}
@media (min-width:768px) {
#pickup-area{
	padding: 20px 20px 20px;

	margin: 20px auto 20px;
}
.pickup-body{
	padding: 20px;
}
}



.wrap-price .num{
	font-family: initial;
}
.li-dep-bus .wrap-price .num, .li-dep-set .wrap-price .num{
	font-size: 18px;
}
.li-dep-name{
	width: 10%;
}
.li-dep-plan{
	width: 90%;
}
.li-dep-plan > ul{
	display: flex;
}
.li-dep-bus{
	width: 33.333%;
}
.li-dep-set{
	width: 33.333%;
}
.li-dep-bus a, .li-dep-set a{
	height: 100%;
}
/*
.li-dep-bus a:before {
    content: "往復フェリー＋スタジオ・パス";
}
.li-dep-set a:before {
    content: "フェリー＋高速バス＋スタジオ・パス";
}
.li-dep-set.list-pass a:before {
    content: "片道フェリー＋スタジオ・パス";
}
.li-dep-set.list-hotel a:before {
    content: "往復フェリー＋スタジオ・パス＋宿泊";
}
*/

.price-menu {
     display: block;
    text-align: left;
    font-size: 14px;
    color: #333;
    margin-bottom: 0;   
}
@media (max-width:1200px) {
.li-dep-name{
	width: 20%;
}
.li-dep-plan{
	width: 80%;
}
.li-dep-plan > ul{
	flex-wrap: wrap;
}
.li-dep-bus{
	width: 50%;
}
.li-dep-set{
	width: 50%;
}
.li-dep-empty{
	display: none;
}
}
@media (max-width:767px) {
.li-dep-bus .wrap-price .num, .li-dep-set .wrap-price .num{
	font-size: 16px;
}
.li-dep-name{
    width: 80px;
}
.li-dep-plan{
	width: 100%;
}
.li-dep-bus{
	width: calc(100% - 80px);
}
.li-dep-set{
	width: calc(100% - 80px);
}
}

/* PickUp追加
--------------------------------------------------------- */
.plan-lists + .plan-lists {
	margin-top: 1.5rem;
}

.plan-area {
	text-align: center;
	font-size: 22px;
	margin-bottom: 0.5rem;
}
@media (max-width: 767px){
	.plan-area {
		font-size: 20px;
	}
}
.plan-area > span {
	position: relative;
  display: inline-block;
  padding: 0 55px;
}
.plan-area > span:before,
.plan-area > span:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

.plan-area > span:before {
  left:0;
}
.plan-area > span:after {
  right: 0;
}

.pickup {
	margin-top: -2rem;
	margin-bottom: 60px;
}
	.pickup .title02-set {
		margin-bottom: 0;
	}
.check-pt {
	position: relative;
	border: solid 3px #37afe0;
    border-radius: 5px;
    padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom: 60px;
}
	.check-pt li {
		line-height: 1.5;
		padding: 0.5em 0;
		list-style-type: none!important;
	}
	.check-pt li:before {
		font-family: "Font Awesome 5 Free";
		content: "\f0a4";
		position: absolute;
		left : 1rem;
		color: #37afe0;
	}
.pickup .card {
	overflow: hidden;
	box-shadow: 0 0 8px rgb(0 0 0 / 15%);
	border-radius: 10px;
	margin-bottom: 0.5rem;
}
	.pickup .point {
		position: relative;
		/*background: #001165;*/
		background: #37afe0;
		padding: 0.5rem 0.8rem;
		font-size: 16px;
		color: #fff;
		text-align: center;
	}
	.pickup .point:after {
		content: "\f055";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-size: 16px;
		color: #fff;
		position: absolute;
		right: 8px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.pickup .point[aria-expanded="true"]:after {
		content: "\f056";
	}
	.pickup .point .add-info {
		display: inline-block;
		font-size: 12px;
		background: #fff;
		color: #333;
		padding: 0.2rem 0.3rem;
		border-radius: 3px;
	}

.pickup .card-inner {
	padding: 0.5rem 0.8rem;
}

	/*.pickup .sea-route {
		font-size: 16px;
		margin-top: 1rem;
		letter-spacing: -0.5px;
	}*/
	.pickup-plans {
		margin-top: 0.5rem;
		margin-left: 1rem;
	}
		.pickup-plans li {
			list-style-type: disc;
			font-size: 14px;
		}
		.pickup-plans li + li {
			margin-top: 1rem;
		}
		.pickup-plans a.btn + a.btn {
			margin-top: 0.5rem;
		}

.pickup .btn-beginner {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.pickup .wrap-price .num {
	letter-spacing: -0.5px;
}
.mark-note {
	text-indent: -0.8rem;
	margin-left: 0.8rem;
}

/* 旅行支援告知のカスタマイズ
--------------------------------------------------------- */
.inner-ryokoshien-box:before {
	content: "";
	width: 0;
	height: 0;
}
@media (max-width: 767px){
	.title-ryokoshien-box:before {
		content: "";
		width: 0;
		height: 0;
	}
	.title-ryokoshien-box > span {
		width: auto;
		margin: 0 auto;
	}
}
.inner-ryokoshien-box > div {
	width: auto;
	margin: 0 auto;
}
@media (max-width: 375px){
	.inner-ryokoshien-box a {
		font-size: 13px;
		letter-spacing: -1px;
	}
}
/* 航路追加対応
--------------------------------------------------------- */
.ico-area {
	display: inline-block;
	margin-right: 0.5rem;
	background: #001165;
	color: #fff;
	padding: 0.25rem 0.8rem 0.15rem;
	border-radius: 0.25rem;
}
@media (max-width: 767px){
	.ico-area.sm-border-l {
		border-left: 5px solid #1a2975;
		border-radius: 0;
		color: #001165;
		background: none;
	}
}



/* 人気おすすめプラン - New Layout 202311-
----------------------------------------------------------- */
/*
.plan-area {
    margin-bottom: 1.5rem;
}

.plan-area-title {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 16px;
    padding: 10px 20px 8px;
    background-color: #37afe0;
    color: #fff;
    border-radius: 20px 0px 0 0;
}

.plan-area-lead {
    font-size: 16px;
    margin-bottom: 20px;
}
*/


/*スライダー*/
/*
.slider-container {
    padding-left: 0;
    margin-bottom: 40px;
}

.slider-box-01 {
    width: 100%;
    max-width: 1265px;
    margin: 0 auto;
     overflow-x: initial;
}

.slider-plan-card {
  width: 100%;
  display: flex;
  padding-bottom: 5px;
}

.slider-plan-card > li{
    width: 24%;
    margin: 0 5px 0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: hidden;
    box-shadow: 0 0 8px rgb(0 0 0 / 15%);
    border-radius: 10px;
}
*/

/*スライダー カードボディ */
/*
.slider-plan-card-body {
    width: 100%;
    padding: 20px;
}
*/

/*スライダー カード内　プラン名*/
/*
.wrap-plan-name {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 12px;
}
*/

/*スライダー カード内　料金*/
/*
.ferry-plan-lists .wrap-price .num {
    font-size: 18px;
}
*/

/*スライダー カード内　ボタン*/
/*
.btn-cheap {
    width: 100%;
    margin: 10px auto 0;
    position: relative;
    display: block;
    padding: 10px;
    color:  #018ad8;
    font-size: 14px;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #018ad8;
    border-radius: 5px;
    text-align: center;
    line-height: 1;
    transition: 0.3s;
}


.btn-cheap:hover {
    background-color: #018ad8;
    color: #fff;
}

.btn-cheap::before {
    content: '\f073';
    font-family: "Font Awesome 5 free";
    font-weight: 300;
    position: absolute;
    top: 49%;
    left: 26px;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    color: #018ad8;
    transition: 0.3s;
}

.btn-cheap:hover:before {
    color: #fff;
}

@media(max-width:1265px) {
    .slider-box-01 {
        overflow-x: scroll;
        padding-top: 5px;
        padding-bottom: 10px;
    }
    .slider-box-card {
       width: 100%;
       margin:0 auto;
    }
    .slider-plan-card > li{
      width: 24%;
    }
    .slider-plan-card > li{
      margin-bottom: 10px;
    }
}


@media( max-width: 1200px) {
    .slider-container {
        padding-left: 0;
    }
    .slider-plan-card{
      width: 180%;
    }
    .slider-plan-card > li{
      width: 18.22%;
    }
}

@media( max-width: 1100px) {
    .slider-plan-card > li{
      width: 16.22%;
    }
}

@media (max-width: 768px) {
    .plan-area {
        margin-bottom: 1.5rem;
    }

    .plan-area-title {
        font-size: 20px;
    }

    .plan-area-lead {
        font-size: 14px;
    }
    
    .slider-plan-card > li{
      width: 18.22%;
    }
*/

    /*スライダー カードボディ */
/*
    .slider-plan-card-body {
        padding: 16px;
    }
*/

    /*スライダー カード内　プラン名*/
/*
    .wrap-plan-name {
        font-size: 12px;
    }
*/

    /*スライダー カード内　料金*/
/*
    .ferry-plan-lists .wrap-price .num {
        font-size: 16px;
    }
*/

    /*スライダー カード内　ボタン*/
/*
    .btn-cheap {
        width: 100%;
        padding: 10px;
        font-size: 12px;
    }
    
*/
/*
    .btn-cheap::before {
        font-size: 12px;
        top: 45%;
    }
}
*/


/*
@media(max-width: 576px) {
    
    .slider-plan-card{
      width: 1250px;
    }
    
    .slider-plan-card > li{
      width: 12%;
    }
    
    .slider-plan-card-body {
        padding: 16px 10px;
    }
    .btn-cheap::before {
        left: 5px;
    }
    
    .ferry-plan-lists .wrap-price .num {
        font-size: 12px;
    }
    

    .btn-cheap {
        font-size: 11px;
    }
            
}
*/



/* 快適フェリー旅の魅力  - New Layout 202311-
----------------------------------------------------------- */
/* スライダー */

.slide-cpn-area {
    width: 100%;
    margin: auto;
}

.slick-prev {
    left: 4px !important;  
}

.slick-next {
    right: 16px !important;  
}

@media (max-width: 767px){
    .slide-cpn-area {
        width: 96%;
    }
    
    .slick-prev {
      left: 4px !important;  
    }

    .slick-next {
      right: 16px !important;  
    }

}

@media (max-width: 767px){
    .slide-cpn-area {
        width: 100%;
    }
    
    .slick-prev {
      left: 4px !important;  
    }

    .slick-next {
      right: 16px !important;  
    }
    
    .slick-dots {
        bottom: -40px !important;
    }

}

@media (max-width: 575px){
    .slide-cpn-area {
        width: 100%;
    }
    
    .slick-prev {
      left: 4px !important;  
    }

    .slick-next {
      right: 16px !important;  
    }
    
    .slick-dots {
        bottom: -20px !important;
    }

}