/* /c/uketugi のCSSは直コメント */
/* floatingCartBtn のCSSはパーツの中 */

html{ scroll-behavior: smooth; }

.fntMincho{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}


ul.sidemenuUtilitMenu.fs-clientInfo {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 5px;
    padding: 8px;
}

/* 商品タグ */
.fs-c-productMarks { display: flex; }

.sidemenuUtilitMenu {
  display: flex;
  flex-wrap: wrap;       /* 折り返しを許可 */
  justify-content: center; /* ★ここがポイント：中身を中央に寄せる */
  align-items: center;
  gap: 15px;             /* アイテム間の余白を一定にする */
  list-style: none;
  padding: 0;
}

.sidemenuUtilitMenu .fs-pt-menu__item {
  /* 4列にしたい場合は「(100% / 4) - 余白」で計算 */
  flex: 0 1 calc(25% - 15px); 
  min-width: 80px;       /* スマホで潰れすぎないように */
}

/* システムが隠すべきものは、レイアウト計算から完全に除外する */
.sidemenuUtilitMenu [class*="is-loggedIn--"][style*="display: none"] {
  display: none !important;
}

.sidemenuUtilitMenu .fs-pt-menu__link {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 8px 0;
}

.sidemenuUtilitMenu {
    position: fixed !important; /* 画面に対して固定 */
    bottom: 0 !important;      /* 一番下に配置 */
    left: 0 !important;        /* 左端から */
    width: 100% !important;    /* 横幅いっぱい */
    z-index: 9999 !important;  /* 他の要素より手前に表示 */
    
    /* 追従させた時に背景が透けないようにする（必要に応じて） 
    background-color: #fff; */
    
    /* もし元のHTMLに grid-template-columns が書かれているなら維持されます */
}

