@charset "utf-8";

  #appdeeplink{
    display: none;
  }
  
/*基本*/
.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-10{ margin-left:-5px;  margin-right:-5px}
.row-10 >div{ padding-right:5px;  padding-left:5px}
.row-20{ margin-left:-10px;  margin-right:-10px}
.row-20 >div{ padding-right:10px;  padding-left:10px}
.row-30{ margin-left:-15px;  margin-right:-15px}
.row-30 >div{ padding-right:15px;  padding-left:15px}
.row-40{ margin-left:-20px;  margin-right:-20px}
.row-40 >div{ padding-right:20px;  padding-left:20px}
.row-50{ margin-left:-25px;  margin-right:-25px}
.row-50 >div{ padding-right:25px;  padding-left:25px}

.clearfix:after{content: ".";display:block;height:0;font-size:0;clear: both;visibility:hidden;}
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;}
.clearfix {display:block;}

.price_inset_mc_done:after{content: ".";display:block;height:0;font-size:0;clear: both;visibility:hidden;}
.price_inset_mc_done {display: inline-block;} 
* html .price_inset_mc_done {height: 1%;}
.price_inset_mc_done {display:block;}

article{
    color: #444;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.txt-red{
	color: #C01616!important;
}
.wrap-section{
	padding: 48px 0;
}
.bg-pickup{
	background: #ECF1F6;
}



/*ナビゲーション*/
.localnav-island{
	background:#FDDA6B;
	border-radius: 4px;
	display: flex;
	width: 100%;
	border: 1px solid #1C1C1C;
	margin-top: -30px;
	position: relative;
	z-index: 1;
}
.localnav-island li{
	width: 100%;
	position: relative;
	
}
.localnav-island li .line-right {
  display: block;
  position: absolute;
  top: 16px;
  right: 0;
  width: 1px;
  height: 55%;
  background-color: #000;
}
.btn-localnav{
	display: block;
	padding: 24px 6px;
	text-align: center;
	color: #1C1C1C;
	font-size: 14px;
	font-weight: bold;
}

.btn-localnav:hover{
	text-decoration: none;
	color: #0B8FCD;
}

.yazirusi {
  display: inline-flex;
  transform: rotate(90deg);
	width: 100%;
	justify-content: center;
} 
.yazirusi::after {
  content: '';
  width: 60px;
  height: 10px;
  border-top: solid 1px;
  border-right: solid 1px;
  transform: skew(135deg);
}

@media screen and (max-width:767px) {
.localnav-island li .line-right {
  height: 60%;
}

}

/*タイトル系のパーツ*/
.title-contents{
	text-align: center;
	font-size: 20px;
	margin-bottom: 32px;
	font-weight: bold;
}
.title-contents img{
	zoom:0.8;
}

@media screen and (max-width:767px) {
.wrap-section{
	padding: 24px 0;
}
.title-contents{
	font-size: 18px;
	margin-bottom: 12px;
}
.title-contents img{
	zoom:0.8;
}
}




/*メインビジュアル関連*/

.heroimg{
	text-align: center;
}
.heroimg img{
	margin: 0 auto;
}

/*共通*/
.bg-gray{
	background: #E6E7E9;
}
.ln-yellow {
border-bottom:  #FDDA6B solid 3px;
}

.box-white{
	background: #FFF;
	border-radius: 6px;
	padding: 20px;
}
.w-80{
	width: 80%;
	margin: 0 auto;
	text-align: center;

}
.txt-big{
	font-size: 1.3em;
}
.txt-center{
	text-align:center;
	margin: 0 auto;
}
.txt-left{
	text-align:left;
}

@media screen and (max-width:767px) {
.w-80{
	width: 100%;
	text-align: left;
}	
	.ln-yellow {
border-bottom:  #FDDA6B solid 3px;
	line-height: 1.8em;
}
	.txt-big{
		font-size: 1.2em;
	}
}

