@charset "utf-8";
fieldset {
  border: none;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, dd, li {
	margin: 0;
	padding: 0;
	list-style: none;
}


body {
	font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif;
	font-size: 16px;
	margin: 0;
	background-color: #F4F4F4;
	-webkit-text-size-adjust: 100%;
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: 0px;
	width: 100vw;
	overflow-x: hidden;
	  position: relative;
    left: 0;
    right: 0;
	word-wrap: break-word; /* 単語の折り返し */
  scroll-behavior: smooth; /* スムーズなスクロール効果 */
	/* [disabled]max-width: 100vw; */ /* ビューポート幅の制限 */
}


section, article, aside, nav, hgroup, header {
  display: block;
}

h5{
	font-size: 16px;
}

p {
	white-space: pre-wrap;
	word-wrap: break-word;
	line-height: 1.5em;
	color: #000000;
	font-size: 14px;
}


li{
	margin-left:10px;
}

/* Safari対策：thの背景は透明にして sticky のバグを防ぐ */
th {
  position: sticky;
  top: 0;
  background-color: transparent !important;
  z-index: 2;
  text-align: center;
  border-right: 1px solid #666666;
}

/* ここで id="gyouname" 系の th の背景色だけグレーに強制上書き */
tbody th[id^="gyouname"] {
  background-color: #E4E8E9 !important; /* グレー背景 */
  z-index: 3; /* sticky重なりのため少し上げる */
  border-right: 1px solid #666666;
}

/* 停所の背景をグレーにする */
#retuname1 {
  background-color: #CCCCCC !important;  /* 強制的にグレーに */
  position: sticky;                      /* stickyが必要なら */
  top: 0;                               /* sticky位置 */
  z-index: 3;                           /* 他のthより前面に */
}


/* ヘッダーのスタイル */
header {
	align-items: center;
	justify-content: space-between;
	/* [disabled]padding: 10px 20px; */
	background-color: #FFFFFF;
	width: 100vw;
	overflow: hidden;
	z-index: 999;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.header-image-box{
	width:100vw;
	margin:0px;
	padding:0px;	
	 overflow: hidden; /* 横スクロールを防ぐ */
	
}

.header-image-box img {
    width: 100vw; /* 画像を画面幅に合わせる */
    height: auto; /* アスペクト比を保持 */
    display: block; /* 不要な隙間を防止 */
}





.wrap {
	/* 枠線のスタイル */
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 5px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 5px; /* Safari/Chrome対応 */
	-moz-border-radius: 5px;    /* Firefox対応 */
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	text-align: left;
	/* 背景色を指定する場合（必要なら追加） */
	/* [disabled]background-color: #f9f9f9; */
	width: 80vw;
	margin-top: 10px;
	max-width: 1024px;
}


.wrap p{
	
	font-size:16px;
}


.wrap2 {
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 15px;
	text-align: center;
	/* 背景色を指定する場合（必要なら追加） */
	/* [disabled]background-color: #f9f9f9; */
	width: 80vw;
	margin-top: 10px;
}


.wrap3 {
	/* 枠線のスタイル */
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 5px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 5px; /* Safari/Chrome対応 */
	-moz-border-radius: 5px;    /* Firefox対応 */
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 15px;
	text-align: left;
	/* 背景色を指定する場合（必要なら追加） */
	/* [disabled]background-color: #f9f9f9; */
	width: 80vw;
	margin-top: 10px;
}


.wrap3 p{
	
	font-size:16px;
}


.wrap4 {
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 15px;
	text-align: center;
	/* 背景色を指定する場合（必要なら追加） */
	background-color: #D0D2BF;
	max-width: 100%;
	margin-top: 10px;
}








.warning-text {
    color: red;
    font-weight: bold;
}



.hamburger-menu {
	margin-left: auto;
	background-color: #CC3;
	width: auto;
	text-align: right;
	float: right;
}

.hamburger-menu button {
  background-color: #333;
  color: white;
  cursor: pointer;
  border: none;
  padding: 8px 12px;
  font-size: 16px;
}

.hamburger-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.hamburger-icon {
  font-size: 2em; /* アイコンを大きくする */
  margin-right: 8px; /* LANG テキストとの間隔 */
}

.lang-text {
  font-size: 1em; /* LANG テキストのサイズ */
}

/* ドロップダウンメニューのスタイル */
.dropdown-menu {
	display: none;
	position: absolute;
	right: 0px;
	top: 50px;
	background-color: black;
	border: 2px solid #ddd;
	padding: 10px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 9999;
}

.dropdown-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  border-bottom: 1px solid #555;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #666;
}