/* 追従バーによってコンテンツの最下部が隠れないようにするための調整 */
body {
    padding-bottom: 60px; /* バーの高さ分、下に余白を作る（数値は適宜調整） */

/* 各メニュー項目（li要素）の背景と装飾 */
.sidemenuUtilitMenu .fs-pt-menu__item {
    background-color: #1a1a1a !important; /* 背景色を#1a1a1aに */
    border-right: 1px solid #333;          /* 項目間の区切り線（任意） */
border-radius: 6px;
}

/* 最後の項目の右線は消す */
.sidemenuUtilitMenu .fs-pt-menu__item:last-child {
    border-right: none;
}

/* リンクテキストの色を白にする */
.sidemenuUtilitMenu .fs-pt-menu__link {
    color: #ffffff !important;             /* 文字を白に */
    font-size: 12px;                       /* 文字サイズ（調整用） */
    padding: 15px 0 !important;            /* 上下の高さを出して押しやすく */
}

/* ついでに：タップ・ホック時の色変化（任意） */
.sidemenuUtilitMenu .fs-pt-menu__link:hover {
    background-color: #333333 !important;  /* 少し明るくして反応を出す */
}





.fs-l-footer__contents{
margin-bottom:3em;
}


/*特定商取引ページのリスト*/
.SCTAct li{ margin-bottom: 1.5rem; }
.SCTAct ul ul{ margin-top: 1.5rem; }
.fs-c-documentColumn__content{ gap:0; }

/*ログイン画面のamazon欄消す*/
.fs-c-linkedServiceLogin {
    display: none;
}

.guideIconMokuji_item svg{
color:#1a1a1a;
}

.fs-l-header__contents{ border-bottom: 1px gray solid; margin-bottom: 2em; padding-bottom: 2em;}



/*　親要素に対してフル幅表示するYoutube埋め込み　ここから　*/
/* 1. 外側の枠（中央寄せを担当） */
.youtube-container {
  display: flex;             /* 中身を並べるモード */
  justify-content: center;   /* 左右中央寄せ */
  align-items: center;       /* 上下中央寄せ */
  width: 100%;
  padding: 20px;             /* 上下の余白（お好みで） */
  box-sizing: border-box;
  /* ↓上下中央寄せを確認したい場合は、親に高さが必要です（例） */
  /* min-height: 500px; */ 
}

/* 2. サイズ調整用の枠（サイズと比率を担当） */
.youtube-wrap {
  width: 100%;               /* 基本は親に対して100% */
  max-width: 800px;          /* ★ここを手動でいじるとサイズ制限できます */
  aspect-ratio: 16 / 9;      /* 縦横比を16:9に固定 */
}

/* 3. iframe本体（枠いっぱいに広げる） */
.youtube-wrap iframe {
  width: 100%;
  height: 100%;
}
/*　親要素に対してフル幅表示するYoutube埋め込み　ここから　*/


@media screen and (min-width: 768px) {
    .fs-p-logo__image{
        max-width: 100% !important;
    }
}


button.fs-c-button--cancel--cart.fs-c-button--image img{
margin:0 auto;
}

.fs-l-header__contents {
    margin-bottom: 2rem;
}


/*　ヘッダーナビゲーション　*/

.headerNavigation{
margin-bottom: 2rem;
}

.headerNavigation-ul { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 2rem !important;list-style: none !important; padding: 0 !important; margin: 0 !important; align-items: center; }

.headerNavigation-ul li {
  margin: 0 !important;
}

/* リンクの装飾（ボタンっぽくする場合） */
.headerNavigation a {
  text-decoration: none;   /* 下線を消す */
  color: #333;
  display: block;          /* クリック範囲を広げる */
  /* 画像にする場合はここに imgタグを入れるか background-image を指定 */
}

.headerNavigation:last-of-type{
background-color: #ffffff;
    border-top: 1px black solid;
    padding-top: 3rem;
    padding-bottom: 3rem;
}







/*　バッグのお手入れ誘導　*/
.product-detail-link{
text-align: right;
text-decoration-line: underline;
color: #a78c35;
font-weight: bold;
margin-bottom: 3rem;
}

/*　基本テキスト　*/
.product-detail-txt{
margin-bottom: 3rem;
}

/*　キャッチコピー　*/
.product-upper-contents__title {
    font-size: 2rem !important;
    color: #a78c35 !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}

#fs-l-pageMain-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
}



.fs-c-productNumber {
    border: none;
    color: #bbbbbb;
}

.fs-c-productPointDisplay {
    margin-right: auto;
}

.fs-c-productPreorderMessage {
    display: none;
}

.fs-l-footer{
border-top: 1px #f7f7f7 solid;
margin-top: 0px;
}


.subFooterContainer{
margin: 24px auto;
    padding: 8px;
    max-width: 1216px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


.fs-p-footerCopyright {
    background-color: inherit;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

.footerNavigation:first-of-type{
 margin-top:3rem;
}

.footerNavigation {
    margin-bottom: 3rem;
}

.footerNavigation ul {
  display: flex;
  justify-content: flex-start; /* ★ここを変更：左寄せになります */
  flex-wrap: wrap;             /* 画面幅が足りない時は折り返す */
  gap: 15px 30px;              /* 縦の隙間15px、横の隙間30px */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* リンクの装飾はそのまま */
.footerNavigation a {
  text-decoration: none;
  color: #333;
  display: block;
}





/* 1199px以下（デフォルト） */
.footerBanner {
  display: grid;
  grid-template-columns: 1fr; /* 1列 */
  gap: 20px;                 /* アイテム間の余白（任意） */
list-style: none;
    grid-gap: 2rem;
margin-bottom:3rem;
padding:0;
}


.footerBanner li:last-child:nth-child(odd){
  /* 1. まず場所としては「横一杯（2列分）」確保する */
  grid-column: 1 / -1;
width:100%;
  /* 3. 確保したエリアの中で中央に寄せる */
  margin: 0 auto;
}



/* 1200px以上 */
@media (min-width: 1200px) {
  .footerBanner {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }

/* 「最後」かつ「奇数番目」の要素への指定 */
.footerBanner li:last-child:nth-child(odd) {
  /* 2. そのままだと広がるので、幅を「1列分と同じ」に制限する
     計算式： (100% - 隙間) ÷ 2 */
  width: calc((100% - 15px) / 2);
}

}

.footerBanner ul {

  display: grid;
  /* 2列にする（1fr 1fr） */
  grid-template-columns: 1fr 1fr;
  /* 隙間（ここ重要） */
  gap: 15px; 
}




/* レスポンシブ３列表示*/

/* 親要素：3列のグリッドを作成 */
.threeColumnsBanners {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列等分割 */
  gap: 15px;
  margin-bottom: 3rem;
}

.threeColumnsBanners li img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 1. 最後が「1つ」余る場合 (1, 4, 7...個目の時) --- */
.threeColumnsBanners li:last-child:nth-child(3n+1) {
  /* 3列分全てのエリアを確保 */
  grid-column: 1 / -1; 
  /* 見た目の幅を「1列分」に制限 */
  width: calc((100% - (15px * 2)) / 3); 
  /* そのエリア内で中央寄せ */
  margin: 0 auto;
}

/* --- 2. 最後が「2つ」余る場合 (2, 5, 8...個目の時) --- */
/* 最後から2番目（左側の端数） */
.threeColumnsBanners li:nth-last-child(2):nth-child(3n+1) {
  /* 1列目と2列目の境界（中央付近）に寄せるため、1〜2列目のスロットを確保 */
  grid-column: 1 / 3;
  justify-self: end; /* 確保した枠の右側に寄せる */
  width: calc((100% - (15px * 2)) / 3);
}

/* 最後の1つ（右側の端数） */
.threeColumnsBanners li:last-child:nth-child(3n+2) {
  /* 2列目と3列目の境界に寄せるため、2〜3列目のスロットを確保 */
  grid-column: 2 / 4;
  justify-self: start; /* 確保した枠の左側に寄せる */
  width: calc((100% - (15px * 2)) / 3);
}


  /* 全体の枠組み（4列） */
  .categoryContainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 1fr 1fr... と書くのと同じ */
    grid-gap: 1rem;
margin-bottom:3rem;
  }

  /* 各アイテム（左:画像、右:テキスト） */
  .categoryContainer-item {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 画像1 : テキスト2 */
    align-items: center;            /* テキストを上下中央に */
border: 2px #eee solid;

  }

  /* ★ここがポイント★ */
  .categoryContainer-item img {
    width: 100%;           /* 幅は枠いっぱい */
    height: 100%;          /* 高さは枠いっぱい（アスペクト比に従う） */
    aspect-ratio: 1 / 1;   /* 幅と高さを 1:1 (正方形) に固定 */
    object-fit: contain;     /* 枠内に画像全体が収まるように縮小する */
    display: block;        /* 画像下の数pxの隙間を消すおまじない */
padding:0.5em;
  }
  
  /* テキストの余白調整 */
  .categoryContainer-item div {
    padding-left: 10px;
    font-size: 14px;
  }

  /* スマホ対応：画面が狭いときは2列にする等の調整 */
  @media (max-width: 600px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }


/* ショッピングカート */
div#fs-checkout-amazon-container {
    display: none;
}

/* お客様情報入力 */
span.fs-c-requiredMark {
    color: #ff0200 !important;
}



/*　カテゴリページ　ランキング　ここから　*/
#Ranking-cate.ranking_area {
    background-color: #f3f3f3;
    padding: 30px 10px; /* 左右パディングを少し調整 */
    font-size: 16px;
    margin-bottom: 30px;
}

#Ranking-cate .text_center {
    text-align: center;
    margin-bottom: 20px;
}