/*佐渡の魅力*/
.box-limited{
	position: relative;
}
.box-limited::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 230px;
  height: 120px;
  background: url("/static/img/ferry/campaign/island/sado/txt-limited.svg") no-repeat;
  background-size: contain;
	top:-40px;
	left:40px;
}

.btn-yellow{
    background: #FDDA6B;
    font-weight: bold;
    font-size: 1em;
    position: relative;
    text-decoration: none;
    padding: 16px 10px 16px 0;
    border: 2px solid #333333;
    border-radius: 6px;
    display: block;
    color: #333;
    width: 100%;
    max-width: 400px;
    margin: 20px auto 0;
	text-align: center;
}
.btn-yellow.arrow-down::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    font-size: 1.1em;
}


.btn-yellow.ico-window::after {
    content: "";
    width: 22px;
  height: 22px;
  background: url("/static/img/ferry/campaign/island/sado/ic-window.svg") no-repeat;
    position: absolute;
    right: 14px;
    font-size: 1.1em;
}
.btn-yellow:hover{
		text-decoration: none;
	color: #0B8FCD;
	opacity: 0.8;
}

.box-charm{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 80px;
}
.img-charm{
	width: 40%;
}
.ex-charm{
	width: 60%;
	padding-top: 25px;
	padding-left: 10px;
	text-align: left;
}
.tit-charm{
	margin-bottom: 16px;

}

#ad{
	padding: 80px 0;
	text-align: center;
}

.box-pickup{
	position: relative;
}
.box-pickup::before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 200px;
  height: 100px;
  background: url("/static/img/ferry/campaign/island/sado/txt-pickup.svg") no-repeat;
  background-size: contain;
	top:-50px;
	left:-180px;
}

/*動画*/
.wrap-youtube{
	margin: 50px auto 0;
	padding: 0;
	text-align: center;
}

.wrap-youtube h3 {
    border-bottom: #FDDA6B solid 3px;
    width: fit-content;
    margin: 0 auto 10px;
    padding: 0 10px;
    font-size: 20px;
}

.wrap-youtube .btn-yellow {
    max-width: 300px;
}
.wrap-youtube .btn-yellow:hover{
	color: inherit;
}


@media screen and (max-width:992px) {
	.box-limited::before{
		top:-60px;
		left:30px;
	}
}

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

	.box-limited{
		margin-top: 20px;
		padding-top: 25px;
	}

	.box-limited::before{
		transform:rotate(5deg);
		width:170px;
		height: 80px;
		top:-40px;
		left:5px;
	}

	.box-charm{
		margin-top: 50px;
	}	
	.tit-charm{
		width: 80%;
		margin: 0 auto 20px;

	}	

	.img-charm{
		width: 100%;
	}
	.ex-charm{
		width: 100%;
		padding-top: 20px;
		padding-left: 0;
		text-align: left;
	}	

	#ad{
		padding: 40px 0;
		text-align: center;
	}
	.box-pickup::before{
		top:-80px;
		left:-70px;
	}	
}

@media screen and (max-width:575px) {
	/*動画*/
	.wrap-youtube{
		margin: 30px auto 0;
	}
	.wrap-youtube h3{
		font-size: 18px;
	}
	
	.wrap-youtube iframe{
		height: 250px;
	}
	.wrap-youtube .btn-yellow {
		padding: 12px;
	}
}




/*プラン一覧部分*/
.special{
	text-align: center;
	margin-bottom: 20px;
}

.special span{
	
	position: relative;
	padding-left: 90px;
}

.special span::before{
	  position: absolute;
  content: "";
  display: inline-block;
 width: 80px;
  height: 80px;
  background: url("/static/img/ferry/campaign/island/sado/ico-offer.png") no-repeat;
  background-size: contain;
	top:-30px;
	left:0;

	
}

.bg-cheir{
	padding-left: 200px;
	background: url("/static/img/ferry/campaign/island/sado/img-cheir.jpg") no-repeat #FFF;
	background-position: left 3% top 40%;
	
}
.bg-cheir .txt-link{
	padding-right: 200px;
}
dd.check{
	margin-bottom: 10px;
	
}
dd.check .txt-red{
	font-size: 1.2em;
}

