/** Shopify CDN: Minification failed

Line 1737:1 Unexpected "/"

**/
/* =========================================
   FOLDA ONLINE - CSS
   ========================================= */
/* --- 1. Robotoの定義（名前をMyRobotoにして混同を避ける） --- */

@font-face {
  font-family: 'MyRoboto';
  src: url('/cdn/shop/files/Roboto-Regular.ttf?v=1776757117') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyRoboto';
  src: url('/cdn/shop/files/Roboto-Medium.ttf?v=1776757111') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyRoboto';
  src: url('/cdn/shop/files/Roboto-Bold.ttf?v=1776757087') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 2. 適用設定 --- */

body {
  /* 英数字にはMyRoboto、日本語にはNoto Sans JPを適用 */
  font-family: 'MyRoboto', 'Noto Sans JP', sans-serif !important;
}

/* iPhoneで太字が細くなるのを防ぐため、明示的にウェイトを指定 */
h1, h2, h3, h4, h5, h6, b, strong {
  font-weight: 700 !important;
}

/* 共通設定: コンテンツ幅の制御（and Habit 基準の1000px統一） */
.folda-container,
.folda-brand-container,
.recommend-title-container,
.folda-info-container,
.folda-search-header,
.folda-tag-grid {
  /* 幅は常に100%（親要素いっぱい）にする */
  width: 100% !important;
  /* 最大幅を 1000px に固定 */
  max-width: 1000px !important;
  /* 左右中央に配置 */
  margin: 0 auto !important;
  /* ★重要：左右に「固定の余白」を作る（これでガタつきが消えます） */
  padding: 0 20px !important; 
  /* 余白を含めて幅を計算する設定 */
  box-sizing: border-box !important;
}

/* テキストを中央寄せにする共通ルール */
.folda-container {
  text-align: center !important;
}

/* --見出し-- */
.folda-section-title {
  font-size: 20px !important; /* SP版のベースサイズ */
  font-weight: 700 !important; /* 太字 */
  color: #28282D !important; /* 指定の文字色 */
  text-align: left !important; /* 画像に合わせて左寄せ */
  margin: 0 0 20px 0 !important; /* 下のコンテンツとの隙間 */
  line-height: 1.4 !important;
}

/* PC版（横幅769px以上）のサイズアップ */
@media screen and (min-width: 769px) {
  .folda-section-title {
    font-size: 26px !important; /* PC版はメリハリをつけて大きく */
    margin: 0 0 30px 0 !important; /* PC版は余白も少し広く */
  }
}

/* =============================================================
 　【TOPページ】 開始
   ============================================================= */

/* -----------------------------------------
   【TOPページ】 スライドショー  開始
   ----------------------------------------- */

/* -----------------------------------------
   【TOPページ】 スライドショー  終了
----------------------------------------- */


/* -----------------------------------------
   【TOPページ】 サービスについて  開始
   ----------------------------------------- */

   /* -----------------------------------------
   【TOPページ】 サービスについて  終了
   ----------------------------------------- */

/* -----------------------------------------
   【TOPページ】 ブランド  開始
   ----------------------------------------- */

/* -----------------------------------------
   【TOPページ】 ブランド  終了
   ----------------------------------------- */



/*--------------------------------------------------
  【TOPページ】キーワード検索 開始
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】キーワード検索 終了
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】 お知らせ 開始
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】 お知らせ 終了
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】 お困りの方はこちら 開始
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】 お困りの方はこちら 終了
--------------------------------------------------*/

/*--------------------------------------------------
  【TOPページ】 メルマガ 開始（非表示予定）
--------------------------------------------------*/

/* --------------------------------------------------
   【TOPページ】 メルマガ 終了（非表示予定）
   --------------------------------------------------*/


/* --------------------------------------------------
   【TOPページ】 特典紹介　開始
   -------------------------------------------------- */

.convenient-service-section {
  background-color: #F5F5F5 !important;
  padding: 80px 0 !important;
  text-align: center !important;
  font-family: "Noto Sans JP", 'Roboto', sans-serif !important;
}

/* コンテナ（PC版で3枚並ぶように最大幅を広めに確保） */
.service-container {
  width: 100% !important;
  max-width: 1000px !important; 
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* タイトル部分（テキスト設定のみ。棒線は外しています） */
.service-title {
  font-size: 12px !important; /* テキストをグッと小さく */
  font-weight: 700 !important;
  color: #333333 !important;
  margin: 0 0 30px 0 !important;
  width: 100% !important;
}

/* ★新設：上部に棒線が欲しい時だけ追加するクラス */
.service-title-with-border {
  padding-top: 30px !important; /* 上の線とテキストの間の余白 */
  border-top: 1px solid #D3D3D3 !important; /* 上部の細いグレーの棒線 */
}

/* カードレイアウトの箱（SPは縦、PCは横） */
.service-cards-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important; /* カード同士の隙間 */
  margin-bottom: 30px !important;
}

/* 各カードのスタイル（元のFigma指定サイズ：幅270px） */
.service-card {
  width: 270px !important;
  max-width: 100% !important;
  background-color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 20px 16px !important; /* Figma指定の余白 */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 200px !important; /* Figma指定の最小高さ */
  box-sizing: border-box !important;
}

/* アイコン (55px x 55px) */
.service-card-icon {
  width: 55px !important;
  height: 55px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.service-card-icon img {
  width: 100% !important;
  height: auto !important;
}

/* カードタイトル */
.service-card-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #28282D !important;
  margin: 0 0 10px 0 !important;
  line-height: 156% !important;
}

/* カード1の中身：15%OFFの出し分け */
.service-card-desc .desc-small {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  letter-spacing: 0.1em !important;
  color: #28282D !important;
  margin: 0 !important;
}

.service-card-desc .desc-large {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #AC9968 !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
}

.service-card-desc .desc-large span {
  font-size: 20px !important;
}

/* カード2・3の中身：テキスト */
.service-card-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 26px !important;
  color: #28282D !important;
  margin: 0 !important;
}

/* 詳しくはこちらボタン（幅312px） */
.service-detail-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 312px !important;
  height: 48px !important;
  background-color: #28282D !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 0 20px !important;
  margin: 0 auto !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

.button-arrow {
  width: 8px !important;
  height: 8px !important;
  border-top: 2px solid #FFFFFF !important;
  border-right: 2px solid #FFFFFF !important;
  transform: rotate(45deg) !important;
}

/* PC版（横並び）用のレスポンシブスタイル */
@media screen and (min-width: 769px) {
  .service-title {
    font-size: 14px !important; /* PC版でも主張しすぎない控えめなサイズに */
  }
  .service-title-with-border {
    padding-top: 40px !important; /* PC版は棒線からの余白を少し広く */
  }
  
  /* カードグループを横並びにする */
  .service-cards-group {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important; /* カードの高さを揃える */
    gap: 24px !important; /* PC時のカード間の隙間 */
  }
}
/* --------------------------------------------------
   【TOPページ】 特典紹介　開始
   -------------------------------------------------- */
/* =============================================================
 　【TOPページ】終了
   ============================================================= */




/* =============================================================
 　【ブランドページ】開始
   ============================================================= */

/* -----------------------------------------
   【ブランドページ】ずっとおトク便について　開始
   ----------------------------------------- */  
/* 共通の背景と余白（PC版: ヘッダー・フッターから切り離す） */
.custom-lp-wrapper {
  background-color: #F5F5F5;
  padding: 60px 0;
  width: 100%;
}

/* 1〜4枚目をまとめるコンテナ（★PC版の幅を40%に変更） */
.custom-lp-container {
  width: 40%;
  margin: 0 auto;
  background-color: #F5F5F5;
  box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ★ポイント: 角丸をつける場合はここで指定 */
  /* border-radius: 8px; */
}

/* 画像の隙間を無くして1枚に繋げる */
.custom-lp-container > img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
}