#Ranking-cate .ranking_box { 
    width: 100%;
    max-width: 1000px; /* 必要に応じて最大幅を設定 */
    margin: 0 auto;
}

#Ranking-cate .ranking_box ul {
    padding-left: 0px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
}

#Ranking-cate .ranking_box ul li {
    margin: 10px;
    box-sizing: border-box;
}

#Ranking-cate span.itemtext {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    line-height: 1.4;
}

/* --- レスポンシブ設定 --- */

/* 750px以上：3列表示、4つ目は非表示 */
@media screen and (min-width: 750px) {
    #Ranking-cate .ranking_box ul li {
        width: calc(33.333% - 20px); /* 3列 */
    }
    #Ranking-cate .pcnone {
        display: none !important;
    }
}

/* 749px以下：2列表示、4つ目も表示 */
@media screen and (max-width: 749px) {
    #Ranking-cate .ranking_box ul li {
        width: calc(50% - 20px); /* 2列 */
    }
    #Ranking-cate .pcnone {
        display: block !important; /* スマホでは表示 */
    }
    #Ranking-cate.ranking_area {
        padding: 20px 5px;
    }
    #Ranking-cate span.itemtext {
        font-size: 14px;
    }
}

/*　カテゴリページ　ランキング　ここまで　*/


/*　2列 749px 750px 4列　ここから　*/
/* 親要素（コンテナ）の設定 */
.product-grid {
    display: grid;
    /* デフォルト（スマホ・749px以下）は「2列」 */
    grid-template-columns: repeat(2, 1fr);
    /* アイテム間の隙間（お好みで調整してください） */
    gap: 20px 10px; 
}

/* リンク（子要素）の設定 */
.product-grid a {
    display: block; /* 画像の下にテキストが来るようにブロック化 */
    text-decoration: none; /* 下線を消す */
    color: #333; /* 文字色（サイトに合わせて変更してください） */
    text-align: center; /* 画像と文字を中央揃え */
    font-size: 14px; /* 文字サイズ調整 */
}