.ico-check{
	position: relative;
	text-align: left;
	padding-left: 25px;
}

.ico-check::before{
	content: "";
    width: 22px;
  height: 22px;
	position: absolute;
	background: url("/static/img/ferry/campaign/island/sado/ic-check.png") no-repeat ;
	left: 0;
}

.txt-link a{
	font-size: 0.9em;
	color: #338DBD;
}
.txt-link a::after{
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
	margin-left: 5px;
	font-size: 0.9em;
}

.box-erea{
	text-align: center;
	width: 80%;
	margin: 0 auto 60px ;
}
h4.tit-erea{
	display: inline-block;
	font-weight: bold;
	font-size: 1em;
	margin: 0 auto 20px;
}
.box-plan{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	
}
li.txt-erea{
	width: 55%;
	text-align: left;
}
li.txt-price{
	width: 30%;
	color: #C01616;
	font-weight: bold;
}
li.txt-price span{
	font-size: 140%;
}
li.brn-reserve{
	width: 15%;
}
li.brn-reserve a{
	padding: 10px 0;
}

#ferry-reserve li.txt-erea{
	width: 37%;
}
#ferry-reserve li.txt-price{
	width: 33%;
	color: #C01616;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
}

#ferry-reserve li.brn-reserve{
	width: 30%;
}

.num{
	font-size: 140%;
	color: #C01616;
	font-family: 'Oswald', sans-serif;
	line-height: 1;
}
.num.min:after{
	content: "～";
	font-size: 12px;
}
.num.min.only:after{
	content: "円～";
	font-size: 12px;
}
.num.min.only.yenoff:after{
	display: none;
}
.num.min.only.yenoff small{
	font-size: 12px;
	font-weight: bold;
}
.num.max:after{
	content: "円";
	font-size: 12px;
}
.col-plan{
	margin-bottom: 12px;
}

#tour-reserve{
	padding-top: 60px;
}

.brn-reserve .btn-yellow{
	margin: 0;
}

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


.bg-cheir{
	padding-left:20px;
	padding-bottom: 210px;
	background: url("/static/img/ferry/campaign/island/sado/img-cheir.jpg") no-repeat #FFF;
	background-position: left 40% bottom 5%;
	
}
.bg-cheir .txt-link{
	padding-right: 0;
}	
	
	.bg-cheir dt{
		text-align: center;
	}
dd.check{
	margin-bottom: 10px;
	
}
dd.check .txt-red{
	font-size: 1.2em;
}

.ico-check{
	position: relative;
	text-align: left;
	padding-left: 25px;
	display: block;
}

.ico-check::before{
	content: "";
    width: 22px;
  height: 22px;
	position: absolute;
	background: url("/static/img/ferry/campaign/island/sado/ic-check.png") no-repeat ;
	left: 0;
}

	.txt-link{
		text-align: right;
	}
	
	.box-erea{
		width: 100%;
	}	
	#tour-reserve{
		padding-top: 40px;
	}	
	
li.txt-erea{
	width: 100%;
	text-align: left;
	font-size: 16px;
}
li.txt-price{
	width: 70%;
	color: #C01616;
	font-weight: bold;
	text-align: left;
}
li.txt-price span{
	font-size: 140%;
}
li.brn-reserve{
	width: 30%;
	
}
	li.brn-reserve a{
		text-align: center;
		font-size: 14px;
	}	
	
	
	
	
}







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

	
	
.col-plan{
	margin-bottom: 0px;
}
.col-plan + .col-plan{
	margin-top: 12px;
}
.card.card-plan{
	padding: 12px 36px 12px 12px;
}
.tbl-plan{
	display: block;
}
.tbl-plan tbody,
.tbl-plan tr{
	width: 100%;
	display: block;
}
.tbl-plan td{
	display: block;
	padding:0;
}
.tbl-plan td.td-dep{
	display: block;
	width: 100%;
	padding-bottom: 3px;
	font-size: 13px;
}
.tbl-plan td.td-access{
	display: block;
	width: 100%;
	padding-bottom: 3px;
	font-size: 14px;
}
.tbl-plan td.td-price{
	display: block;
	width: 100%;
}
.label-camp{
	position: absolute;
	top: -20px;
	left: -12px;
}
}


