@charset "utf-8";

.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}

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

article{
    color: #333;
}

.font-mincho{
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.img-center{
	margin-left: auto;
	margin-right: auto;
}



@media screen and (max-width: 767px) {
#Hero .container{
	padding: 0;
}
}


.section-header{
	color: #573517;
	text-align: center;
}
.section-header h2{
	position: relative;
	padding-top: 120px;
	font-size: 34px;
	line-height: 1.4;
	display: block;
	text-align: center;
}
.bg-plan{
	background:url(/static/img/train/shimabara/bg-plan.png) no-repeat top center;
	background-size: 131px 110px;
}
.bg-benefit{
	background:url(/static/img/train/shimabara/bg-benefit.png) no-repeat top center;
	background-size: 131px 110px;
}
.bg-map{
	background:url(/static/img/train/shimabara/bg-map.png) no-repeat top center;
	background-size: 131px 110px;
}
.bg-spot{
	background:url(/static/img/train/shimabara/bg-spot.png) no-repeat top center;
	background-size: 131px 110px;
}
.section-header h2 + p{
	margin-top: 60px;
}
.section-header p{
	font-size: 16px;
	line-height: 1.4;
}
.section-header p + p{
	margin-top: 6px;
}

.section-header + .section-body{
	margin-top: 36px;
}
#Map .section-header p{
	text-align: left;
}
@media screen and (max-width: 767px) {
.section-header h2{
	padding-top: 73px;
	font-size: 22px;
}
.bg-plan,
.bg-benefit,
.bg-map,
.bg-spot{
	background-size: 75px 63px;
}
.section-header h2 + p{
	margin-top: 24px;
}
.section-header p{
	font-size: 14px;
	text-align: left;
}
.section-header + .section-body{
	margin-top: 18px;
}
}






#Plan,
#Map{
	padding:60px 0 90px;
}
#Benefits,
#Spot{

}

#Plan{
	background-image: url(/static/img/train/shimabara/bg-plan-left.png) , url(/static/img/train/shimabara/bg-plan-right.png);
	background-repeat: no-repeat;
	background-position: 2% 50% , 98% 50%;
	width:100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
#Map{
	background-image: url(/static/img/train/shimabara/bg-dotto-left.png) , url(/static/img/train/shimabara/bg-dotto-right.png);
	background-repeat: no-repeat;
	background-position: 2% 2% , 98% 88%;
	background-size: 15% 15%;
}
@media screen and (max-width: 1299px) {
#Plan{
	background-size: 100px 223px , 180px 372px;
}
}
@media screen and (max-width: 767px) {
#Plan,
#Map{
	padding:20px 0 40px;
}
#Plan{
	background:none;
}
#Map{
	background:none;
}

}


.card-plan{
	display: block;
	color: #333333;
}
.card-plan:hover{
	text-decoration: none;
	color: #333;
}
.card-plan:hover img{
	opacity: 0.5;
}
.link-text{
	text-decoration: underline;
	color: #333333;
}
.link-text:hover{
	text-decoration: none;
}
img + .dl-shibara-base{
	margin-top: 30px;
}
.dl-shibara-base dt{
	margin-bottom: 12px;
}
.dl-shibara-base dd{
	font-size: 16px;
	line-height: 1.6;
}
.dl-shibara-base dd + dd{
	margin-top: 12px;
}
dd.dd-reserve,
.dl-shibara-base dd + dd.dd-reserve{
	text-align: center;
	margin-top: 24px;
}
.dd-reserve span{
	display: block;
	width:90%;
	padding:12px;
	color: #fff;
	background:#573517;
	border-radius: 4px;
	margin:0 auto;
	position: relative;
}
.card-plan:hover .dd-reserve span{
	background:#EBE0CA;
	color: #573517;
}
.dd-reserve span:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    font-weight: bold;
}
.dd-reserve.dd-return span:before {
    content: "\f0aa";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 50%;
    right: auto;
    left: 10px;
    transform: translate(0, -50%);
    font-weight: bold;
}
@media screen and (max-width: 767px) {
img + .dl-shibara-base{
	margin-top: 12px;
}
.dl-shibara-base dt{
	margin-bottom: 6px;
}
.dl-shibara-base dd{
	font-size: 16px;
}
}



.wrap-maplayout{
	position: relative;
	height: 100%;
}
.wrap-maplayout .section-header{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding:0 24px;
    transform: translate(0, -50%);
}
@media screen and (max-width: 992px) {
.wrap-maplayout .section-header{
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	padding:0 6px;
    transform:none;
    margin-bottom: 18px;
}
}


