/*　Table用のCSS　*/
#new_layout_heading table {
    border-collapse:collapse;
    width:100%;
    margin-top:20px;
    margin-bottom:30px;
}

.t_comm {
  width: 100%;
}

.t_comm th {
  width: 25%;        /* テーブル全体の25%を確保 */
  min-width: 90px;   /* スマホでも最低限の幅は確保 */
  border-collapse: collapse;
}

.t_comm td {
  width: 75%; /* 残りのスペースを本文に使う */
}

.t_comm_size {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
 
#new_layout_heading table th,
#new_layout_heading table td {
    padding: 8px 12px;
    border: solid 1px #ddd;
}
#new_layout_heading table th {
    background:#FFF4FA;
    font-weight:normal;
    width:100px;
}
#new_layout_heading table td {
    background:#fff;;
}


/* ==========================================================================
   ヘッダー追従（固定）用の設定
   ========================================================================== */

/* スマホサイズ（画面幅959px以下）のときだけヘッダーを固定する */
@media screen and (max-width: 959px) {
  
  /* ヘッダー全体を囲む要素を上部に固定 */
  .fs-l-header {
    position: sticky;
    top: 0;
    z-index: 9999;             /* テーブルなどの他の要素より必ず前面に出す */
    background-color: #ffffff;  /* スクロールしたときに後ろの文字が透けないように背景を白にする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 境界がわかりやすいように薄い影をつける（不要なら削除してください） */
  }

}
/*判定前ステージ名の表示*/
.fs-p-accountInfo__accountRank__rank:empty::before {
content: 'シルバー';
}

/* ==========================================================================
   左脇ドロワーメニューボタン選択中の色設定
   ========================================================================== */

/* 左側メニューの「ワンピース」など、選択・ホバー時の青色を変更する設定 */
.fs-p-sideMenu a:hover,
.fs-p-sideMenu a:active,
.fs-p-sideMenu .fs-pt-menu_link--lv2:hover {
    background: #e6b5ce !important; /* ←【背景色】ここに好きな色のカラーコードを入れてください */
    color: #ffffff !important;      /* ←【文字色】白（#ffffff）のままでよければこのままでOKです */
}


/* ==========================================================================
  商品グループ一覧（アイテム一覧）のボタンをタップ・ホバーした際の色変更
　アイテム一覧のボタン・文字・矢印をまとめて色変更
　テーマ全体のホバー時の青色（#2559A8）を強制上書き
   ========================================================================== */

a[class*="link"]:hover, 
a[class*="item"]:hover,
[class*="List__link"]:hover,
[class*="List__link"]:active {
    background: #e6b5ce !important;
    background-color: #e6b5ce !important;
    color: #ffffff !important;
}

/* ==========================================================================
  TOPページに新作を任意で表示させる（3列）
   ========================================================================== */

/* ① 全体を横並びにして、均等に3分割する設定 */
.image-gallery {
  display: flex;
  
  /* ★追加：あふれた要素を次の段に折り返す命令 */
  flex-wrap: wrap;           
  
  /* space-between から left（左詰め）に変更するのがおすすめです */
  justify-content: flex-start; 
  
  /* ★追加・変更：横のスキマ（10px）と、縦のスキマ（20px）をまとめて設定 */
  gap: 20px 10px;            /* 縦に20px、横に10px の隙間 */
  
  width: 100%;
  box-sizing: border-box;
}

/* 各商品ブロックの幅を「3列」として正しく計算させる設定 */
.image-item {
  /* ★変更：全体の幅から隙間を引いて、きっちり3等分（約31~32%）にします */
  width: calc((100% - 20px) / 3); 
  text-align: left;
  box-sizing: border-box;
}

/* ② 商品1つ1つの枠組み */
.image-item {
  flex: 1;                   /* 3つの幅を均等にする */
  text-align: left;         /* 文字を左寄せにする */
}

/* リンクエリアを基準位置にする（NEWを重ねるため） */
.image-item a {
  display: block;
  position: relative;        /* これがNEWタグの基準になります */
}

/* ③ 画像のサイズ調整 */
.image-item img {
  width: 100%;               /* 枠いっぱいに画像を広げる */
  height: auto;              /* 縦横比を崩さない */
  display: block;
}

/* ④ ★画像の上に重ねる「NEW」タグの設定 */
.badge-new {
  /* 浮かせる設定を解除し、普通の文字と同じ扱いに変更 */
  display: inline-block; 
  position: static;      /* absolute から static に戻す（または削除） */

  /* タグの上下左右に少しスキマを作る（画像や商品名とくっつかないように） */
  margin-top: 6px;       /* 画像とのスキマ */
  margin-bottom: 4px;    /* 商品名とのスキマ */

  /* タグの見た目（色のデザインはそのまま） */
  background-color: #f3c2ce; 
  color: #ffffff;            
  font-size: 10px;           
  font-weight: bold;         
  padding: 2px 6px;          
  border-radius: 3px;        
}

/* リンクエリアの基準位置設定も不要になるので、シンプルに戻します */
.image-item a {
  display: block;
  text-decoration: none; /* リンクの下線を消す場合 */
}
  
  /* タグの見た目のデザイン（画面を参考にピンク系にしています） */
  background-color: #f3c2ce; /* 薄いピンクの背景色 */
  color: #ffffff;            /* 白文字 */
  font-size: 10px;           /* 文字の大きさ */
  font-weight: bold;         /* 太字 */
  padding: 2px 6px;          /* 内側の余白（上下、左右） */
  border-radius: 3px;        /* 角を少し丸くする */
}

/* ⑤ 商品名と価格の文字サイズ調整 */
.item-name {
  font-size: 12px;
  margin: 5px 0 2px 0;
  color: #333333;
}
.item-price {
  font-size: 12px;
  font-weight: bold;
  color: #333333;
  margin: 0;
}