/* ===== Bento Category Button ===== */

.bento-anchor-btn {

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  width: 100%;
  max-width: 480px;
  min-height: 50px;

  padding: 6px 16px;

  margin: 0 auto;

  border-radius: 999px;
  border: 1px solid #a82c22;

  background-color: #1a1a1a;
  color: #fff6f2;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-size: 20px;
  font-weight: 800;

  line-height: 1.3;
  text-align: center;

  cursor: pointer;

  box-shadow:
    0 2px 0 #92241c,
    0 6px 14px rgba(0,0,0,0.18);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;

}


/* Hover */

.bento-anchor-btn:hover {

  transform: translateY(-2px);

  background-color: #000000;

  box-shadow:
    0 3px 0 #92241c,
    0 8px 18px rgba(0,0,0,0.2);

}


/* Active */

.bento-anchor-btn:active {

  transform: translateY(1px);

  box-shadow:
    0 1px 0 #92241c,
    0 4px 8px rgba(0,0,0,0.18);

}


/* Focus */

.bento-anchor-btn:focus-visible {

  outline: none;

  box-shadow:
    0 0 0 3px rgba(201,55,44,0.35),
    0 2px 0 #92241c,
    0 6px 14px rgba(0,0,0,0.18);

}


/* ===== Container ===== */

.anchor-container {

  display: flex;
  flex-direction: column;

  gap: 12px;

  max-width: 560px;

  margin: 24px auto;

}


/* ===== Smooth scroll ===== */

html {

  scroll-behavior: smooth;

}


/* ===== Tablet ===== */

@media (min-width:600px){

  .bento-anchor-btn{
    font-size:21px;
    min-height:52px;
  }
  .anchor-container{
    margin-
}


/* ===== PC ===== */

@media (min-width:1024px){

  .bento-anchor-btn{
    font-size:22px;
    max-width:520px;
  }

}