section{
width:100%;
}

section img{
width:100%;
}

.u-container{
  padding-top: 80px;
}

.sp-br{
	display:none;
}

@media screen and (max-width:864px){
.sp-br{
	display:block;
}
}
  
/******************************/
/* Main Slider (Slick) Custom */
/******************************/
.p-main-visual {
  position: relative;
  width: 100%;
  margin-top: 15px;
}

@media screen and (max-width: 864px) {
  .p-main-visual {
    margin-top: 15px; /* SPのヘッダー高さに合わせる */
  }
}

/* ドットナビの位置とスタイルの強制設定 */
.main-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  list-style: none;
  position: absolute;
  bottom: 20px; /* 画像の下から20pxの位置に配置 */
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 10;
}

.main-slider .slick-dots li {
  margin: 0 5px;
}

.main-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 1px solid #000; /* 黒い縁取り */
  border-radius: 50%;
  background: transparent; /* 通常時は透明 */
  outline: none;
  transition: all 0.3s;
}

/* アクティブな（今表示されている）ドット */
.main-slider .slick-dots li.slick-active button {
  background: #000; /* アクティブ時は黒く塗りつぶし */
}

/* Slickデフォルトの変なアイコン（フォント）を消去 */
.main-slider .slick-dots li button:before {
  content: none !important;
}

/******************************/
/* NEWS */
/******************************/
.p-line-informaiton {
  display: flex;
  flex-wrap: wrap;
  margin-top: 75px;
  width: 760px;
}
@media screen and (max-width: 767px) {
  .p-line-informaiton {
    display: block;
    width: auto;
  }
}
.p-line-informaiton ul {
  flex: 1;
  font-size: 13px;
}
@media screen and (max-width: 767px) {
  .p-line-informaiton ul {
    font-size: 12px;
  }
}
.p-line-informaiton li {
  margin-bottom: 15px;
}
.p-line-informaiton__ttl {
  position: relative;
  margin: 0 40px 0 0;
  font-size: 14px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .p-line-informaiton__ttl {
    margin: 0;
  }
}
.p-line-informaiton__ttl:before {
  content: "";
  position: absolute;
  top: 7px;
  right: -20px;
  width: 1px;
  height: 10px;
  background: #d2d2d2;
}
@media screen and (max-width: 767px) {
  .p-line-informaiton__ttl:before {
    content: none;
  }
}
/***** お知らせ *****/
.p-top-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .p-top-news {
    display: block;
    margin-bottom: 45px;
  }
}
.p-top-news__ttl {
  box-sizing: border-box;
  margin-right: 25px;
  padding: 10px;
  width: 110px;
  border: 1px solid #b2b2b2;
  font-size: 18px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-top-news__ttl {
    margin-right: 0;
    margin-bottom: 10px;
    padding: 5px;
    width: 70px;
    border: 1px solid #b2b2b2;
    font-size: 12px;
  }
}
.p-top-news__body {
  flex: 1;
  margin-bottom: 0;
}

/******************************/
/* BRAND CONCEPT */
/******************************/
.p-brand-concept__body{
  text-align: center;
}

.p-brand-concept__body img{
	width:clamp(160px,60%,320px);
}

.p-brand-concept__body p{
  font-family: var(--font-sans);
  line-height: 1.8;
}

/******************************/
/* TOP RECOMMEND */
/******************************/

@media screen and (max-width: 864px) {
  .p-recommend.u-container {
    padding-bottom: 24px; /* スマホ用の余白 */
  }
}
/******************************/
/* NEW　ARRIVAL */
/******************************/
.p-new-item {
  max-width:1400px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}

/* 親コンテナ：スライダーとの余白調整用 */
.p-new-item-button-wrapper {
  display: block;
  margin-inline:auto;
  margin-bottom: 100px;
}

/* ボタン本体 */
.c-button-see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(160px,60%,320px);
  height: 60px;
  background-color: #0c0c0c;
  color: #ffffff!important;
  text-decoration: none;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  border-radius: 4px;
  transition: opacity 0.3s;
  margin-inline: auto;
}

