@charset "UTF-8";

/* このファイルに記載することでCSSを上書きできます
html {
  color: #F00;
}
*/



/* =============================================================
    Layout（common.css）
============================================================= */
/**
 * #container-wrap
 */
.l-container-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

@media screen and (min-width: 768px) {
  .l-container-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

/* PC 下層ページ/ヘッダーとパンくずリストの余白調整 */
.l-container-wrap__head {
  max-width: 100%;
  margin-top: 3rem;
}

/* スマホ 下層ページ/ヘッダーとパンくずリストの余白調整 */
@media screen and (max-width: 767px) {
  .l-container-wrap__head {
    max-width: 100%;
    margin-top: -3rem; */
  }
}



/* =============================================================
    Site（common.css）
============================================================= */
/* Header
------------------------------------------------------------- */
/* スマホ 商品詳細ページ/下層ページのヘッダー位置調整 */
.s-header {
  display: block;
  width: 100%;
  height: 10rem;
}

/* スマホ ヘッダー位置調整：お知らせバーの下にずらす */
.s-header-wrap {
  position: fixed;
  top: 3rem; /* info-barの高さ分 */
  left: 0;
  width: 100%;
  z-index: 1000;
}

.s-header-wrap__logo {
  display: block;
  width: 12rem; /* スマホ店舗ロゴの表示サイズ */
}


/* スマホ ハンガーメニュー開いた時の余白高さ調整 */
/*** navBlok *****************************/
@media screen and (max-width: 767px) {
.s-header-navBlok__nav {
  display: block;
  width: 100%;
  height: calc(100vh - 6rem);
  padding: 1.5rem 0 0;
  position: fixed;
  top: 10rem; /* スマホ 高さ調整 */
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  border-top: 1px solid var(--color-gray);
  background: var(--color-white);
  opacity: 1;
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  transition: transform 0.4s ease;
  transform: translate(-100vw, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  }
}

/*s-header-contentsNavBlock
------------------------------------------------------------- */

.s-header-categoryNav__head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 0 0 0;
  background-color: inherit;
  font-size: 1.25rem; /* PC ヘッダーカテゴリーの文字サイズ調整 */
  font-weight: 400;
  cursor: pointer;
}


/*s-header-utilityList
------------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .s-header-utilityList {
  gap: 0 2rem; /* PC ヘッダー右側アイコンの間隔調整 */
}


/*s-header-miniCart
------------------------------------------------------------- */
.s-header-miniCart-item__img {
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  overflow: visible; /* hidden→visible */
}



/* =============================================================
    Module（home.css）
============================================================= */
/**
 * #m-homeMainVisual
 */
.m-homeMainVisual {
  display: block;
  width: 100%;
  position: relative;
  margin-top: 5rem;  /* PC ヘッダーとスライダー間の余白調整 */
}

.m-homeMainVisual__container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  position: relative;
}
.m-homeMainVisual--single .m-homeMainVisual-slideController,
.m-homeMainVisual--single .m-homeMainVisual-slidePagination {
  display: none;
}

.m-homeMainVisual-slider__item-picture > img {
  width: 100%;
}

.m-homeMainVisual-slideController {
  display: block;
}
.m-homeMainVisual-slideController__prev, .m-homeMainVisual-slideController__next {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  top: calc(50% - 3.9rem);
  width: 5rem;
  height: 5rem;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.3s ease;
  outline: none;
}
.m-homeMainVisual-slideController__prev > img, .m-homeMainVisual-slideController__next > img {
  width: 1.2rem;
}
@media screen and (min-width: 768px) {
  .m-homeMainVisual-slideController__prev, .m-homeMainVisual-slideController__next {
    top: calc(50% - 4rem);
  }
  .m-homeMainVisual-slideController__prev:hover, .m-homeMainVisual-slideController__next:hover {
    opacity: var(--hover-opacity);
  }
}
.m-homeMainVisual-slideController__prev {
  left: 1rem;
  padding-right: 0.3rem;
}
@media screen and (min-width: 768px) {
  .m-homeMainVisual-slideController__prev {
    left: 3rem;
  }
}
.m-homeMainVisual-slideController__next {
  right: 1rem;
  padding-left: 0.3rem;
}
@media screen and (min-width: 768px) {
  .m-homeMainVisual-slideController__next {
    right: 3rem;
  }
}
.m-homeMainVisual-slideController__prev.swiper-button-disabled, .m-homeMainVisual-slideController__next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.m-homeMainVisual-slidePagination {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem; /* マージンの代わりに隙間を統一的に指定 */
  padding: 1rem 0;
  list-style: none; /* 点（・）を消す */
}
}
@media screen and (min-width: 768px) {
  .m-homeMainVisual-slidePagination {
    margin-top: 2rem;
  }
}
.m-homeMainVisual-slidePagination__item {
  display: inline-block; /* 横に並べる */
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.4rem; /* 横の余白を追加して空白感を調整 */
  border-radius: 50%;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  opacity: 1;
  cursor: pointer;
}

/* スマホ専用（～767px） */
/*@media screen and (max-width: 767px) {
  .m-homeMainVisual {
    margin-top: 1rem;   スマホ ヘッダーとスライダー間の余白調整 
  }
}*/



/* =============================================================
    TOP：ヘッダー上お知らせバー
============================================================= */

/* お知らせバー（info-bar）スタイル */
.info-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background-color: #00265f; /* 任意の背景色に変更可 */
  color: #fff;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100; /* ヘッダーより前面に */
  text-align: center;
  box-sizing: border-box;
}

.info-bar__text {
  margin: 0;
  padding: 0 1rem;
  font-weight: 500;
  width: 100%;
  text-align: center;
}



/* =============================================================
    slider(swiper.js)
============================================================= */

/* スライダー全体の枠 */
.m-homeMainVisual {
  position: relative;
  overflow-x: hidden;  /* 横方向のスクロールバーだけ消す */
  overflow-y: visible; /* 縦方向は必要に応じて */
}

/* スライダーの本体コンテナ（中央寄せ） */
.m-homeMainVisual__container {
  max-width: 1140px;
  margin: 0 auto;
  overflow: visible;
  position: relative;
}

/* スライド1枚ずつ */
.m-homeMainVisual-slider__item {
  width: 100%;
  flex-shrink: 0;
}

/* スライダーのwrapper */
.m-homeMainVisual-slider {
  display: flex;
}

