@charset "utf-8";

/*----------------------------------------------------
	共通 
-----------------------------------------------------*/
/*css変数定義*/
:root {
  --bk: #3A3A3A;/*黒*/
  --gray: #f5f5f5;/*グレー*/
  --red: #B80E0B;/*赤*/
/*  --pink: #EC7190;ピンク*/
  --pink: #D579AB;/*ピンク*/
  --blue: #addef8;/*青*/
  --lblue: #EFF8FE;/*水色*/
  --green: #E3EEC4;/*緑*/
  --lgreen: #F7FAF0;/*黄緑色*/
}

.red{
	color: var(--red);
}
.pink{
	color: var(--pink);
}
.blue{
	color: var(--blue);
}
.green{
	color: var(--green);
}

/*リスト*/
.dot-list li{
	position: relative;
	padding-left: 15px;
}

/*リストの「・」*/
.dot-list li:before{
	content: "・";
	position: absolute;
	top: 0;
	left: 0;
}


/*  見出し
-------------------------------*/
/*h2*/
.title-concept{
	margin: 0 auto 30px;
}
.title-concept span{
	font-size: 28px;
    width: 100%;
	max-width: 562px;
	border-width: 2px;
	padding: 19px;
}


/*背景・ボーダー無し*/
.title-concept.-no-bg span{
	background: none!important;
}

.title-concept.-no-border span{
	border: none;
	padding: 0;
}

/*h3*/
.title-md {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    margin: 0 auto 30px;
}
	
.title-h4 {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}

@media (max-width:768px) {
	.title-concept{
		margin: 0 auto 20px;
	}
	.title-concept span{
		font-size: 20px;
		width: calc(100% - 30px);
		padding: 17px;
	}
	
	.title-md{
		font-size: 16px;
		margin-bottom: 20px;
	}
}

/*  ボタン
-------------------------------*/
/*全体*/
.btn-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px auto;
}
/*各ボタン*/
.btn-wrap{
	width: 100%;
	max-width: 375px;
}

/*各ボタンのデザイン*/
.btn-design {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border-radius: 5px;
	background-color: var(--bk);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	padding: 18px 40px 18px 30px;
	transition: opacity 0.3s ease;
	text-decoration: none;
	margin: 0 auto;
}
/*ホバー*/
.btn-design:hover {
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}


/*自宅登録*/
.register__btn-wrap{
	margin: 30px auto 20px;
}
.register__btn-wrap .btn-design{
	padding: 27px 40px 27px 30px;
	font-size: 20px;
}


/*ガイドブック*/
.guidebook > a {
    display: block;
    padding: 18px 40px 20px 160px;
    background-color: #6BBEEB;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
    height: 100%;
    position: relative;
    border: 2px solid #6BBEEB;
    font-weight: 700;
    font-size: 16px;
}

/*土日祝*/
.guidebook-area02 > a{
    background-color: #9ac714;
    border: 2px solid #9ac714;
}
.guidebook-area02 > a:hover{
	color: #9ac714;
}

@media (max-width: 560px) {
    .guidebook > a {
        width: 100%;
        max-width: 270px;
        margin: auto;
        padding: 18px 20px 20px 120px;
    }
}


/* バリエーション
----------------------*/
/*色 赤*/
.btn-design.-btn-red {
  background-color: var(--red);
}

/* アイコン共通 */
.btn-design::before{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
}

/* 右矢印アイコン */
.btn-design.-arrow::before {
  content: "\f105";
  right: 1em;
}

/* 別タブアイコン */
.btn-design.-new-tab::before {
  content: "\f24d";
  right: 1em;
}


/* スマホ対応 */
@media (max-width: 767px) {
	.btn-design {
		font-size: 16px;
	}
	.register__btn-wrap .btn-design{
		padding: 17px 30px;
		font-size: 18px;
	}
}


/* 非活性
-------------------*/
.btn-design.is-inactive {
  pointer-events: none;
  background-color: #bbb !important;
}

/*----------------------------------------------------
	MV 
-----------------------------------------------------*/
/* 全体背景 -------*/
#hero {
    position: relative;
    z-index: 0;
    overflow: hidden;
	background: url('/static/img/maas/mobi/minamiaso/pc-bg.webp') no-repeat top center;/*背景画像*/
	padding-top: 60px;
}

/* テキストボックス -------*/
.box-start{
	border:#231815 solid 2px;
	width: 90%;
	max-width: 700px;
	margin: 0 auto -35px;
	padding: 18px 0;
	font-size: 40px;
	font-weight: 900;
	line-height: 1.2;
}
.box-start .end-term{
	font-size: 32px;
}