#Benefits,
#Spot{
	background:#FBFAED;
}
#Benefits:before,
#Spot:before{
	content: "";
	width:100%;
	display: block;
	height:140px;
	background-color: #fff;
	background-image: url(/static/img/train/shimabara/bg-nami-top.png);
	background-position: top center;
	background-repeat: no-repeat;
}
#Benefits:after,
#Spot:after{
	content: "";
	width:100%;
	display: block;
	height:130px;
	background-color: #fff;
	background-image: url(/static/img/train/shimabara/bg-nami-bottom.png);
	background-position: bottom center;
	background-repeat: no-repeat;
}
@media screen and (min-width: 2000px) {
#Benefits:before,
#Spot:before{
	background-size: cover;
	height:260px;
}
#Benefits:after,
#Spot:after{
	background-size: cover;
	height:260px;
}
}
@media screen and (max-width: 767px) {
#Benefits:before,
#Spot:before{
	height:70px;
	background-color: #fff;
	background-image: url(/static/img/train/shimabara/bg-nami-top-sp.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
#Benefits:after,
#Spot:after{
	height:70px;
	background-color: #fff;
	background-image: url(/static/img/train/shimabara/bg-nami-bottom-sp.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

}



#Localnavi{
	background:#573517;
}
.row-localnavi{
	border-left: 1px solid #fff;
}
.col-localnavi a{
	color: #fff;
	display: block;
	padding:12px;
	border-right: 1px solid #fff;
	text-align: center;
	font-weight: bold;
}
.col-localnavi a:hover{
	background:#EBE0CA;
	color: #573517;
	text-decoration: none;
}
.col-localnavi a:after {
    content: "\f0d7";
    font-family: "Font Awesome 5 Free";
    margin-left: 5px;
    font-weight: bold;
    font-size: 80%;
    position: relative;
    top: -2px;
}
@media screen and (max-width: 767px) {
#Localnavi{
	margin-bottom: 30px;
}
#Localnavi .container{
	padding:0;
}
.row-localnavi{
	border-left: none;
}
.col-localnavi a{
	color: #fff;
	display: block;
	padding:12px;
	border-right: none;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #fff;
}
.row-localnavi .col-localnavi:nth-child(even){
	border-left: 1px solid #fff;
}
}


.wrap-info{
  background:#fff9fb;
  padding: 12px;
  margin-top: 24px;
  border-radius: 4px;
}
.wrap-info button{
  color: #f53c7f;
  text-decoration: underline;
  background:none;
  cursor: pointer;
  display: inline-block;
  outline: none;
}
.wrap-info button:hover{
  text-decoration: none;
}
.wrap-info .badge{
  background:#f53c7f;
  color: #fff;
  padding: 3px 6px;
  margin-right: 12px;
  display: inline-block;
}
.wrap-info small{
  font-size: 13px;
}
.modal-shimabara .modal-header h3{
  font-size: 18px;
  line-height: 1.6;
}
.modal-shimabara .modal-header{
  background:#573517;
  color: #fff;
}
.modal-shimabara .modal-body h3{
  font-size: 16px;
  font-weight: bold;
  border-bottom: 2px solid #573517;
  padding-bottom: 6px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.modal-shimabara .modal-body p{
  font-size: 14px;
  line-height: 1.4;
}
.modal-shimabara .modal-body p + p{
  margin-top: 12px;
}
.modal-shimabara .modal-body p + h3{
  margin-top: 36px;
}
.btn-close{
  display: block;
  background:#333;
  color: #fff;
  text-align: center;
  padding:12px 12px 12px 12px;
  border-radius: 4px;
  position: relative;
  font-weight: bold;
  margin:0 auto;
  cursor: pointer;
  outline:none !important;
}
.btn-close:hover{
  background:#ccc;
  color: #666;
  text-decoration: none;
  opacity: 0.5;
}
@media screen and (max-width: 767px) {
.wrap-info{
  margin-top: 0px;
  border-radius: 4px;
  margin-bottom: 30px;
}
.wrap-info button{
  display: block;
  margin-top: 6px;
}
.modal-shimabara .modal-header h3{
  font-size: 14px;
}
}
/*--------------------
  予約ボタン非活性
--------------------*/
.comingsoon {opacity: 0.5;pointer-events: none;} 
.comingsoon .dd-reserve span {font-size: 0;} 
.comingsoon .dd-reserve span:after {content: "販売停止中"; font-size: 14px;}