/* 矢印の位置調整 */
.m-homeMainVisual-slideController {
  position: absolute;
  top: calc(50% - 30px); /* 上下にずらす */
  left: 0;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.m-homeMainVisual-slideController__prev,
.m-homeMainVisual-slideController__next {
  pointer-events: auto;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
}
.m-homeMainVisual-slideController__prev > img,
.m-homeMainVisual-slideController__next > img {
  width: 1.2rem;
  height: auto;
}

/* ページネーション（ドット） */
.m-homeMainVisual-slidePagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.m-homeMainVisual-slidePagination__item {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid var(--color-black);
  background: var(--color-white);
  opacity: 1;
  cursor: pointer;
}
.m-homeMainVisual-slidePagination__item:hover {
  opacity: var(--hover-opacity, 0.7);
}
.swiper-pagination-bullet-active,
.m-homeMainVisual-slidePagination__item.swiper-pagination-bullet-active {
  background: var(--color-black);
}

/* スライダー1枚の設定（PCのみ） */
@media screen and (min-width: 768px) {
  .m-homeMainVisual-slider__item {
    width: 80%; /* 必ず％で固定 */
    flex-shrink: 0;
  }
}
/* スマホ（～767px）ではスライド全幅に */
@media screen and (max-width: 767px) {
  .m-homeMainVisual-slider__item {
    width: 100%;
  }
}



/* =============================================================
    スライダー直下：横並びボタン
============================================================= */

.m-homeMainVisual-slidePagination,
.swiper-pagination {
  margin-bottom: 5rem; /* 余白調整 40px → 2.5rem */
}

.slider-buttons-container {
  max-width: 1140px;
  margin: 1.25rem auto 2.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.slider-buttons {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.slider-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 1 calc(50% - 1rem);
  height: 6rem;
  padding: 0 2rem;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: 500;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #222;
  text-align: center;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.3s;
  box-sizing: border-box;
}

.slider-button__label {
  flex: 1;
}

.slider-button__arrow {
  font-size: 1.25rem;
  margin-left: 1rem;
  flex-shrink: 0;
}

.slider-button:hover {
  background-color: #00265f;
  color: #fff;
}

/* スマホ（～767px）スライダーとページ送りボタン間の余白調整 */
@media screen and (max-width: 767px) {
.m-homeMainVisual-slidePagination,
.swiper-pagination {
  margin-bottom: 3rem; /* 余白調整 40px → 2.5rem */
  }
}

@media screen and (max-width: 767px) {
.slider-button {
  font-size: 1.5rem;
  }
}



/* =============================================================
    TOP：人気ランキング（オススメ商品と同じ構造）
============================================================= */

/* PC表示：5列で表示 */
@media screen and (min-width: 768px) {
  .m-productLineRanking {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .m-productLineRanking__item {
    width: calc(20% - 1.2rem);
    box-sizing: border-box;
  }
}

/* スマホ表示 (767px以下) で横スクロールを適用 */
@media screen and (max-width: 767px) {
  .m-productLineRanking {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
    list-style: none;
  }

  .m-productLineRanking__item {
    flex: 0 0 50%; /* %で商品画像サイズ調整 */
    max-width: 50%; /* %で商品画像サイズ調整 */
    scroll-snap-align: start;
    box-sizing: border-box;
  }

  .m-productLineRanking::after {
    content: '';
    flex: 0 0 1rem;
  }
}



/* =============================================================
    TOP：おすすめ商品（人気ランキングと同じ構造）
============================================================= */

/* PC表示：5列で表示 */
.m-productLineHome {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.m-productLineHome__item {
  width: calc(20% - 1.2rem);
  box-sizing: border-box;
}


/* スマホ表示 (767px以下) で横スクロールを適用 */
@media screen and (max-width: 767px) {
  .m-productLineHome {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
  }

  .m-productLineHome__item {
    flex: 0 0 50%;
    max-width: 50%;
    scroll-snap-align: start;
  }

  .m-productLineHome::after {
    content: '';
    flex: 0 0 1rem;
  }

/* 横スクロールコンテナ */
  .m-productLineHome {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

/* 疑似スクロールバー */
  .m-productLineHome::after {
    content: '';
    position: absolute;
    bottom: 0.35rem;
    left: 0;
    width: 38.5%;
    height: 0.3rem; /* 擬似的なバーの太さ */
    background-color: rgba(0, 0, 0, 0.3); /* 薄いスクロールバー色 */
    pointer-events: none; /* 操作に影響しないようにする */
  }
}



/* =============================================================
    TOP：キャンペーン（キャンペーン/シリーズ/コンテンツは同じ構造）
============================================================= */

/* バナー横並び（PC） */
@media screen and (min-width: 768px) {
  .p-homeCampaignBanner__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1140px;
    box-sizing: border-box;
  }

  .p-homeCampaignBanner__item {
    flex: 0 0 auto;
    width: 340px;
    text-align: center;
  }

  .p-homeCampaignBanner__item img {
    width: 100%;
    height: auto;
    display: block;
    /*border-radius: 8px;*/  /* 画像を角丸にする */
  }

  .p-homeCampaignBanner__text {
    margin-top: 1.25rem;
    color: #222;
  }
}

/* スマホ表示：横スライド式 */
@media screen and (max-width: 767px) {
  .p-homeCampaignBanner__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 !important;
    list-style: none;
    position: relative; /* ← Swiperの影響を受けないように */
    z-index: 0;          /* ← スタッキングコンテキストを明示的に分離 */
    isolation: isolate;  /* ← これがかなり効きます！ */
  }

  .p-homeCampaignBanner__item {
    flex: 0 0 70%;
    max-width: 70%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding-bottom: 1rem;  /* テキスト下に余白を追加 */
  }

  .p-homeCampaignBanner__list::after {
    content: '';
    flex: 0 0 1rem;
  }

  .p-homeCampaignBanner__text {
    margin-top: 0.5rem; /* バナーとテキスト間の余白 */
    color: #222;
  }
}



/* =============================================================
    TOP：シリーズ（キャンペーン/シリーズ/コンテンツは同じ構造）
============================================================= */

/* バナー横並び（PC） */
@media screen and (min-width: 768px) {
  .p-homeSeriesBanner__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1140px;
    box-sizing: border-box;
  }

  .p-homeSeriesBanner__item {
    flex: 0 0 auto;
    width: 340px;
    text-align: center;
  }

  .p-homeSeriesBanner__item img {
    width: 100%;
    height: auto;
    display: block;
    /*border-radius: 8px;*/  /* 画像を角丸にする */
  }

  .p-homeSeriesBanner__text {
    margin-top: 1.25rem;
    color: #222;
  }
}

/* スマホ表示：横スライド式 */
@media screen and (max-width: 767px) {
  .p-homeSeriesBanner__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 !important;
    list-style: none;
    position: relative; /* ← Swiperの影響を受けないように */
    z-index: 0;          /* ← スタッキングコンテキストを明示的に分離 */
    isolation: isolate;  /* ← これがかなり効きます！ */
  }

  .p-homeSeriesBanner__item {
    flex: 0 0 70%;
    max-width: 70%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding-bottom: 1rem;  /* テキスト下に余白を追加 */
  }

  .p-homeSeriesBanner__list::after {
    content: '';
    flex: 0 0 1rem;
  }

  .p-homeSeriesBanner__text {
    margin-top: 0.5rem; /* バナーとテキスト間の余白 */
    color: #222;
  }
}



/* =============================================================
    TOP：コンテンツ（キャンペーン/シリーズ/コンテンツは同じ構造）
============================================================= */

/* バナー横並び（PC） */
@media screen and (min-width: 768px) {
  .p-homeContentBanner__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1140px;
    box-sizing: border-box;
  }

  .p-homeContentBanner__item {
    flex: 0 0 auto;
    width: 340px;
    text-align: center;
  }

  .p-homeContentBanner__item img {
    width: 100%;
    height: auto;
    display: block;
    /*border-radius: 8px;*/  /* 画像を角丸にする */
  }

  .p-homeContentBanner__text {
    margin-top: 1.25rem;
    color: #222;
  }
}

