@charset "UTF-8";




/* ================================
   右端固定・縦メニュー（左下45°カット）
   ================================ */

/* メニュー全体を右端に固定 */
.fixed-menu {
  position: fixed;
  top: 56%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
}

/* ULの基本設定 */
.fixed-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* LIの基本設定 */
.fixed-menu li {
  writing-mode: vertical-rl; /* ← 縦書き指定（右→左） */
  text-orientation: upright; /* ← 文字を正立させる */
  margin: 0; /*10px 0;*/
  text-align: center;
  height: 142px;
}


.fixed-menu ul li a {
  font-size: 18px;
  text-decoration: none;
  font-weight: 400;
  color: #000;
  /*margin: 0 10px 0 10px;*/
  cursor: pointer;
}


.fixed-menu a {
  display: block;
  position: relative; /* 擬似要素の基準 */
  background-color: #fff;
  color: #000;
  text-decoration: none;
  /*font-weight: bold;*/
  padding: 12px 10px;
  min-width: 20px;
  text-align: center;
  border-radius: 0 0 0 8px;
  border: solid 1px #000;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden; /* 擬似要素はみ出し防止 */
}





/* ホバー時 */
.fixed-menu a:hover {
  background-color: #ff3b3b; /* 背景赤 */
  color: #fff; /* 文字白 */
}

.fixed-menu a:hover::after {
  background-color: #fff; /* 線も白に */
}


@media screen and (max-width:750px) {




	.menu-wrap {
		position: -webkit-sticky; /* Safari */  
		position: sticky;
		/*background:rgba(255,255,255,0.6);*/
		bottom: 0;
		font-family: Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
	}
	*{
		box-sizing: border-box;
	}

    #flexbox {
      display:flex;
      background:#ccc;
      width: 100%;
      height:auto;
      padding:0px;
      justify-content: center;
      align-items: center;
      border: solid 1px #000000;
    }
    .box-item1 {
      background: #ccc;
      text-align: center;
      padding: 4px 8px;
      
      /*border-top:1px solid #000;*/
      /*border-bottom:1px solid #000;*/
      
      border-right:1px solid #333;
      font-size: 14px;
      line-height: 40px;
    }    
    .box-item2 {
      background: #ccc;
      text-align: center;
      padding: 4px 8px;
      /*border:1px solid #000;*/
      border-right:1px solid #333;
      font-size: 14px;
      /*line-height: 40px;*/
    }    
    .box-item3 {
      background: #ccc;
      text-align: center;
      padding: 4px 8px;
      /*border-top:1px solid #000;*/
      /*border-bottom:1px solid #000;*/
      /*border-right:1px solid #000;*/
      font-size: 14px;
      /*line-height: 40px;*/
    }    
    .box-item-cart {
      background: #ccc;
      text-align: center;
      padding: 7px 5px;
      /*border-top:1px solid #000;*/
      /*border-bottom:1px solid #000;*/
      border-right:1px solid #333;
      /*
      border-top:1px solid #000;
      border-bottom:1px solid #000;
      */
      
    }

    a {
      text-decoration: none;
      color: #000000;
    }
}