/*---------------------------------
  扇屋 override.css
  FutureShop custom.css への上書き用（見た目改修）
  !important は極力使わない（詳細度で上書き）

  目次
  1. 共通（余白など）
  2. ヘッダー（バー・ロゴ・アイコン・ハンバーガー）
  3. PC横ナビ（ドロップダウン）
  4. ハンバーガー／ワイドメニュー
  5. FVキャッチ
  6. TOPおすすめ
  7. TOPカテゴリ
  8. TOPその他（ギフト・店舗・ニュース・見出しなど SP）
  9. 商品一覧／カテゴリ一覧
  10. フッター（PCカテゴリ階層）
  11. 商品詳細
---------------------------------*/


/* ==========================================================================
   1. 共通（余白など）
   ========================================================================== */

@media screen and (max-width: 767px) {
  .fs-l-main,
  .rayout-base,
  .fv-image.sp .front-news,
  .front-news {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    max-width: none;
    width: 100%;
  }

  .fv-image.sp,
  .fv-image.sp .fade-slider,
  .front-gift .image,
  .front-gift .image img {
    width: 100%;
    max-width: none;
  }

  .front-gift .image {
    margin-left: 0;
    margin-right: 0;
  }
}


/* ==========================================================================
   2. ヘッダー（バー・ロゴ・アイコン・スクロール非表示）
   ※ custom.css が後読みのため、競合する位置・blend・≡は上書きを明示
   ========================================================================== */

/* PCでも旧フローティングSNS/コピーは非表示（新ヘッダーバーと干渉） */
body .header-sns,
body .header-copy {
  display: none !important;
}

@media screen and (min-width: 768px) {
  /* ヘッダー背景バー */
  .custom-header::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px;
    background: #eee;
    z-index: 990;
    pointer-events: none;
  }

  /* 固定ヘッダーはレイアウト幅を持たないため、下に続くコンテンツを退避 */
  body.fs-body-category .category-fv {
    margin-top: 88px;
    box-sizing: border-box;
  }

  body .header-logo,
  body .header-menu,
  body .header-nav {
    mix-blend-mode: normal !important;
    color: #000;
    background: transparent;
  }

  body .header-logo {
    top: 10px !important;
    left: 40px !important;
    right: auto !important;
    width: auto !important;
    z-index: 1000;
  }

  body .header-logo a img {
    height: 72px !important;
    width: auto !important;
    max-width: none !important;
    /* 白SVGを黒表示（デザイン準拠） */
    filter: brightness(0);
  }

  body .header-menu {
    top: 28px !important;
    right: 40px !important;
    left: auto !important;
    width: auto !important;
    display: flex !important;
    /* DOMは公開版どおり open-menu → ul。見た目はカート…× のため反転 */
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 22px;
    z-index: 1000;
  }

  body .header-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none !important;
  }

  body .header-menu a img {
    width: 22px !important;
    height: auto !important;
    filter: brightness(0);
  }

  body .header-open-menu {
    margin: 0 !important;
  }

  body .header-open-menu .button {
    height: 16px !important;
    width: 22px !important;
  }

  body .header-open-menu .button span {
    background: #000 !important;
  }
}

@media screen and (min-width: 900px) {
  body .header-logo {
    left: 24px !important;
  }

  body .header-menu {
    right: 24px !important;
    gap: 16px;
  }

  body .header-menu ul {
    gap: 16px;
  }
}

@media screen and (min-width: 1100px) {
  body .header-logo {
    left: 40px !important;
  }

  body .header-menu {
    right: 40px !important;
    gap: 22px;
  }

  body .header-menu ul {
    gap: 22px;
  }
}

@media screen and (min-width: 1280px) {
  body .header-logo {
    left: 48px !important;
  }

  body .header-menu {
    right: 48px !important;
  }
}

@media screen and (min-width: 1401px) {
  body .header-logo {
    left: 56px !important;
  }

  body .header-menu {
    right: 56px !important;
  }
}