/* スマホ表示：横スライド式 */
@media screen and (max-width: 767px) {
  .p-homeContentBanner__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding: 0 1rem;
    margin: 0 !important;
    list-style: none;
    position: relative; /* ← Swiperの影響を受けないように */
    z-index: 0;          /* ← スタッキングコンテキストを明示的に分離 */
    isolation: isolate;  /* ← これがかなり効きます！ */
  }

  .p-homeContentBanner__item {
    flex: 0 0 70%;
    max-width: 70%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding-bottom: 1rem;  /* テキスト下に余白を追加 */
  }

  .p-homeContentBanner__list::after {
    content: '';
    flex: 0 0 1rem;
  }

  .p-homeContentBanner__text {
    margin-top: 0.5rem; /* バナーとテキスト間の余白 */
    color: #222;
  }
}



/* =============================================================
    Page（news.css）お知らせ一覧ページ
============================================================= */
/* newsList
------------------------------------------------------------- */

.p-newsList-title {
  padding-bottom: 1rem; /* スマホ ページタイトル下余白 */
  font-family: var(--font-en);
  font-size: 2.4rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .p-newsList-title {
    padding-bottom: 1rem; /* PC ページタイトル下余白 */
    font-size: 3.2rem;
  }
}



/* =============================================================
    Page（home.css）TOPページ各コンテンツタイトル
============================================================= */
.p-page-home {
  padding-bottom: 5.5rem;
}
@media screen and (min-width: 768px) {
  .p-page-home {
    padding-bottom: 10.5rem;
  }
}

/**
 * #p-homeSection
 */
.p-homeSection {
  display: block;
  padding-top: 5rem;
}
@media screen and (min-width: 768px) {
  .p-homeSection {
    padding-top: 9rem;
  }
}
.p-homeSection--bgOrange {
  margin-top: 5rem;
  padding-top: 3rem;
  padding-bottom: 4rem;
  background: #f5e3b5;
}
@media screen and (min-width: 768px) {
  .p-homeSection--bgOrange {
    margin-top: 9rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}
.p-homeSection__title {
  display: block;
  margin-bottom: 0.2rem; /* TOPページタイトル下余白 */
  font-family: var(--font-en);
  font-size: 2rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-homeSection__title {
    font-size: 3rem;
  }
}
.p-homeSection__subtitle {
  display: block;
  margin-bottom: 4rem; /* 各ページサブタイトル下余白 */
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-color: #666;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-homeSection__subtitle {
  font-size: 1.2rem;
  }
}


/* 共通：もっとみるボタン
------------------------------------------------------------- */
/**
 * #p-homeContentsUnderBtn
 */
.p-homeContentsUnderBtn {
  text-align: center;
  margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
  .p-homeContentsUnderBtn {
    margin-top: 4.5rem;
  }
}

.p-homeViewMoreBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: #fff;
  color: #000;
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  padding: 1.25rem 2rem;
  max-width: 200px;        /* 好みに応じて */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* テキストは中央寄せ */
.p-homeViewMoreBtn__label {
  flex: 1;
  text-align: center;
}

/* 矢印は右端に固定 */
.p-homeViewMoreBtn__arrow {
  flex-shrink: 0;
  margin-left: auto;
}

.p-homeViewMoreBtn:hover {
  background-color: #f5f5f5; /* うっすらグレーに変化 */
  color: #000;               /* 文字色そのまま */
  text-decoration: none;     /* 下線が付かないように */
}


/* 下記を入れておかないと、TOP新着情報とお知らせ一覧が崩れる
------------------------------------------------------------- */
/**
 * #p-homeNewsList
 */
.p-homeNewsList {
  display: block;
  width: 100%;
  border-top: 1px solid var(--color-gray);
}
.p-homeNewsList__item {
  display: block;
}
.p-homeNewsList-body {
  display: block;
  padding: 2.4rem 0 1.9rem;
  border-bottom: 1px solid var(--color-gray);
}
@media screen and (min-width: 768px) {
  .p-homeNewsList-body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 2rem 2.45rem;
  }
}
.p-homeNewsList-body__time {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.4rem;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .p-homeNewsList-body__time {
    width: 17rem;
    margin-bottom: 0;
    white-space: nowrap;
  }
}
.p-homeNewsList-body__title {
  display: block;
  font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
  .p-homeNewsList-body__title {
    max-width: calc(100% - 17rem);
  }
}
@media screen and (min-width: 768px) {
  .p-homeNewsList-body--link {
    transition: opacity 0.3s ease;
  }
  .p-homeNewsList-body--link:hover {
    opacity: var(--hover-opacity);
  }
}



/* =============================================================
    Page（faq.css）よくある質問（デフォルトページ）の項目間余白調整
============================================================= */
/* faq
------------------------------------------------------------- */
.p-page-faq .p-faq-description {
  padding: 0 0.5rem 2rem;
}



/* =============================================================
    Page（guide.css）お買い物ガイド（デフォルトページ）の項目間余白調整
============================================================= */
/* guide
------------------------------------------------------------- */
.p-page-guide .p-guide-description {
  padding: 0 0.5rem 2rem;
}



/* =============================================================
    Button（common.css）※カートボタン系
============================================================= */