/* --- 対象商品一覧のコーディングスタイル --- */
/* ★box-shadowを削除し、containerの中に自然に収まるようにする */
.target-products-section {
  background-color: #F5F5F5;
  padding: 40px 8%;
  /* box-shadowなし・margin/border-radiusなし */
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  padding: 15px;
  margin-bottom: 12px;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.product-image {
  width: 35%;
  text-align: center;
}

.product-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.product-info {
  width: 65%;
  padding-left: 15px;
}

.brand-name {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 4px;
  color: #333;
}

.product-name {
  font-size: 11px;
  font-weight: bold;
  margin: 0 0 8px;
  line-height: 1.4;
  color: #333;
}

.normal-price {
  font-size: 10px;
  color: #333;
  margin: 0 0 4px;
}

.sub-price-wrap {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.sub-label {
  background-color: #c94a4a;
  color: #fff;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-right: 6px;
}

.price-num {
  font-size: 18px;
  font-weight: bold;
  color: #c94a4a;
}

.tax {
  font-size: 10px;
  margin-left: 2px;
}

.normal-price .tax {
  color: #333;
}

.sub-price-wrap .tax {
  color: #c94a4a;
}

.buy-btn {
  display: block;
  background-color: #2c2c2c;
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s;
}

.buy-btn:hover {
  background-color: #555;
}

/* --- FAQアコーディオンのスタイル --- */
/* ★faq-sectionもcontainerの内側に入れる前提。box-shadowなし */
.faq-section {
  padding: 20px 8% 50px;
  background-color: #ffffff;
  color: #333;
}

.faq-category {
  font-size: 11px;
  font-weight: bold;
  margin: 25px 0 10px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
}

.faq-item summary {
  padding: 12px 15px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-size: 18px;
  color: #666;
  font-weight: normal;
  font-family: sans-serif;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-answer {
  padding: 0 15px 15px;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
}

/* --- SP版（スマホ）用のレスポンシブスタイル --- */
@media screen and (max-width: 768px) {
  .custom-lp-wrapper {
    padding: 0;
    background-color: transparent;
  }

  .custom-lp-container {
    width: 100%;
    box-shadow: none;
  }

  .target-products-section,
  .faq-section {
    padding: 30px 5%;
  }

  .product-card {
    padding: 10px;
  }

  .product-info {
    padding-left: 10px;
  }
}
/* -----------------------------------------
   【ブランドページ】ずっとおトク便について　終了
   ----------------------------------------- */










/* -----------------------------------------
   【ブランドページ】VOX　開始
   ----------------------------------------- */   
/* --- 1. 横揺れ防止：VOXページのみ適用 --- */
body:has(#vox-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

#vox-bg-flag { display: none !important; }

/* --- 2. 共通レイアウト調整 --- */
.vox-lp-section, .vox-fixed-section,
.vox-kv, .vox-lp1, .vox-lp2, .vox-lp3, .vox-lp4, .vox-lp5, .vox-lp6, .vox-lp7, .vox-lp8, .vox-lp9, .vox-lp10, .vox-lp11, .vox-lp12, .vox-lp13, .vox-lp14 {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  padding: 0 !important; 
  clip-path: inset(-1px 0); 
  -webkit-clip-path: inset(-1px 0);
  text-align: center;
}

/* --- 3. 背景固定用の疑似要素 --- */
.vox-lp1::before, .vox-lp2::before, .vox-lp3::before, .vox-lp4::before, 
.vox-lp5::before, .vox-lp6::before, .vox-lp7::before, .vox-lp8::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  will-change: transform;
  transform: translateZ(0);
  pointer-events: none;
}
.vox-lp1::before, .vox-lp2::before, .vox-lp3::before, .vox-lp4::before { background-image: var(--bg-sp); }
.vox-lp5::before, .vox-lp6::before { background-image: var(--bg-sp); }
.vox-lp7::before, .vox-lp8::before { background-image: var(--bg-sp); }

@media (min-width: 768px) {
  .vox-lp1::before, .vox-lp2::before, .vox-lp3::before, .vox-lp4::before,
  .vox-lp5::before, .vox-lp6::before, .vox-lp7::before, .vox-lp8::before {
    background-image: var(--bg-pc);
  }
}

/* --- 4. 背景カラー設定 --- */
.vox-lp9, .vox-lp10, .vox-lp11, .vox-lp12, .vox-lp13 {
  background-color: #f6f6f6;
  clip-path: none;
}
.vox-bg-none { background-color: transparent; clip-path: none; overflow: hidden; }
.vox-bg-none::before { display: none !important; }

/* --- 5. 【修正：他ブランド共通ルール】画像制御：KV & LP-14 --- */
.vox-fixed-section {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.vox-fixed-img {
  display: inline-block;
  height: auto;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}

/* SP版：530pxまでは206vwズーム、530pxを超えたら921px固定に移行 */
@media (max-width: 767px) {
  .vox-fixed-img {
    width: 921px !important; 
  }
  @media (max-width: 530px) {
    .vox-fixed-img {
      width: 206vw !important; 
    }
  }
}

/* PC版：1600pxまでは最低幅を確保し、それ以上は画面幅100%に追従 */
@media (min-width: 768px) {
  .vox-fixed-img {
    width: 100% !important;
    min-width: 1600px !important; /* 1600px以下の画面でも画像が小さくなりすぎないよう保持 */
  }
}

/* --- 6. 標準画像・コンテンツ幅制御 --- */
.vox-lp1__img, .vox-lp2__img, .vox-lp3__img, .vox-lp4__img, .vox-lp5__img, 
.vox-lp6__img, .vox-lp7__img, .vox-lp8__img, .vox-lp9__img, .vox-lp11__img, 
.vox-lp12__img, .vox-lp13__img {
  display: block;
  width: 100% !important;
  max-width: 530px !important;
  margin: 0 auto !important;
  height: auto;
}

@media (min-width: 768px) {
  .vox-lp1__img, .vox-lp2__img, .vox-lp3__img, .vox-lp4__img, .vox-lp5__img, 
  .vox-lp6__img, .vox-lp7__img, .vox-lp8__img, .vox-lp9__img, .vox-lp11__img, 
  .vox-lp12__img, .vox-lp13__img {
    max-width: 640px !important;
  }
}

/* --- 7. LP10 ドロップダウン --- */
.vox-lp10__inner { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
  max-width: 335px; 
  margin: 0 auto; 
  padding: 40px 0; 
  line-height: normal; 
  gap: 10px; 
}
.vox-lp10__dropdown { position: relative; width: 100%; }
.vox-lp10__btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border: 1px solid #28282D; background-color: #f6f6f6; font-family: 'Roboto', sans-serif; font-weight: 900; font-style: italic; font-size: 14px; color: #28282D; text-decoration: none; cursor: pointer; position: relative; }

.vox-lp10__icon { 
  position: absolute; 
  right: 16px; 
  top: 50%; 
  transform: translateY(-50%); 
  width: 16px; 
  height: 16px; 
  display: block;
}
.vox-lp10__icon::before, .vox-lp10__icon::after {
  content: ""; position: absolute; background-color: #28282D; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.vox-lp10__icon::before { width: 100%; height: 1px; }
.vox-lp10__icon::after { width: 1px; height: 100%; }

.vox-lp10__menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: #28282D; z-index: 9999; }
.vox-lp10__menu.show { display: block; }
.vox-lp10__menu a { display: block; color: #fff; text-decoration: none; padding: 12px; text-align: center; border-bottom: 1px solid #fff; }

@media (min-width: 768px) { 
  .vox-lp10__inner { max-width: 572px; } 
}

/* --- 8. Shopify全体幅強制解除 --- */
body:has(#vox-bg-flag) #MainContent, 
body:has(#vox-bg-flag) #MainContent .page-width, 
body:has(#vox-bg-flag) #MainContent .shopify-section { 
  max-width: 100% !important; 
  width: 100% !important; 
  padding: 0 !important; 
  margin: 0 !important;
  overflow-x: hidden !important;
}
/* -----------------------------------------
   【ブランドページ】VOX　終了
   ----------------------------------------- */


/* -----------------------------------------
   【ブランドページ】BIYOUDO　開始
   ----------------------------------------- */   
/* --- 1. 基本設定・横揺れ防止 --- */
body:has(#biyoudo-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

#biyoudo-bg-flag { display: none !important; }

/* --- 2. 共通セクション設定 --- */
.biyoudo-lp-section, .biyoudo-fixed-section {
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}

.biyoudo-lp-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px;
  padding-bottom: 1px;
  clip-path: inset(-1px 0); 
  -webkit-clip-path: inset(-1px 0);
  background-color: transparent;
  overflow: hidden;
}

/* --- 3. 特定セクションの余白設定 --- */
.biyoudo-lp-2 { padding-top: 80px !important; }
.biyoudo-lp-3, .biyoudo-lp-6, .biyoudo-lp-9 { padding-top: 150px !important; }

@media (min-width: 768px) {
  .biyoudo-lp-2 { padding-top: 150px !important; }
  .biyoudo-lp-3, .biyoudo-lp-6, .biyoudo-lp-9 { padding-top: 280px !important; }
}

/* --- 4. 背景固定レイヤー --- */
.biyoudo-lp-section::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  will-change: transform;
  pointer-events: none;
  background-image: url("/cdn/shop/files/biyoudo-brand-sp-bg.jpg?v=1773754595");
}

@media (min-width: 768px) {
  .biyoudo-lp-section::before {
    background-image: url("/cdn/shop/files/biyoudo-brand-pc-bg.jpg?v=1773754607");
  }
}

.biyoudo-bg-none { 
  background-color: #000000; 
  clip-path: none; 
  margin-top: 0; 
  overflow: hidden;
}
.biyoudo-bg-none::before { display: none !important; }

/* --- 5. 【修正】画像制御：KV & LP-14 --- */
.biyoudo-fixed-section {
  width: 100%;
  overflow: hidden;
}

.biyoudo-fixed-img {
  display: inline-block;
  height: auto;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}

/* SP版の挙動制御 */
@media (max-width: 767px) {
  .biyoudo-fixed-img {
    width: 920px !important;
  }
  
  @media (max-width: 530px) {
    .biyoudo-fixed-img {
      width: 205vw !important; 
    }
  }
}

/* PC版：1600pxまでは中央配置を維持しつつ、1600pxを超えたら全幅表示に拡張 */
@media (min-width: 768px) {
  .biyoudo-fixed-img {
    width: 100% !important;
    min-width: 1600px !important; 
    max-width: none !important;
  }
}

/* --- 6. 画像制御：標準幅設定 --- */
.biyoudo-lp-img, 
.biyoudo-lp-img-link img {
  display: block;
  width: 100% !important; 
  max-width: 530px !important; 
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto;
}

@media (min-width: 768px) {
  .biyoudo-lp-img,
  .biyoudo-lp-img-link img {
    width: 640px !important; 
    max-width: 640px !important;
    margin: 0 auto !important;
  }
}

/* --- 7. スライダー設定 --- */
.biyoudo-slider-container {
  position: relative;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 40px 0 60px;
  overflow: visible !important;
}

.biyoudo-slider-track { 
  display: flex; 
  align-items: center; 
}

.biyoudo-slide { 
  flex: 0 0 80%; 
  max-width: 424px; 
  opacity: 0.4; 
  filter: grayscale(100%); 
  transform: scale(0.8); 
  transition: all 0.4s ease; 
}

.biyoudo-slide.is-active { 
  opacity: 1; 
  filter: grayscale(0%); 
  transform: scale(1); 
}

.biyoudo-slide img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* カルーセル矢印ボタン基本 */
.biyoudo-slider-btn { 
  position: absolute; 
  top: 50%; 
  width: 44px; 
  height: 44px; 
  z-index: 10; 
  transform: translateY(-50%); 
  cursor: pointer; 
  border: none; 
  background: transparent; 
}

/* PC版矢印カスタマイズ (768px以上) */
@media (min-width: 768px) {
  .biyoudo-slider-container { padding-bottom: 100px; }
  .biyoudo-slide { flex: 0 0 550px; max-width: none; }

  .biyoudo-slider-btn {
    width: 90px;
    height: 90px;
  }
  .biyoudo-slider-btn svg {
    stroke-width: 1.0px;
  }
  
  .biyoudo-prev { left: calc(50% - 336px); }
  .biyoudo-next { right: calc(50% - 336px); }
}

@media (max-width: 767px) {
  .biyoudo-prev { left: calc(50% - 250px); }
  .biyoudo-next { right: calc(50% - 250px); }
}

@media (max-width: 500px) {
  .biyoudo-prev { left: 5px; }
  .biyoudo-next { right: 5px; }
}

/* --- 8. LP-13 グリッド --- */
.biyoudo-sp-list { display: block; }
.biyoudo-pc-grid { display: none; }
@media (min-width: 768px) {
  .biyoudo-sp-list { display: none; }
  .biyoudo-pc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 640px; margin: 0 auto; padding: 40px 0; }
  .biyoudo-pc-item img { width: 100%; height: auto; display: block; }
}

/* Shopify全体幅の強制解除 */
body:has(#biyoudo-bg-flag) #MainContent, 
body:has(#biyoudo-bg-flag) #MainContent .page-width, 
body:has(#biyoudo-bg-flag) #MainContent .shopify-section { 
  max-width: 100% !important; 
  width: 100% !important; 
  padding: 0 !important; 
  margin: 0 !important;
  overflow-x: hidden !important;
}
/* -----------------------------------------
   【ブランドページ】BIYOUDO　終了
   ----------------------------------------- */   


   

/* -----------------------------------------
   【ブランドページ】水想い　開始
   ----------------------------------------- */
/* --- 1. 基本設定・横揺れ防止 --- */
body:has(#mizuomoi-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

#mizuomoi-bg-flag { display: none !important; }

/* --- 2. 背景・セクション共通設定 --- */
.mizu-lp-section, .mizu-fixed-section {
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}

.mizu-lp-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px;
  padding-bottom: 1px;
  clip-path: inset(-1px 0); 
  -webkit-clip-path: inset(-1px 0);
  background-color: transparent;
  overflow: hidden;
}

/* 4層パララックス用背景固定レイヤー */
.mizu-lp-section::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  will-change: transform;
  display: none;
  pointer-events: none;
}

.mizu-bg-a::before, .mizu-bg-b::before, .mizu-bg-c::before { display: block; }
.mizu-bg-a::before { background-image: url("/cdn/shop/files/mizuomoi-brand-sp-bg-1.jpg?v=1775647338"); }
.mizu-bg-b::before { background-image: url("/cdn/shop/files/mizuomoi-brand-sp-bg-2.jpg?v=1775647358"); }
.mizu-bg-c::before { background-image: url("/cdn/shop/files/mizuomoi-brand-sp-bg-3.jpg?v=1775647344"); }

@media (min-width: 768px) {
  .mizu-bg-a::before { background-image: url("/cdn/shop/files/mizuomoi-brand-pc-bg-1.jpg?v=1775647306"); }
  .mizu-bg-b::before { background-image: url("/cdn/shop/files/mizuomoi-brand-pc-bg-2.jpg?v=1775647321"); }
  .mizu-bg-c::before { background-image: url("/cdn/shop/files/mizuomoi-brand-pc-bg-3.jpg?v=1775647329"); }
}

.mizu-bg-none { 
  background-color: #ffffff !important; 
  clip-path: none; 
  -webkit-clip-path: none;
  margin-top: 0; 
  overflow: hidden;
}
.mizu-bg-none::before { display: none !important; }

/* --- 3. 【修正】画像制御：KV & 最終セクション --- */
.mizu-fixed-section {
  width: 100%;
  overflow: hidden;
}

.mizu-fixed-img {
  display: inline-block;
  height: auto;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}

/* SP版挙動：205vw(530px以下) / 920px固定(531px〜) */
@media (max-width: 767px) {
  .mizu-fixed-img {
    width: 920px !important;
  }
  @media (max-width: 530px) {
    .mizu-fixed-img {
      width: 205vw !important;
    }
  }
}

/* PC版挙動：1600pxまでは中央を維持し、それを超えたら全幅に拡大 */
@media (min-width: 768px) {
  .mizu-fixed-img {
    width: 100% !important;
    min-width: 1600px !important;
  }
}

/* --- 4. 画像制御：標準コンテンツ幅 --- */
.mizu-lp-img, .mizu-lp-img-link img {
  display: block;
  width: 100% !important; 
  max-width: 530px !important; 
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto;
}

@media (min-width: 768px) {
  .mizu-lp-img, .mizu-lp-img-link img {
    max-width: 640px !important;
  }
}

/* --- 5. カルーセル（スライダー）設定 --- */
.mizu-slider-container { 
  position: relative; 
  width: 100vw !important; 
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 20px 0 40px; 
  overflow: visible !important; /* はみ出しをチラ見せ */
  opacity: 1 !important; /* 強制表示 */
}

.mizu-slider-track { 
  display: flex; 
  align-items: center; 
  will-change: transform;
}

.mizu-slide { 
  flex: 0 0 80%; 
  max-width: 424px; 
  opacity: 0.4; 
  transform: scale(0.8); 
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.mizu-slide.is-active { 
  opacity: 1; 
  transform: scale(1); 
}

.mizu-slide img { 
  width: 100%; 
  height: auto; 
  display: block;
}

/* 矢印ボタン */
.mizu-slider-btn {
  position: absolute; 
  top: 50%; 
  width: 44px; 
  height: 44px; 
  background-color: #ffffff; 
  border: 2px solid #143385; 
  border-radius: 50%;
  z-index: 10; 
  transform: translateY(-50%); 
  cursor: pointer; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

@media (max-width: 767px) {
  .mizu-prev { left: calc(50% - 250px); }
  .mizu-next { right: calc(50% - 250px); }
}

@media (max-width: 500px) {
  .mizu-prev { left: 5px; }
  .mizu-next { right: 5px; }
}

@media (min-width: 768px) {
  .mizu-slider-container { padding: 60px 0 100px; }
  .mizu-slide { flex: 0 0 550px; max-width: none; }
  .mizu-slider-btn { width: 50px; height: 50px; }
  .mizu-prev { left: calc(50% - 336px); }
  .mizu-next { right: calc(50% - 336px); }
}

/* --- 6. 全幅強制解除設定 --- */
body:has(#mizuomoi-bg-flag) #MainContent, 
body:has(#mizuomoi-bg-flag) #MainContent .page-width, 
body:has(#mizuomoi-bg-flag) #MainContent .shopify-section { 
  max-width: 100% !important; 
  width: 100% !important; 
  padding: 0 !important; 
  margin: 0 !important; 
  overflow-x: hidden !important;
}

body:has(#mizuomoi-bg-flag) .header-wrapper, 
body:has(#mizuomoi-bg-flag) sticky-header { 
  z-index: 100 !important; 
}
/* -----------------------------------------
   【ブランドページ】水想い　終了
   ----------------------------------------- */   







/* -----------------------------------------
   【ブランドページ】New Fine　開始
   ----------------------------------------- */
/* --- 1. 横揺れ防止 --- */
body:has(#newfine-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

#newfine-bg-flag { display: none !important; }

/* --- 2. 共通レイアウト調整 --- */
.newfine-kv, .newfine-lp-section, .newfine-fixed-section,
.newfine-lp1, .newfine-lp2, .newfine-lp4, .newfine-lp5, .newfine-lp6, .newfine-lp7, .newfine-lp8, .newfine-lp9, .newfine-lp10, .newfine-lp11, .newfine-lp12, .newfine-lp13, .newfine-lp14, .newfine-lp15, .newfine-lp16, .newfine-search {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  line-height: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* 背景色の設定 */
.newfine-lp1, .newfine-lp2, .newfine-lp12, .newfine-lp13, .newfine-lp14, .newfine-lp15 {
  background-color: #ffffff;
}
.newfine-lp4, .newfine-lp5, .newfine-lp6, .newfine-lp7, .newfine-lp8, .newfine-lp9, .newfine-lp10, .newfine-lp11, .newfine-search {
  background-color: #f7f8fa;
}

/* --- 3. 検索セクション --- */
.newfine-search {
  padding: 10px 0 30px !important;
  display: flex !important;
  line-height: normal;
  justify-content: center;
}
.newfine-search__inner {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  width: 100% !important;
  max-width: 530px !important;
  padding-left: 20px !important;
  box-sizing: border-box;
  margin: 0 auto;
}
.newfine-search__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #2d2f30;
  text-decoration: none;
  border: 1.2px solid #2d2f30;
  border-radius: 50px;
  font-weight: bold;
  font-size: 14px;
  width: 110px;
  height: 36px;
  flex-shrink: 0;
}

/* --- 4. 画像制御：KV & LP-16 --- */
.newfine-fixed-section {
  width: 100vw !important;
  overflow: hidden !important;
  font-size: 0;
  line-height: 0;
}
.newfine-fixed-img {
  display: block;
  height: auto;
  max-width: none !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 !important;
}

/* SP版共通設定 */
@media (max-width: 767px) {
  .newfine-fixed-img { width: 920px !important; }
}
@media (max-width: 530px) {
  .newfine-fixed-img { width: 205vw !important; }
}

/* LP-16の肥大化のみをピンポイントで防止 */
@media (max-width: 767px) {
  #newfine-lp16-wrap .newfine-fixed-img {
    width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }
}

/* PC版：1600pxまでは中央を維持し、それを超えたら全幅に拡大 */
@media (min-width: 768px) {
  .newfine-fixed-img { 
    width: 100% !important;
    min-width: 1600px !important;
  }
  /* PCのみ：KVの直後にある隙間を埋めるため1px下に重ねる */
  .newfine-kv {
    margin-bottom: -1px !important;
  }
}

/* --- 5. 標準画像・コンテンツ幅制御 (最大530px制限) --- */
.newfine-lp1__img, .newfine-lp2__img, .newfine-lp4__img, .newfine-lp5__img, .newfine-lp6__img, .newfine-lp7__img, .newfine-lp8__img, .newfine-lp9__img, .newfine-lp10__img, .newfine-lp11__img, .newfine-lp12__img, .newfine-lp13__img, .newfine-lp14__img, .newfine-lp15__img {
  display: block;
  width: 100% !important;
  max-width: 530px !important;
  margin: 0 auto !important;
  height: auto;
}

/* --- 6. スライダー (LP-3) --- */
div[class^="ai-carousel-container"] {
  width: 100% !important;
  max-width: 530px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 530px) {
  div[class^="ai-carousel-container"] {
    max-width: 100vw !important;
  }
}
.shopify-section:has(div[class^="ai-carousel-container"]) {
  display: flex !important;
  justify-content: center !important;
}

/* --- PC (768px以上) --- */
@media (min-width: 768px) {
  .newfine-search__inner {
    max-width: 640px !important;
    padding-left: 0 !important;
    justify-content: center !important;
    gap: 12px;
  }
  .newfine-search__link {
    font-size: 18px;
    width: 160px;
    height: 44px;
  }
  .newfine-lp1__img, .newfine-lp2__img, .newfine-lp4__img, .newfine-lp5__img, .newfine-lp6__img, .newfine-lp7__img, .newfine-lp8__img, .newfine-lp9__img, .newfine-lp10__img, .newfine-lp11__img, .newfine-lp12__img, .newfine-lp13__img, .newfine-lp14__img, .newfine-lp15__img {
    max-width: 640px !important;
  }
  div[class^="ai-carousel-container"] {
    max-width: 640px !important;
  }
}

/* --- 7. Shopify全体幅強制解除 --- */
body:has(#newfine-bg-flag) #MainContent,
body:has(#newfine-bg-flag) #MainContent .page-width,
body:has(#newfine-bg-flag) #MainContent .shopify-section {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}
/* -----------------------------------------
   【ブランドページ】New Fine　終了
   ----------------------------------------- */







/* -----------------------------------------
   【ブランドページ】プチベジ　開始
   ----------------------------------------- */
/* --- 1. ヘッダー・オーバーレイの最前面確保 --- */
#shopify-section-header, .header-wrapper, .section-header, .sticky-navigation,
#shopify-section-announcement-bar, .menu-drawer, .cart-drawer, .predictive-search {
  z-index: 9999 !important;
}

/* --- 2. 横揺れ防止 --- */
body:has(#pv-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}
#pv-bg-flag { display: none !important; }

/* --- 3. 共通レイアウト調整 --- */
.putivege-kv, .putivege-lp1, .putivege-lp2, .putivege-lp3, .putivege-lp4, .putivege-lp5, .putivege-lp6, .putivege-lp7, .putivege-lp8, .putivege-lp9, .putivege-lp10, .pv-fixed-section {
  margin-left: calc(50% - 50vw); 
  margin-right: calc(50% - 50vw); 
  line-height: 0; 
  position: relative; 
  overflow: hidden; 
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  padding: 0 !important;
  text-align: center;
}

/* --- 4. 背景画像の表示設定（固定背景） --- */
.putivege-lp-bg-section {
  background-image: var(--bg-sp);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .putivege-lp-bg-section { background-image: var(--bg-pc); }
}

/* --- 5. 画像サイズ制御（中間コンテンツ） --- */
.putivege-img {
  display: block;
  width: 100% !important;
  max-width: 375px !important; 
  height: auto;
  margin: 0 auto !important;
}

@media (min-width: 768px) {
  .putivege-img {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 900px !important; 
    max-width: 900px !important; 
    margin: 0 !important;
  }
}

/* --- 6. KVとLP-10の画像制御 --- */
.pv-fixed-section {
  width: 100vw !important;
  overflow: hidden !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.pv-fixed-img {
  display: block !important;
  height: auto;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}

/* 【SP版限定】767px以下のスタイル */
@media (max-width: 767px) {
  .pv-fixed-img {
    width: 921px !important; /* 768px以下では、SP版画像をこの幅で表示 */
  }
  @media (max-width: 530px) {
    .pv-fixed-img {
      width: 206vw !important; 
    }
  }
}

/* 【PC版限定】768px以上のスタイル */
@media (min-width: 768px) {
  .pv-fixed-img {
    width: 100% !important; /* PC版画像を全幅に広げる */
    min-width: 1600px !important; /* 1600px以下にならないよう固定 */
  }
}

/* --- 7. 【白い線・隙間対策】 --- */
div:has(> #pv-kv-wrap), 
div:has(> #pv-kv-wrap) .shopify-section,
div:has(> #pv-lp10-wrap), 
div:has(> #pv-lp10-wrap) .shopify-section {
  background-color: #ffffff !important;
  padding: 0 !important;
  margin: 0 !important;
}

#pv-kv-wrap,
#pv-lp10-wrap {
  overflow: hidden !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* --- 8. Shopify標準のコンテナ余白を打ち消す --- */
body:has(#pv-bg-flag) #MainContent, 
body:has(#pv-bg-flag) #MainContent .page-width, 
body:has(#pv-bg-flag) #MainContent .shopify-section { 
  max-width: 100% !important; 
  width: 100% !important; 
  padding: 0 !important; 
  margin: 0 !important;
  overflow-x: hidden !important;
}
/* -----------------------------------------
   【ブランドページ】プチベジ　終了
   ----------------------------------------- */





/* -----------------------------------------
   【ブランドページ】Famy　開始
   ----------------------------------------- */
/* --- 1. 固定ヘッダー・オーバーレイ --- */
#shopify-section-header, .header-wrapper, .section-header, .sticky-navigation,
#shopify-section-announcement-bar, .menu-drawer, .cart-drawer, .predictive-search {
  z-index: 9999 !important;
}

body:has(#famy-bg-flag) {
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}
#famy-bg-flag { display: none !important; }

.famy-kv, .famy-lp1, .famy-lp2, .famy-lp3, .famy-lp4, .famy-lp5, .famy-lp6, .famy-lp7, .famy-lp8, .famy-lp9 {
  margin-left: calc(50% - 50vw) !important; 
  margin-right: calc(50% - 50vw) !important; 
  line-height: 0; 
  position: relative; 
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-align: center;
}

.famy-lp3, .famy-lp4, .famy-lp5, .famy-lp6, .famy-lp7, .famy-lp8, .famy-lp9 {
  background-size: cover !important; 
  background-position: center top; 
  background-repeat: no-repeat;
  z-index: 1 !important; 
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

.famy-lp1, .famy-lp2 { background-color: #7aa2d6 !important; }

.famy-lp3 { background-image: var(--bg-sp); }
.famy-lp4 { background-image: var(--bg-sp); }
.famy-lp5 { background-image: var(--bg-sp); }
.famy-lp6 { background-image: var(--bg-sp); }
.famy-lp7 { background-image: var(--bg-sp); }
.famy-lp8 { background-image: var(--bg-sp); }
.famy-lp9 { background-image: var(--bg-sp); padding-bottom: 0 !important; }

@media (min-width: 768px) {
  .famy-lp3, .famy-lp4, .famy-lp5, .famy-lp6, .famy-lp7, .famy-lp8 { 
    background-image: var(--bg-pc); 
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

@media (min-width: 1148px) {
  .famy-lp9 {
    background-image: var(--bg-pc); 
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }
}

.famy-fixed-section { width: 100%; overflow: hidden; line-height: 0; }
.famy-fixed-img {
  display: inline-block;
  height: auto;
  max-width: none !important;
  margin-left: 50% !important;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .famy-fixed-img { width: 920px !important; }
  @media (max-width: 530px) { .famy-fixed-img { width: 205vw !important; } }
}
@media (min-width: 768px) {
  .famy-fixed-img { 
    width: 100% !important;
    min-width: 1600px !important;
  }
}

.famy-lp1__img, .famy-lp2__img, .famy-lp3__img, .famy-lp4__img, 
.famy-lp5__img, .famy-lp6__img, .famy-lp7__img, .famy-lp8__img,
.famy-lp1 a img, .famy-lp3 a img, .famy-lp4 a img, 
.famy-lp5 a img, .famy-lp6 a img, .famy-lp7 a img, .famy-lp8 a img {
  display: block; width: 100% !important; max-width: 530px !important; margin: 0 auto !important; height: auto;
}

@media (min-width: 768px) {
  .famy-lp2__img, .famy-lp3__img, .famy-lp4__img, 
  .famy-lp5__img, .famy-lp6__img, .famy-lp7__img, .famy-lp8__img,
  .famy-lp3 a img, .famy-lp4 a img, 
  .famy-lp5 a img, .famy-lp6 a img, .famy-lp7 a img, .famy-lp8 a img {
    max-width: 640px !important;
  }
  
  .famy-lp1__img, .famy-lp1 a img {
    max-width: 640px !important;
  }
}

@media (min-width: 768px) {
  img.u-pc-xlarge { 
    display: block !important;
    width: 100% !important; 
    min-width: 1400px !important;
    max-width: none !important;
    height: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important; 
  }
}

.famy-lp9__inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.famy-lp9__img--title { width: 375px; margin-bottom: 20px; }
.famy-lp9__img { width: 100%; height: auto; }
.famy-lp9__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 20px; width: 335px; }
.famy-lp9__item { display: block; line-height: 0; }
.famy-lp9__img--footer { width: 100%; max-width: 100%; margin-top: 0; display: block; }

@media (min-width: 1148px) {
  .famy-lp9__img--title { width: 500px; }
  .famy-lp9__grid { grid-template-columns: repeat(2, 1fr); width: 680px; margin-bottom: 40px; }
  .famy-lp9__img--footer { 
    width: 100% !important;
    min-width: 1600px !important;
    max-width: none !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.u-sp-only { display: block; }
.u-pc-only { display: none; }

@media (min-width: 768px) {
  :not(.famy-lp9) > .u-sp-only { display: none !important; }
  :not(.famy-lp9) > .u-pc-only { display: block !important; }
  .famy-lp9__footer-img .u-sp-only { display: block; } 
  .famy-lp9__footer-img .u-pc-only { display: none; }
}

@media (min-width: 1148px) {
  .famy-lp9__footer-img .u-sp-only { display: none !important; }
  .famy-lp9__footer-img .u-pc-only { display: block !important; }
}

body:has(#famy-bg-flag) #MainContent, 
body:has(#famy-bg-flag) #MainContent .page-width, 
body:has(#famy-bg-flag) #MainContent .shopify-section { 
  max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important;
}
/* -----------------------------------------
   【ブランドページ】Famy　終了
   ----------------------------------------- */



/* -----------------------------------------
   【ブランドページ】【商品ページ】キーワード検索　開始
   ----------------------------------------- */ 
/* キーワード検索セクション（フッター上） */
.folda-keyword-search-wrapper {
  background-color: #353637; 
  padding-top: 40px; 
}

.folda-keyword-search-inner {
  display: flex;
  flex-direction: column; /* SPは縦並び（タイトルが上、ボタンが下） */
  gap: 15px; /* タイトルとボタンの隙間 */
  margin-bottom: 30px; 
}

.folda-keyword-title {
  color: #ffffff !important; 
  font-size: 18px; /* 画像のように存在感を出して少し大きめに */
  font-weight: 700;
  margin: 0;
  text-align: left;
}

/* ★SP版：横3列のグリッド（画像通りに！） */
.folda-keyword-tags-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ★横に均等に3つ並べる */
  gap: 10px; /* ボタン同士の隙間 */
  width: 100%;
}

.folda-keyword-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none;
  border: 1px solid #ffffff;
  border-radius: 50px;
  padding: 10px 5px; /* 横に3つ入るように左右の余白を調整 */
  font-size: 12px; /* スマホで綺麗に収まるサイズ */
  white-space: nowrap; /* テキストが途中で変に改行されるのを防ぐ */
  box-sizing: border-box;
  transition: all 0.3s ease;
  width: 100%;
}

.folda-keyword-tag:hover {
  background-color: #ffffff;
  color: #353637 !important;
  text-decoration: none;
}

.folda-keyword-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4); /* 画像に合わせて少し明るめの1px線 */
  margin: 0;
}

/* PC版のレイアウト調整（769px以上） */
@media screen and (min-width: 769px) {
  .folda-keyword-search-wrapper {
    padding-top: 60px;
  }
  
  .folda-keyword-search-inner {
    flex-direction: row; /* 横並び */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 全体を中央に寄せる */
    gap: 40px; 
    margin-bottom: 40px;
  }
  
  .folda-keyword-title {
    font-size: 18px;
    text-align: right;
  }
  
  /* PC版：横3列のグリッド */
  .folda-keyword-tags-grid {
    grid-template-columns: repeat(3, 140px); /* 3列固定、各ボタンの幅を140pxに揃える */
    gap: 15px 20px; 
    width: auto;
  }
  
  .folda-keyword-tag {
    padding: 10px 15px;
    font-size: 14px;
  }
}
*/
/* -----------------------------------------
   【ブランドページ】【商品ページ】キーワード検索　終了
   ----------------------------------------- */ 


/* =============================================================
 　【ブランドページ】終了
   ============================================================= */
   
 
   



/* =============================================================
 　【商品ページ】開始
   ============================================================= */
/* -----------------------------------------
   【商品ページ】 メリットリスト セクション 開始 
   ----------------------------------------- */
/* PC版・SP版共通：この特定のセクションだけに適用 */
#Banner-template--26922758471961__image_banner_8bWHit {
  margin-bottom: 20px !important;
}

/* SP版のみ：10pxに上書き */
@media screen and (max-width: 749px) {
  #Banner-template--26922758471961__image_banner_8bWHit {
    margin-bottom: 10px !important;
  }
}
/* -----------------------------------------
   【商品ページ】 メリットリスト セクション 終了
   ----------------------------------------- */   
   

/* -----------------------------------------
   【商品ページ】 メリットリスト セクション 開始 削除予定
   ----------------------------------------- */
/* ボックスの位置と背景は踏襲 */
.product-benefit-box {
  background-color: #F5F5F5; 
  padding: 0; /* 画像をいっぱいに広げる場合は0、余白が必要なら調整 */
  margin: 20px 0;
  border-radius: 4px;
  overflow: hidden; /* 角丸からはみ出さないように */
  display: block;
}

/* 画像をボックスにフィットさせる */
.merit-image-full {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* スマホでの位置調整（必要に応じて） */
@media screen and (max-width: 750px) {
  .product-benefit-box {
    margin: 15px 0;
  }
}
/* -----------------------------------------
   【商品ページ】 メリットリスト セクション 終了削除予定
   ----------------------------------------- */   
   


/* -----------------------------------------
   【商品ページ】 タイトル 開始
   ----------------------------------------- */
/* PC版（デフォルト） */
.product__title h1 {
  font-size: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important; /* 下の要素との余白（適宜調整） */
  line-height: 1.0 !important;
}

/* SP版（スマホ：749px以下） */
@media screen and (max-width: 749px) {
  .product__title h1 {
    font-size: 20px !important;
  }
}
/* -----------------------------------------
   【商品ページ】 タイトル 終了
   ----------------------------------------- */
   
   



/* -----------------------------------------
   【商品ページ】 ボタン 開始
   ----------------------------------------- */
/* ======================================================
   税込ラベル・価格周りの調整（スマホ・PC共通）
   ====================================================== */

/* 1. 通常価格の横の「税込」を小さくする */
.fom-sub-original-price .fom-tax-small {
  font-size: 9px;
  margin-left: -2px;
  display: inline-block;
}

/* 2. 赤字金額の横の「税込」（スマホ基準） */
.fom-price-tax {
  font-size: 14px;
  color: #bd4e4e;
  font-weight: 700;
  position: relative;
  left: -3px; 
  top: 3px;
}

/* 3. PC版（751px以上）の価格周り上書き */
@media screen and (min-width: 751px) {
  .fom-sub-original-price .fom-tax-small {
    font-size: 12px !important;
    margin-left: 2px !important;
  }
  .fom-price-tax {
    left: 0px !important;
    top: 0px !important;
    font-size: 16px !important;
  }
}

/* ------------------SECTION 1. GoSubウィジェット（定期購入 / 通常購入）------------------ */

/* 1. 不要な標準アイコン・テキストの根絶 */
.gosub-widget__groups-container svg,
.gosub-widget__groups-container img,
.gosub-widget__icon,
.gosub-widget__widget-icon,
.gosub-widget__group-header, 
.gosub-widget__text {
  display: none !important;
  border: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. 機能復活（透明カバーでクリック範囲を確保） */
.gosub-widget__group span,
.gosub-widget__group label,
.gosub-widget__group input[type="radio"] {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; cursor: pointer !important;
  z-index: 10 !important; margin: 0 !important; padding: 0 !important;
}

/* 3. 外枠（ボックス）のデザイン */
.gosub-widget__groups {
  display: flex !important;
  gap: 8px !important;
  margin: 15px 0 !important;
  width: 100% !important;
}

.gosub-widget__group {
  flex: 1 !important;
  cursor: pointer !important;
  border: 1px solid #e8e8e8 !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 10px !important;
  border-radius: 2px !important;
  position: relative !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}

/* 4. ラジオボタンの位置固定 */
.gosub-widget__group::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 10px !important; 
  width: 16px !important; height: 16px !important;
  min-width: 16px !important;
  border: 1px solid #333 !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
  z-index: 1;
}

/* 5. 新規テキストの表示 */
.gosub-widget__group:has(.go-sub-purchase-option-subscription)::after {
  content: "ずっとおトク便" !important;
  font-size: 16px; font-weight: 500; color: #333;
  white-space: nowrap; padding-left: 10px;
}
.gosub-widget__group:has(.go-sub-purchase-option-one-time)::after {
  content: "通常の注文" !important;
  font-size: 16px; font-weight: 500; color: #333;
  white-space: nowrap; padding-left: 12px;
}

/* 6. 選択時のスタイル */
.gosub-widget__group.gosub__plan-selected {
  background-color: #333333 !important;
  border-color: #333333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.gosub-widget__group.gosub__plan-selected::before {
  border: 5px solid #fff !important;
  background: #333 !important;
  box-shadow: inset 0 0 0 1px #fff !important;
}
.gosub-widget__group.gosub__plan-selected::after {
  color: #ffffff !important;
}

/* --- 【スマホ版：750px以下】 中央寄せ ＆ 横並び --- */
@media screen and (max-width: 750px) {
  .gosub-widget__groups-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 440px !important;
  }
  div.gosub-widget__groups {
    display: flex !important;
    flex-direction: row-reverse !important;
    gap: 8px !important;
    width: 100% !important;
  }
  div.gosub-widget__group {
    flex: 1 !important;
    min-height: 46px !important;
    padding: 10px 5px !important;
  }
}

/* --- 【PC版：751px以上】 左揃え ＆ 右を制限 --- */
@media screen and (min-width: 751px) {
  .gosub-widget__groups-container {
    max-width: 440px !important;
    margin-left: 0 !important;
    display: block !important;
    border-right: 30px solid transparent !important;
    box-sizing: border-box !important;
  }

  .gosub-widget__groups-container.default-subscription-selected {
    position: relative !important;
    top: -10px !important;
    margin-bottom: -10px !important;
  }
}

/* --- 【タブレット版：751px 〜 930px】 縦並びレイアウト --- */
@media screen and (min-width: 751px) and (max-width: 930px) {
  div.gosub-widget__groups-container,
  div.gosub-widget__groups {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
  }
  div.gosub-widget__group {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* --- スマホ版（750px以下）：全体の中央寄せ ＆ アイコン位置修正 --- */
@media screen and (max-width: 750px) {
  
  /* 全体の幅固定と中央寄せ */
  .product__info-container > *, 
  .product-form__input,
  .gosub-widget__groups-container,
  .product-grid,
  .product-list-container {
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* 【最重要】アイコン親要素の強制修正：オレンジラインに合わせる */
  .product__info-container > div:has(.product-icon-inline) {
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 !important; /* 親の余白をリセットしてラインに合わせる */
    text-align: left !important;
    display: block !important;
  }

  /* 数量セレクター等が勝手に伸びないよう調整 */
  .quantity,
  .select {
    width: fit-content !important;
    max-width: 100% !important;
  }

  /* スマホ版：GoSubラジオボタンの微調整 */
  div.gosub-widget__group::before {
    left: 8px !important;
    width: 14px !important; height: 14px !important;
    min-width: 14px !important;
  }
  div.gosub-widget__group::after {
    font-size: 13px !important;
    padding-left: 10px !important;
  }
}

/* --- アイコン画像（送料無料・最短翌日配送）の個別調整 --- */

/* 1. PC・スマホ共通：画像を横並びにする設定 */
.product__info-wrapper .product-icon-inline {
  display: inline-block !important; 
  vertical-align: middle !important;
  margin-right: 8px !important;    
  margin-bottom: 8px !important;
  width: auto !important;          
}

/* 2. スマホ版（750px以下）の特定調整：アイコンサイズと位置 */
@media screen and (max-width: 750px) {
  .product-icon-inline img {
    height: 26px !important; /* ライン内に収まりやすいよう高さを微調整 */
    width: auto !important;
    object-fit: contain !important;
    display: inline-block !important; 
  }
  
  /* アイコンが左に寄りすぎている場合の微調整用 */
  .product-icon-inline {
    margin-left: 0 !important;
  }
}
/* -----------------------------------------
   【商品ページ】 ボタン 終了
   ----------------------------------------- */




/* -----------------------------------------
   【商品ページ】 バリエーションピッカー調整 開始
   ----------------------------------------- */
/* ------------------ 【PC版】 設定 (751px以上) ---------------- */
@media screen and (min-width: 751px) {
  /* 1. 幅の設定：ラベルとお届け間隔は広く、数量だけ固定 */
  .product-form__input,
  #folda-final-dropdown-area {
    width: 85% !important;
    max-width: none !important;
  }
  
  /* ラベルのセレクトボックス自体を親の80%幅いっぱいに */
  .product-form__input .select {
    max-width: 100% !important;
    width: 100% !important;
  }

  .quantity {
    width: 140px !important;
    min-width: 140px !important;
    margin-left: 0 !important;
  }

  /* 2. 高さの統一 (PC: 40px) */
  .select__select, 
  #folda-final-select, 
  .quantity,
  .price-per-item__container {
    height: 40px !important;
    min-height: 40px !important;
  }

  .quantity__input, 
  .quantity__button {
    height: 38px !important;
  }

  /* 3. 隙間の調整 */
  .product-form__input,
  #folda-final-dropdown-area,
  .product-form__input--quantity {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  #folda-final-dropdown-area label[style*="margin-bottom"],
  .form__label,
  .quantity__label {
    margin-bottom: 2px !important;
  }

  .product-form__buttons {
    margin-top: 15px !important;
  }
}

/* -----------------【スマホ・タブレット版】 設定 (750px以下) ------------------- */
@media screen and (max-width: 750px) {
  /* 1. 中央寄せの外枠 */
  .product__info-container > *, 
  .product-form__input,
  .gosub-widget__groups-container,
  #folda-final-dropdown-area {
    width: 100% !important;
    max-width: 440px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 2. 高さの統一 (SP: 38px) */
  .select__select, 
  #folda-final-select, 
  .quantity,
  .price-per-item__container {
    height: 38px !important;
    min-height: 38px !important;
  }

  .quantity__input, 
  .quantity__button {
    height: 36px !important;
  }

  /* 3. 数量の横幅固定 / ラベルは100% */
  .quantity {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    margin-left: 0 !important;
  }
  
  .product-form__input .select,
  .select__select {
    width: 100% !important;
  }

  /* 4. 隙間の調整 */
  .product-form__input, 
  #folda-final-dropdown-area, 
  .product-form__input--quantity {
    margin-top: 8px !important;
  }
  
  #folda-final-dropdown-area label[style*="margin-bottom"],
  .form__label {
    margin-bottom: 2px !important;
  }
}
/* -----------------------------------------
   【商品ページ】 バリエーションピッカー調整 終了
   ----------------------------------------- */
   
   
/* -----------------------------------------
   【商品ページ】 数量セレクタ（カートに1）削除 開始
   ----------------------------------------- */
/* 1. ラベルの中にある隠しテキスト用のspanだけを狙い撃ち */
.quantity__label span.visually-hidden,
.quantity__label span[id*="quantity-label"],
.quantity__rules-cart {
  display: none !important;
}

/* 2. 「数量」の文字自体は消えないように保護 */
.quantity__label {
  display: inline-block !important;
  visibility: visible !important;
}
/* -----------------------------------------
   【商品ページ】 数量セレクタ（カートに1）削除 終了
   ----------------------------------------- */

/* -----------------------------------------
   【商品ページ】バリエーションの「利用できません」を隠す 開始
   ----------------------------------------- */
variant-selects .select__select option:disabled,
variant-selects .select__select option[disabled] {
  display: none !important;
}
/* -----------------------------------------
   【商品ページ】バリエーションの「利用できません」を隠す 終了
   ----------------------------------------- */


/* -----------------------------------------
   【商品ページ】 商品説明 開始
   ----------------------------------------- */      
/* 商品説明エリアの上下線設定 */
.product__description {
  border-top: 0.5px solid #787f8c !important;    /* 上の線 */
  border-bottom: 0.5px solid #787f8c !important; /* 下の線 */
  padding-top: 10px !important;                 /* 線と文字の間の余白（上） */
  padding-bottom: 10px !important;              /* 線と文字の間の余白（下） */
  margin-top: 30px !important;                  /* 上の要素との間隔 */
  margin-bottom: 30px !important;               /* 下の要素との間隔 */
}

/* 「商品説明」という見出しが中にある場合、少し太字にして距離をとる設定（任意） */
.product__description strong:first-child {
  display: block;
  margin-bottom: 15px;
  color: #333;
}   
/* -----------------------------------------
   【商品ページ】 商品説明 終了
   ----------------------------------------- */  

/* -----------------------------------------
   【商品ページ】 価格周り文字 開始
   ----------------------------------------- */
/* ---------- 1. 【共通設定】PC・スマホ両方に適用される基本デザイン ---------- */

/* 不要な標準要素の非表示 */
.price__badge-sale, .price__tax, .price__sale dt, .price__regular dt, 
.product__tax.caption, .gosub-pricing-off {
  display: none !important;
}

/* 共通：定期便バッジが出ている時だけ2段構成にする */
.price-item.price-item--regular:has(.gosub-new-price-banner) {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin-top: 20px !important;
}

/* 共通：通常購入時の赤帯と金額デザイン */
.price-item--sale::before, .price-item--regular::before {
  content: "通常価格"; display: inline-flex; align-items: center; justify-content: center;
  background-color: #ce4348; color: #fff; font-size: 13px; font-weight: 500;
  padding: 9px 7px; border-radius: 2px; margin-right: 15px; line-height: 1;
  vertical-align: middle; margin-bottom: -0.3em; letter-spacing: 0.1em;
}

/* 共通：金額と「税込」のデザイン */
.price-item--sale, .price-item--regular {
  color: #ce4348 !important; font-size: 44px !important; font-weight: 500 !important;
  display: inline-flex !important; align-items: center; letter-spacing: -0.01em; margin-bottom: 0.1em; 
}
.price-item--sale::after, .price-item--regular::after {
  content: "税込"; font-size: 21px; margin-left: 4px; font-weight: 500; align-self: flex-end; margin-bottom: 0.4em; 
}

/* 共通：送料無料バッジの基本形 */
.price.price--large::after {
  content: "送料無料"; display: block; width: fit-content; border: 2px solid #787f8c;
  color: #787f8c; padding: 4px 18px; border-radius: 40px; font-size: 16px; font-weight: 500;
  margin-bottom: 10px !important; clear: both;
}

/* 共通：定期購入時の「1段目：元値」のデザイン */
.price-item.price-item--regular:has(.gosub-new-price-banner) s {
  display: inline-flex !important; align-items: baseline !important; text-decoration: none !important;
  color: #333 !important; font-weight: 500 !important; font-size: 23px !important;
}
.price-item.price-item--regular:has(.gosub-new-price-banner) s::before { content: "通常価格" !important; font-size: 17px !important; margin-right: 8px !important; font-weight: 500 !important; }
.price-item.price-item--regular:has(.gosub-new-price-banner) s::after { content: "税込" !important; font-size: 12px !important; margin-left: 4px !important; font-weight: 400 !important; }

/* 共通：定期購入時の「2段目：定期価格」のデザイン */
.price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner {
  display: flex !important; align-items: center !important; color: #ce4348 !important;
  font-size: 44px !important; font-weight: 500 !important; margin: 0 !important;
  line-height: 1.1 !important; letter-spacing: -0.01em;
}
.price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner::before {
  content: "定期割引" !important; display: inline-flex !important; align-items: center; justify-content: center;
  background-color: #ce4348 !important; color: #fff !important; font-size: 13px !important;
  padding: 8px 7px !important; border-radius: 2px !important; margin-right: 15px !important; line-height: 1 !important;
}
.price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner::after {
  content: "税込" !important; font-size: 21px !important; margin-left: 4px !important; font-weight: 500 !important; align-self: flex-end !important; margin-bottom: 0.15em; 
}


/* ---------- 2. 【PC版】 限定設定（750px以上）---------- */
@media screen and (min-width: 750px) {
  
  /* パターン1：PC版 × ずっとおトク便 選択時 */
  .price.price--large:has(.gosub-new-price-banner) {
    margin-top: -15px !important; position: relative !important; top: -12px !important;
  }
  .price.price--large:has(.gosub-new-price-banner) .gosub-new-price-banner {
    position: relative !important; top: -12px !important;
  }
  .price.price--large:has(.gosub-new-price-banner)::after {
    margin-top: 3px !important; position: relative !important; top: -20px !important;
  }

  /* パターン2：PC版 × 通常の注文 選択時 */
  .price.price--large:not(:has(.gosub-new-price-banner)) {
    margin-top: -13px !important; position: relative !important; top: -12px !important;
  }
  .price.price--large:not(:has(.gosub-new-price-banner)) .price__container {
    position: relative !important; top: 0px !important;
  }
  .price.price--large:not(:has(.gosub-new-price-banner))::after {
    margin-top: -11px !important;  margin-bottom: 35px !important; position: relative !important; top: 0 !important; 
  }
}



/* ----------  3. 【スマホ版】 限定設定（749px以下）---------- */
@media screen and (max-width: 749px) {

  /* スマホ共通の引き上げ */
  .product__info-container { position: relative !important; top: -25px !important; }
  .slider-buttons.quick-add-hidden { position: relative !important; top: -20px !important; }

  /* パターン3：スマホ版 × ずっとおトク便 選択時 */
  .price.price--large:has(.gosub-new-price-banner) {
    margin-top: -22px !important;
  }
  /* ★ずっとおトク便時の送料無料アイコンを上に移動 */
  .price.price--large:has(.gosub-new-price-banner)::after {
    margin-top: -20px !important; /* 8pxから-30pxに変更して引き上げ */
    font-size: 12px; padding: 2px 12px; border-width: 1px;
    position: relative !important;
  }

  /* ★ずっとおトク便時：通常価格ブロック(1段目) 10px上に移動 */
  .price-item.price-item--regular:has(.gosub-new-price-banner) s {
    font-size: 16px !important;
    position: relative !important;
    top: -10px !important; 
  }
  .price-item.price-item--regular:has(.gosub-new-price-banner) s::before {
    font-size: 13px !important;
    margin-right: 5px !important;
  }
  .price-item.price-item--regular:has(.gosub-new-price-banner) s::after {
    font-size: 9px !important;
    margin-left: 3px !important;
  }

  /* ★定期割引(2段目)：10px上に引き上げ */
  .price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner { 
    font-size: 28px !important; 
    position: relative !important;
    top: -17px !important; 
  }
  .price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner::before { font-size: 10px !important; padding: 4px 5px !important; margin-right: 8px !important; }
  .price-item.price-item--regular:has(.gosub-new-price-banner) .gosub-new-price-banner::after { font-size: 12px !important; }

  /* パターン4：スマホ版 × 通常の注文 選択時 */
  .price.price--large:not(:has(.gosub-new-price-banner)) {
    margin-top: -10px !important; position: relative !important; top: -9px !important;
  }
  .price.price--large:not(:has(.gosub-new-price-banner))::after {
    margin-top: -6px !important; font-size: 12px; padding: 2px 12px; border-width: 1px;
  }

  /* 通常時のスマホフォントサイズ */
  .price-item--sale, .price-item--regular { font-size: 28px !important; }
  .price-item--sale::before, .price-item--regular::before { font-size: 10px; padding: 5px 6px; margin-right: 8px; }
  .price-item--sale::after, .price-item--regular::after { font-size: 12px; }
}

/* 干渉リセット（共通） */
.price-item.price-item--regular:has(.gosub-new-price-banner)::before,
.price-item.price-item--regular:has(.gosub-new-price-banner)::after {
  display: none !important;
}
/* -----------------------------------------
   【商品ページ】 価格周り文字 終了
   ----------------------------------------- */



/* -----------------------------------------
   【商品ページ】 商品情報セクションの下部余白削除 開始
   ----------------------------------------- */
/* --- 商品セクション下の余白（緑の部分）を削除 --- */

/* 1. 商品情報セクション自体の下余白をカット */
.section-main-product,
.shopify-section-main-product,
[class*="section-template--"][class*="__main"] {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* 2. 次に続くセクション（関連商品など）の上余白をカット */
.section-main-product + .shopify-section,
.shopify-section-main-product + .shopify-section,
[class*="section-template--"][class*="__main"] + .shopify-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3. 万が一消えない場合の、商品コンテナ直下の余白も念のためカット */
.product.grid {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;}
/* -----------------------------------------
   【商品ページ】 商品情報セクションの下部余白削除 終了
   ----------------------------------------- */      





/* =============================================================
 
 GOSUB 開始
 
   ============================================================= */

 /* -----------------------------------------
   GOSUB ドロップダウン 開始
   ----------------------------------------- */
/* ドロップダウンエリアのスタイル */
#folda-final-dropdown-area {
  margin: 20px 0;
}

/* セレクトボックスのスタイル */
.folda-custom-select {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #000;
  background-color: #fff;
  font-size: 14px;
  appearance: auto;
}

/* 元のGOSUBラジオボタンを非表示 */
.gosub-widget__plans-container {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 「お届け間隔」のlegendを非表示 */
.gosub-widget__wrapper legend {
  display: none !important;
}


/* -----------------------------------------
   GOSUB ドロップダウン 終了
   ----------------------------------------- */  


/* -----------------------------------------
   GO SUB ボタン
   ----------------------------------------- */

/* 1. ボタン全体を包むコンテナ：横並び＆左右反転 */
.gosub-widget__groups-container {
  display: flex !important;
  
  /* ▼ここを変更しました（row → row-reverse） */
  /* これで「右にあるものを左に」「左にあるものを右に」入れ替えます */
  flex-direction: row-reverse !important; 
  
  justify-content: space-between !important;
  align-items: stretch !important;   /* 高さを高い方に合わせる */
  gap: 10px !important;              /* ボタン間の隙間 */
  width: 100% !important;
}

/* 2. 個々のボタンの枠（Wrapper）：幅を均等（50%ずつ）にする */
.gosub-widget__group {
  flex: 1 !important;             /* 均等にスペースを分け合う */
  width: 50% !important;          /* 念のため幅も指定 */
  margin: 0 !important;           /* 不要な余白削除 */
}

/* 3. ボタンの中身（ラベル）：高さ調整とレイアウト */
.gosub-widget__group-label {
  /* 高さ・余白設定 */
  padding-top: 6px !important;    /* 上下余白を小さく */
  padding-bottom: 6px !important;
  min-height: 60px !important;    /* 最低高さを指定して揃える */
  height: 100% !important;        /* 親枠の高さに合わせて伸びる */
  box-sizing: border-box !important;

  /* 中身の配置（縦並び・中央揃え） */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;            /* アイコンと文字の間隔 */
}

/* 4. ボタン内のテキスト等の余白削除 */
.gosub-widget__group-label * {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

/* 5. アイコンサイズ調整 */
.gosub-widget__group-label svg,
.gosub-widget__group-label img {
  max-height: 18px !important;
  width: auto !important;
  display: block !important;
}

/* -----------------------------------------
   GOSUB 「継続回数に応じて...」テキスト削除（属性指定版）
   ----------------------------------------- */

/* クラス名がない要素のため、埋め込まれているスタイル属性(font-size: 0.7em)を目印にして消します */
.product__info-container p[style*="font-size: 0.7em"] {
  display: none !important;
}

/* -----------------------------------------
   GOSUB お届け間隔ごとの「10% OFF」のみ削除
   ----------------------------------------- */

/* .gosub-widget__plan-label（各プランの行）の中にある
   .gosub-pricing-off（割引バッジ）だけを非表示にする */
.gosub-widget__plan-label .gosub-pricing-off {
  display: none !important;
}




/* -----------------------------------------
   ドロップダウン 調整
   ----------------------------------------- */

/* 1. 全体のフォントとカラーを統一 */
#folda-final-dropdown-area,
#folda-final-dropdown-area label,
.gosub-widget,
.gosub-widget select,
.folda-custom-select {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  color: #121212BF !important; /* テキストカラー統一 */
  font-size: 1.2rem !important;
}

/* 2. 枠線の色・太さ・角丸の削除 */
.folda-custom-select,
.gosub-widget select {
  border: 1px solid #121212BF !important; /* 枠線カラー統一 */
  border-radius: 0 !important; /* ★ここを追加：角丸を完全に除去 */
  height: 4.5rem !important;
  padding: 0 2.0rem !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* 3. 「∨」矢印の修正（色を #121212BF に同期） */
.folda-custom-select,
.gosub-widget select {
  /* SVG内の fill='%23121212BF' で矢印の色を指定 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' class='icon icon-caret' fill='%23121212BF' viewBox='0 0 10 6'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1.5rem center !important;
  background-size: 1.0rem !important;
  padding-right: 3.5rem !important;
}

/* 4. ラベル（タイトル文字）の調整 */
.gosub-label-title,
[class*="gosub-label"],
#folda-final-dropdown-area label {
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  margin-bottom: 0.8rem !important;
  display: block;
  letter-spacing: 0.04em;
  color: #121212BF !important;
}
/* -----------------------------------------
   GOSUB ドロップダウン 挙動修正（外側へ太枠化）
   ----------------------------------------- */

/* 1. 基本設定 */
.folda-custom-select,
#folda-final-dropdown-area label {
  cursor: pointer !important;
}

.folda-custom-select {
  /* 基本の1px枠 */
  border: 1px solid #121212BF !important;
  background-color: #fff !important;
}

/* 2. マウスオン（ホバー）時：外側にグレーの線を出す */
.folda-custom-select:hover {
  /* borderは1pxのまま、外側に1pxの影（グレー）を出して合計2pxに見せる */
  box-shadow: 0 0 0 1px #a0a0a0 !important;
  border-color: #a0a0a0 !important;
  outline: none !important;
}

/* 3. クリック（フォーカス）時：外側に黒の線を出す */
.folda-custom-select:focus,
.folda-custom-select:focus-visible {
  outline: none !important;
  /* borderは1pxのまま、外側に1pxの影（黒）を出して合計2pxに見せる */
  box-shadow: 0 0 0 1px #000 !important;
  border-color: #000 !important;
}

/* 4. モバイル用タップハイライト除去 */
.folda-custom-select {
  -webkit-tap-highlight-color: transparent;
}
   /* =============================================================
 
 GOSUB 終了
 
   ============================================================= */
/* =============================================================
 　【商品ページ】終了
   ============================================================= */   












/* ============================================================
   【下層ページ】開始
   ============================================================ */ 
/* -----------------------------------------
   【プライバシーポリシー】開始
   ----------------------------------------- */  
/* PC版のサイズ指定 */
.shopify-policy__title h1 {
  font-size: 26px !important;
  padding-top: 20px;
  padding-bottom: 15px;   
}

/* ポリシーページの本文下に余白を追加 */
.shopify-policy__body {
  margin-bottom: 60px; /* PC版の余白（数値は適宜調整してください） */
}

/* スマホ版（749px以下）のサイズ指定 */
@media screen and (max-width: 749px) {
  .shopify-policy__title h1 {
    font-size: 21px !important;
  }
} 


/* -----------------------------------------
   【プライバシーポリシー】終了
   ----------------------------------------- */    
/* ============================================================
   【下層ページ】終了
   ============================================================ */ 
   

/* ============================================================
   【カート】開始
   ============================================================ */ 
/* -----------------------------------------
   【カート】 POP 開始
   ----------------------------------------- */  
/* カートポップアップ内の「買い物を続ける」リンクを非表示にする */
.cart-notification__links .link.button-label {
    display: none !important;
}   
/* -----------------------------------------
   【カート】 POP 終了
   ----------------------------------------- */ 
/* ============================================================
   【カート】終了
   ============================================================ */ 
   
   






/* =============================================================
 　【全ページ共通】開始
   ============================================================= */   
/* -----------------------------------------
   【全ページ共通】スライドショーSP画像追加 開始
   ----------------------------------------- */
/* デフォルト（PC画面）ではスマホ用画像を隠しておく */
.sp-slide-image {
  display: none !important;
}

/* 画面幅が749px以下のとき（スマホ表示）の動き */
@media screen and (max-width: 749px) {
  /* 1. PC画像を隠す */
  .has-sp-image .pc-slide-image {
    display: none !important;
  }
  
  /* 2. スマホ画像を表示し、高さを確保させる */
  .has-sp-image .sp-slide-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
    height: auto !important;
  }

  /* 3. 画像の入れ物（メディア）の絶対配置を解除し、画像の高さに合わせる */
  .slideshow__slide .slideshow__media.has-sp-image {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* 4. 【重要】Shopify標準の「高さ設定（中・大など）」を強制的に無効化する */
  slideshow-component:has(.has-sp-image) .slideshow,
  slideshow-component:has(.has-sp-image) .banner,
  slideshow-component:has(.has-sp-image) .slider,
  slideshow-component:has(.has-sp-image) .slideshow__slide {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 5. 見えない「空のテキスト枠」を完全に消滅させる */
  slideshow-component:has(.has-sp-image) .slideshow__text-wrapper {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
  }
}
/* -----------------------------------------
   【全ページ共通】スライドショーSP画像追加 終了
   ----------------------------------------- */



/* -----------------------------------------
   【全ページ共通】画像バナーPC幅調整 開始
   ----------------------------------------- */

/* ★修正ポイント：
   クラス名に「slideshow」が含まれる要素は徹底的に除外するように
   条件を [class*="slideshow"] に強化しました。
*/

/* 1. セクション自体の余白削除
   ※「slideshow」を含まないバナーがあるセクションだけを対象 */
.shopify-section:has(.banner:not([class*="slideshow"])) {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 2. バナー本体の設定
   ※「slideshow」という文字を含むクラスを持つ要素はすべて無視 */
.banner:not([class*="slideshow"]) {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
}

/* 3. 画像エリアの設定 */
.banner:not([class*="slideshow"]) .banner__media, 
.banner:not([class*="slideshow"]) .banner__media.media {
  position: static !important;
  height: auto !important;
  padding-bottom: 0 !important; /* 空白削除 */
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* 4. 画像自体の設定 */
.banner:not([class*="slideshow"]) .banner__media img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  max-width: 100% !important;
  vertical-align: bottom !important;
}

/* 5. 邪魔な要素（テキスト・影・疑似要素）を完全抹消 */
.banner:not([class*="slideshow"]) .banner__content,
.banner:not([class*="slideshow"]) .banner__box,
.banner:not([class*="slideshow"])::after,
.banner:not([class*="slideshow"])::before,
.banner:not([class*="slideshow"]) .banner__media::after,
.banner:not([class*="slideshow"]) .banner__media::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
}

/* ▼ PC画面（750px以上）のときだけ幅を制限（LP仕様） */
@media screen and (min-width: 750px) {
  .banner:not([class*="slideshow"]) {
    max-width: 450px !important;   /* PCでの幅 */
    margin-left: auto !important;  /* 中央寄せ */
    margin-right: auto !important;
  }
}
/* -----------------------------------------
   【全ページ共通】画像バナーPC幅調整 終了
   ----------------------------------------- */


/* -----------------------------------------
   【全ページ共通】フッター 開始
   ----------------------------------------- */
.folda-custom-footer {
  background-color: #353637; /* 背景色 */
  color: #ffffff;            /* 文字色（真っ白） */
  padding: 60px 0 40px 0;    /* 上下の余白（左右は.folda-containerに任せる） */
}

/* リンクエリアは全体の中央寄せルールを打ち消して左寄せにする */
.folda-footer-links-wrapper {
  text-align: left !important;
  margin-bottom: 60px;
}

.folda-footer-heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

.folda-footer-main-link {
  display: block;
  margin-bottom: 20px;
}

/* --- リンクのグリッド設定（魔法の列分割） --- */
.folda-footer-nav-grid {
  display: grid;
  /* 上から下へ流し込み、溢れたら右の列へ */
  grid-auto-flow: column; 
  /* SP版は5行×2列に設定 */
  grid-template-rows: repeat(5, auto);
  grid-template-columns: 1fr 1fr;
  row-gap: 20px;
  column-gap: 20px;
}

.folda-footer-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  display: inline-block;
}

.folda-footer-link:hover {
  text-decoration: underline;
}

/* --- ロゴ＆コピーライトエリア --- */
.folda-footer-logo-area {
  text-align: center !important; /* ここは中央寄せ */
  /* ★白い境界線（border-top）を削除して掃除しました！ */
  padding-top: 40px;
}

.folda-footer-logo-link {
  display: inline-block;
  margin-bottom: 15px;
}

.folda-footer-logo-img {
  display: block;
  max-width: 100%;
  height: auto;
  /* ★コピーライトの位置に影響を与えず、ロゴだけを10px下にずらす */
  position: relative;
  top: 14px;
}

.folda-footer-copyright {
  font-size: 11px;
  color: #a0a0a0; /* 画像に寄せて少しグレーに */
  margin: 0;
  letter-spacing: 0.05em;
}

/* PC版のレイアウト調整（769px以上） */
@media screen and (min-width: 769px) {
  .folda-custom-footer {
    padding: 80px 0 50px 0;
  }
  
  .folda-footer-nav-grid {
    /* PC版は3行×3列に設定（これだけで綺麗に並び替わります！） */
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
  }
  
  .folda-footer-link {
    font-size: 14px;
  }
}
/* -----------------------------------------
   【全ページ共通】フッター 終了
   ----------------------------------------- */
/* -----------------------------------------
   【全ページ共通】固定バナー 開始
   ----------------------------------------- */    
/* --- 固定バナー：スマホ版 5%OFF サイズアップ調整 --- */

.slim-sticky-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  z-index: 9999 !important;
  padding: 8px 0 !important;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.2) !important;
}

.slim-banner-flex-container {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  gap: 15px !important;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}

.slim-banner-text {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif !important;
  font-size: 13px !important; 
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

/* 強調テキスト（5%OFF）の基本設定 */
.emphasize {
  font-weight: 700 !important;
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
  margin-left: 4px !important;
  font-size: 15px !important; /* PC版のサイズ */
}

.slim-banner-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 5px 15px !important;
  font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* ブランドが「biyoudo」のコレクションページと商品ページで、告知バーの画像を白くする */
[data-vendor="biyoudo"] .announcement-bar__image img,
.template-collection-biyoudo .announcement-bar__image img,
.template-product-biyoudo .announcement-bar__image img {
  filter: brightness(0) invert(1) !important;
}

/* ★スマホ版（749px以下）の個別調整 */
@media screen and (max-width: 749px) {
  .slim-sticky-banner {
    padding: 8px 10px !important;
  }
  
  .slim-banner-flex-container {
    gap: 8px !important;
  }
  
  .slim-banner-text {
    font-size: 11px !important; /* 周りのテキストは小さく維持 */
  }

  /* ↓ ここで 5%OFF のサイズだけを大きくしています */
  .emphasize {
    font-size: 13px !important; /* 11pxに対して少し大きくして目立たせる */
    margin-left: 2px !important;
  }
  
  .slim-banner-btn {
    padding: 4px 10px !important;
    font-size: 10px !important;
  }
}
/* -----------------------------------------
   【全ページ共通】固定バナー 終了
   ----------------------------------------- */   

/* =============================================================
 　【全ページ共通】終了
   ============================================================= */   






/* =============================================================
 　【ヘッダー】 開始
============================================================= */
/* -----------------------------------------
   【ヘッダー】アイコン調整 開始
   ----------------------------------------- */

/* -----------------------------------------
   【ヘッダー】アイコン調整 終了
   ----------------------------------------- */
/* =============================================================
 　【ヘッダー】 終了
============================================================= */



/* ==========================================================================
   1. 共通設定（全デバイス共通）
   ========================================================================== */

/* ヘッダー全体の基本ルール */
header {
  width: 100% !important;
  max-width: 1000px !important; /* 指定最大幅 */
  margin: 0 auto;
}

/* 透過・アニメーション設定 */
sticky-header {
  --background-opacity: 0.5;
  background-color: rgba(255, 255, 255, var(--background-opacity)) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
}

/* ロゴの基本設定 */
.header__heading-logo-wrapper {
  display: flex;
  align-items: center;
  width: auto;
  height: 45px;
  max-width: 310px; /* ロゴの最大幅 */
}
.header__heading-logo-wrapper img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* アイコン群の共通ルール */
.header__icons {
  display: flex;
  align-items: center;
  gap: 24px; /* 指定アイコン間隔 */
  padding-right: 0;
}
.header__icon,
.header__icon--cart .icon {
  height: unset;
  width: unset;
  padding: 0;
  margin-right: 0;
}
.header__icon .svg-wrapper {
  width: auto;
  height: 24px;
  aspect-ratio: 1 / 1;
}

/* カートバッジの位置（共通） */
.cart-count-bubble {
  bottom: -6px !important;
  left: 14px !important;
}


/* ==========================================================================
   2. スマートフォン用設定（749px以下）
   ========================================================================== */
@media screen and (max-width: 749px) {
  sticky-header {
    height: 58px !important; /* 指定高さ58px */
  }
  header {
    padding-left: 20px !important; /* 指定左右余白20px */
    padding-right: 20px !important; /* 指定左右余白20px */
  }
  /* アイコンサイズ微調整（必要あれば） */
  .header__icon .svg-wrapper {
    height: 18px;
  }
  /* ロゴリンクの微調整 */
  .header__heading-link {
    margin-left: -0.75rem;
  }
  .header__heading-link {
    padding-top: 0;
    padding-bottom: 0;
  }
  .desktop-localization-wrapper {
    display: none;
  }
}


/* ==========================================================================
  3. PC用設定（750px以上）
========================================================================== */
@media screen and (min-width: 750px) {
  sticky-header {
    height: 76px !important; /* 指定高さ84px */
  }
  header {
    padding-left: 20px !important;  /* 指定左右余白20px */
    padding-right: 20px !important; /* 指定左右余白20px */
  }
  /* PC用ロゴサイズ調整 */
  .header__heading-logo-wrapper {
    height: 56px;
  }
  .header__menu-item {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}


/* ==========================================================================
   4. 特定ブランド（BIYOUDO）の個別調整
   ========================================================================== */

/* ヘッダーセクション全体の親に黒背景を敷く */
body:has(.biyoudo) #shopify-section-header {
  background-color: #000000 !important;
}

/* sticky-headerは半透明のまま */
body:has(.biyoudo) sticky-header {
  --background-opacity: 0 !important;
  background-color: rgba(0, 0, 0, 1) !important;
  background-image: none !important;
  transition: background-color 0.3s ease !important;
}

/* ヘッダー内テキスト：白固定 */
body:has(.biyoudo) sticky-header a,
body:has(.biyoudo) sticky-header span,
body:has(.biyoudo) sticky-header p,
body:has(.biyoudo) sticky-header h1,
body:has(.biyoudo) sticky-header h2,
body:has(.biyoudo) sticky-header h3,
body:has(.biyoudo) sticky-header h4,
body:has(.biyoudo) sticky-header h5,
body:has(.biyoudo) sticky-header h6,
body:has(.biyoudo) sticky-header summary,
body:has(.biyoudo) sticky-header button {
  color: #ffffff !important;
}

/* 告知バー・メガメニュー・ドロワー：黒維持 */
body:has(.biyoudo) .announcement-bar-section .gradient,
body:has(.biyoudo) .mega-menu__content,
body:has(.biyoudo) .menu-drawer {
  background-color: #000000 !important;
  background-image: none !important;
}

/* ドロワー内のサブメニュー（シリカ水などを押した後の階層）も黒背景にする */
body:has(.biyoudo) .menu-drawer__inner-submenu {
  background-color: #000000 !important;
}

/* カートバッジ：白背景・黒文字 */
body:has(.biyoudo) .cart-count-bubble,
body:has(.biyoudo) .cart-count-bubble span {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* BIYOUDOブランドページ・商品ページのヘッダー告知バー内テキストを白に */
body:has(.biyoudo) .announcement-bar-section span,
body:has(.biyoudo) .announcement-bar-section a,
body.template-collection-biyoudo .announcement-bar-section span,
body.template-collection-biyoudo .announcement-bar-section a {
  color: #ffffff !important;
}