@charset "utf-8";

/* 画面中央に配置するための設定（確認用） */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  margin: 0;
}

/* おにぎり（白米部分） */
.onigiri {
  position: relative;
  width: 200px;
  height: 180px;
  background-color: #ffffff;
  
  /* 三角形に切り抜き、角に少し丸みを持たせる設定 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  border-radius: 20px; /* 全体的な丸み */
  
  /* 影をつけて立体感を出す（必要に応じて） */
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1));
}

/* 海苔（のり） */
.nori {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 55px;
  background-color: #2c3539; /* のりの色（濃いグレー） */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* 梅干し */
.ume {
  position: absolute;
  top: 55%;           /* 上からの位置（中央より少し下が見栄えが良いです） */
  left: 50%;          /* 左右中央に配置 */
  transform: translate(-50%, -50%); /* 中央ぴったりに合わせる */
  
  width: 40px;        /* 梅干しの幅 */
  height: 40px;       /* 梅干しの高さ */
  border-radius: 50%; /* 綺麗な丸にする */
  
  /* 中心を少しずらしたグラデーションで、立体感のある立体的な赤を表現 */
  background: radial-gradient(circle at 35% 35%, #ff4d6d, #c9184a);
  
  /* ほんのり影をつけてお米に乗っている感を出す */
  box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.2), 
              0 2px 4px rgba(0, 0, 0, 0.15);
}