/* SP：ロゴ左・アイコン横並び（PC寄せ） */
@media screen and (max-width: 767px) {
  .custom-header::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: #eee;
    z-index: 990;
    pointer-events: none;
  }

  body .header-logo,
  body .header-menu {
    mix-blend-mode: normal !important;
    color: #000;
    background: transparent;
  }

  body .header-logo {
    top: 10px !important;
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    z-index: 1000;
  }

  body .header-logo a img {
    max-width: none !important;
    height: 36px !important;
    width: auto !important;
    filter: brightness(0);
  }

  body .header-menu {
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center;
    gap: 16px;
    z-index: 1000;
  }

  body .header-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: none !important;
  }

  body .header-menu a img {
    max-width: none !important;
    width: 20px !important;
    height: auto !important;
    filter: brightness(0);
  }

  body .header-open-menu {
    margin: 0 !important;
  }

  body .header-open-menu .button {
    height: 14px !important;
    width: 20px !important;
  }

  body .header-open-menu .button span {
    background: #000 !important;
  }

  body .header-open-menu .button span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 5px)) !important;
  }

  body .header-open-menu .button span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 5px)) !important;
  }
}

/* ヘッダー下の電話ボタン */
.header-tel {
  position: fixed;
  z-index: 1001;
  display: block;
  right: 0;
  line-height: 0;
}
.header-tel img {
  display: block;
  width: 100%;
  height: auto;
}
.header-tel:focus-visible {
  outline: 3px solid #1f5da0;
  outline-offset: 3px;
}
body:has(.header-open-menu .button.active) .header-tel {
  visibility: hidden;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .header-tel {
    top: 75px;
    width: 280px;
  }
}

@media screen and (max-width: 767px) {
  .header-tel {
    top: 50px;
    width: 40%;
  }
}


/* ハンバーガー：縦線3本 → 横線3本（≡） ※custom.css後読み対策 */
body .header-open-menu .button {
  position: relative;
}

body .header-open-menu .button span {
  width: 100% !important;
  height: 1px !important;
  top: 50% !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body .header-open-menu .button span:nth-child(1) {
  margin-left: 0 !important;
  transform: translate(-50%, calc(-50% - 6px)) !important;
}

body .header-open-menu .button span:nth-child(3) {
  margin-left: 0 !important;
  transform: translate(-50%, calc(-50% + 6px)) !important;
}

body .header-open-menu .button.active span:nth-child(1) {
  margin-left: 0 !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

body .header-open-menu .button.active span:nth-child(2) {
  opacity: 0 !important;
}

body .header-open-menu .button.active span:nth-child(3) {
  margin-left: 0 !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}


/* ==========================================================================
   3. PC横ナビ（ドロップダウン）
   ========================================================================== */

.header-nav {
  display: none;
}

.header-page-menu {
  display: none;
}

@media screen and (min-width: 768px) {
  /* 〜899px: 横ナビ非表示（ハンバーガーへ） */
  .header-nav {
    display: none;
  }

  /* 旧縦メニューは非表示（横ナビへ移行） */
  .header-page-menu {
    display: none;
  }
}

/* 900px〜: 横ナビ表示。ロゴ〜右アイコンの間に収めて重なり防止 */
@media screen and (min-width: 900px) {
  .header-nav {
    position: fixed;
    top: 0;
    left: 110px;
    right: 170px;
    transform: none;
    z-index: 995;
    height: 88px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    overflow: visible;
  }

  .header-nav__list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    writing-mode: horizontal-tb;
    max-width: 100%;
    height: 100%;
  }

  .header-nav__item {
    position: relative;
    margin: 0;
    flex-shrink: 1;
    display: flex;
    align-items: stretch;
    height: 100%;
  }

  .header-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
    height: 100%;
  }

  .header-nav__item:hover > .header-nav__link,
  .header-nav__item.is-active > .header-nav__link,
  .header-nav__item.is-open > .header-nav__link {
    border-bottom-color: #000;
  }

  .header-nav__chevron {
    display: inline-block;
    width: 9px;
    height: 5px;
    margin-left: 2px;
    flex-shrink: 0;
    vertical-align: middle;
    color: #000;
  }

  /* ドロップダウン：ヘッダー下端に密着・親テキスト左揃え */
  .header-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    transform: none;
    min-width: 17em;
    margin: 0;
    padding: 28px 32px 32px;
    list-style: none;
    background: #fff;
    box-shadow: none;
    border: none;
    writing-mode: horizontal-tb;
    text-align: left;
    z-index: 1010;
    column-gap: 28px;
    row-gap: 14px;
  }

  .header-nav__item:hover > .header-nav__sub,
  .header-nav__item.is-open > .header-nav__sub {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    align-content: start;
  }

  .header-nav__sub-item {
    margin: 0;
    break-inside: avoid;
  }

  .header-nav__sub-item a {
    display: block;
    padding: 2px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    background: transparent;
  }

  .header-nav__sub-item a::before {
    content: "-";
    margin-right: 0.25em;
  }

  .header-nav__sub-item a:hover {
    background: transparent;
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

@media screen and (min-width: 1100px) {
  .header-nav {
    left: 130px;
    right: 190px;
  }

  .header-nav__list {
    gap: 20px;
  }

  .header-nav__link {
    font-size: 14px;
    letter-spacing: 0.04em;
  }
}

@media screen and (min-width: 1280px) {
  .header-nav {
    left: 150px;
    right: 200px;
  }

  .header-nav__list {
    gap: 28px;
  }

  .header-nav__link {
    font-size: 15px;
    letter-spacing: 0.06em;
  }

  .header-nav__chevron {
    width: 10px;
    height: 6px;
    margin-left: 4px;
  }
}

@media screen and (min-width: 1401px) {
  .header-nav {
    left: 180px;
    right: 220px;
  }

  .header-nav__list {
    gap: 36px;
  }

  .header-nav__link {
    font-size: 16px;
  }
}

@media screen and (max-width: 767px) {
  .header-nav {
    display: none;
  }
}


/* ==========================================================================
   4. ハンバーガー／ワイドメニュー（menu.jpg 準拠）
   ========================================================================== */

.header-wide-menu {
  background: #ebebe9;
  z-index: 992;
  color: #000;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
}

/* メニュー開時は横ナビを隠す（ロゴ＋アイコン＋縦メニューのみ） */
body:has(.header-open-menu .button.active) .header-nav {
  visibility: hidden;
  pointer-events: none;
}

body:has(.header-open-menu .button.active) .custom-header::before {
  background: #ebebe9;
}

.header-wide-menu a {
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  text-orientation: mixed;
}

/* custom.css の scale(1.1,.9) を解除（メニュー文言のみ。問い合わせは公開版のまま） */
.header-wide-menu .header-wide-menu-genre li,
.header-wide-menu .header-wide-menu-about li,
.header-wide-menu .header-wide-menu-genre li a,
.header-wide-menu .header-wide-menu-about li a,
.header-wide-menu .header-wide-menu-genre__sub-item a {
  transform: none !important;
  transform-origin: unset;
  letter-spacing: 0.08em;
}

.header-wide-menu ul {
  writing-mode: vertical-rl;
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
}

.header-wide-menu ul li a {
  display: inline-block;
  padding: 0;
  text-orientation: upright;
}

/* --- ジャンル（右→左） --- */
.header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item {
  margin: 0 14px;
}

.header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item:first-child {
  margin-right: 0;
}

.header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item--gap {
  margin-left: 28px;
}

/* vertical-rl 内: flex column = block軸(右→左) → 親が右・サブが左 */
.header-wide-menu .header-wide-menu-genre__item--has-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 14px;
  margin-right: 14px;
}