/* タイトル画像
-------------------------*/
.wrap-title-img {
    margin: auto;
    text-align: center;
	position: relative;
}

.wrap-title-img img{
    margin: 0 auto;
	padding: 0 20px;
}

/* 車体部分 */
.anime{
	margin-top: 20px;
}


@media  (max-width: 992px) {
	#hero {
		background-size: 250%;
		padding-top: 6vw;
	}	
	.box-start{
		font-size: 1.1rem;
        margin: 0 auto 15px;
        max-width: 540px;
        line-height: 1.4;
        padding: 2vw;
        width: 80%;
	}
	.box-start .end-term{
		font-size: 1.1rem;
	}
	.wrap-title-img img{
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	#hero {
		background-image: url(/static/img/maas/mobi/minamiaso/sp-bg.webp);
		background-size: 130%;
	}
	.box-start{
		border-width: 1px;
	}
	.anime{
		margin-top: 0px;
	}
}


/*----------------------------------------------------
	概要 
-----------------------------------------------------*/
/*お知らせ*/
.news-box{
	padding: 20px;
}

.overview {
    padding: 40px 0 30px;
    background: url(/static/img/maas/mobi/bg-concept.png) top left;
    background-size: 60px 60px;
}

.overview__lead{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

@media(max-width: 768px) {
    .overview {
        padding: 30px 0 10px;
    }
	.overview__lead{
		font-size: 16px;
	}
}

/*----------------------------------------------------
	運行形態・利用対象について 
-----------------------------------------------------*/
.service{
	padding: 40px 0 50px;
}
.service p:not(.service__title){
	font-size: 18px;
}

/*各運行形態*/
.service__item{
	margin: 40px auto;
}
.service__item:last-of-type{
	margin-bottom: 0;
}

/*各タイトル*/
.service__title{
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 15px;
}
/*各テキスト*/
.service__text-wrap{
    width: fit-content;
    margin: auto;
}

@media screen and (max-width: 768px) {
    .service {
        padding: 30px 0 40px;
    }
	.service__title{
		font-size: 16px;
	}
	.service p:not(.service__title){
		font-size: 16px;
	}
	/*各運行形態*/
	.service__item{
		margin: 20px auto;
	}
}


/*----------------------------------------------------
	タブ
-----------------------------------------------------*/
/*共通　各セクションの背景・余白
----------------------------*/
#Area01{
	background: var(--lblue);
	padding: 80px 10px;
}
#Area02{
 	background: var(--green); 
	padding: 80px 10px;
}



#Howto,
#Price,
#Register-home,
#Tel-flow,
#web-flow,
#schedule,
.fixed-usage{
	background: none;
	padding: 40px 0 0;
}
#Price .inner-price{
	background: none;
	padding: 0;
}
#fixed-usage{
	padding: 60px 0 0;
}


/*白塗り背景*/
.container.bg-white{
	background: #fff;
    padding: 40px 60px;
    border-radius: 20px;
}

@media (max-width: 768px){
	#Area01,
	#Area02{
		padding: 40px 15px;
	}
	
	#Howto,
	#Price,
	#Register-home,
	.schedule-container{
		padding: 40px 0 0;
	}
	
	/*白塗り背景*/
	.container.bg-white{
		padding: 25px 15px;
	}
}


/*-----------------------------------------
	タブ
------------------------------------------*/
/*ナビ全体*/
.tab-nav-wrap{
	margin: 0 auto 50px;
}

/*ナビ全体インナー*/
.operation-tabs {
    display: flex;
    align-items: stretch;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    border-radius: 12px;
}

/*各ナビ*/
.operation-tabs__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: 1;
    border: none;
    background-color: var(--bk);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    transition: all 0.3s ease;
}
/*アクティブ時*/
.operation-tabs__item.active {
    background-color: var(--blue);
    color: var(--black);
    z-index: 2;
}

/*定時定路線のボタン*/
.operation-tabs__item.nav-item02{
	border-radius: 0 8px 8px 0;
}
/*アクティブ時*/
.operation-tabs__item.nav-item02.active{
	background: #d5ec94;
}

@media (max-width: 767px) {
	.operation-tabs__item{
		font-size: 18px;
		padding: 10px;
	}
}
	

/*----------------------------------------------------
	MAP
-----------------------------------------------------*/
.map{
	padding-top: 30px;
}