/*ピックアップ部分のボタンだけ*/
.btn-campaign{
	background: #17318e;
	border-radius: 4px;
	color: #fff;
	padding: 10px 36px 10px 12px;
	position: relative;
	font-size: 14px;
	cursor: pointer;
}
.btn-campaign:hover{
	background: #ffebf5;
	color: #45142c;
	text-decoration: none;
}
.btn-campaign:after { 
	content: "\f0c5"; 
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	position: absolute; 
	top: 50%; 
	right: 12px; 
	transform: translate(0, -50%);
}
.btn-campaign:active{
	background: #17318e;
	color: #fff !important;
}
@media screen and (max-width:767px) {
.btn-campaign{
	display: block;
	text-align: left;
	padding: 8px 24px 8px 6px;
}
	.special{
	text-align: left;
	margin-bottom: 20px;
}
	.special span{
		padding-left: 70px;
		display: block;
	}
	.special span::before {
    width: 66px;
    height: 66px;
    background: url(/static/img/ferry/campaign/island/sado/ico-offer.png) no-repeat;
    background-size: contain;
    top: -5px;
    left: 0;
}

}



/* 観光地情報 */
.bg-spot{
	background: #E9F6FF;
}
.inner-spot{
	padding: 24px;

}
.inner-spot img{
	border-radius: 6px;
}


.dl-spotinfo{
	margin-top: 12px;
}
.dl-spotinfo dt{
	font-size: 14px;
	margin-bottom: 6px;
	text-align: center;
}
.dl-spotinfo dt span{
	display: inline-block;
	margin:0 auto;
	font-size: 120%;
	border-bottom:  #FDDA6B solid 3px;
	margin-bottom: 5px;
}
.dl-spotinfo dd{
	font-size: 14px;
	line-height: 1.6;
}



/*佐渡島の魅力*/
.bg-feature{
	background:#D5E5D9;

}
#feature{
	padding-bottom: 80px;
}

@media screen and (max-width:767px) {
	#feature{
		padding-bottom: 60px;
	}
}

/* FAQ */
.bg-faq{
	background:#fafafa;
}
#faq-accordion .card{
	margin-bottom: 20px !important;
}
#faq .card-header{
	padding: 0;
}
#faq .card-header button{
	font-size: 16px;
	display: block;
	padding: 24px 24px;
	cursor: pointer;
	position: relative;
	line-height: 1.6;
	width: 100%;
	text-align: left;
}
.num-label{
	background: #333;
	color: #fff;
	margin-right: 10px;
	border-radius: 4px;
	padding: 3px 6px;
	display: inline-block;
}
#faq .card-header button:after{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 20px;
	content: "\f077";
	font-family: "Font Awesome 5 Free";
	font-weight:900;
	color:#999;
	font-size: 16px;
}

#faq .card-header button.collapsed:after{
	content: "\f078";
}
@media screen and (max-width:767px) {
#faq .card-header h3{
	font-size: 14px;
}
#faq .card-header h3 a{
	padding: 12px 36px 12px 60px;
}
.num-label{
	position: absolute;
	top:50%;
	left: 12px;
	transform: translate(0, -50%);
}
}




/*sliderカスタマイズ*/
#slide{
	padding: 50px 0 35px;
}
.slider-center div span{
	font-size:13px;
	text-align: center;
	display: block;
	padding-top: 5px;
	
}
.slider-center {
  width: 100%;
  display: flex;
  max-width: 100%;
  margin: auto;
}

.slider-center li {
  height: auto;
  margin-right: 10px;
  margin-left: 10px;
}

.slider-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/*20240712追記*/
#plan {
    padding-top: 80px;
}

@media screen and (max-width:767px) {
	#plan {
		padding-top: 50px;
	}
}