.c-button-see-more:hover {
  opacity: 0.8;
}

/* 矢印を囲む円 */
.c-button-see-more__icon {
position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    border-radius: 50%;
    left: 16px;
}

/* 矢印（三角形）の再現 */
.c-button-see-more__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 45%; /* 三角形の位置を中央に見えるよう微調整 */
  transform: translateY(-50%);
  
  /* CSSで三角形を作る手法 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px; /* 縦横のサイズ */
  border-color: transparent transparent transparent #fff; /* 右向きの白矢印 */
}

.c-item-list__ttl.font-sans{
  font-size: 16px;
}
/******************************/
/* VISUAL BANNER (SP連続グリッド対応版) */
/******************************/
/* 1. 全てのバナー要素の基本リセット */
.p-visual-banner__body img,
.p-visual-banner__body picture,
.p-visual-banner__body a,
.p-visual-banner__body ul,
.p-visual-banner__body li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  list-style: none !important;
}

/* 2. 【PC設定】 */
/* 全ての「塊（a, picture, ul）」と、グリッド内の「li」に下マージンを指定 */
.p-visual-banner__body > a,
.p-visual-banner__body > picture,
.p-visual-banner__body li {
  margin-bottom: 3px !important;
}

/* PC時の2カラム表示設定 */
.grid.grid-cols-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 3px !important; /* 縦の隙間はliのマージンで制御するためgapは横のみ */
}

/* 最後の要素の下マージンをリセット */
.p-visual-banner__body > *:last-child,
.p-visual-banner__body li:last-child {
  margin-bottom: 0 !important;
}

/* PC時の4カラム表示（1.786fr / 1fr / 1fr / 1fr） */
.p-visual-banner__4col {
  display: grid !important;
  grid-template-columns: 1.786fr 1fr 1fr 1fr !important;
  gap: 3px !important;
  margin-bottom: 3px;
}
.p-visual-banner__4col li {
  margin-bottom: 0 !important;
}

/* ----------------------------------------------------------
   SP（スマホ）時の設定 (768px以下)
   ---------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* 全てのバナー要素の下余白を 2px に統一 */
  .p-visual-banner__body > a,
  .p-visual-banner__body > picture,
  .p-visual-banner__body > ul.grid, /* ← SPでもulの下に2px空ける */
  .p-visual-banner__body li {
    margin-bottom: 2px !important;
  }

  /* グリッドを縦1列に強制 */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 0 !important; /* 縦並びの隙間はliのマージン(2px)で統一 */
  }

  /* SP時の4カラム → 2カラムに変更 */
  .p-visual-banner__4col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }
  .p-visual-banner__4col li {
    margin-bottom: 0 !important;
  }
}
/******************************/
/* TOP RANKING */
/******************************/
.p-ranking-list .slick-track {
  margin-left: 0;
  margin-right: 0;
}
.p-ranking-list .slick-prev, .p-ranking-list .slick-next {
  top: 80px;
  width: 30px;
  height: 30px;
  transition: all 0.4s ease;
  z-index: 1;
  background: rgba(255,255,255,0.4);
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-prev, .p-ranking-list .slick-next {
    top: 110px;
    width: 45px;
    height: 45px;
  }
}
.p-ranking-list .slick-prev:before, .p-ranking-list .slick-next:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 10px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #000000;
  border-top: 1px solid #000000;
  transition: all 0.4s ease;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-prev:before, .p-ranking-list .slick-next:before {
    top: 15px;
  }
}
.p-ranking-list .slick-prev {
  left: 20px;
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-prev {
    left: 0px;
  }
}
.p-ranking-list .slick-prev:before {
  transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-prev:before {
    left: 17px;
  }
}
.p-ranking-list .slick-next {
  right: 20px;
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-next {
    right: 0px;
  }
}
.p-ranking-list .slick-next:before {
  left: 4px;
  transform: rotate(135deg);
}
@media screen and (max-width: 767px) {
  .p-ranking-list .slick-next:before {
    left: 13px;
  }
}
.p-ranking-list__item {
  position: relative;
  box-sizing: border-box;
  margin-right: 20px;
  margin-left: 20px;
  padding-bottom: 25px;
  word-break: break-all;
}
@media screen and (max-width: 1030px) {
  .p-ranking-list__item {
    margin-right: 5px;
    margin-left: 5px;
  }
}
.p-ranking-list__img {
  position: relative;
  margin-bottom: 35px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-ranking-list__img {
    text-align: center;
  }
}
.p-ranking-list__img:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.p-ranking-list__img a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p-ranking-list__img img {
  display: inline-block !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  text-align: center;
}
.p-ranking-list__num {
  position: absolute;
  top: 0;
  left: 1px;
  width: 24px;
  line-height: 24px;
  font-size: 12px;
  font-weight: bold;
  background: #000000;
  color: #ffffff;
  text-align: center;
}
.p-ranking-list__ttl img {
  vertical-align: middle;
}
.p-ranking-list__price {
  color: #909090;
  margin-top: 20px;
}
.p-ranking-list__btn {
  display: block;
  position: absolute;
  right: 0px;
  bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #d8d8d8;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.p-ranking-list__btn.is-added {
  color: #000000;
}
.p-ranking-list__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* TOP価格用フォント調整*/

