@charset "UTF-8";
body{
   background-color:black;
   width:1980px;
   height:3000px;
}



#box1{
   background-image:url(img-entry-02.jpg);
   background-repeat:no-repeat;
   background-position:center;
   width:900px;
   height:840px;
   margin-left:550px;
}
#box1 a{
  font-size:10px;
  color:green;
  margin-left:250px;
 }

#box2{
  width:160px;
  height:100px;
  background-color:black;
  margin-top:20px;
  margin-left:550px;
  float:left;
}
 
#box3{
  width:600px;
  height:100px;
  background-color:black;
  float:left;
}
#box3  h2{
  font-family:sans-serif;
  color:#dcc8dc;
  font-size:25px;
  padding-top:15px;
}  
  
 
#box4{
  width:100px;
  height:100px;
  background-color:black;
  margin-top:20px;
  float:left;
}
 /* ナビゲーションボタンコンテナ */
.navigation-buttons {
    display: flex;
    z-index: 1; /* 画像より手前に配置 */
}

.nav-button {
    display: inline-block;
    padding: 15px 30px;
    background-color: rgba(60, 100, 60, 0.8); /* 少し透明感のある森の色 */
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 30px; /* 角を丸くして自然な感じに */
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.6); /* 白い縁取り */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.nav-button:hover {
    background-color: rgba(80, 120, 80, 0.9); /* ホバーで少し濃く */
    transform: translateY(-3px); /* 少し上に浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}