@charset "UTF-8";
body{
  margin: 0px;
}

/* ==== ヘッダーのスタイル ==== */
.header {
  width: 100%;                      /* ヘッダーの幅を100%に設定 */
  height: 60px;                     /* ヘッダーの高さを80pxに設定 */
  background: rgb(255, 255, 255); /*背景色*/
  display: flex;                    /* 要素を水平に配置 */
  justify-content: space-between;   /* 要素を左右に均等に配置 */
  box-shadow: 0px 10px 10px -6px #ccccccf8 ; /*下の方に影*/
  
}

.header .logo img {
  width: 100%;      /* ロゴ画像の幅を100%に設定 */
  height: 50px;     /* ロゴ画像の高さを80pxに設定 */
  padding: 5px;
}

.header nav {
  width: 70%;       /* ナビゲーションの幅を50%に設定 */
}

.header ul {
  width: 100%;      /* リストの幅を100%に設定 */
  display: flex;    /* リスト内の要素を水平に配置 */
  list-style: none; /* リストのマーカーを非表示にする */
}

.header ul li {
  width: 20%;   /* リストアイテムの幅を33%に設定 */
  margin-right: 10px;
}

.header a {
  display: block;           /* リンクをブロック要素として表示 */
  width: auto;              /* リンクの幅を100%に設定 */
  line-height: 27px;        /* リンク内のテキストの垂直方向の中央揃え */
  text-align: center;       /* リンク内のテキストを中央揃え */
  text-decoration: none;    /* テキストの下線を非表示にする */
  color: rgb(75, 73, 73); /* テキストの色を黒に設定 */
}
.header a:hover {
  border-radius: 5px; /*丸み*/
	background: #eceaea;
}


/* ナビゲーションメニューのスタイル */
.nav-menu {
  display: none;                /* ナビゲーションメニューを非表示にする */
  flex-direction: column;       /* 要素を縦に配置 */
  position: absolute;           /* 絶対位置指定 */
  top: 0;                     /* 上から10%の位置に配置 */
  left: 50%;                    /* 左から50%の位置に配置 */
  transform: translate(-50%, -50%); /* 中央に配置 */
  align-items: center;          /* 要素を中央揃え */
  justify-content: center;      /* 要素を中央揃え */
  padding: 8px;                 /* 内側の余白を8pxに設定 */
  width: 100%;                /* 幅を200pxに設定 */
  background-color: rgb(255, 255, 255);     /* 背景色を白に設定 */
  opacity: 0;                  /* 不透明度を0に設定 */
}
.nav-menu a {
  text-decoration: none; /* ナビゲーションメニュー内のリンクの下線を非表示にする */
  color: rgb(75, 73, 73);          /* ナビゲーションメニュー内のテキストの色を黒に設定 */
  padding: 5px;          /* ナビゲーションメニュー内のリンクの余白を設定 */
  margin: 5px;           /* ナビゲーションメニュー内のリンクの余白を設定 */
}
.nav-menu a:hover {
  border-radius: 5px; /*丸み*/
	background: #eceaea;
}
/* ナビゲーションメニューの表示アニメーション */
.nav-menu.active {
  display: flex;                 /* メニューを表示 */
  animation: fadeIn 0.5s forwards; /* 0.5秒かけてフェードイン */
}

/* ==== ハンバーガーメニューのスタイル ==== */
.hamburger-menu {
  display: none;                /* ハンバーガーメニューを非表示 */
  width: 30px;                  /* 幅を30pxに設定 */
  height: 22px;                 /* 高さを22pxに設定 */
  position: relative;           /* 相対位置指定 */
  top: 50%;                     /* 上から50%の位置に配置 ３本線*/
  right: 20px;                  /* 右から20pxの位置に配置 */
  transform: translateY(-50%); /* 垂直方向に-50%移動して中央揃え */
  cursor: pointer;              /* マウスカーソルをポインターに設定 */
}

/* ハンバーガーメニューの3本の横線のスタイル */
.line {
  background-color: rgb(75, 73, 73);      /* 背景色を黒に設定 */
  height: 4px;                  /* 高さを4pxに設定 */
  width: 100%;                  /* 幅を100%に設定 */
  position: absolute;           /* 相対位置指定 */
  transition: all 0.3s;         /* アニメーションの設定 */
  top: 0;                       /* 上から0の位置に配置 */
}

/* 1番目の横線のスタイル */
.line:nth-of-type(1) {
  top: 0; /* 上端に配置 */
}

/* 2番目の横線のスタイル */
.line:nth-of-type(2) {
  top: 50%; /* 上から50%の位置に配置 */
}

/* 3番目の横線のスタイル */
.line:nth-of-type(3) {
  top: 100%; /* 下端に配置 */
}

/* ハンバーガーメニューがアクティブ時の1番目の横線のスタイル */
.hamburger-menu.active > .line:nth-of-type(1) {
  top: 50%; /* 上から50%の位置に移動 */
  transform: translateY(-50%) rotate(45deg); /* 45度回転 */
}

/* ハンバーガーメニューがアクティブ時の2番目の横線のスタイル */
.hamburger-menu.active > .line:nth-of-type(2) {
  display: none; /* 非表示 */
}

/* ハンバーガーメニューがアクティブ時の3番目の横線のスタイル */
.hamburger-menu.active > .line:nth-of-type(3) {
  top: 50%; /* 上から50%の位置に移動 */
  transform: translateY(-50%) rotate(-45deg); /* -45度回転 */
}

/* ==== メニュー4のスタイル ==== */
.header ul li:nth-of-type(4) {
  float: right; /* 800px以上の場合、メニュー4を右側に配置 */
}



/* エレメントがフェードインするアニメーションのキーフレーム */
@keyframes fadeIn {
  0% {
    top: 14%; /* %の位置から開始 */
    opacity: 0; /* 不透明度は0から開始 */
  }
  
  100% {
    top: 16.8%; /* %の位置まで移動    ←メニューの隙間調整*/
    opacity: 1; /* 完全に不透明にする */
    box-shadow: 0px 10px 10px -5px #ccc ; /*下の方に影*/
    border-bottom-right-radius: 50px; /*丸み*/
    border-bottom-left-radius: 50px;
  }
}

/* 800px以下の画面幅の場合のスタイル */
@media (max-width: 800px) {
    .hamburger-menu {
        display: block; /* ハンバーガーメニューを表示 */
    }

    .pc-menu {
        display: none; /* PC用メニューを非表示 */
    }
      /* ロゴのスタイル */
  .header .logo {
    text-align: center; /* テキストを中央揃えにする */
    width: 100%; /* 幅を100%に設定して親要素いっぱいに広げる */
  }
  
  .header .logo img {
    width: auto; /* ロゴ画像の幅を自動調整 */
    height: 50px; /* ロゴ画像の高さを80pxに設定 */
    padding: 5px;
  
  }
}