.p-product-recommend-list__price {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 400;
  margin-top: 20px;
}

.p-product-recommend-list__price .price-tax {
  margin-left: 8px;
  font-weight: normal;
}

.p-product-recommend-list__price .price-tax-label {
  font-size: 14px;   /* ← 税込を小さく */
  margin-right: 3px;
  font-weight: 400;
}


/* =========================
   SP価格サイズ調整
========================= */
@media screen and (max-width: 768px) {

  .p-product-recommend-list__price {
    font-size: 18px;
    margin-top: 12px;
  }

  .p-product-recommend-list__price .price-tax-label {
    font-size: 11px;
  }

  .p-product-recommend-list__price .price-tax-value {
    font-size: 18px;
  }

}
/******************************/
/* TOP INFORMATION */
/******************************/
.p-information__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-information__item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.p-information__date {
  color: #E8B221;   /* ← 日付 */
  font-size: 16px;
  font-weight: 600;
  min-width: 110px;
}

.p-information__text {
  color: #000000;   /* ← テキスト */
  text-decoration: none;
  transition: opacity .3s ease;
  font-family: "Zen Kaku Gothic New", sans-serif !important;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.p-information__text:hover {
  opacity: 0.6;
}

.p-information {
  max-width: 650px;  
  margin: 0 auto;      /* 中央寄せ */
  padding-left: 30px;  /* 左右余白 */
  padding-right: 30px;
}

/* 線を消す */
.p-information__item {
  border-bottom: none !important;
}

/* INFORMATION内SNS */
.p-information__sns {
  display: flex;
  justify-content: center;
  align-items: center;   /* ← これが超重要 */
  gap: 40px;
  padding-top: 40px;
}

.p-information__sns img {
  width: 32px;
  height: auto;          /* ← 固定しない */
  display: block;
  transition: opacity .3s ease;
}

/* LINEだけ少し大きく */
.p-information__sns a.is-line img {
  width: 40px;
}

.p-information__sns a:hover img {
  opacity: 0.6;
}

/* SP調整 */
@media screen and (max-width: 768px) {
    .p-information {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .p-information__item {
    flex-direction: column;
    gap: 6px;
  }
  .p-information__date {
    min-width: auto;
  }
}
/******************************/
/* TOP FREE */
/******************************/
.p-free__body {
  margin-left: 60px;
  margin-right: 60px;
  line-height: 2;
}
@media screen and (max-width: 1030px) {
  .p-free__body {
    margin-left: 0;
    margin-right: 0;
  }
}
/******************************/
/* TOP BANNER */
/******************************/
.p-bnr {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 1030px) {
  .p-bnr {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.p-bnr-list {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .p-bnr-list {
    display: block;
  }
}
.p-bnr-list__item {
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  width: 33.3333%;
}
@media screen and (max-width: 1030px) {
  .p-bnr-list__item {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media screen and (max-width: 767px) {
  .p-bnr-list__item {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
    width: auto;
    text-align: center;
  }
}

/******************************/
/* ANIMATION */
/******************************/
.js-fadein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.js-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay for staggered effect (optional) */
.js-fadein-delay-1 { transition-delay: 0.2s; }
.js-fadein-delay-2 { transition-delay: 0.4s; }
.js-fadein-delay-3 { transition-delay: 0.6s; }

/* NEW ITEM Slider Adjustments */
#js-new-item-slider {
  margin: 0;
  padding: 0;
  list-style: none;
}

#js-new-item-slider .slick-prev,
#js-new-item-slider .slick-next{
  width:30px;
  height:30px;
  z-index:20;
}

#js-new-item-slider .slick-prev{
  left:-60px;
}

#js-new-item-slider .slick-next{
  right:-60px;
}

@media (max-width:768px){
#js-new-item-slider .slick-prev{
  left:-20px;
 }

#js-new-item-slider .slick-next{
  right:-20px;
 }
}
/* ==========================================================
   PICK UP ITEM (売れ筋商品) サイズ・余白・表軸調整
   ========================================================== */