.header-wide-menu .header-wide-menu-genre__item--has-sub.header-wide-menu-genre__item--gap {
  margin-left: 28px;
}

.header-wide-menu-genre__item--has-sub > a {
  flex-shrink: 0;
}

.header-wide-menu-genre__sub {
  display: flex;
  flex-direction: column;
  writing-mode: vertical-rl;
  list-style: none;
  margin: 0;
  /* .header-wide-menu ul { padding:0 } より詳細度を上げる */
  padding: 1.8em 0 0; /* 親より下から開始（物理top） */
  gap: 12px;
  margin-block-end: 14px; /* 親との水平間隔 */
}

.header-wide-menu-genre__sub-item {
  margin: 0 !important;
}

.header-wide-menu-genre__sub-item a {
  writing-mode: vertical-rl;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* SPアコーディオン用。PC縦書きメニューでは非表示 */
.header-wide-menu-genre__chevron {
  display: none;
}

/* --- アバウト（左グループ） --- */
.header-wide-menu-about {
  font-size: 16px;
  letter-spacing: 0.06em;
}

.header-wide-menu-about__item,
.header-wide-menu-about li {
  margin: 0 12px;
  position: relative;
}

.header-wide-menu-about__item--line,
.header-wide-menu-about li.line {
  padding-block-start: 20px;
  margin-right: 12px;
}

.header-wide-menu-about__item--line::before,
.header-wide-menu-about li.line::before {
  position: absolute;
  top: 4px;
  right: 0;
  content: "";
  width: 1px;
  height: 28px;
  background: #000;
}

/* page-menu 側も同構造 */
.header-page-menu-genre__item {
  margin: 0 14px;
}

.header-page-menu-genre__item--has-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  writing-mode: vertical-rl;
}