.dropdown-menu button {
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
}


  .language-list {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 二列に設定 */
      gap: 10px; /* 要素間の間隔 */
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .language-list li {
      text-align: left; /* 左揃え */
    }

    .language-list a {
      text-decoration: none;
      color: #007bff;
    }

    .language-list a:hover {
      text-decoration: underline;}



main{
	width: 100vw;
	
	
}


/* メインコンテンツ */
.main-box {
  position: relative; /* 必須 */
  margin: 0;
  width: 100%;
  padding-bottom: 10px;
}


/* サブタイトル */
.subtitle {
	font-size: 1rem;
	font-weight: bold;
	color: #890062;
	margin: 10px;
	text-align: center;
}

/* メインタイトル */
.maintitle {
	font-size: 1.8rem;
	font-weight: bold;
	color: #890062;
	margin: 10px;
	text-align: center;
}

/* ボタンコンテナ */
.button-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	text-align: center;
	font-size: 12px;
	width: 100vw;
	max-width: 1024px;
	margin: 0 auto;
}

.button-box {
	width: 95%;
	padding-top: 10px;
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 5px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 5px; /* Safari/Chrome対応 */
	-moz-border-radius: 5px;    /* Firefox対応 */
	margin-bottom: 1px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
}

/* ボタンのスタイル */
.bus-button {
	background-color: #890062;
	color: white;
	padding: 15px 0;
	text-align: center;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 90%;
	margin: 0 auto; /* 水平方向の中央揃え */
	display: block; /* 必須: a タグをブロックレベル要素に */
}

.bus-button h3 {
	color:FFF;
	
}


.bus-button:hover {
	background-color: #8317A6;
}



.bus-button2 {
	background-color: #E4CBD2;
	color: #890062;
	padding: 15px 0;
	text-align: center;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 90%;
	margin: 0 auto; /* 水平方向の中央揃え */
	display: block; /* 必須: a タグをブロックレベル要素に */
}

.bus-button2:hover {
	background-color: #EAD5E7;
}


.bus-button:hover {
	background-color: #990033;
	/* [disabled]width: 300px; */
}


[class^="bus-button"] a {
	color: inherit;
    text-decoration: none;
}


.bus-button3 {
	background-color: #7E5F96;
	color: white;
	padding: 15px 0;
	text-align: center;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 90%;
	margin: 0 auto; /* 水平方向の中央揃え */
	display: block; /* 必須: a タグをブロックレベル要素に */
}

.bus-button3:hover {
	background-color: #A785A3;
}

.bus-button3 a {
    color: inherit;
    text-decoration: none !important;
}

.bus-button3 a:visited {
    color: white;       /* 訪問後も文字色を白に設定 */
}


.bus-button4 {
	background-color: #E77976;
	color: white;
	padding: 15px 0;
	text-align: center;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 90%;
	margin: 0 auto; /* 水平方向の中央揃え */
	display: block; /* 必須: a タグをブロックレベル要素に */
}

.bus-button4:hover {
	background-color: #85BADA;
}


.bus-button5 {
	background-color: #00B8A5;
	color: white;
	padding: 15px 0;
	text-align: center;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 90%;
	margin: 0 auto; /* 水平方向の中央揃え */
	display: block; /* 必須: a タグをブロックレベル要素に */
}

.bus-button5:hover {
	background-color: #85BADA;
}


