@charset "utf-8";
/* ナビゲーション全体 */

.navicontainer {
  display: flex;
  justify-content: space-between; /* ロゴを左、メニューを右に配置 */
  align-items: center;
  width: 100%; /* コンテナの幅を100%に設定 */
  padding: 0;
  margin: 0;
  background-color: #fffff0;
}

div.logo {
  width: 0;
}

nav {
}

.logo img {
  height: 80px;
  margin-left: 100px; /* 左側に隙間 */  
}

.logo img:hover {
  transform: scale(1.1); /* 10% 大きくする */
}


.nav-menu {
  list-style-type: none;
  display: flex;
  gap: 0px;
  /*justify-content: space-between;*/ /* メニューアイテムを均等に配置 */
  /*justify-content: flex-start;*/ /* 左寄せ配置 */
  margin: 0 100px 0 0; /* 不要な外側余白を削除 */
  padding: 0; /* 内側余白を削除 */
}

.nav-menu li {
  display: flex;
  flex-direction: column; /* 縦に配置 */
  /*align-items: right;*/ /* 中央揃え */
  margin: 0;
  padding: 0;
  /*border:  1px solid #B60F12;*/
}

.nav-menu a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  display: flex;
  /*flex-direction: column;*/ /* 縦に配置 */
  align-items: center; /* 中央揃え */
  margin: 0;
  padding: 0;
  text-indent: -9999px;
}

.nav-menu a img {
  /*width: 60px;
  height: 60px;*/
  width: 100px;
  height: 70px;
  /*border: 1px solid #1550A9;*/
  margin-bottom: 4px; /* 画像とテキストの間に余白を追加 */
  padding: 0;
}


.nav-menu li a img {
  border-left: 1px dashed #806c51; 
}

.nav-menu li:last-child a img {
  border-right: 1px dashed #806c51;
}

.nav-menu a:hover {
  color: #333f44;
  transform: scale(1.1);  /* ホバー時に少し大きくなる */
  
}

/* パンくずリストの全体スタイル */
/* パンくずリストの全体スタイル */
.breadcrumb {
  font-family: Arial, sans-serif; /* フォント */
  font-size: 12px;               /* フォントサイズ */
  margin: 10px 0;                /* 上下のマージン */
  padding: 5px 0;                /* パディング */
  background-color: #fffff0;     /* 背景色 */
  border-radius: 5px;            /* 角丸 */
  display: flex;                 /* 横並びに表示 */
  flex-wrap: wrap;               /* 折り返し対応 */
}

/* パンくずリスト内のリンク */
.breadcrumb a {
  color: #007bff;                 /* リンクの文字色 */
  text-decoration: none;          /* 下線を削除 */
  padding: 0 5px;                 /* リンク間の余白 */
  font-size: 12px;                /* リンクのフォントサイズ */
  white-space: nowrap;            /* 折り返さない */
}

/* ホバー時のリンク */
.breadcrumb a:hover {
  text-decoration: underline;     /* ホバー時に下線を追加 */
}

/* パンくずリストの区切り */
.breadcrumb span {
  color: #6c757d;                 /* 区切りの文字色 */
  padding: 0 5px;                 /* 区切りの余白 */
  font-size: 12px;                /* 区切りのフォントサイズ */
  white-space: nowrap;            /* 折り返さない */
}

/* 現在のページ（リンクなし） */
.breadcrumb .current {
  font-weight: bold;              /* 太字 */
  color: #333;                    /* 文字色 */
  font-size: 12px;                /* フォントサイズ */
}

/* ここまで　pankuzu.css */

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .nav-menu {
    /*gap: 15px;*/ /* メニューアイテムの間隔を狭くする */
    gap: 0px;
  }

  .nav-menu a {
    font-size: 14px; /* フォントサイズを小さくする */
  }

}

@media (max-width: 768px) {
 /* ナビゲーションメニューのリスト */
.nav-menu {
  display: flex;
  /*gap: 10px;*/ /* メニューアイテムの間隔を狭くする */
  gap: 0px; 
  flex-wrap: nowrap; /* アイテムを1行に収める */
  justify-content: center; /* 中央に配置 */
  align-items: center; /* アイテムを垂直方向に中央揃え */
  overflow: hidden; /* アイテムがはみ出さないように */

}

/* ナビゲーションメニューのリンク */
.nav-menu li a {
  font-size: 8px; /* フォントサイズをさらに小さくする */
  white-space: nowrap; /* テキストを折り返さない */
  display: flex; /* アイコンとテキストを横並びに */
  align-items: center; /* アイコンとテキストを縦に中央揃え */
}



/* 画像のスタイル（アイコン画像を調整） */
.nav-menu a img {
  width: 60px; /* 画像のサイズを小さくする */
  height: auto; /* アスペクト比を保持 */
  margin-right: 5px; /* アイコンとテキストの間に余白を追加 */
}



.logo img {
  width: 60px; 
  height: auto; /* アスペクト比を保持 */
  margin-left: 20px; /* 左側に隙間 */
}


/* -----------パンくずリストの全体スタイル-------- */
.breadcrumb {
  font-size: 10px; /* フォントサイズを小さく */
  padding:  0; /* 上下の余白を縮小 */
  margin: 0;
}

.breadcrumb a {
  padding: 0 3px; /* リンク間の余白を縮小 */
}

.breadcrumb span {
  padding: 0 3px; /* 区切り部分の余白を縮小 */
}

.breadcrumb .current {
  font-size: 10px; /* 現在ページのフォントサイズも調整 */
}
}

/*アイホンSE2の画面は　375pxです */

@media (max-width: 500px) {


 
  .nav-menu {
    /*gap: 8px;*/ /* メニューアイテムの間隔を狭くする */
    gap: 0px;
  }
  
  .nav-menu {
      margin: 0px;
  }

  .nav-menu a {
    font-size: 5px; /* フォントサイズをさらに小さくする */
    /*text-indent: -9999px;*/
  }


  .logo img {
    width: 20px; 
    height: auto; /* アスペクト比を保持 */
    /*margin-left: 40px;*/ /* 左側に隙間 */
    margin-left: 0px;
  }

  .nav-menu a img {
    width: 40px; /* 画像のサイズを小さくする */
    height: auto; /* アスペクト比を保持 */
  }



}