@charset "utf-8";

/* ===== 横幅overflow 根本対策 ===== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* 全画像がコンテナ幅を超えないように */
img {
  max-width: 100%;
  height: auto;
}

/*背景画像を指定してリピート*/
#container{
	background-image: url("../image/base1.png");
	background-repeat: repeat;
}

a:link    { text-decoration: underline; }
a:visited { text-decoration: underline; color: #990000; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: underline; }

/***************************/
/*** ヘッド部分 全頁で使用 ***/

/*** 画面幅でロゴ画像を表示 ***/
.image-vw {
  width: 100%;
  max-width: 100%;
  display: block;
}

/*** ナビ部分 全頁で使用 ***/
#navi {
  text-align: center;
}

#navi ul, #navi li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* ── 常にflexboxで折り返し ── */
#navi .float {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  overflow: visible;
  padding: 4px 0;
  gap: 0;
  box-sizing: border-box;
}

#navi li {
  display: flex;
  align-items: center;
  height: auto;
}

#navi a {
  text-decoration: none;
  font-size: 100%;
  font-weight: bolder;
  padding: 6px 6px;
  color: rgb(140,98,57);
  white-space: nowrap;
  display: block;
}

nav li:not(:last-child) {
  border-right: 2px solid #ddd;
}

nav a {
  text-decoration: none;
  color: rgb(140,98,57);
}

nav a.current {
  color: #00B0F0;
  border-bottom: 2px solid #00B0F0;
}

nav a:hover {
  color: #F7CB4D;
  border-bottom: 2px solid #F7CB4D;
}

/*****************************/
/*** フッター部分 全頁で使用 ***/

#footer {
  text-align: center;
  color: seashell;
  background-color: rgb(140,98,57);
  line-height: 2em;
  padding: 4px 8px;
}

/*VIDEO　ここから*/
.video-css {
  margin: 2em auto;
  text-align: center;
}

.video-css video {
  max-width: 100%;
  width: 600px;
  height: auto;
}

/*スライドショー　ここから*/
/* 使用ページ index.php */

/* ── コンテナ ── */
#slide {
  position  : relative;
  width     : 100%;
  max-width : 800px;
  height    : 600px;   /* 800px × 3/4 */
  margin    : 0 auto;
  overflow  : hidden;
  background: #111;    /* 画像の余白部分（レターボックス）に表示 */
  box-sizing: border-box;
}

/* スマホ：幅は親要素に合わせ、高さは幅の3/4 */
@media (max-width: 768px) {
  #slide {
    max-width: 100%;
    height   : 75vw;
  }
}

/* ── リスト ── */
#slide ul {
  list-style: none;
  margin : 0;
  padding: 0;
  width  : 100%;
  height : 100%;
}

/* ── 各スライド：最初から absolute で重ね、非表示 ── */
#slide ul li {
  position: absolute;
  top : 0;
  left: 0;
  width  : 100%;
  height : 100%;
  display: none;       /* JSが1枚目だけ表示する */
}

/* ── スライド内リンク ── */
#slide ul li a {
  display: block;
  width  : 100%;
  height : 100%;
}

/* ── 画像：全体を表示（クロップしない）── */
#slide img {
  display   : block;
  width     : 100%;
  height    : 100%;
  object-fit: contain;  /* 画像全体を表示（はみ出しなし） */
}
/*スライドショー　ここまで*/

/*****料金表*****/
.center {
  margin: 2em auto;
  text-align: center;
  box-sizing: border-box;
  padding: 0 8px;
}

.center h1, .center h2, .center h3 {
  text-align: center;
}

.center p {
  text-align: center;
  line-height: 1.2em;
}

.center img {
  width: 90%;
  max-width: 100%;
  border: 2px solid;
  margin: auto;
}

/*****ギャラリー（個別ページ用）*****/
.gallery-image {
  max-width: 90%;
  margin: auto;
  text-align: center;
  vertical-align: top;
}

.gallery-image img {
  width: 100%;
  height: 250px;
  margin: auto;
  object-fit: cover;
}

.gallery-image p {
  color: white;
}

/*****メニュー*****/
#menu_board {
  margin: auto;
  text-align: center;
}

#menu_board img {
  margin-top: 2em;
  max-width: 95%;
}

/* ================================================ */
/* ===== スマートフォン対応（600px以下） ============= */
/* ================================================ */
@media (max-width: 600px) {

  #navi a {
    font-size: 82%;
    padding: 5px 4px;
  }

  nav li:not(:last-child) {
    border-right: none;
  }

  #slide {
    margin-top: 4px;
  }

  .center img {
    width: 98%;
  }

  #footer {
    font-size: 88%;
    line-height: 1.8em;
  }
}