@charset "UTF-8";
.main-container {
  /* padding-bottom: 8.6rem; */
  font-size: 12px;
  line-height: 1.6;
  word-wrap: break-word;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal !important;
  font-family: var(--font-primary);
}

.main-container .contentBlock,
.main-container .history {
  padding: 0 7.14285714286%;
}

.main-container .contentBlock:first-child {
  margin-bottom: 8rem;
}

/*.main-container .pagePresent {
  padding-bottom: 10rem;
  border-bottom: 1px solid #EDEDED; 
}*/

.main-container .container .headerImage {
  position: relative;
}

.main-container .c-header_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.main-container .c-header_inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 50px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-container .c-header_cont{
  color: #ffffff;
}

.main-container .c-header_present {
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: 0.175em;
  line-height: 1;
}

.main-container .c-header_present h1{
  font-family: 'Reem Kufi', 'Helvetica Neue', sans-serif !important;
}
.main-container .c-header_present span {
  margin-top: 1.7rem;
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  line-height: 1;
  font-family: 'Noto Sans JP', sans-serif;
}

.main-container .c-header_copy {
  margin-top: 4rem;
  font-size: 1.5rem;
  letter-spacing: 0.075em;
  line-height: 2.13333333333;
}

.main-container .wrappingList {
  padding: 0 8.33333333333%;
  display: flex;
  justify-content: center;
}

.main-container .wrappingList li {
  width: 48%;
  flex-shrink: 0;
}

.main-container .wrappingList li .c-wrapping_title {
  margin-top: 2.6rem;
  font-size: 2rem;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.main-container .wrappingList li .c-wrapping_title .en {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--sec-tittle-font);
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  color: #a6a6a6;
  font-weight: normal;
}

.main-container .wrappingList li .c-wrapping_text {
  margin-top: 2.5rem;
  font-size: 1.3rem;
  line-height: 1.76923076923;
  letter-spacing: 0.075em;
}

.main-container .button__wrapper .button__element {
  display: block;
  position: relative;
  width: 18rem;
  height: 3.8rem;
  margin: 5.5rem auto 0;
  font-family: var(--font-english);
  font-size: var(--fz-secondary);
  font-weight: 400;
  font-style: normal;
}

.main-container .button__wrapper a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #000;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  color: #ffffff;
  border: 1px solid transparent;
}

.main-container .button__wrapper a:hover {
  opacity: 1;
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
}

/* BodyProductHistory */
.main-container .history {
  border-top: 1px solid #ededed;
  padding-top: 7.2rem;
  padding-bottom: 8.5rem;
}

.main-container .history .section-ttl-jp {
  margin-bottom: 2.5rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
}

.main-container .history .card-history {
  flex-shrink: 1;
  width: 15.4166666667%;
  margin-left: 1.5%;
  font-size: 1.2rem;
  letter-spacing: 0.075em;
}

.main-container .history .card-history:first-child {
  margin-left: 0;
}

.main-container .history .card-history:nth-child(n + 7) {
  display: none;
}

.main-container .history .card-history img {
  border: 1px solid #efefef;
  box-sizing: border-box;
}

.main-container .history .card-history .brandName {
  margin-top: 2rem;
  line-height: 1;
}

.main-container .history .card-history .itemName {
  margin-top: 0.7rem;
  font-size: 1.3rem;
  line-height: 1.76923076923;
}

.main-container .history .card-history .priceArea {
  color: #888;
  margin-top: 1.3rem;
  line-height: 1;
  font-family: var(--sec-tittle-font);
}