/* 画像の設定 */
.product-grid img {
    width: 100%; /* 親の幅いっぱいに広げる */
    height: auto; /* 比率を保つ */
    display: block; /* 画像下の余白を消す */
    margin-bottom: 5px; /* 画像と文字の間の隙間 */
}

/* --- レスポンシブ設定 --- */
/* 750px以上で「4列」に切り替え */
@media screen and (min-width: 750px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/*　2列 749px 750px 4列　ここから　*/





/*　商品一覧　カートに入れる　通常販売価格　非表示　ここから　*/
.fs-c-productListItem__control.fs-c-buttonContainer, .fs-c-productPrice.fs-c-productPrice--listed{
    display: none;
}

/*改行箇所指定*/
.hmm { display: inline-block; white-space: nowrap; }


/* カテゴリを分けるライン */
.spaceDivider {
  display: flex;           /* 必須：横並びを強制 */
  align-items: center !important;     /* 必須：垂直中央 */
  text-align: center !important;
  font-weight: bold !important;
  font-size: 1.5em !important;
  margin-top: 2em !important;         /* 上にも余白があると綺麗です */
  margin-bottom: 1em !important;
  width: 100%;             /* 横幅いっぱいに広がるのを保証 */
  border: none !important;            /* 既存の枠線を消去 */
background: transparent !important; /* 背景の干渉を防止 */
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* 左右の線の共通設定 */
.spaceDivider::before,
.spaceDivider::after {
  content: "" !important;             /* 必須：中身が空でも表示 */
  flex-grow: 1 !important;            /* 必須：線が自動で伸びる */
  height: 1px !important;             /* 線の太さ */
  background: #333 !important;        /* 線の色 */
  display: block !important;          /* 表示を確実にする */
}

/* テキストと線の間に余白を作る */
.spaceDivider::before {
  margin-right: 2em !important;
}

.spaceDivider::after {
  margin-left: 2em !important;
}

.ftMincho{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

/* 親要素：3列のFlexboxを作成 */
.threeColumnsBanners {
  display: flex;           /* Flexboxで横並び */
  flex-wrap: wrap;         /* 折り返し許可 */
  justify-content: center; /* ★魔法の記述：これで端数が勝手に中央に寄ります */
  gap: 15px;               /* 画像間の隙間 */
  
  list-style: none;        /* ・などのマークを消す */
  padding: 0;              /* 余計な余白を消す */
  margin-bottom: 3rem;     /* 下の要素との距離 */
}

/*トップページ　コレクション*/
/* 子要素（li） */
.threeColumnsBanners li {
  /* 幅を「3分の1」にする計算式 */
  /* (100% - 隙間15px × 2つ分) ÷ 3 */
  width: calc((100% - 30px) / 3);
  
  /* サイズが勝手に変わらないように固定 */
  flex-grow: 0;
  flex-shrink: 0;
}

/* 画像の設定 */
.threeColumnsBanners li img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト装飾エリア */
.tcb-title, .tcb-subtitle, .tcb-text {
  text-align: center; /* 修正箇所： ; を : に、ign を lign に */
  font-weight: bold;
}

.tcb-title {
  font-size: 3rem;
}

.before_headerNavigation{ height: 2em; background-color: #ffffff; }


/* --- レスポンシブ設定 --- */

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

/*フッターのカテゴリ*/
.categoryContainer{ grid-template-columns: repeat(2, 1fr); }
.categoryContainer-item{ grid-template-columns: 1fr 2.5fr; }

/*フッターナビゲーション*/
.footerNavigation ul {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 均等に2分割 */
    padding: 0;
    list-style: none;
  }

.footerNavigation ul li a {
    display: block;
    padding: 15px 10px;
    text-align: center;
    text-decoration: none;
    color: #333;
  }

.guideIconMokuji_item{ padding: 0.75em !important; }

/*トップページのグレーカラースペース*/
.toppageGraySpace{ background-color: #f3f3f3; padding: 1px 1em 3em 1em; margin-right: -8px; margin-left: -8px; }

/*トップページカテゴリ*/
.tcb-title { font-size: 1.75em; }

/*ヘッダー*/
.fs-l-header__contents { margin-bottom: 1.5em; }
nav.headerNavigation { margin-bottom: 3em; }
ul.headerNavigation-ul { row-gap: 1em !important; font-size:0.75em; }

.before_headerNavigation{ height: 1em; background-color: #ffffff; }

}/*media screen end end*/