/* Button
------------------------------------------------------------- */
.c-btn {
  display: inline-block;
  padding: 1.3rem;
  background-color: #00265f; /* カラー変更部分(デフォ：#58B8E2) */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.5rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.c-btn--white {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

.c-btn--gray {
  border-color: var(--color-gray-middle);
  background-color: var(--color-gray-middle);
}

.c-btn--gray-border {
  border-color: var(--color-gray-middle);
  background-color: var(--color-white);
  color: var(--color-gray-middle) !important;
}

.c-btn--gray-light {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
}

.c-btn--gray-middle {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-gray-dark) !important;
}

.c-btn--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
}

.c-btn--red-border {
  border-color: var(--color-red);
  background-color: var(--color-white);
  color: var(--color-red) !important;
}

.c-btn--border {
  border-color: #00265f; /* カラー変更部分 */
  background-color: var(--color-white);
  color: #00265f !important; /* カラー変更部分 */
}

@media (hover: hover) {
  .c-btn:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn:disabled {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
  cursor: default;
}

@media (hover: hover) {
  .c-btn:disabled:hover {
    opacity: 1;
  }
}

/**
 * #c-btn-progress
 */
.c-btn-progress {
  display: inline-block;
  padding: 2.1rem 1rem;
  width: 100%;
  background-color: #00265f; /* カラー変更部分 */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.8rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.c-btn-progress--white {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

.c-btn-progress--gray {
  border-color: var(--color-gray-middle);
  background-color: var(--color-gray-middle);
}

.c-btn-progress--gray-border {
  border-color: var(--color-gray-middle);
  background-color: var(--color-white);
  color: var(--color-gray-middle) !important;
}

.c-btn-progress--gray-light {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
}

.c-btn-progress--gray-middle {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-gray-dark) !important;
}

.c-btn-progress--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
}

.c-btn-progress--red-border {
  border-color: var(--color-red);
  background-color: var(--color-white);
  color: var(--color-red) !important;
}

.c-btn-progress--border {
  border-color: #00265f; /* カラー変更部分 */
  background-color: var(--color-white);
  color: #00265f !important; /* カラー変更部分 */
}

@media (hover: hover) {
  .c-btn-progress:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn-progress:disabled {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
  cursor: default;
}

@media (hover: hover) {
  .c-btn-progress:disabled:hover {
    opacity: 1;
  }
}

/**
 * #c-btn-fluid
 */
.c-btn-fluid {
  display: inline-block;
  padding: 1.3rem;
  width: 100%;
  margin: 0 auto;
  background-color: #00265f; /* カラー変更部分 */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.5rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.c-btn-fluid--white {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

.c-btn-fluid--gray {
  border-color: var(--color-gray-middle);
  background-color: var(--color-gray-middle);
}

.c-btn-fluid--gray-border {
  border-color: var(--color-gray-middle);
  background-color: var(--color-white);
  color: var(--color-gray-middle) !important;
}

.c-btn-fluid--gray-light {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
}

.c-btn-fluid--gray-middle {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-gray-dark) !important;
}

.c-btn-fluid--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
}

.c-btn-fluid--red-border {
  border-color: var(--color-red);
  background-color: var(--color-white);
  color: var(--color-red) !important;
}

.c-btn-fluid--border {
  border-color: #00265f; /* カラー変更部分 */
  background-color: var(--color-white);
  color: #00265f !important; /* カラー変更部分 */
}