@media (max-width: 768px) {
  .main-container {
    padding-bottom: 5rem;
    font-size: 1.3rem;
    line-height: 1.76923076923;
  }

  .main-container .contentBlock,
  .main-container .history {
    padding: 0;
  }

  .main-container .contentBlock:first-child {
    margin-bottom: 7.2rem;
  }

  .main-container .pagePresent {
    padding-bottom: 0;
  }

  .main-container .c-header_wrap {
    position: static;
    width: 100%;
    height: 100%;
  }

  .main-container .c-header_inner {
    justify-content: flex-start;
    margin-top: -1.6rem;
    padding: 0 1rem;
  }

  .main-container .c-header_present span {
    margin-top: 1.7rem;
    font-size: 1.2rem;
  }

  .main-container .c-header_copy {
    margin-top: 3.1rem;
  }

  .main-container .wrappingList {
    padding: 0 1rem;
    flex-direction: column;
  }

  .main-container .wrappingList li {
    width: 100%;
  }

  .main-container .wrappingList li:nth-child(n + 2) {
    margin-top: 4.5rem;
  }

  .main-container .wrappingList li .c-wrapping_title .en {
    margin-top: 1.5rem;
  }

  .main-container .wrappingList li .c-wrapping_text {
    margin-top: 2.3rem;
  }

  .main-container .button__wrapper .button__element {
    width: 22rem;
    height: 4rem;
    margin: 5.7rem auto 0;
  }

  /* BodyProductHistory */
  .main-container .history {
    padding: 0 1rem;
    padding-top: 6rem;
  }

  .main-container .history .cardUnit-history {
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    padding-bottom: 1rem;
  }

  .main-container .history .card-history {
    width: 15rem;
    margin-right: 2rem;
    font-size: 1.3rem;
    flex-shrink: 0;
  }

  .main-container .history .card-history img {
    border: none;
  }

  .main-container .history .card-history .brandName {
    margin-top: 1.5rem;
  }

  .main-container .history .card-history .itemName {
    margin-top: 0.9rem;
  }

  .main-container .history .card-history .priceArea {
    margin-top: 0.9rem;
  }
}

/* --- START: 2025/10/03 改修時追加 (価格検索セクション追加版) --- */
/*
 * ===================================================================
 * 1. 基本設定 & 変数定義
 * ===================================================================
*/
:root {
  --color-text: #333333;
  --color-dark: #111111;
  --color-gray: #aaaaaa;

}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * ===================================================================
 * 2. 共通セクションスタイル
 * ===================================================================
*/

/* セクション全体の上下の余白 */
#item-search,
#price-search,
#ranking {
  padding: 80px 0;
}

/* 大見出し */
#item-search .section-title,
#price-search .section-title,
#ranking .section-title {
  font-family:'Noto Sans JP', sans-serif;
  font-size: 2.6rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

/* 商品グリッド (PC表示：横4列) */
#item-search .product-grid,
#price-search .product-grid{
  display: flex;
  gap: 2rem;
  max-width: calc(1200 * (100vw / 1400));
  justify-content: center;
  margin: 5rem auto 0;
}
#ranking .product-grid {
  list-style: none; 
  padding: 0;       
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  counter-reset: ranking-counter;
  gap: 2rem;
  max-width: calc(1200 * (100vw / 1400));
  justify-content: center;
  margin: 5rem auto 0;
}

/* 商品カード（共通スタイル） */
#item-search .product-card,
#price-search .product-card {
  text-align: left;
}
#ranking .product-card {
  position: relative; 
  counter-increment: ranking-counter; 
  text-align: left;
}
#item-search .product-card a:hover .product-card__image img,
#price-search .product-card a:hover .product-card__image img,
#ranking .product-card a:hover .product-card__image img {
  opacity: 0.8;
}

/* 商品画像 */
#item-search .product-card__image,
#price-search .product-card__image,
#ranking .product-card__image {
  background-color: #f5f5f5;
  margin-bottom: 1rem;
}
#item-search .product-card__image img,
#price-search .product-card__image img,
#ranking .product-card__image img {
  transition: opacity 0.3s ease;
}

/* 商品情報（テキスト部分） */
#item-search .product-card__info,
#price-search .product-card__info,
#ranking .product-card__info {
  padding: 0 0.5rem;
}

