@charset "utf-8";
@import url("https://www.oozeki-shop.com/data/bunkoya/image/include/newstyle.css");
.top_bottom_link {max-width:1000px;width:100%;margin:0;display:flex;justify-content:flex-end;background-color:#fff;}
.top_bottom_link a { text-decoration:none;}


/*========================================
	メニュー
========================================*/

#menu_container {
  margin: 0.5em 0;    background: #c5e7e8; /*背景薄青*/
}

#menu_container * {
  box-sizing: border-box;
}
#menu_container a {
  text-decoration: none;
  color: #000;
}
#menu_container li a {
  font-size: 0.85em;
  line-height: 1.4;
  font-weight: normal;
}
#menu_container a:hover {
  opacity: 0.7;
}

/*========================================
	アイテム一覧
========================================*/
#menu_container ul {
 background: #d9e8db; /*背景薄緑*/
 padding: 0.5em;
 display: flex;
 flex-wrap: wrap; /*justify-content: space-between;*/
}
#menu_container li {
 margin: 0.2em 1%;
 width: 23%;
 position: relative;
}
#menu_container li img {
  border: 0.1em solid #ccc;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 共通の土台 */
#menu_container li.limited::before,
#menu_container li.new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0em;
  width: 2em;   /* ← 小さめにしたいならここを調整 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
}

/* limited（200×81 → 比率 200/81 ≒ 2.47） */
#menu_container li.limited::before {
  aspect-ratio: 200 / 81;
  background-image: url("https://www.oozeki-shop.com/data/bunkoya/image/free/other/limited-r.gif");
}

/* new（200×91 → 比率 200/91 ≒ 2.20） */
#menu_container li.new::before {
  aspect-ratio: 200 / 91;
  background-image: url("https://www.oozeki-shop.com/data/bunkoya/image/free/other/new-b.gif");
}

@media screen and (min-width:950px) { /*pc*/
  #menu_container li a {
   display: flex;
   align-items: center;

  }
  #menu_container li span:first-child {
    width: 55%;
    padding-right: 0.2em;
    display: block;
    flex-shrink: 0;
  }
#menu_container li span:nth-child(2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* ← 2行に制限 */
  overflow: hidden;
  font-size: 0.75em;
}
#menu_container li.limited::before,
#menu_container li.new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5em;   /* ← 小さめにしたいならここを調整 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
}
}

@media screen and (max-width:949px) and (min-width:840px) {/*pcの狭い幅 縦並び*/
#menu_container li a {
 font-size:0.6em;
 text-align:center;
 }
  /* 品名を1行で省略 */
  #menu_container li span:nth-child(2) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}

/* タブレット：650-839px */
@media screen and (max-width:839px) and (min-width:650px) {
  #menu_container li {
    width: 23%; /* 4列維持で安定 */
  }
  #menu_container li a {
    font-size: 0.7em;
    line-height: 1.2; text-align:center;
  }
#menu_container li.limited::before,
#menu_container li.new::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;   /* ← 小さめにしたいならここを調整 */
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
}
/* 縦並びのときの品名を1行で省略 */
#menu_container li span:nth-child(2) {
  padding-top: 0.3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* ← 1行に制限 */
  overflow: hidden;
}
}

/* スマホ：?649px */
@media screen and (max-width:650px) {
  #menu_container li {
    width: 31%; /* 3列 */
    text-align: center;
  }
/* 縦並びのときの品名を1行で省略 */
#menu_container li span:nth-child(2) {
  padding-top: 0.3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* ← 1行に制限 */
  overflow: hidden;
}
}