/* ボタンのスタイル */
.bus-minibutton {
	background-color: #568853;
	color: white;
	padding: 5px 0;
	text-align: center;
	font-size: 16px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 60vw;
}

.bus-minibutton:hover {
	background-color: #AEC6B6;
}

#map {
    height: 500px; /* 必要に応じて調整 */
    width: 100%;   /* 横幅をページ全体に */
}

.button-image {
  width: 3%; /* 画像サイズを調整 */
  height: auto; /* アスペクト比を維持 */
  margin-bottom: 10px; /* 画像と文字の間の余白 */
  float:left;
}


.button-arrow {
  font-size: 16px;
  color: #FFF;
  margin-left: 10px; /* テキストと矢印の間の余白 */
}




.info-box{
	margin: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	
}


footer{
	margin:0px;
	padding:0px;
}

/* フッターのスタイル */
.footer-box {
	background-color: black;
	color: #FFF;
	text-align: center;
	padding: 10px 0;
	width: 100%;
	font-size: 14px;
	/*z-index: 999;*/
	position: relative; /* フッターは相対位置 */
	margin-top: 20px; /* コンテンツとフッターの間に少し余白を追加 */
	height: 100px;
}



.footer-box p{
	color: #FFF;		
	
}


/* テーブルとスクロール設定 */
.table-container {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
}

.table-container table {
  width: auto;
  table-layout: auto;
  border-collapse: collapse;
}

/*  <th id="gyouname">のスタイル */
.table-container th:first-child {
	position: sticky;
	left: 0px;
	background-color: #E4E8E9;
	z-index: 1;
	text-align: center;
	width: auto;
	border-right: 1px solid #666666; /* 右側に枠線 */
	border: 1px solid #CCC;
	min-width: 5ch;
	padding: 5px;
}

/* <th>のスタイル */
.table-container td:first-child {
  position: sticky;
  left: 0;
  background-color: #F3F0F4;
  z-index: 1;
  text-align: center;
  min-width: 15ch;
}







td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  min-width: 6ch;
  position: relative;
}


th {
  position: sticky;
  top: 0;
  background-color: #E4E8E9;
  z-index: 2;
  width: auto;
  text-align: center;
  border-right: 1px solid #666666;
  position: relative;
}

/* 偶数行の背景色を変更 */
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 奇数行の背景色を変更 */
tbody tr:nth-child(odd) {
  background-color: #CCCCCC;
}


/* 黄色い背景色のセル */
.highlight-yellow {
  background-color: #ffff99; /* 明るい黄色 */
}


/* うす黄色い背景色のセル */
.highlight-yellow2 {
	background-color: #FDFAE1; /* 明るい黄色 */
}


/* オレンジ色の背景色のセル */
.highlight-orange {
	background-color: #FFCC99 !important;
	font-weight:bold;/* 明るい黄色 */
	 z-index: 10;
}


/* 濃いオレンジ色の背景色のセル */
.Dark-orange {
	background-color: #FFCC66;
	
}

.darkBlue{
	background-color:#ABB6C7;
}




/* 行にカーソルを合わせた際の背景色 */
tbody tr:hover {
  background-color: #e0e0e0; /* ハイライトカラー */
}

/* スクロールバーのスタイル */
.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-track {
  background-color: #f4f4f4;
}



.bus-stop{
	background-color:#CCD9CC;
	padding:0px;
}

.bus-stop-index{
	font-weight:bold;
	width:40vw;
	
}


.time-table-wine{
	background-color: #EADBF0;
	padding: 10px;
}


/*ブルーボックス*/

.blue-box{
	background-color: #448897;
	/* [disabled]width: 80%; */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 15px;
	margin-bottom: 5px;
	max-width: 1024px;
}

.blue-box2{
	background-color: #356B77;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
}


.blue-box3{
	background-color: #E77976;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 15px;
	margin-bottom: 5px;
	color: #FFF;
}


.blue-box3 p{
	
	color: #FFF;
}


.blue-box4{
	background-color: #00B8A5;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
	color: #FFF;
}