@media (hover: hover) {
  .c-btn-fluid:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn-fluid:disabled {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
  cursor: default;
}

@media (hover: hover) {
  .c-btn-fluid:disabled:hover {
    opacity: 1;
  }
}

/**
 * #c-btn-cart
 */
.c-btn-cart {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.7rem;
  width: 100%;
  padding: 1.1rem 1rem 1.2rem;
  background-color: #00265f; /* カラー変更部分 */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.8rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

  .c-btn-cart::before {
    content: "";
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.9rem;
    margin-top: -0.2rem;
    background: url("../../assets/img/common/icon/icon-addCart-white.svg") center center no-repeat;
    background-size: 100% auto;
  }

@media (hover: hover) {
  .c-btn-cart:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn-cart--border {
  border-color: #00265f; /* カラー変更部分 */
  background-color: var(--color-white);
  color: #00265f !important; /* カラー変更部分 */
}

  .c-btn-cart--border::before {
    background: url("../../assets/img/common/icon/icon-addCart-blue.svg") center center no-repeat;
  }

.c-btn-cart--gray-border {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

  .c-btn-cart--gray-border::before {
    background: url("../../assets/img/common/icon/icon-addCart-gray.svg") center center no-repeat;
  }

.c-btn-cart:disabled {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  cursor: default;
}

@media (hover: hover) {
  .c-btn-cart:disabled:hover {
    opacity: 1;
  }
}

/**
 * #c-btn-fluid-bold
 */
.c-btn-fluid-bold {
  display: inline-block;
  padding: 1.3rem 0.8rem;
  width: 100%;
  margin: 0 auto;
  background-color: #00265f; /* カラー変更部分 */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.5rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.c-btn-fluid-bold--white {
  border-color: var(--color-gray-dark);
  background-color: var(--color-white);
  color: var(--color-gray-dark) !important;
}

.c-btn-fluid-bold--gray {
  border-color: var(--color-gray-middle);
  background-color: var(--color-gray-middle);
}

.c-btn-fluid-bold--gray-border {
  border-color: var(--color-gray-middle);
  background-color: var(--color-white);
  color: var(--color-gray-middle) !important;
}

.c-btn-fluid-bold--gray-light {
  border-color: var(--color-gray-light);
  background-color: var(--color-gray-light);
  color: var(--color-gray-middle) !important;
}

.c-btn-fluid-bold--gray-middle {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-gray-dark) !important;
}

.c-btn-fluid-bold--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
}

.c-btn-fluid-bold--red-border {
  border-color: var(--color-red);
  background-color: var(--color-white);
  color: var(--color-red) !important;
}

.c-btn-fluid-bold--border {
  border-color: #00265f; /* カラー変更部分 */
  background-color: var(--color-white);
  color: #00265f !important; /* カラー変更部分 */
}

@media (hover: hover) {
  .c-btn-fluid-bold:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn-fluid-bold:disabled {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  color: var(--color-white) !important;
  cursor: default;
}

@media (hover: hover) {
  .c-btn-fluid-bold:disabled:hover {
    opacity: 1;
  }
}

/**
 * #c-btn-favorit
 */
.c-btn-favorit {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
  width: 100%;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-middle);
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-gray-middle) !important;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

  .c-btn-favorit::before {
    content: "";
    width: 2.3rem;
    height: 2rem;
    background: url("../../assets/img/product/icon_button_favorite.svg") center center no-repeat;
    background-size: 100% auto;
  }

.c-btn-favorit--active::before {
  background: url("../../assets/img/product/icon_button_favorite_active.svg") center center no-repeat;
}

@media screen and (min-width: 768px) {
  .c-btn-favorit {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .c-btn-favorit:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

/**
 * #c-btn-anchor
 */
.c-btn-anchor {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
  width: 100%;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-middle);
  border-radius: 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-gray-middle) !important;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

@media screen and (min-width: 768px) {
  .c-btn-anchor {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .c-btn-anchor:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

/**
 * #c-btn-cartdown
 */
.c-btn-cartdown {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 1.4rem;
  width: 100%;
  padding: 2.1rem 1rem;
  background-color: #00265f; /* カラー変更部分 */
  border: 1px solid #00265f; /* カラー変更部分 */
  border-radius: 0.8rem;
  color: var(--color-white) !important;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.c-btn-cartdown::before {
  content: "";
  flex-shrink: 0;
  width: 2.3rem;
  height: 1.8rem;
  margin-top: -0.2rem;
  background: url("../../assets/img/common/icon/icon-downCart-white.svg") center center no-repeat;
  background-size: 100% auto;
}

@media (hover: hover) {
  .c-btn-cartdown:hover {
    opacity: var(--hover-opacity);
    transition: opacity var(--transition-default);
  }
}

.c-btn-cartdown--gray {
  border-color: var(--color-gray-middle);
  background-color: var(--color-gray-middle);
}

.c-btn-cartdown--red {
  border-color: var(--color-red);
  background-color: var(--color-red);
}

.c-btn-cartdown:disabled {
  border-color: var(--color-gray);
  background-color: var(--color-gray);
  cursor: default;
}

@media (hover: hover) {
  .c-btn-cartdown:disabled:hover {
    opacity: 1;
  }
}



/* Page Product Detail（productDetail.css）※キャンペーンアイコン
------------------------------------------------------------- */
/* =============================================================
    Component
============================================================= */

/*  p-productDetaiMain（c-product-sIcon__item部分）
------------------------------------------------------------- */
.p-productDetaiMain {
  display: block;
  padding: 3rem 0 4.5rem;
}

@media screen and (min-width: 768px) {
  .p-productDetaiMain {
    padding: 0;
  }
}

.p-productDetaiMain-head {
  padding: 0 1.5rem 2.4rem;
}

@media screen and (min-width: 768px) {
  .p-productDetaiMain-head {
    padding: 0 0 4.6rem;
  }
}

.p-productDetaiMain-head.p-productDetaiMain-title {
  padding-bottom: 0;
}

.p-productDetaiMain-head__status {
  margin-bottom: 1.3rem;
}

  .p-productDetaiMain-head__status .c-product-sIcon {
    gap: 0.2rem 0.4rem;
  }

  .p-productDetaiMain-head__status .c-product-sIcon__item {
    font-size: 1.3rem;
    width: 6.5rem;
  }

  .p-productDetaiMain-head__status .c-sIcon {
    padding: 0.4rem 0.6rem 0.35rem;
  }


/* =============================================================
    商品ページ詳細（productDetail.css）
============================================================= */

/* バリエーション画像部分
------------------------------------------------------------- */

.c-productSkuImgSelect-selectList__image {
  cursor: default;
  pointer-events: none; /* 完全にクリック不可にする */
}



/* =============================================================
    商品ページ詳細（productDetail.css）！アイコン追加
============================================================= */

/*  p-productDetaiMain
------------------------------------------------------------- */

.p-productDetaiMain-head-utilities__item--caution::before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  transform: translateY(-0.1rem);
  background: url("../../assets/img/common/icon/icon-circle-caution.svg") center center no-repeat;
  background-size: 100% auto;
  align-self: start;
}



/* =============================================================
    コンテンツページ用（共通部分）
============================================================= */

/* ボタンラップ（中央寄せ） */
.c-SignInBtn_wrap,
.c-LineEntryBtn_wrap,
.c-GuideBtn_wrap,
.c-homeBackBtn_wrap {
  text-align: center;
  margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
  .c-SignInBtn_wrap,
  .c-LineEntryBtn_wrap,
  .c-GuideBtn_wrap,
  .c-homeBackBtn_wrap {
    margin-top: 4.5rem;
  }
}

/* -------------------------------------------------------------
   ボタン共通設定（フレックス方式）
------------------------------------------------------------- */
.c-SignInBtn,
.c-LineEntryBtn,
.c-GuideBtn,
.c-homeBackBtn {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ラベル中央・矢印右端 */
  border-radius: 0;
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  padding: 1.25rem 2rem;
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

/* 新規会員登録 */
.c-SignInBtn {
  border: 1px solid #00265f;
  background-color: #00265f;
  color: #fff;
}
.c-SignInBtn__label { flex:1; text-align:center; color:#fff; }
.c-SignInBtn__arrow { flex-shrink:0; margin-left:auto; color:#fff; }
.c-SignInBtn:hover { background-color: #29456f; color:#fff; }

/* LINE追加 */
.c-LineEntryBtn {
  border: 1px solid #06c655;
  background-color: #06c655;
  color: #fff;
}
.c-LineEntryBtn__label { flex:1; text-align:center; color:#fff; }
.c-LineEntryBtn__arrow { flex-shrink:0; margin-left:auto; color:#fff; }
.c-LineEntryBtn:hover { background-color: #3fcf91; color:#fff; }

/* お買い物ガイド */
.c-GuideBtn {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #222;
}
.c-GuideBtn__label { flex:1; text-align:center; color:#222; }
.c-GuideBtn__arrow { flex-shrink:0; margin-left:auto; color:#222; }
.c-GuideBtn:hover { background-color: #f5f5f5; color:#222; }

/* 一覧へ戻る */
.c-homeBackBtn {
  border: 1px solid #ccc;
  background-color: #fff;
  color: #222;
}
.c-homeBackBtn__label { flex:1; text-align:center; color:#222; }
.c-homeBackBtn__arrow { flex-shrink:0; margin-left:auto; color:#222; }
.c-homeBackBtn:hover { background-color: #f5f5f5; color:#222; }


/* 一覧へ戻るボタン上の線 */
.c-homeBackBtn_line {
  border: none;               /* デフォルト線を消す */
  height: 1px;                /* 線の太さ */
  background-color: #999999;     /* 線の色 */
  width: 100%;
  margin: 5rem auto 4rem;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .c-homeBackBtn_line {
    border: none;               /* デフォルト線を消す */
    height: 1px;                /* 線の太さ */
    background-color: #999999;     /* 線の色 */
    width: 100%;
    margin: 5rem auto 5rem;
  }
}

/* -------------------------------------------------------------
   特集ページセクション共通
------------------------------------------------------------- */

/* --------------------------
   グローバルbox-sizing
--------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 本文専用コンテナ（PCで中央寄せ） */
.c-featureSection .l-container__narrow {
  max-width: 72rem;  /* 約1152pxで中央寄せ */
  width: 100%;
  margin: 0 auto;    /* 中央寄せ */
  /* padding: 0 1rem;  左右の余白 */
  box-sizing: border-box;
}

/* スマホは全幅表示 */
@media screen and (max-width: 767px) {
  .c-featureSection .l-container__narrow {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* --------------------------
   メイン画像余白（featurePage.css）
--------------------------- 

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .s-featureContent-item__headerImage {
  width: 80%;
  margin: 0 auto -3rem;
  }
}
/* --------------------------
   上に戻るボタン
--------------------------- */
.back-to-top {
  position: fixed;
  bottom: 2rem;           /* 下からの距離 */
  right: 2rem;            /* 右からの距離 */
  width: 5rem;          /* ボタンの横幅 */
  height: 5rem;         /* ボタンの高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #f8e9e5; /* 背景色 */
  border-radius: 50%;        /* 丸型 */
  z-index: 1000;
  transition: transform 0.3s, background-color 0.3s;
}

/* ホバー時の演出 */
.back-to-top:hover {
  background-color: #e6cfc9; /* 少し濃いめ */
  transform: translateY(-3px);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .back-to-top {
    width: 4.5rem;
    height: 4.5rem;
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* --------------------------
   テキスト部分大枠
--------------------------- */

.c-featureSection {
  padding: 1rem 0 1rem 0;
}

/* --------------------------
   大見出し（上下線入り）
--------------------------- */
.c-featureMainTitle {
  position: relative;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 auto 4rem; /* セクション上下の余白 */
  color: #222;
  padding: 2rem 0; /* 線と文字の間に余白を追加 */
}

.c-featureMainTitle::before,
.c-featureMainTitle::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #999999;
  position: absolute;
  left: 0;
}

.c-featureMainTitle::before {
  top: 0; /* 上線 */
}

.c-featureMainTitle::after {
  bottom: 0; /* 下線 */
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .c-featureMainTitle {
    font-size: 2rem;
    margin: 3rem 0;
    padding: 1.5rem 0; /* スマホでも余白を調整 */
  }
}


/* --------------------------
   縦棒付き小見出し
--------------------------- */
.c-featureTitle {
  display: flex;
  align-items: center;       /* 縦方向を中央揃え */
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 3rem;          /* 前の要素との間隔 */
  margin-bottom: 3rem;       /* 次の要素との間隔 */
  color: #222;
  flex-wrap: wrap;           /* 文字が長い場合は改行対応 */
}

.c-featureTitle__bar {
  display: inline-block;
  width: 0.5rem;             /* PC時の太さ */
  height: 1.2em;             /* 文字サイズに連動 */
  background-color: #00265f;
  margin-right: 1rem;        /* 文字との間隔 */
  flex-shrink: 0;            /* 縦棒を縮小させない */
}

.c-featureTitle__text {
  line-height: 1.2;
  flex: 1;                   /* 残りの幅を文字が占有 */
  min-width: 0;              /* 複数行の折り返し対応 */
}

@media screen and (max-width: 767px) {
  .c-featureTitle {
    font-size: 2rem;       /* フォントサイズを小さく */
    margin: 3rem 0;
  }

  .c-featureTitle__bar {
    width: 0.4rem;           /* スマホは少し細く */
    height: 1.2em;           /* 文字サイズに連動 */
    margin-right: 0.8rem;    /* 文字との間隔を少し狭く */
  }
}


/* --------------------------
   背景付き小見出し1
--------------------------- */

.c-subTitle {
  display: inline-block;       /* 背景を文字サイズに合わせる場合 */
  font-size: 1.6rem;
  font-weight: bold;
  color: #00265f;                 /* 文字色 */
  background-color: #deedf2;   /* 背景色 */
  padding: 0.2rem 0.5rem;      /* 上下左右の余白で背景を囲む */
  margin: 2rem 0 1rem;         /* 上下に余白を付ける */
}


/* --------------------------
   通常テキスト用1
--------------------------- */

.c-featureText {
  font-size: 1.4rem;
  line-height: 1.6;       /* 行間 */
  color: #222;             /* 文字色 */
  margin-top: 1rem;        /* 小見出しとの間隔 */
  margin: 1rem 0 8rem;     /* 上下の余白を統一 */
}

@media screen and (max-width: 767px) {
  .c-featureText {/
    margin-top: 1rem;        /* 小見出しとの間隔 */
    margin: 1rem 0 6rem;     /* 上下の余白を統一 */
  }
}


/* --------------------------
   1枚画像用
--------------------------- */

/* 画像 */
.c-benefit-item1 img {
  max-width: 100%;
  margin: 0 auto 3rem;
  display: block;
}

@media screen and (max-width: 767px) {
  .c-benefit-item1 img {
    max-width: 100%;
    margin: 0 auto 3rem;
    display: block;
  }
}

/* --------------------------
   1枚画像用（余白少なめ）
--------------------------- */

/* 画像 */
.c-benefit-item0 img {
  max-width: 100%;
  margin: 0 auto 1rem;
  display: block;
}

@media screen and (max-width: 767px) {
  .c-benefit-item0 img {
    max-width: 100%;
    margin: 0 auto 0.5rem;
    display: block;
  }
}

/* --------------------------
   特集ページ用キャンペーンボックス
--------------------------- */
.campaign-box {
  border: 1px solid #222;    /* 枠線 */
  background: #fff;       /* 背景色 */
  padding: 1rem 2rem 4rem;
  margin: 2rem 0;
  box-sizing: border-box;
}

.campaign-box__title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: #222;
  text-align: center;
}

.campaign-box__text {
  font-size: 1.4rem;
  color: #222;
  line-height: 1.6;
  text-align: left;
}

.campaign-box__em {
  color: #d25449;   /* 文字色 */
  font-weight: 600;
}
ｓ
@media screen and (max-width: 768px) {
  .campaign-box {
    padding: 0.5rem 2rem 3rem;
    margin: 2rem 0;
  }
  .campaign-box__title {
    font-size: 1.6rem;
  }
  .campaign-box__text {
    font-size: 1.4rem;
  }
}


/* --------------------------
   特集ページ用▼矢印 + 余白
--------------------------- */
/* 横長矢印 */
.c-triangle-long {
  width: 0;
  height: 0;
  border-left: 7rem solid transparent;
  border-right: 7rem solid transparent;
  border-top: 3rem solid #abd548;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem; /* 矢印下の余白 */
  position: relative;
  z-index: 1;
}

/* 余白調整用 */
.c-feature__space {
  height: 2rem; /* PC時 */
}

/* スマホ対応 */
@media (max-width: 768px) {
  .c-triangle-long {
    border-left: 3.5rem solid transparent;
    border-right: 3.5rem solid transparent;
    border-top: 2rem solid #abd548;
    margin-bottom: 0.8rem;
  }

/* 余白調整用 */
  .c-feature__space {
    height: 1.5rem;
  }
}


/* --------------------------
   会員登録/ベネフィット画像
--------------------------- */

/* コンテナ：常に2カラムレイアウト */
.c-benefit-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 常に2カラム */
  gap: 3.5rem; /* カード間の余白 */
  max-width: 80rem;
  margin: 0 auto 7rem;
/*   padding: 0 1rem; */
  box-sizing: border-box;
}

/* 各アイテム */
.c-benefit-item2 {
  text-align: center;
/*   padding: 0.7rem; */
  box-sizing: border-box;
}

/* 画像 */
.c-benefit-item2 img {
  max-width: 100%;
  margin: 0 auto 0.75rem;
  display: block;
}

/* サブ見出し */
.c-benefit-item2 h4 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #222;
}

/* 本文 */
.c-benefit-item2 p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: #222;
  margin: 0;
}

/* スマホ用の微調整 */
@media screen and (max-width: 767px) {
  .c-benefit-wrap {
    gap: 2rem;
    max-width: 100%;
    margin: 0 auto 5rem;
    padding: 0;
  }

  .c-benefit-item2 {
    text-align: center;
    padding: 0.1rem;
    box-sizing: border-box;
  }

  .c-benefit-item2 img {
    max-width: 80%;
    margin-bottom: 0.5rem;
  }

  .c-benefit-item2 h4 {
    font-size: 1.6rem;
  }

  .c-benefit-item2 p {
    font-size: 1.4rem;
  }
}


/* --------------------------
   FAQ（よくある質問）ページ用
--------------------------- */

/* セクション説明文 */
.c-faq-section-desc {
  font-size: 1.4rem;
  color: #222;
  margin-bottom: 4rem;
  line-height: 1.6;
}

/* 小見出し */
.c-faq-subtitle {
  font-size: 2rem;
  margin: 2rem 0 3rem 0;
  font-weight: 600;
  color: #222;
  border-bottom: 0.0625rem solid #ddd; /* 線の太さと色 */
  padding-bottom: 1rem;               /* 線と文字の間隔 */
}

/* 目次リンク */
.c-faq-links {
  text-align: center; /* 親要素で中央寄せ */
  margin-bottom: 8rem; /* 下の余白を少し広く */
  display: flex;
  justify-content: center; /* フレックスで中央揃え */
  flex-wrap: wrap; /* スマホで折り返す場合に対応 */
  gap: 2rem; /* ボタン間の余白を簡単に設定 */
}

.c-faq-links a {
  display: inline-block;
  padding: 1.25rem 5rem;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  color: #222;
  border: 0.1rem solid #ccc;
  transition: background-color 0.3s;
/*   border-radius: 0.25rem; ボタンの角丸 */
}

.c-faq-links a:hover {
  background-color: #f5f5f5;
}

/* FAQセクション */
.c-faq-section {
  max-width: 100%;
  margin: 1rem auto;
  font-family: 'Noto Sans JP', sans-serif;
  padding: 0 1rem;
}

.c-faq-item {
  border-bottom: 0.0625rem solid #ddd;
  margin-bottom: 2.5rem;
}

/* チェックボックス非表示 */
.c-faq-checkbox {
  display: none;
}

/* -------------------
   質問部分（Q）
------------------- */
.c-faq-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.2rem;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.6;
}

.c-faq-header .c-faq-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* + / - トグル */
.c-faq-toggle {
  margin-left: auto;
  font-weight: bold;
  font-size: 2rem;
}

.c-faq-toggle::after {
  content: "＋";
  display: inline-block;
  transition: transform 0.3s ease;

  font-size: 2rem; /* ← ここでサイズ調整 */
  font-weight: bold; /* 必要に応じて太さも変更 */
  line-height: 1;    /* 高さをテキストに合わせる */
}

/* -------------------
   回答部分（A）
------------------- */
.c-faq-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-faq-body .c-faq-content {
  display: flex;
  align-items: flex-start; /* アイコンをテキストの上に */
  gap: 1rem;
  padding: 1rem 0;
  line-height: 1.6;
}

.c-faq-body .c-faq-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* チェックされたら開く */
.c-faq-checkbox:checked + .c-faq-header + .c-faq-body {
  max-height: 3000px;
  padding: 1rem 1rem;
}

/* + → - 表示切替 */
.c-faq-checkbox:checked + .c-faq-header .c-faq-toggle::after {
  content: "－";
}

/* -------------------
   PC版微調整：アイコン中央揃え
------------------- */
@media screen and (min-width: 768px) {
  .c-faq-header .c-faq-icon,
  .c-faq-body .c-faq-icon {
    /* SVGの余白があれば微調整 */
    margin-top: 2rem 0; /* 必要に応じて微調整 */
  }
}

/* -------------------
   レスポンシブ対応
------------------- */
@media screen and (max-width: 767px) {
  .c-faq-section {
    max-width: 100%;
    padding: 0 0.5rem;
  }

  .c-faq-header {
    font-size: 1.4rem;
    padding: 1rem 0.2rem;
  }

  .c-faq-header .c-faq-icon {
    width: 2rem;
    height: 2rem;
  }

  .c-faq-toggle {
    font-size: 1.4rem;
  }

  .c-faq-body {
    padding: 0.4rem 1rem;
    max-height: 0;
  }

  .c-faq-body .c-faq-content {
    gap: 0.5rem;
    align-items: flex-start; /* 中央ではなく上揃えに */
    padding: 0.6rem 0;
  }

  .c-faq-body .c-faq-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.2em; /* テキストとの高さを微調整 */
  }

  .c-faq-checkbox:checked + .c-faq-header + .c-faq-body {
    max-height: 1200px;
    padding: 0.75rem 1rem;
  }

  .c-faq-subtitle {
    font-size: 1.8rem;
    margin: 2rem 0 2rem 0;
    border-bottom: 0.1rem solid #ddd; /* 線の太さと色 */
    padding-bottom: 1rem;               /* 線と文字の間隔 */
  }

  .c-faq-links {
    display: flex;
    flex-wrap: wrap;        /* 横並び＋折り返し可 */
    justify-content: center; /* 中央揃え */
    gap: 1rem;              /* ボタン間の余白 */
    margin-bottom: 8rem;
  }

  .c-faq-links a {
    flex: 0 0 calc(50% - 0.5rem); /* 横幅を50% gap分 */
    max-width: 200px;              /* 任意で最大幅を設定 */
    padding: 1rem 0.5rem;          /* 押しやすい高さに調整 */
    text-align: center;
    box-sizing: border-box;
  }

  /* FAQセクション */
  .c-faq-section {
    max-width: 100%;
    margin: 1rem auto;
    font-family: 'Noto Sans JP', sans-serif;
    /* padding: 0 1rem; */
  }

  .c-faq-item {
    border-bottom: 0.1rem solid #ddd;
    margin-bottom: 1rem;
  }
}

/* -------------------
   アンカーリンク調整
------------------- */
/* PC用 */
@media screen and (min-width: 768px) {
  .c-faq-subtitle::before {
    content: "";
    display: block;
    height: 15rem;       /* ヘッダー高さ120px */
    margin-top: -15rem; /* 微調整：少し上にずらす */
    visibility: hidden;
  }
}

/* スマホ用 */
@media screen and (max-width: 767px) {
  .c-faq-subtitle::before {
    content: "";
    display: block;
    height: 13rem;        /* スマホヘッダー＋余白に合わせる */
    margin-top: -13rem;   /* 微調整済み */
    visibility: hidden;
  }
}


/* --------------------------
   定期便ページ用
--------------------------- */

/* 目次全体 */
.toc {
  padding: 2rem 3rem; /* PC用余白 */
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 1.4rem;      /* フォントサイズ拡大 */
  line-height: 1.8;
  margin-bottom: 6rem;
  background-color: #f0f8ff; /* 薄背景 */
}

/* 目次タイトル */
.toc h3 {
  font-size: 1.8rem;    /* タイトルを大きく */
  font-weight: bold;
  color: #222;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem solid #00265f; /* 下線 */
}

/* リスト */
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter; /* カウンター初期化 */
}

/* 各項目 */
.toc li {
  counter-increment: toc-counter; /* 番号を進める */
  margin-bottom: 1.5rem;
}

/* リンク前に番号を追加 */
.toc li a::before {
  content: counter(toc-counter, decimal-leading-zero) ". ";
  font-weight: bold;      /* 番号だけ太字 */
  color: #00265f;
  margin-right: 0.25em;
  font-size: 1.4rem;        /* 番号も大きく */
  transition: color 0.3s; /* 番号もホバーで色変化 */
}

/* リンク装飾 */
.toc a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  transition: color 0.3s;
  font-size: 1.4rem;        /* テキストも大きく */
}

/* ホバー時に番号とテキストを薄く */
.toc a:hover,
.toc a:hover::before {
  color: #999; /* 薄いグレーに変更 */
}

section {
  scroll-margin-top: 15rem; /* ヘッダーの高さ分調整 */
}


/* スマホ用 */
@media screen and (max-width: 768px) {
  .toc {
    padding: 1rem 2rem; 
    font-size: 0.875rem;   /* 少し控えめ */
  }
  .toc h3 {
    font-size: 1.6rem;    /* スマホ用タイトルサイズ */
    margin: 1rem auto 3rem;
  }
  .toc li a {
    font-size: 1.4rem;   /* スマホ用リンクサイズ */
  }
  .toc li {
    margin-bottom: 2rem;
  }
  section {
    scroll-margin-top: 13rem; /* ヘッダーの高さ分調整 */
  }
}



/* --------------------------
   背景付き小見出し2
--------------------------- */

.c-subTitle2 {
  display: inline-block;       /* 背景を文字サイズに合わせる場合 */
  font-size: 1.6rem;
  font-weight: bold;
  color: #00265f;                 /* 文字色 */
  background-color: #deedf2;   /* 背景色 */
  padding: 0.2rem 0.5rem;      /* 上下左右の余白で背景を囲む */
  margin: 2rem 0 1rem;         /* 上下に余白を付ける */
}


/* --------------------------
   定期便通常テキスト用2
--------------------------- */

/* 背景付き小見出し2 */
.c-subTitle__teiki {
  display: inline-block;       /* 背景を文字サイズに合わせる場合 */
  font-size: 1.6rem;
  font-weight: bold;
  color: #00265f;                 /* 文字色 */
  background-color: #deedf2;   /* 背景色 */
  padding: 0.2rem 0.5rem;      /* 上下左右の余白で背景を囲む */
  margin: 1rem auto 1rem;         /* 上下に余白を付ける */
}

/* 冒頭あいさつ文 */
.c-featureText__center {
  font-size: 1.4rem;
  line-height: 1.6;       /* 行間 */
  color: #222;             /* 文字色 */
  text-align: center;
  margin-top: 1rem;        /* 小見出しとの間隔 */
  margin: 0 auto 4rem;     /* 上下の余白を統一 */
}

/* 説明文　余白大 */
.c-featureText__teiki {
  font-size: 1.4rem;
  line-height: 1.6;       /* 行間 */
  color: #222;             /* 文字色 */
  margin-top: 1rem;        /* 小見出しとの間隔 */
  margin: 0 auto 8rem;     /* 上下の余白を統一 */
}

/* 説明文　余白小 */
.c-faq-section-desc__teiki {
  font-size: 1.4rem;
  color: #222;
  margin-bottom: 2rem;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .c-subTitle__teiki {
    display: inline-block;       /* 背景を文字サイズに合わせる場合 */
    font-size: 1.6rem;
    font-weight: bold;
    color: #00265f;                 /* 文字色 */
    background-color: #deedf2;   /* 背景色 */
    padding: 0.2rem 0.5rem;      /* 上下左右の余白で背景を囲む */
    margin: 1rem auto 1rem;         /* 上下に余白を付ける */
  }
  .c-featureText__center {
    text-align: center;
    margin-top: 1rem;        /* 小見出しとの間隔 */
    margin: 0 auto 3rem;     /* 上下の余白を統一 */
  }
  .c-featureText__teiki {
    margin-top: 1rem;        /* 小見出しとの間隔 */
    margin: 0 auto 6rem;     /* 上下の余白を統一 */
  }

  .c-faq-section-desc__teiki {
    margin-bottom: 1rem;
  }
}