/* 親要素：コンテンツ幅と中央寄せ */
.p-recommend .c-item-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: 1280px; 
  margin: 0 auto !important;
}

/* 子要素：カラム幅 */
.p-recommend .c-item-list__item {
  width: 25% !important;
  padding: 0 35px 60px !important; /* 下の余白を少し広めに */
  box-sizing: border-box !important;
}

/* 商品名：PC 16px / SP 16px、2行固定・三点リーダー */
.p-recommend .c-item-list__ttl {
  text-align: left !important;
  margin-top: 20px !important; /* 画像との余白 */
  
  font-family: var(--font-sans), sans-serif !important;
  font-weight: 400;
  font-size: 16px !important; /* PCサイズ */
  letter-spacing: 0.02em !important;
  
  /* 2行固定・オーバー時は「...」 */
  line-height: 1.4 !important;
  height: 2.8em !important; /* 1.4行 × 2行分 */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.p-recommend .c-item-list__ttl a {
  color: inherit !important;
  text-decoration: none !important;
}

/* 価格エリア：商品名との余白を広げる */
.p-recommend .p-product-recommend-list__price {
  font-family: var(--font-en) !important;
  text-align: left !important;
  margin-top: 20px !important; /* 商品名と価格の余白 */
  display: block !important;
}

/* スマホ表示：2カラム */
@media screen and (max-width: 864px) {
  .p-recommend .c-item-list__item {
    width: 50% !important;
    padding-bottom: 40px !important;
  }
  
  .p-recommend .c-item-list__ttl {
    font-size: 16px !important; /* SPサイズ */
    height: 2.8em !important;
    margin-top: 15px !important;
  }
  
  .p-recommend .p-product-recommend-list__price {
    margin-top: 10px !important; /* SP時の商品名と価格の余白 */
  }
}

/* 画像リセット */
.p-recommend .c-item-list__img img {
  width: 100% !important;
  height: auto !important;
  position: static !important;
  display: block !important;
}

.price-yen {
  font-size: 0.8em;
  position: relative;
  top: -1px;
}

.p-product-recommend-list__price .price-tax {
  margin-left: 6px;
}


/* 税込価格 */
.p-product-recommend-list__price .price-tax-value {
  font-size: 1em;
  font-weight: 400;
}

/* 税込ラベルだけ小さく */
.p-product-recommend-list__price .price-tax-label {
  font-size: 0.6em;
  font-weight: 400;
}

/* 括弧も小さく */
.p-product-recommend-list__price .price-tax::before,
.p-product-recommend-list__price .price-tax::after {
  font-size: 0.7em;
}

/* 税込価格は通常サイズに戻す */
.p-product-recommend-list__price .price-tax-value {
  font-size: 1em;
  font-weight: 400;
}