.blue-box4 p{
	
	color: #FFF;
}


.time{
	  font-size: 20px; /* h3タグのフォントサイズ */
    color:#FFF
}



.blue-box6{
	background-color: #6D8956;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
	color: #FFF;
}

.blue-box6 p{
	
	color: #FFF;
}

.blue-box7{
	background-color: #CE116B;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
	color: #FFF;
}

.blue-box7 p{
	
	color: #FFF;
}

.blue-box8{
	background-color: #38558B;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 0px;
	margin-bottom: 15px;
	color: #FFF;
}

.blue-box8 p{
	
	color: #FFF;
}


.blue-box9{
	background-color: #635285;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5em;
	margin-bottom: 15px;
	color: #FFF;
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 60vw;
}

.blue-box9 p{
	
	color: #FFF;
}

.blue-box9 a {
    color: white;       /* 文字色を白に設定 */
    text-decoration: none; /* 下線を消す */
}

.blue-box9 a:visited {
    color: white;       /* 訪問後も文字色を白に設定 */
}



.time{
	  font-size: 20px; /* h3タグのフォントサイズ */
    color:#FFF
}


/* blue-box内のすべてのh2, h3, pタグに共通のスタイルを指定 */
.blue-box h2, .blue-box h3, .blue-box p {
    font-family: Arial, sans-serif; /* フォント */
    color: #333;                   /* テキストカラー */
    margin: 10px 0;                /* 上下のマージン */
}

.blue-box h2 {
    font-size: 24px; /* h2タグのフォントサイズ */
	color:#FFF
}

.blue-box h3 {
    font-size: 20px; /* h3タグのフォントサイズ */
    color:#FFF
}

.blue-box2 h3 {
    font-size: 20px; /* h3タグのフォントサイズ */
    color:#FFF
}

.blue-box p {
	font-size: 16px; /* pタグのフォントサイズ */
	line-height: 1.2; /* 行間 */
	color: #FFF;
}



.language-select-btn {
	margin: 10px;
	padding: 10px;
	background-color: #A795AE;
	overflow: hidden;
	border-radius: 8px; /* 角を丸くする */
	-webkit-border-radius: 8px; /* Safariや古いブラウザ向け */
	-moz-border-radius: 8px; /* Firefoxの古いバージョン向け */
	width: 90%;
}

.language-select-btn img {
	margin: 0px;
	padding: 0px;
	width: 100px;
	float: left;
}

.language-select-btn h2 {
	float: left;
	margin-left: 50px;
	color: #FFF;
	text-align: center;
}

.lang-wrap-box{
	float: left;
	width: 70%;
	text-align: center;
}