.header-page-menu-genre__sub {
  display: flex;
  flex-direction: column;
  writing-mode: vertical-rl;
  list-style: none;
  margin: 0;
  padding: 2.4em 0 0 !important;
  gap: 10px;
  margin-block-end: 12px;
}

.header-page-menu-genre__sub-item {
  margin: 0;
}

.header-page-menu-genre__sub-item a {
  writing-mode: vertical-rl;
  font-size: 16px;
  font-weight: 500;
  transform: none !important;
}

@media screen and (min-width: 768px) {
  .header-wide-menu-in {
    min-height: 100%;
    padding: 96px 48px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .header-wide-menu-list {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 48px;
  }

  .header-wide-menu-genre {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.1em;
    flex: 1;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item {
    margin: 0 16px;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item:first-child {
    margin-right: 0;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item--gap {
    margin-left: 32px;
  }

  ul.header-wide-menu-genre__sub {
    gap: 14px;
    margin-block-end: 16px;
    margin-top: 20px;
  }

  .header-wide-menu-genre__sub-item a {
    font-size: 16px;
  }

  .header-wide-menu-about {
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
  }

  .header-wide-menu .header-wide-menu-about > li {
    margin: 0 14px;
  }

  .header-wide-menu .header-wide-menu-about > li:last-child {
    margin-left: 0;
  }

  .header-wide-menu .contact-parts {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    margin-top: 64px;
  }

  .header-wide-menu .contact-parts .tl {
    writing-mode: vertical-rl;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0 20px;
    letter-spacing: 0.1em;
  }

  .header-wide-menu .contact-parts-in {
    background: #fff;
    padding: 24px 32px;
    max-width: 580px;
    width: 100%;
    box-sizing: border-box;
  }

  .header-wide-menu .contact-parts-in-item {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 0 20px;
  }

  .header-wide-menu .contact-parts-in-item + .contact-parts-in-item {
    border-top: 1px solid #ccc;
    margin-top: 18px;
    padding-top: 18px;
  }

  .header-wide-menu .contact-parts-in-item .sub-tl,
  .header-wide-menu .contact-parts-in-item .comment {
    font-size: 16px;
    font-weight: 500;
  }

  .header-wide-menu .contact-parts-in-item .tel {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .header-wide-menu .contact-parts-in-item .bottom {
    display: block;
    max-width: 180px;
    flex: 1;
  }

  .header-wide-menu .contact-parts-in-item .dl,
  .header-wide-menu .contact-btn,
  .header-wide-menu .contact-parts-in .under {
    display: none;
  }
}

@media screen and (min-width: 1201px) {
  .header-wide-menu-in {
    padding: 108px 54px 56px;
  }

  .header-wide-menu-genre {
    font-size: 22px;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item {
    margin: 0 18px;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item--gap {
    margin-left: 36px;
  }

  .header-wide-menu-genre__sub {
    gap: 16px;
    margin-block-end: 18px;
  }

  .header-wide-menu .header-wide-menu-about > li {
    margin: 0 16px;
  }

  .header-wide-menu .contact-parts {
    margin-top: 80px;
  }

  .header-wide-menu .contact-parts .tl {
    font-size: 17px;
    margin-left: 24px;
  }

  .header-wide-menu .contact-parts-in {
    padding: 28px 40px;
    max-width: 640px;
  }

  .header-wide-menu .contact-parts-in-item .tel {
    font-size: 30px;
  }
}

@media screen and (max-width: 767px) {
  .header-wide-menu-in {
    padding: 72px 20px 40px;
  }

  /*
   * SPメニュー：横書きリスト＋大カテタップで小カテ開閉
   */
  .header-wide-menu-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    overflow-x: visible;
    padding-bottom: 24px;
  }

  .header-wide-menu-list ul {
    margin: 0;
  }

  .header-wide-menu .header-wide-menu-genre,
  .header-wide-menu .header-wide-menu-about {
    writing-mode: horizontal-tb;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .header-wide-menu-genre {
    font-size: 18px;
    font-weight: 500;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item,
  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item--gap,
  .header-wide-menu .header-wide-menu-about > li {
    writing-mode: horizontal-tb;
    margin: 0;
    width: 100%;
  }

  .header-wide-menu .header-wide-menu-genre > .header-wide-menu-genre__item > a,
  .header-wide-menu .header-wide-menu-about > li > a {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.4;
    box-sizing: border-box;
  }

  .header-wide-menu .header-wide-menu-genre__item--has-sub {
    display: block;
    writing-mode: horizontal-tb;
    margin: 0;
  }

  .header-wide-menu-genre__chevron {
    display: inline-block;
    width: 12px;
    height: 7px;
    margin-left: 12px;
    flex-shrink: 0;
    color: #000;
    transition: transform 0.2s ease;
  }

  .header-wide-menu-genre__item--has-sub.is-open > a .header-wide-menu-genre__chevron {
    transform: rotate(180deg);
  }

  /* .header-wide-menu ul { writing-mode: vertical-rl } より詳細度を上げて横書き縦並び */
  .header-wide-menu ul.header-wide-menu-genre__sub {
    writing-mode: horizontal-tb;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 8px 16px;
    gap: 0;
    margin: 0;
    list-style: none;
  }

  .header-wide-menu-genre__item--has-sub.is-open > ul.header-wide-menu-genre__sub {
    display: flex;
  }

  .header-wide-menu ul.header-wide-menu-genre__sub > .header-wide-menu-genre__sub-item {
    margin: 0 !important;
    writing-mode: horizontal-tb;
    width: 100%;
  }

  .header-wide-menu ul.header-wide-menu-genre__sub > .header-wide-menu-genre__sub-item > a {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
  }

  .header-wide-menu-about {
    font-size: 15px;
  }

  .header-wide-menu .header-wide-menu-about > li > a {
    font-size: 15px;
  }

  .header-wide-menu-about__item--line,
  .header-wide-menu-about li.line {
    padding-block-start: 0;
    margin-right: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #000;
  }

  .header-wide-menu-about__item--line::before,
  .header-wide-menu-about li.line::before {
    display: none;
  }

  /* タップ後の :hover 黒反転を無効化 */
  .header-wide-menu a,
  .header-wide-menu ul li a {
    -webkit-tap-highlight-color: transparent;
  }

  .header-wide-menu ul li a:hover,
  .header-wide-menu ul li a:active,
  .header-wide-menu ul li a:focus {
    color: inherit;
    background: transparent;
  }

  /* 問い合わせ（.contact-parts）は公開版 custom.css に任せる（上書きしない） */
}


/* ==========================================================================
   5. FVキャッチ
   ========================================================================== */

.fv-image {
  position: relative;
}

.fv-catch {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.fv-catch--sp {
  display: none;
}

.fv-catch--pc {
  display: block;
}

.fv-catch__text {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  gap: 6px;
}

.fv-catch__line {
  display: inline-block;
  margin: 0;
  padding: 12px 10px;
  background: #fff;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.12em;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  .fv-catch--sp {
    display: block;
    top: 18%;
    left: 16px;
    right: auto;
    bottom: auto;
    transform: none;
  }

  .fv-catch--pc {
    display: none;
  }

  .fv-catch__line {
    padding: 10px 8px;
  }
}

@media screen and (max-width: 479px) {
  .fv-catch__line {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  .fv-catch--pc {
    top: 22%;
    right: 120px;
    left: auto;
    bottom: auto;
  }

  .fv-catch__line {
    font-size: 30px;
    padding: 16px 12px;
  }
}

@media screen and (min-width: 1401px) {
  .fv-catch--pc {
    right: 240px;
    left: auto;
  }
}


/* ==========================================================================
   6. TOPおすすめ
   ========================================================================== */

/* 和柄帯に重ねて FV〜おすすめの空きを埋める */
.front-recommend-section {
  position: relative;
  z-index: 15;
  margin-top: -120px;
  margin-bottom: 120px;
}

#front-reccomend .swiper-slide a,
#front-reccomend .front-recommend-card__link {
  position: relative;
  display: block;
  padding-top: 0;
  color: inherit;
  text-decoration: none;
}

#front-reccomend .item_badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-block;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  background: #1a1a1a;
  color: #fff;
}

/* カテゴリ商品カードと同構成（画像→名→値段→タグ） */
#front-reccomend .front-recommend-card {
  width: 100%;
}

#front-reccomend .front-recommend-card .fs-c-productListItem__imageContainer,
#front-reccomend .front-recommend-card .fs-c-productListItem__productName,
#front-reccomend .front-recommend-card .fs-c-productPrices,
#front-reccomend .front-recommend-card .fs-c-productMarks {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

#front-reccomend .front-recommend-card .fs-c-productListItem__image__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-left: 0;
  margin-right: 0;
}

#front-reccomend .front-recommend-card .fs-c-productListItem__productName {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  margin: 10px 0 0;
  writing-mode: horizontal-tb;
}

#front-reccomend .front-recommend-card .fs-c-productName__name,
#front-reccomend .front-recommend-card .fs-c-productName__qty {
  transform: none !important;
  transform-origin: unset;
  writing-mode: horizontal-tb;
  text-align: left;
  margin-left: 0;
  padding-left: 0;
}

#front-reccomend .front-recommend-card .fs-c-productName__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.06em;
}

#front-reccomend .front-recommend-card .fs-c-productName__copy {
  display: none;
}

#front-reccomend .front-recommend-card .fs-c-productName__qty {
  display: inline;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#front-reccomend .front-recommend-card .fs-c-productPrices {
  margin: 6px 0 0;
}

