@charset "Shift_JIS";

/* PC/スマホの表示切り替え */
.sp-only{
	display: none;
}
@media screen and (max-width: 768px) {
  .pc-only{
	display: none;
}
  .sp-only{
	display: block;
}
}

/* 画像は親幅に収まるように */
.sp-only{
  width: 100%;
  /* overflow: hidden; は基本不要。どうしても横スクロールが出る場合だけON */
  /* overflow: hidden; */
}
.sp-only img{
  max-width: 100%;
  height: auto;
  display: block;
}

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


.map-container{
  position: relative; 
  width: 100%;
  padding-top: 75%; 
  height: 0;
  overflow: hidden;
}

.map-container iframe{
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- Accessブロックのテーブルをスマホ対応 --- */
@media screen and (max-width: 768px) {
  #toppage-info table{
    width: 100% !important;        /* テーブル固定幅を上書き */
    table-layout: fixed;
  }
  #toppage-info th,
  #toppage-info td{
    width: auto !important;        /* セルの固定幅を解除 */
    height: auto !important;       /* ついでに高さも解除 */
    word-break: break-word;        /* 長い語を折り返し */
    white-space: normal !important;
  }

  /* Google Maps iframe の固定サイズを上書き */
  #toppage-info iframe{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;          /* 比率維持（対応ブラウザ多い） */
    border: 0;
    display: block;
  }

  /* どうしても横スクロールが出る場合の保険 */
  #toppage-info{
    overflow-x: hidden;
  }
}


#hpb-nav{
  background: #000;         /* 全体を黒帯に */
}
#hpb-nav ul{
  display: flex;
  justify-content: center;  /* 中央揃え */
  margin: 0;
  padding: 0;
  list-style: none;
}
#hpb-nav li{
  margin: 0 8px;            /* ボタン間の隙間 */
}
#hpb-nav a{
  color: #fff !important;   /* 白文字 */
  text-decoration: none;
  padding: 10px 16px;       /* ボタンっぽく */
  display: block;
}
#hpb-nav a:hover{
  background: #333;         /* hoverで少し明るいグレー */
}

/* まず既存の一括指定を無効化 */
#hpb-footerMain p{
	display: block;
}

/* バナー段だけをflexに */
#hpb-footerMain .footer-banners{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#hpb-footerMain .footer-banners a{
	flex: 1 1 160px; max-width: 400px;
}
#hpb-footerMain .footer-banners img{
	width: 100%; height: auto; border-radius: 8px; display: block;
}

/* コピーライトは中央寄せ */
#hpb-footerMain p:first-child{
	text-align: center;
}


.tel-number{
  color: #0066cc;          /* 青色 */
  font-weight: bold;       /* 太字 */
  text-decoration: none;   /* 下線を消す */
}