.menu {
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    background: rgba(51, 51, 51, 0.9);
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.menu.show {
    max-height: 400px;
    opacity: 1;
}

.menu {
	display: flex;
	flex-direction: column; /* 縦並びにする */
	gap: 10px; /* ボタン間のスペース */
	padding: 10px;
	padding-bottom:40px:
; 	z-index: 100;
}


.menu a {
    display: flex;
    align-items: center;
    gap: 8px; /* マークと文字の間のスペース */
    color: white; /* 文字色 */
    text-decoration: none; /* 下線を消す */
    font-size: 16px;
    padding: 10px 15px; /* 余白 */
}

.menu a:hover {
    background: rgba(255, 255, 255, 0.2); /* ホバー時の背景色 */
}

.menu a::before {
    content: "⭳"; /* ○の中に下向きの▽ */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    text-align: center;
    border: 2px solid white;
    border-radius: 50%; /* 丸くする */
    line-height: 18px;
}



 .hamburger {
    all: unset; /* デフォルトのスタイルを完全リセット */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: black; /* ボタンの背景を黒に固定 */
    border: none; /* 白い枠を消す */
    outline: none; /* フォーカス時の白枠を消す */
    cursor: pointer;
    -webkit-appearance: none; /* iOSのデフォルトスタイルを無効化 */
    border-radius: 0; /* 角丸を防ぐ */
}

.hamburger:active {
    border-radius: 0 !important; /* タップ時の変形を防ぐ */
}

.hamburger svg {
    width: 40px;
    height: 30px;
}

.hamburger rect {
    fill: black !important; /* 確実に黒背景にする */
    stroke: white;
    stroke-width: 2;
}




@media (min-width: 1024px) {
  .telephone-icon {
    width: 5vw;
  }

  .map-box {
    width: 80%;
    height: 400px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
  }
  
  /* 最初のセル内の画像にスタイルを適用 */
.mapIcon {
  width: 2vw;           /* 画像の幅を指定 */
  object-fit: cover;     /* 画像の縦横比を保つ */
  display: block;        /* 画像をブロック要素として表示 */
  margin: 0 auto;        /* 画像を中央揃え */
}

.bus-image{
	width: 60vw;
}

.return-img {
	width: 50px;
	height: auto;
}
    .header-image-box {
    height: 600px; /* 高さを固定 */
  }
  .header-image-box img {
    object-fit: cover; /* 画像の中央を優先して切り取り */
    width: 100%; /* 親要素の幅に合わせる */
    height: 100%; /* ボックスの高さにフィット */
  }
  .logo {
	width: 10vw;
	height: auto;
}

.wrap3 img{
	padding:0px;
	width:500px;
	height:auto;
}

.card-icon-box img{
	width: 12vw;
	height:auto;
	margin-left: 10px;
	margin-right: 10px;
		
}

 .google-map{
	width: 100%;
	height: 200px;
	padding-bottom: 500px;
	position: relative;
	margin-top:10px;
	 
 }


}

@media (max-width: 1023px) {
  .telephone-icon {
    width: 25vw;
  }

  .map-box {
    width: 100%;
    height: 300px;
    text-align: center;
    padding: 0;
  }
  /* 最初のセル内の画像にスタイルを適用 */
.mapIcon {
  width: 5vw;           /* 画像の幅を指定 */
  object-fit: cover;     /* 画像の縦横比を保つ */
  display: block;        /* 画像をブロック要素として表示 */
  margin: 0 auto;        /* 画像を中央揃え */
}

.bus-image{
	width: 30vw;
}

.return-img {
	width: 10vw;
	height: auto;
}	
  .header-image-box {
    height: auto; /* 高さを画像の比率に従わせる */
  }
  .header-image-box img {
    object-fit: contain; /* 画像全体が収まるように表示 */
  }
  
  	.logo {
	width: 40vw;
	height: auto;
}

.wrap3 img{
	padding:0px;
	width:100%;
	height:auto;
	margin-top:5px;
	margin-bottom:5px;
	
}

.card-icon-box img{
	width: 12vw;
	margin-left: 10px;
	margin-right: 10px;
		
}

 .google-map{
	width: 100%;
	height: 0;
	padding-bottom: 500px;
	position: relative;
	margin-top:10px;
	 
 }
  
}


/* 共通スタイル */
.header-image-box {
	width: 100vw;
	margin: 0;
	padding: 0;
	overflow: hidden; /* 横スクロールを防ぐ */
	height: auto;
	max-height: 600px;
}

.header-image-box img {
  width: 100vw; /* 画像を画面幅に合わせる */
  height: auto; /* アスペクト比を保持 */
  display: block; /* 不要な隙間を防止 */
}



.logo-img{
	width: auto;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}





.card-icon-box{
	padding: 10px;
	/* [disabled]margin: 10px,auto,10px,auto; */
	/* [disabled]width: 70vw; */
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 15px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 15px; /* Safari/Chrome対応 */
	-moz-border-radius: 15px;    /* Firefox対応 */
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 15px;
	text-align: center;
	/* 背景色を指定する場合（必要なら追加） */
	background-color: #f9f9f9;
	margin-right: 10px;
	margin-top: 10px;
	
}



.taxi-name-box{
	margin: 10px,auto,10px,auto;
	/* [disabled]width: 70vw; */
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 15px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 15px; /* Safari/Chrome対応 */
	-moz-border-radius: 15px;    /* Firefox対応 */
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 15px;
	text-align: center;
	/* 背景色を指定する場合（必要なら追加） */
	background-color: #45698D;
	
}

.taxi-name-box h1{
	color:#FFF;
}

.taxi-name-box h2{
	color:#FFF;
}

.rideOn-name-box{
	margin: 10px,auto,10px,auto;
	/* [disabled]width: 70vw; */
	border: 1px solid #ccc; /* グレーの枠線 */
	border-radius: 15px;    /* 角丸の半径 */
	/* ベンダープレフィックス（古いブラウザ用） */
	-webkit-border-radius: 15px; /* Safari/Chrome対応 */
	-moz-border-radius: 15px;    /* Firefox対応 */
	/* その他のスタイル */
	margin-bottom: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	padding: 15px;
	text-align: center;
	/* 背景色を指定する場合（必要なら追加） */
	background-color: #6F5B77;	
}

.rideOn-name-box h2{
	color:#FFF;
}






.wine-box{
	
	background-color: #890062;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #FFF;
	
}

.yerrow-box{
	background-color: #EAEBE2;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #FFF;	
}



.green-box{
		background-color: #85AD8F;
	width: 80%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	margin-top: 15px;
	margin-bottom: 15px;
	color: #FFF;
	
}



.sns-box{
	background-color: #AAA388; /* 背景色 */
	margin-bottom: 10px; /* 下の余白 */
	margin-top: 10px; /* 内側の余白 */
	width: 100vw; /* 幅をビューポート全体に */
	display: flex; /* コンテンツの配置調整に備える */
	align-items: center; /* アイテムを中央に揃える */
	justify-content: center; /* 中央揃え */
	box-sizing: border-box; /* パディングとボーダーを幅に含める */
	text-align: center;
	padding: 10px;
	color: #FFF;
}
	


.link-box {
	/* background-color: #85AD8F; 背景色 */
	background-color: #8E8DA5;
	margin-bottom: 10px; /* 下の余白 */
	margin-top: 10px; /* 内側の余白 */
	width: 100vw; /* 幅をビューポート全体に */
	display: flex; /* コンテンツの配置調整に備える */
	align-items: center; /* アイテムを中央に揃える */
	justify-content: center; /* 中央揃え */
	box-sizing: border-box; /* パディングとボーダーを幅に含める */
	text-align: center;
	padding: 10px;
}



.links{
	width: 100vw;
	/* [disabled]float: left; */
	overflow: hidden;
}


.link-box h3{
	font-size:18px;
	font-weight:bold;
	color:#FFF;
}



.link-box a {
	 display: block; /* リンクをブロック要素にすることで縦並び */
  color: #FFF; /* リンクテキスト色 */
  text-decoration: none; /* 下線を削除 */
  font-weight: bold; /* テキストを強調 */
  transition: color 0.3s ease; /* 色変更のアニメーション */
  text-align:center;
  margin:10px;
}

.link-box a:hover {
  color: #DFFFD6; /* ホバー時のテキスト色 */
  text-decoration: underline; /* 下線追加 */
}


/*スプラッシュ*/
.splash-body{
	width: 100vw;
	height: 100vw;
	background-color: #000;
}


.splash-body img{
	width:30vw;
}


.orange{
	background-color: #9999CC;
	color: white;
	width: fit-content;
	padding: 5px;
}


#map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
 
.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0099CC;
    color: white;
    border: none;
    border-radius: 10px;
    width: 100px;
    height: 100px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scroll-top .arrow {
    font-size: 24px; /* 矢印のサイズ */
}

.scroll-top .label {
    font-size: 14px; /* "TOP"のサイズ */
    margin-top: 2px; /* 矢印との間隔 */
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}


.highlight {
  background-color: #ffcc00 !important;  /* 濃い黄色 */
  color: black !important;
  border: 3px solid red !important;
  box-shadow: 0 0 8px red !important;
}


.prev-highlight {
	background-color: #eeeaaa; /* 明るい黄色グレー */
}