@charset "UTF-8";
/* CSS Document */
* {
    color: #071148;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #E2FBFA;
}

/* ヘッダー全体の設定 */
header {
    background-image: url("../Image/25640411.jpg");
    background-size: 100% 100%; /* 背景画像全体が収まる */
    background-repeat: no-repeat; /* 背景画像を反復させない */
    background-position: center; /* 背景画像を中央に配置 */
    width: 100%;
    height: 25vh; /* ヘッダーを画面全体に設定 */
    overflow: hidden; /* 子要素がはみ出さないように隠す */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ヘッダー内の子要素に対して */
.Hdcontainer {
    display: flex;
    flex-direction: column; /* 必要に応じて調整 */
    align-items: center;
}

/* 名前部分の調整 */
.name {
    text-align: center;
    flex: 1; /* 高さを均等に割り振る */
    margin: 0;
    padding: 10px 0 0; /* 必要に応じて調整 */
}

.name h1 {
    font-size: 3rem; /* 必要に応じてフォントサイズを調整 */
    margin: 0;
    padding: 0;
}

.name h2 {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
}

.listbox {
    display: flex;
    flex-wrap: wrap; /* 折り返し可能にする */
    justify-content: center;
    padding: 10px;
}

/* リストの設定 */
ul {
    display: flex; /* 横並びにする */
    gap: 10px; /* 各画像の間隔を調整 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.menuimg {
    max-width: 170px; /* 画像サイズを調整 */
    height: auto;
}

/* メディアクエリ (601px ~ 1024px) */
@media (max-width: 1024px) and (min-width: 601px) {
    .listbox {
        text-align: center;
        width: 100%; /* フル幅に設定 */
    }
}

@media (max-width: 600px) {
    header {
        height: auto; /* コンテンツに合わせて高さを調整 */
    }
    .menuimg {
        width: 50px; /* 小さな画面向けにサイズを縮小 */
    }
}

/* メディアクエリ (768px以下) */
@media (max-width: 768px) {
    header {
        height: 35vh; /* ヘッダーの高さを調整 */
    }
    .Hdcontainer {
        flex-direction: column;
        align-items: center;
        justify-content: center; /* 隙間を均等にしない */
        height: 100%;
    }
    .name {
        margin: 0; /* 上下の余白を削除 */
    }
    .name h1, .name h2 {
        font-size: 1.5rem; /* テキストの大きさを調整 */
        margin: 0; /* 余分な上下のマージンを削除 */
        padding: 0; /* 余分な上下のパディングを削除 */
    }
    .listbox {
        flex-direction: row; /* 横並びを維持 */
        justify-content: center;
        gap: 3px; /* 隙間を狭める */
        padding: 0; /* 上下の余白を削除 */
    }
    .menuimg {
        width: 80px; /* 明示的に幅を設定 */
        max-width: 100%; /* 親要素の幅を超えないようにする */
        height: auto; /* アスペクト比を保持 */
        display: block; /* インライン要素の影響を排除 */
        margin: 0 auto; /* 中央揃え */
    }
}

a {
    text-decoration: none;
    color: #333333;
    font-weight: bold;
}

h1 {
    color: #333;
    font-size: 60px;
}

h2 {
	text-align: center;
}

.center {
    display: flex;
    justify-content: center;
}

.right {
	display: flex;
	justify-content: flex-end;
}

.pcenter {
    display: flex;
    justify-content: center;
    text-align: center;
}

/* フッター全体の設定 */
.Fdcontainer {
    display: flex;
    justify-content: space-between; /* 左右に要素を配置 */
    align-items: center;           /* 垂直方向の中央揃え */
    padding: 20px;
    gap: 20px;                     /* 子要素間の間隔 */
}

/* Fcontainerの設定を修正 */
.Fcontainer {
    display: flex;
    justify-content: flex-start;  /* 左寄せ */
    align-items: center;          /* 垂直方向の中央揃え */
    gap: 10px;                    /* 間隔を調整 */
    list-style: none;             /* リストマーカーを非表示 */
    padding: 0;
    margin: 0;
    flex-wrap: wrap;              /* 折り返しを有効にする */
    max-width: 100%;              /* 親要素の幅に収まるように制限 */
    box-sizing: border-box;       /* ボックス幅の計算を適切に */
}

/* 画像サイズをレスポンシブ対応に */
.Fcontainer li img {
    max-width: 70px;              /* 最大幅を画面に合わせる */
    height: auto;                 /* アスペクト比を保持 */
}

/* 右側のaddressの設定 */
.address {
    margin-left: auto;            /* 左側のスペースを自動設定して右寄せ */
    text-align: left;            /* テキストを右揃え */
    font-size: 0.9rem;
}

/* フッターのレスポンシブ設定 */
@media (max-width: 768px) {
    .Fdcontainer {
        flex-direction: column;    /* 子要素を縦並び */
        align-items: center;       /* 子要素を中央揃え */
        gap: 20px;                 /* 間隔を設定 */
    }

    .address {
        margin: 0 auto;           /* 自動的に中央配置 */
        text-align: center;       /* テキストを中央揃え */
    }

    address {
        text-align: center;       /* 中のテキストも中央揃え */
    }

    small {
        text-align: center;       /* `small`タグのテキストも中央揃え */
    }
}

.carousel {
  position: relative;
  width: 100%; /* 画面幅に合わせる */
  max-width: 800px; /* 必要に応じて調整 */
  overflow: hidden;
  margin: 0 auto; /* 中央揃え */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

/* スライドアイテムのサイズを調整 */
.carousel-item {
  width: 100%; /* 親カルーセルと同じ幅 */
  height: auto; /* 必要に応じて高さを設定 */
　aspect-ratio: 16 / 9; /* 画像の比率を横:縦に設定 */
  object-fit: cover; /* 画像を枠にフィットさせる */
}

.nav-button {
  position: absolute;
  top: 90%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1;
}

#prevButton {
  left: 50px;
}

#nextButton {
  right: 50px;
}

/* --- メディアクエリを使ったレスポンシブスタイル --- */

/* スマートフォン用（幅 600px 以下） */
@media (max-width: 600px) {
  .carousel {
    max-width: 100%; /* スマホでは画面全体を使う */
  }

  .nav-button {
    padding: 8px; /* ボタンを少し小さく */
    font-size: 14px; /* テキストサイズを縮小 */
  }
}

/* タブレット用（幅 601px 〜 1024px） */
@media (min-width: 601px) and (max-width: 1024px) {
  .carousel {
    max-width: 90%; /* 画面幅の90%を使用 */
  }

  .nav-button {
    padding: 10px;
    font-size: 16px;
  }
}

/* PC用（幅 1025px 以上） */
@media (min-width: 1025px) {
  .carousel {
    max-width: 800px; /* 最大幅を固定 */
  }

  .nav-button {
    padding: 12px;
    font-size: 18px;
  }
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 最小幅を150pxに縮小 */
  gap: 20px; /* 画像間の間隔を縮小 */
  padding: 20px; /* パディングを小さくする */
  box-sizing: border-box; /* パディングを含めた計算を有効にする */
  max-width: 100%; /* ギャラリー全体が親要素を超えないように制限 */
  margin: 0 auto; /* ギャラリーを中央揃え */
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* オプション */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* オプション */
}

/* スマートフォン向けの調整 */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 2列固定 */
    gap: 10px; /* ギャップを調整 */
    padding: 10px; /* 全体の余白を調整 */
  }
}