@charset "utf-8";


/*　pc(tablet)・sp　switching  
-------------------------------*/
/* sp */
@media screen and (max-width: 767px) {
  .pc-on {
    display: none;
  }
  .tab-on {
    display: none;
  }
  .sp-on {
    display: block;
  }
  
  .t-left-sp {
    text-align: left!important;
  }
}

/*pc・tablet*/ 
@media screen and (min-width: 768px) {
  .pc-on {
    display: block;
  }
  .tab-on {
    display: none;
  }
  .sp-on {
    display: none;
  }
}

/* tablet only */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .tab-on {
    display: block;
  }
}


/*-------------------------------
	Common  (mobile first)
-------------------------------*/
article {
	font-family: "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
	overflow: hidden;
	color: #2A2A2A;
}

img {
	max-width: 100%;
	height: auto;
}

/*　テキスト
-------------------------------*/
article p{
	font-size: 12px;
}

@media screen and (min-width: 768px) {
	article p{
		font-size: 16px;
	}
}

/*　h2 
-------------------------------*/
.heading-h2 {
    position: relative;
	text-align: center;
	margin: 0 auto 30px;
}

.heading-h2 span {
	display: block; /*縦並び*/
}

.heading-h2-text {
	font-weight: bold;
	font-size: 16px;
	color: #2A2A2A;
    width: fit-content;
    margin: auto;
    border-bottom: 1px solid #2A2A2A;
}

.heading-h2-img {
    scale: 0.55;
}


@media (min-width: 768px) {
	.heading-h2 {
		margin: 0 auto 50px;
	}
	.heading-h2-text {
		font-size: 24px;
	}
	.heading-h2-img {
		scale: 1;
		margin-bottom: 20px;
	}
}

/*　h3
-------------------------------*/
.heading-h3 {
    position: relative;
	text-align: center;
	margin: 0 auto 15px;
}

.heading-h3 span {
	display: block; /*縦並び*/
}

.heading-h3-text {
	font-weight: bold;
	font-size: 16px;
	color: #2A2A2A;
    margin: auto;
    width: fit-content;
}

/*枠線*/
.frame-line {
	border: solid 2px #2A2A2A;
    padding: 18px 20px;
}


@media (min-width: 768px) {
	.heading-h3 {
		margin: 0 auto 20px;
	}
	.heading-h3-text {
		font-size: 18px;
	}
}


/*-------------------------------
	Hero
-------------------------------*/
#Hero h1{
	padding: 0;
	margin: 0 auto;
}


/*-------------------------------
	設備のご紹介
-------------------------------*/
#Equipment{
	padding: 50px 0 25px;
}

#Equipment .wrap-img-main{
	max-width: 1500px;
	margin: auto;
	text-align: center;
}
#Equipment .wrap-img-main img{
	margin: auto;
}

/*sp時のみ*/
#Equipment .wrap-sp{
	margin: 30px auto 30px;
	text-align: center;
}
#Equipment .equipment-item{
	position: relative;
	margin-bottom: 40px;
}

#Equipment .equipment-item .wrap-img-item{
	position: relative;
	margin: 0 auto 15px;
	border-radius: 15px;
	max-width: 292px;
    width: 100%;
}
#Equipment .equipment-item .wrap-img-item:before{
	content: "";
	position: absolute;
    top: -15px;
    left: -18px;
	display: block;
	width: 36px;
	height: 45px;
}
#Equipment .equipment-item:nth-of-type(1) .wrap-img-item:before{
	background: url(/static/img/restaurantbus/about-bus/icon-num01.svg) no-repeat top center /100%;
}
#Equipment .equipment-item:nth-of-type(2) .wrap-img-item:before{
	background: url(/static/img/restaurantbus/about-bus/icon-num02.svg) no-repeat top center /100%;
}
#Equipment .equipment-item:nth-of-type(3) .wrap-img-item:before{
	background: url(/static/img/restaurantbus/about-bus/icon-num03.svg) no-repeat top center /100%;
}
#Equipment .equipment-item:nth-of-type(4) .wrap-img-item:before{
	background: url(/static/img/restaurantbus/about-bus/icon-num04.svg) no-repeat top center /100%;
}
#Equipment .equipment-item:nth-of-type(5) .wrap-img-item:before{
	background: url(/static/img/restaurantbus/about-bus/icon-num05.svg) no-repeat top center /100%;
}


@media screen and (min-width: 768px){
	#Equipment{
		padding: 100px 0 100px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1600px) {
  #Equipment .wrap-img-main {
    padding: 0 50px
  }
}


/*-------------------------------
	運行車両のご紹介
-------------------------------*/
#Bus-seat{
	padding: 0 0 25px;
}

#Bus-seat .section-header .heading-h2{
	margin: 0 auto 20px;
}
#Bus-seat .section-header .attention-text{
	text-align: center;
	margin-bottom: 20px;
	font-size: 12px;
}

#Bus-seat .container{
	max-width: 1540px;
}

#Bus-seat .bus-item{
    text-align: center;
    background: #F1F1F1;
    border-radius: 20px;
    padding: 50px 10px 10px;
	max-width: 533px;
	margin: 0 auto 30px;
}

#Bus-seat .bus-item .contents01 .img-bus{
	margin: 15px 0 30px;
}

#Bus-seat .bus-item .contents01 .attention-text{
	font-size: 10px;
	margin-top: 7px;
}

#Bus-seat .bus-item .contents02{
	margin-top: 35px;
}

#Bus-seat .bus-item .contents02 .wrap-seat{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
    margin: auto;
}
#Bus-seat .bus-item .contents02 .wrap-seat .seat-item{
	max-width: 47%;
	margin: 0 1.5% 5%;
}
#Bus-seat .bus-item .contents02 .wrap-seat .seat-item img{
	margin-bottom: 9px;
	border-radius: 10px;
}

@media screen and (min-width: 768px){
	#Bus-seat{
		padding: 0 0 50px;
	}
	#Bus-seat .section-header .attention-text{
		font-size: 14px;
	}
	
	#Bus-seat .container{
		padding: 0 50px;
	}
	
	#Bus-seat .wrap-bus-items{
		display: flex;
		justify-content: center;
	}
	
	#Bus-seat .bus-item{
		margin-right: 20px;
		padding: 50px 25px 30px;
	}
	#Bus-seat .bus-item:last-of-type{
		margin-right: 0;
	}
	
	#Bus-seat .bus-item .contents01 .attention-text{
		font-size: 12px;
	}
	#Bus-seat .bus-item .contents02 .wrap-seat .seat-item{
		max-width: calc((100% / 2) - 20px);
		margin: 7px 10px;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	#Bus-seat .wrap-bus-items{
		flex-wrap: wrap;
	}
	#Bus-seat .bus-item,
	#Bus-seat .bus-item:last-of-type{
		margin: 0 auto 30px;
		max-width: 550px;
	}
	#Bus-seat .bus-item .contents02 .wrap-seat .seat-item{
		max-width: 100%;
        margin: 7px auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	#Bus-seat .bus-item .contents02 .wrap-seat .seat-item{
		max-width: 100%;
        margin: 7px auto;
	}
}