#item-search .product-card__desc,
#price-search .product-card__desc,
#ranking .product-card__desc {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif !important;
  font-size: 0.8rem;
  color: var(--color-gray);
  margin-bottom: 0.5rem;
  min-height: 2.4em;
  line-height: 1.2em;
}
#item-search .product-card__name,
#price-search .product-card__name,
#ranking .product-card__name {
  font-family:'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: .05em;
}
#item-search .product-card__price,
#price-search .product-card__price,
#ranking .product-card__price {
  font-family:'Reem Kufi', sans-serif;
  font-size: 1.2rem;
  color: #888888;
  letter-spacing: .05em;

}
/*
 * ===================================================================
 * 3. 「アイテムから探す」
 * ===================================================================
*/
/* 小見出し */
#item-search h3 {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif !important;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  margin: 0 0 30px 0;
  position: relative;
}
/* 小見出しの下線 */
#item-search h3::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--color-text);
  margin: 10px auto 0;
} /*
 * ===================================================================
 * 4. 「価格から探す」
 * ===================================================================
*/
/* タブナビゲーションのコンテナ */
#price-search .tab-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0 auto 2.5rem auto;
  padding-left: 0;
  border-bottom: 1px solid #eee;
  width: 90%;
  max-width: 1100px;
  font-size: 2rem;
}

/* タブの一つ一つ */
#price-search .tab-nav__item {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif !important;
  padding: 0.5rem 1rem;
  cursor: pointer;
  position: relative;
  color: var(--color-gray);
  transition: color 0.3s;
  white-space: nowrap; /* タブが改行されないように */
}
#price-search .tab-nav__item:hover {
  color: var(--color-text);
}

/* アクティブなタブ */
#price-search .tab-nav__item.is-active {
  color: var(--color-text);
  font-weight: bold;
}
/* アクティブなタブの下線 */
#price-search .tab-nav__item.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px; /* ボーダーの真上に配置 */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-dark);
}

/* タブコンテンツの表示/非表示 */
#price-search .tab-content {
  display: none;
}
#price-search .tab-content.is-active {
  display: block;
}

/* 商品がない場合のメッセージ */
#price-search .no-items {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif !important;
  text-align: center;
  color: var(--color-gray);
  padding: 4rem 0;
}

/* ランキング */
#ranking .ranking-list__item {
  position: relative;
  counter-increment: ranking-counter;
}
#ranking .ranking-list__item::before {
  content: counter(ranking-counter);
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: var(--color-dark);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1rem;
  z-index: 2;
}
#ranking .product-card::before {
  content: counter(ranking-counter); /* カウンターの数字を表示 */
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #808080;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif), serif;
  font-size: 1.2rem;
  font-weight: bold;
  z-index: 2; /* 画像より手前に表示 */
}
.service-info {
  padding: 60px 0;
  background-color: #f9f9f9;
} 
.service-info-inner {
  display: flex;
  gap: 9rem;
  text-align: center;
  background-color: #f9f9f9; 
  padding: 3% 15%;
  align-items: flex-start;
}
.service-info__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-info__icon {
  width: 100%;
  height: 100%;
  margin-bottom: 1rem;
  object-fit: contain;
}
.service-info__item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.service-info__item p {
  font-size: 1.5rem;
  color: #000000;
  line-height: 1.6;
}

/* ★★★ ショップリストCTAの変更点 ★★★ */
.cta-shoplist {
  padding-bottom: 60px;
  background-color: #f9f9f9;
  /*margin-top: 80px;
  margin-bottom: 80px;*/
}
.cta-shoplist .container {
  background-color: #F8F8F8;
  text-align: center;
  padding: 3%;
}
.cta-shoplist__title,
.cta-faq__title {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 2.6rem;
  font-weight: 500;
  margin-bottom: 1rem;
  text-align: center;
}
.cta-shoplist p,
.cta-faq p {
  margin-bottom: 2rem;
  opacity: 0.8;
  font-size: 1.3rem;
}
.cta-faq {
  padding-bottom: 80px;
  background-color: #f9f9f9;
}
.cta-faq .container {
  /*background-color: #F8F8F8;*/
  text-align: center;
  padding: 3%;
}

/* --- タブナビゲーションのスタイル例 --- */
.item-tab-nav {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
  gap: 1.5rem;
  font-size: 2rem;
  font-family: 'Reem Kufi', sans-serif;
}