#front-reccomend .front-recommend-card .fs-c-productPrice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 6px;
  font-size: 13px;
  margin-left: 0;
  padding-left: 0;
}

#front-reccomend .front-recommend-card .fs-c-productPrice,
#front-reccomend .front-recommend-card .fs-c-price {
  white-space: nowrap;
}

#front-reccomend .front-recommend-card .fs-c-productMarks {
  position: static;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
}

#front-reccomend .front-recommend-card .fs-c-productMarks .fs-c-mark {
  font-size: 10px;
  padding: 3px 6px 4px;
}

@media screen and (min-width: 768px) {
  .front-recommend-section {
    margin-top: -200px;
    margin-bottom: 160px;
  }

  #front-reccomend .item_badge {
    font-size: 12px;
    padding: 4px 10px;
  }

  #front-reccomend .swiper-slide a,
  #front-reccomend .front-recommend-card__link {
    max-width: none;
    margin-left: 0;
    padding-top: 0;
  }

  #front-reccomend .front-recommend-card .fs-c-productName__name {
    font-size: 15px;
  }

  #front-reccomend .front-recommend-card .fs-c-productName__qty {
    font-size: 13px;
  }

  #front-reccomend .front-recommend-card .fs-c-productPrice {
    font-size: 14px;
  }

  #front-reccomend .front-recommend-card .fs-c-productMarks .fs-c-mark {
    font-size: 11px;
    padding: 4px 8px 5px;
  }
}