/*タイトル*/
.title-yobi{
	font-weight: bold;
	font-size: 18px;
}

/*comingsoon*/
.comingsoon{
	background: #eee;
    padding: 50px 20px;
    margin: 10px auto;
	font-weight: bold;
}

.list-maphosoku{
	margin-bottom: 25px;
}

.map__notes{
	font-size: 14px;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

/*全体 運行時間*/
.map__time-warp {
    display: flex;
    justify-content: center;
    align-items: center;
	margin: 0 auto 25px;
	gap: 10px;
}

/*運行時間 タイトル*/
.map__time-title{
	background: var(--bk);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 160px;
    font-size: 20px;
    font-weight: bold;
    padding: 5px 20px;
}
/*時間*/
.map__time{
	font-size: 22px;
	font-weight: bold;
}
.map__stop{
	font-size: 18px;
}

@media (max-width: 991px) {
	.map{
		padding-top: 0;
	}
	/*地図タイトル*/
	.title-yobi{
		font-size: 16px;
	}
	
	/*運行時間 タイトル*/
	.map__time-title{
		font-size: 18px;
		padding: 9px 5px;
		max-width: 100px;
	}
	/*時間*/
	.map__time{
		font-size: 18px;
	}
	.map__stop{
		font-size: 14px;
	}
}


/*----------------------------------------------------
	ご利用シーン
-----------------------------------------------------*/
.howto__lead{
	margin-bottom: 50px;
}

.dl-howto{
	margin-bottom: 30px;
}

.dl-howto dt{
	font-size: 18px;
	margin-bottom: 10px;
}
.dl-howto dd{
	font-size: 14px;
}

@media(max-width:768px) {
	.howto__lead{
		margin-bottom: 40px;
	}
    .dl-howto{
		margin-bottom: 10px;
	}
}


/*----------------------------------------------------
	電話予約方法
-----------------------------------------------------*/
/*全体*/
.tel-flow__section-body{
	max-width: 760px;
	margin: auto;
}

.tel-flow__item + .tel-flow__item{
	margin-top: 20px;
}

/*見出しタイトル*/
.title-flow{
	display: flex;
	align-items: center;
	justify-content: left;
	background: var(--gray);
	border-radius: 5px;
	padding: 11px 35px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
}
.title-flow__sub{
	font-size: 16px;
	margin-left: 10px;
}

/*連番*/
.tel-flow__section-body{
	counter-reset: renban;
}
.title-flow:before {
    counter-increment: renban;
    content: "0" counter(renban) ".";
    font-size: 24px;
    margin-right: 25px;
	font-weight: 900;
}

/*各テキスト全体*/
.tel-flow__text{
	padding: 0 50px;
}

/*情報*/
.reservation-info {
    font-weight: bold;
    font-size: 18px;
}

/*テキスト*/
.tel-flow__item p{
	font-size: 18px;
}

@media(max-width:768px) {
	.title-flow{
		padding: 11px 15px;
	}
	.title-flow:before {
		margin-right: 15px;
	}
	.title-flow__sub{
		font-size: 14px;
		margin-left: 0;
	}
	/*各テキスト全体*/
	.tel-flow__text{
		padding: 0 15px;
	}
}


.box-flow{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.box-flow p{
	font-size: 16px;
	padding: 0 10px;
	margin: 0;
}
.box-flow + .box-flow{
	margin-top: 40px;
}
.title-mid{
	font-size: 16px;
	font-weight: 900;
	text-align: left;
	position: relative;
	padding-left: 30px;
}
.row-flow{
	counter-reset: renban;
}
.row-flow .col-flow .title-mid:before {
    counter-increment: renban;
    content: counter(renban) "";
    background: var(--bk);
    color: #fff;
    display: flex;
    width: 20px;
    height: 20px;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100px;
}
.row-flow{
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
.col-flow{
	width: 33%;
	padding: 20px 20px;
	text-align: center;
}

.text-line{
	border-bottom: 1px solid #212529;
	display: inline;
}


/*20241015追記 アプリで予約*/
.wrap-app-reservation .col-flow{
	padding: 20px 20px 30px;
}

.wrap-app-reservation .text-flow{
	padding-top: 10px;
}

.text-flow p{
	font-size: 14px;
	text-align: center;
}
.text-flow p + p{
	margin-top: 10px;
}
.text-flow p b{
	display: block;
}
.text-flow p small{
	display: block;
}
.label-guidance-num{
	display: inline-flex;
	border:1px solid #212529;
	width: 20px;
	height: 20px;
	justify-content: center;
	align-items: center;
	background: #fff;
}
.text-tel-support{
	margin-top: 10px;
	padding: 20px 10px 0;
}
.text-tel-support p{
	font-size: 14px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .col-flow {
        width: 48%;
    }
}

@media(max-width:768px) {
	.title-mid{
		font-size: 16px;
	}
	.row-flow{
		display: block;
	}
	.col-flow{
		width: 100%;/*sp時、1列*/
		padding: 20px 20px;
	}
}



/*----------------------------------------------------
	WEBアプリ予約方法
-----------------------------------------------------*/

.web-flow__section-body{
	counter-reset: renban;
	max-width: 760px;
    margin: auto;
}

@media(max-width:768px) {
	.title-mid{
		font-size: 16px;
	}
	.row-flow{
		display: block;
	}
	.col-flow{
		width: 100%;/*sp時、1列*/
		padding: 20px 20px;
	}
}




/*料金　独自スタイル
------------------------------*/
.wrap-plan-price {
    margin-top: 50px;
}

.wrap-plan-price .row {
	display: flex;
    justify-content: left;
	flex-wrap: wrap;
	gap: 40px;
    max-width: 940px;
    margin: auto;
}

/*各プラン*/
.wrap-plan-price-inner{
	max-width: 450px;
	width: calc((100% - 40px) / 2);
}
.wrap-plan-price-inner:last-of-type{
	margin-bottom: 0;
}

/*各プランのタイトル*/
.wrap-plan-price .title-list {
    background: var(--gray);
    padding: 10px 30px;
    border-radius: 8px;
	display: flex;
	align-items: center;
}
/*種類*/
.wrap-plan-price .title-list .title-type {
    font-size: 24px;
	font-weight: bold;
}
/*種類の補足*/
.wrap-plan-price .title-list dd {
    font-weight: bold;
}

/*内容全体*/
.wrap-plan-price .wrap-content{
	margin: 15px auto;
}
/*内容の各項目*/
.wrap-plan-price .price-list {
	display: flex;
	justify-content: center;
	align-items: center;
}

/*内容の各項目のタイトル*/
.wrap-plan-price .price-list dt {
    font-size: 18px;
	margin-right: 15px;
}
/*内容の各項目の料金*/
.wrap-plan-price .price-list dd,
.wrap-plan-price .price-list > p {
    font-size: 30px;
	font-weight: bold;
}
/*単位 円*/
.price-en{
	font-size: 0.5em;
}

/*無料*/
.price-free{
	line-height: 1;
}
.free-hosoku{
	font-size: 20px;
}

@media(max-width:991px) {
	.wrap-plan-price .row{
		justify-content: center;
		gap: 10px;
	}
	/*各プラン*/
	.wrap-plan-price-inner{
		width: 100%
	}
	
	/*種類*/
	.wrap-plan-price .title-list .title-type{
		font-size: 20px;
	}
	/*種類の補足*/
	.wrap-plan-price .title-list dd{
		font-size: 14px;
	}
	
	/*内容の各項目のタイトル*/
	.wrap-plan-price .price-list dt{
		font-size: 18px;
	}
	/*内容の各項目の料金*/
	.wrap-plan-price .price-list dd,
	.wrap-plan-price .price-list > p{
		font-size: 24px;
	}
	/*補足*/
	.free-hosoku{
		font-size: 18px;
	}
}

/*----------------------------------------------------
	自宅登録 
-----------------------------------------------------*/
.register__wrap-inner{
	text-align: center;
}

.register__lead{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}

.register__about{
    margin: 0 auto 30px;
    max-width: 760px;
    background: var(--gray);
    padding: 24px 15px;
    border-radius: 8px;
	font-weight: 500;
}

.register__title{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
	
@media (max-width: 768px) {
	.register__lead,
	.register__title{
		font-size: 16px;
	}
    .register__about {
        padding: 20px;
		text-align: left;
    }
}


/*----------------------------------------------------
	タブ2（定時定路線） 
-----------------------------------------------------*/
/*-------------------------------
	schedule
--------------------------------*/
/*注意文*/
.schedule__lead {
    padding: 20px 30px;
    background: #fffdf6;
    border: solid 3px var(--red);
    max-width: 960px;
    width: 90%;
    margin: 40px auto;
    color: var(--red);
    text-decoration: underline;
}

/* 各テーブル全体 */
.schedule__table-item {
  max-width: 960px;
  margin: 50px auto;
}

.schedule__table-item:last-of-type{
  margin-bottom: 0;
}

/* 各テーブルの見出し */
.schedule__table-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* 各テーブル */
.schedule__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px; /* セルの間に白い線を表現 */
  font-size: 16px;
}

/*tr*/
.schedule__deadline{
	color: var(--red);
}
.schedule__deadline td{
	font-weight: bold!important;
}

/* th */
.schedule__table th {
	background-color: var(--green); /* 背景色 */
	padding: 18px 25px;
	font-weight: bold;
	text-align: center;
	width: calc((100% - 31%) / 6);
}
/* 停留所名 */
.schedule__table th:first-child {
	text-align: left;
	width: 31%;
}

/* td */
.schedule__table td {
	padding: 18px 25px;
	text-align: center;
	font-weight: 500;
}
/* 奇数行 */
.schedule__table tbody tr:nth-child(odd) td {
  background-color: #fff;
}
/* 偶数行 */
.schedule__table tbody tr:nth-child(even) td {
  background-color: var(--lgreen);
}
/* 停留所名 */
.schedule__table td:first-child {
  text-align: left;
}

@media (max-width: 991px) {
	.schedule__table-wrap {
		overflow-x: auto;
	}
	
	/* 各テーブルの見出し */
	.schedule__table-title {
		font-size: 16px;
	}
	
	.schedule__table {
		width: 700px;
	}
	.schedule__table th,
	.schedule__table td {
		padding: 15px 15px;
	}
}
/*-------------------------------
	運賃表
--------------------------------*/
.fare{
	padding-top: 60px;
}

/* 運賃表コンテナ */
.fare-container {
  max-width: 800px;
  margin: 20px auto;
}

/* テーブル全体 */
.fare-table {
  width: 100%;
  border-collapse: collapse; /* セルの隙間無し */
  table-layout: fixed; /* 列の幅を均等 */
}

/* 基本のセル設定 */
.fare-table td {
  height: 60px;
  text-align: center;
  vertical-align: middle;
  padding: 8px 4px;
  font-size: 0.95rem;
}

/* 左上の不要な空白セル */
.fare-table td.none {
  background-color: transparent;
}

/* 駅名セル（階段部分の緑背景） */
.fare-table td.station-cell {
  background-color: var(--green);
  font-weight: bold;
  line-height: 1.3;
}

/* 金額セル（白背景・薄緑背景の交互） */
.fare-table td.price-cell {
  background-color: var(--lgreen);
}

/* 市松模様風に偶数番目の運賃セルを薄緑にする場合 */
.fare-table tr:nth-child(even) td.price-cell:nth-child(even),
.fare-table tr:nth-child(odd) td.price-cell:nth-child(odd) {
  background-color: #fff;
}

/* 大人料金（赤字・太字） */
.fare-table .adult {
  color: var(--red);
  font-weight: bold;
  font-size: 20px;
  margin-right: 4px;
}

/* 小学生料金 */
.fare-table .child {
  font-size: 16px;
}

/* スマホなど画面幅が狭い場合の対応 */
@media (max-width: 768px) {
  /* テーブルを横スクロール可能に */
  .fare-container {
    overflow-x: auto;
  }

  /* スマホの時だけセルの幅を80pxに固定 */
  .fare-table td {
    width: 78px;
	height: 78px;
    padding: 4px;
    font-size: 14px;
  }

  /* テーブル全体の最小幅指定を解除（セルの指定を優先させるため） */
  .fare-table {
    min-width: auto;
  }
  
  /* 金額表示が改行されないように揃える */
  .fare-table .adult,
  .fare-table .child {
    display: inline-block;
	  width: 100%;
	  margin: 0;
	  line-height: 1;
  }
}

/*-------------------------------
	定時定路線利用方法
--------------------------------*/
/*ステップ
------------------------*/
.fixed-usage__list{
	max-width: 760px;
	margin: 30px auto;
}

.fixed-usage__list .title-flow{
	position: relative;
	padding: 16px 32px;
}
.fixed-usage__list .title-flow:before{
	display: none;
}

/*数字*/
.step-head__number{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    line-height: 1.1;
}

/*テキスト*/
.step-head__title {
    font-weight: bold;
    font-size: 18px;
	padding-left: 3.5rem;
}


@media screen and (max-width: 768px) {
	.fixed-usage__list .title-flow{
		padding: 16px;
	}
	/*テキスト*/
	.step-head__title {
		padding-left: 4.5rem;
	}
}