.item-tab__item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent; /* 非アクティブ時の下線 */
  transition: border-color 0.3s, color 0.3s;
  color: #666;
}

.item-tab__item:hover {
  color: #000;
}

/* ★アクティブなタブのスタイル */
.item-tab__item.is-active {
  font-weight: bold;
  color: #000;
  border-bottom-color: #333; /* アクティブなタブの下線を濃くする */
}
.item-tab-content {
  display: none; /* 通常は非表示 */
}

.item-tab-content.is-active {
  display: block; 
}
/* Swiperコンテナのスタイル */
.swiper.product-slider {
  padding-bottom: 40px; /* スクロールバーと商品との間の余白。30px ~ 50pxあたりで調整してください */
  max-width: calc(1200 * (100vw / 1400));
}
/* スクロールバーのスタイルは、コンテナの底を基準に配置される */
.swiper-scrollbar {
  bottom: 10px !important; /* コンテナの底から10px上に配置 */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 6px !important;
}
/*
 * ===================================================================
 * 5. レスポンシブ対応 (スマホ表示)
 * ===================================================================
*/
@media (max-width: 768px) {
  .main-container .c-header_cont{
  color: #000000;
  }
  #item-search,
  #price-search {
    padding: calc(160*(100vw/750)) calc(20*(100vw/750)) calc(160*(100vw/750))
  }

  #item-search .section-title,
  #price-search .section-title {
    font-size: 2.6rem;
    margin-bottom: 40px;
  }

  /* 商品グリッド (スマホ表示：横2列に) */
  #item-search .product-grid,
  #price-search .product-grid {
    gap: 1rem;
    max-width: calc(710 * (100vw / 750));
  }
  #ranking .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem;
    max-width: calc(710 * (100vw / 750));
    margin: 5rem auto 0;
  }
  #price-search .tab-nav ul {
    gap: 0;
    justify-content: space-around; /* スマホではタブを均等配置 */
  }
  #price-search .tab-nav__item {
    padding: 0.5rem 0.25rem;
    font-size: 1.5rem;
  }
  #ranking .ranking-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    counter-reset: ranking-counter;
    max-width: calc(710 * (100vw / 750));
    margin: 5rem auto 0;
  }
.service-info-inner {
  display: flex;
  flex-direction: column; /* アイテムを縦方向に並べる */
  gap: 2rem; /* 縦に並んだアイテム間の余白 */
  background-color: #f9f9f9;
  padding: 8% 12%;
}
.service-info__item {
  display: flex; /* アイテム内の要素（画像とテキスト）を横並びにする */
  align-items: center; /* 画像とテキストを垂直方向の中央に揃える */
  gap: 1.5rem; /* 画像とテキストの間の余白 */
  text-align: left; /* テキストを左揃えに */
  flex-direction: row;
}
.service-info__icon {
  flex-shrink: 0; /* テキストが長くなっても画像が縮まないように */
  width: 37%;
}
.service-info__item p {
  font-size: 1.1rem;
  color: #000000;
  line-height: 1.6;
  margin: 0; /* pタグのデフォルトマージンをリセット */
}
.cta-shoplist .container,
.cta-faq .container {
  background-color: #F8F8F8;
  text-align: center;
  padding: 8%;
}

.item-tab-nav {
    display: flex;
    justify-content: center;
    gap: .2rem;
    font-size: 1.1rem;
}
/* SP */
.btn--dark-fill {
  padding: calc(20 / 750 * 100vw) calc(50 / 750 * 100vw);
  font-size: calc(24 / 750 * 100vw);
  min-width: calc(450 / 750 * 100vw);
}
}
/* 共通 */
.btn--dark-fill {
  color: #000000;
  border: 1px solid black;
  letter-spacing: 0.1em;
  display: inline-block;
  transition: background-color 0.3s, color 0.3s;
}

/* PC */
.btn--dark-fill {
  padding: 1.4rem 20rem;
  font-size: 2rem;
}

/* ホバー */
.btn--dark-fill:hover {
  background-color: #808080;
  color: black;
}