@media screen and (max-width: 767px) {
  .front-recommend-section {
    margin-top: 0;
    margin-bottom: 80px;
  }

  #front-reccomend {
    margin-left: 0;
  }

  #front-reccomend .swiper-slide a,
  #front-reccomend .front-recommend-card__link {
    padding-top: 0;
  }
}


/* ==========================================================================
   7. TOPカテゴリ
   ========================================================================== */

.front-category.rayout-base {
  box-sizing: border-box;
}

.front-category-item .front-category-link {
  background: #f3f1ee;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.front-category-item .front-category-link .image {
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ee;
}

.front-category-item .front-category-link .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.front-category-item .front-category-link .front-category-link__label,
.front-category-item .front-category-link p.front-category-link__label {
  writing-mode: horizontal-tb;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(26, 26, 26, 0.72);
}

@media screen and (min-width: 768px) {
  .front-category-item .front-category-link .front-category-link__label,
  .front-category-item .front-category-link p.front-category-link__label {
    font-size: 22px;
    padding: 14px 16px;
  }
}

@media screen and (max-width: 767px) {
  .front-category .front-category-item {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .front-category-item .front-category-link .front-category-link__label,
  .front-category-item .front-category-link p.front-category-link__label {
    font-size: 15px;
    padding: 10px 8px;
  }
}


/* ==========================================================================
   8. TOPその他（ギフト・店舗・ニュース・見出しなど SP）
   ========================================================================== */

@media screen and (max-width: 767px) {
  .fv-image .front-news .date,
  .front-topics-list.front-news .date {
    font-size: 14px;
    margin-bottom: 6px;
  }

  #wp-topics.front-news .tl,
  .fv-image .front-news .tl,
  .front-topics-list.front-news .tl {
    font-size: 16px;
    white-space: normal;
    max-width: none;
  }

  .front-topics-list .cat {
    font-size: 14px;
  }

  .front-topics .link {
    font-size: 15px;
  }

  .front-gift .front-gift-in .tl,
  .front-gift .front-gift-in h1.tl {
    font-size: 22px;
    padding-left: 16px;
    box-sizing: border-box;
  }

  .front-gift .front-gift-in p.tx {
    font-size: 16px;
    line-height: 1.8;
  }

  .front-gift .front-gift-in p.link {
    font-size: 15px;
  }

  .front-store-item .tl {
    font-size: 22px;
  }

  .front-store-item .tx {
    font-size: 16px;
  }

  .front-store-item .link {
    font-size: 15px;
  }

  .custom-main .front-tl {
    font-size: 22px;
  }
}


/* ==========================================================================
   9. 商品一覧／カテゴリ一覧
   ========================================================================== */

/* 画像・タイトル・価格・配送タグの左端揃え（PC/SP共通） */
body.fs-body-category .fs-c-productList__list__item form > .fs-c-productListItem__imageContainer,
body.fs-body-category .fs-c-productList__list__item form > .fs-c-productListItem__productName,
body.fs-body-category .fs-c-productList__list__item form > .fs-c-productPrices,
body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
  margin-left: 0;
  padding-left: 0;
  text-align: left;
  justify-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

body.fs-body-category .fs-c-productListItem__image__image {
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.fs-body-category .fs-c-productListItem__productName a,
body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__name,
body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__qty {
  transform: none !important;
  transform-origin: unset;
  letter-spacing: 0.06em;
  margin-left: 0;
  padding-left: 0;
  text-align: left;
}

body.fs-body-category .fs-c-productList__list .fs-c-productPrice {
  justify-content: flex-start;
  margin-left: 0;
  padding-left: 0;
}

body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
  justify-content: flex-start;
  justify-self: start;
}

/* page-heading：縦書き → 横書き（absolute 解除） */
body.fs-body-category .product-name .page-heading {
  writing-mode: horizontal-tb;
  position: static;
  top: auto;
  right: auto;
  height: auto;
  margin: 40px auto 40px;
  text-align: center;
  letter-spacing: 0.08em;
}

body.fs-body-category .product-name {
  padding-top: 0;
}

/* --- SP：FV短縮 + 2列 + 個数表記 + 値段→タグ --- */
@media screen and (max-width: 767px) {
  body.fs-body-category .fs-l-main,
  body.fs-body-category .fs-c-productList {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  body.fs-body-category .category-fv {
    height: 180px;
    min-height: 160px;
    max-height: 32vh;
    margin-top: 56px; /* 固定ヘッダー分 */
    box-sizing: border-box;
  }

  body.fs-body-category .category-fv .category-name {
    writing-mode: horizontal-tb;
    font-size: 22px;
    padding-top: 36px;
    padding-left: 12px;
    padding-right: 12px;
    letter-spacing: 0.08em;
  }

  body.fs-body-category .fs-c-productList {
    margin-top: 28px;
  }

  body.fs-body-category .fs-c-productList__controller:first-of-type {
    margin-bottom: 28px;
  }

  body.fs-body-category .fs-c-productList__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 12px;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  body.fs-body-category .fs-c-productList__list__item + .fs-c-productList__list__item {
    margin-top: 0;
  }

  body.fs-body-category .fs-c-productListItem__productName {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin: 10px 0 0;
  }

  body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__name {
    writing-mode: horizontal-tb;
    font-size: 13px;
    line-height: 1.45;
  }

  body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__copy {
    display: none;
  }

  body.fs-body-category .fs-c-productName__qty {
    display: inline;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrice {
    font-size: 13px;
  }

  body.fs-body-category .fs-c-button--viewProductDetail {
    font-size: 12px;
  }

  /* 画像 → 商品名 → 値段 → タグ（縦積み） */
  body.fs-body-category .fs-c-productList__list__item form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.fs-body-category .fs-c-productListItem__imageContainer,
  body.fs-body-category .fs-c-productListItem__viewMoreImageButton,
  body.fs-body-category .fs-c-productImageModal,
  body.fs-body-category .fs-c-productListItem__productName,
  body.fs-body-category .fs-c-productListItem__control,
  body.fs-body-category .fs-c-productList__list .fs-c-productPrices,
  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
    grid-column: 1;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrices {
    margin-top: 6px;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrice,
  body.fs-body-category .fs-c-productList__list .fs-c-price {
    white-space: nowrap;
  }

  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
    position: static;
    right: auto;
    bottom: auto;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-self: start;
  }

  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks .fs-c-mark {
    font-size: 10px;
    padding: 3px 6px 4px;
  }
}

/* --- PC：FV短縮・横書き + グリッド調整 --- */
@media screen and (min-width: 768px) {
  body.fs-body-category .category-fv {
    height: 260px;
    min-height: 220px;
    max-height: none;
    margin-top: 88px;
    margin-bottom: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  body.fs-body-category .product-name .page-heading {
    font-size: 28px;
    padding-top: 80px;
    margin: 24px auto 40px;
    background-position: center 8px;
  }

  body.fs-body-category .category-fv .category-name {
    writing-mode: horizontal-tb;
    font-size: 28px;
    padding-top: 48px;
    padding-left: 16px;
    padding-right: 16px;
    letter-spacing: 0.1em;
    background-position: center 8px;
  }

  body.fs-body-category .header-page-menu {
    margin-bottom: 0;
  }

  body.fs-body-category .fs-c-productList {
    margin-top: 40px;
  }

  body.fs-body-category .fs-c-productList__controller:first-of-type {
    margin-bottom: 40px;
  }

  body.fs-body-category .fs-c-productList__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px 28px;
  }

  body.fs-body-category .fs-c-productList__list__item {
    padding: 0;
  }

  body.fs-body-category .fs-c-productList__list__item + .fs-c-productList__list__item {
    margin-top: 0;
  }

  /* 画像 → 商品名 → 値段 → タグ（縦積み） */
  body.fs-body-category .fs-c-productList__list__item form {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  body.fs-body-category .fs-c-productListItem__imageContainer,
  body.fs-body-category .fs-c-productListItem__viewMoreImageButton,
  body.fs-body-category .fs-c-productImageModal,
  body.fs-body-category .fs-c-productListItem__productName,
  body.fs-body-category .fs-c-productListItem__control,
  body.fs-body-category .fs-c-productList__list .fs-c-productPrices,
  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
    grid-column: 1;
  }

  body.fs-body-category .fs-c-productListItem__productName {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    margin: 14px 0 0;
  }

  body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__name {
    writing-mode: horizontal-tb;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
  }

  body.fs-body-category .fs-c-productListItem__productName .fs-c-productName__copy {
    display: none;
  }

  body.fs-body-category .fs-c-productName__qty {
    display: inline;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrices {
    margin: 10px 0 0;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrice {
    font-size: 14px;
  }

  body.fs-body-category .fs-c-productList__list .fs-c-productPrice,
  body.fs-body-category .fs-c-productList__list .fs-c-price {
    white-space: nowrap;
  }

  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks {
    position: static;
    right: auto;
    bottom: auto;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-self: start;
  }

  body.fs-body-category .fs-c-productList__list__item form > .fs-c-productMarks .fs-c-mark {
    font-size: 11px;
    padding: 4px 8px 5px;
    border-radius: 2px;
  }

  body.fs-body-category .fs-c-productListItem__control {
    margin-top: 8px;
  }

  body.fs-body-category .fs-c-button--viewProductDetail {
    font-size: 12px;
  }
}

@media screen and (min-width: 1100px) {
  body.fs-body-category .fs-c-productList__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 56px 32px;
  }

  body.fs-body-category .category-fv {
    height: 280px;
  }

  body.fs-body-category .category-fv .category-name {
    font-size: 32px;
    padding-top: 52px;
  }
}


/* ==========================================================================
   10. フッター（PCカテゴリ階層）
   ========================================================================== */

@media screen and (min-width: 1101px) {
  .footer-wide-menu-list {
    max-width: 880px;
    width: 70%;
  }

  /* custom.css の変倍を解除（縦書きネストが崩れるため） */
  .footer-wide-menu-item:first-child .footer-wide-menu-genre li,
  .footer-wide-menu-item:first-child .footer-wide-menu-genre li a {
    transform: none;
    transform-origin: unset;
    letter-spacing: 0.08em;
    text-orientation: upright;
  }

  .footer-wide-menu-genre {
    font-size: 22px;
    font-weight: 600;
  }

  .footer-wide-menu-genre > .footer-wide-menu-genre__item {
    margin: 0 18px;
  }

  .footer-wide-menu-genre > .footer-wide-menu-genre__item:first-child {
    margin-right: 0;
  }

  .footer-wide-menu-genre > .footer-wide-menu-genre__item--gap {
    margin-left: 32px;
  }

  .footer-wide-menu-genre__item--has-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-wide-menu-genre__item--has-sub > a {
    flex-shrink: 0;
  }

  .footer-wide-menu-genre__sub {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    margin-block-end: 14px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
  }

  .footer-wide-menu-genre__sub-item {
    margin: 0 !important;
  }

  .footer-wide-menu-genre__sub-item a {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
}