/*
Theme Name: EC Demo Child
Theme URI: https://coursilte.com/
Description: coursilte デモECサイト用のBlocksy子テーマ。3つのデモサイト（ecdemo02 / ecdemo06 / ecdemo08）で共通利用し、:root のキーカラー3変数のみサイトごとに差し替える。
Author: coursilte
Version: 1.0.2
Template: blocksy
Text Domain: ec-demo-child
*/


/* ==================================================================
   目次
   ------------------------------------------------------------------
   01. カラートークン・基本変数
   02. ベース(タイポグラフィ)
   03. 全幅ブレイクアウト（横スクロール対策・サイドバー時の送料無料バー）
   04. ブロック間の自動余白(Block Gap)無効化
   05. 共通レイアウト（.shop-sec / .wrap）
   06. Blocksyヘッダー・フッターの色合わせ
   07. ヘッダーの検索窓・お気に入り
   08. メインサイドバー（カテゴリーメニュー・スクロール追従）
   09. ヒーロー
   10. WooCommerce 共通（ボタン・商品カード・カテゴリータイル・独自カテゴリータイル）
   11. 規約系ページ（.legal-page / .legal-content / .legal-table）
   12. ユーティリティ
   13. レスポンシブ
   14. セクション見出し共通の追加調整（⑤〜⑦、ブランド、CTA、フォーム）
   15. フッター
   16. ヘッダーメニューのカテゴリードロップダウン（色・2列化）
   ================================================================== */


/* ==================================================================
   01. カラートークン・基本変数
   ================================================================== */

:root{
  /* ▼ここだけサイトごとに差し替える */
  --key:#c62828;
  --key-dark:#9b1c1c;
  --key-soft:#fdecec;
  /* ▲ここまで */

  --ink:#2b2b2b;
  --muted:#6b6b6b;
  --line:#e3e3e3;
  --line-soft:#f1f1f1;
  --paper:#ffffff;
  --paper-alt:#fafafa;
  --sale:#d32f2f;

  --container:1200px;
  --readable:860px;
  --radius:8px;
  --radius-lg:12px;

  --header-offset:110px;

  --font-base:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",
    "Hiragino Sans","Noto Sans Bengali","Noto Nastaliq Urdu",
    "Noto Sans Devanagari","Yu Gothic",Meiryo,sans-serif;
}


/* ==================================================================
   02. ベース
   ================================================================== */

body{
  font-family:var(--font-base);
  color:var(--ink);
  line-height:1.8;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-base);
  color:var(--ink);
  line-height:1.4;
}

img{ max-width:100%; height:auto; }

a{ color:var(--key-dark); }
a:hover{ opacity:.75; }

:target{ scroll-margin-top:var(--header-offset); }


/* ==================================================================
   03. 全幅ブレイクアウト
   ------------------------------------------------------------------
   ★重要：.shop-sec はこのリストに入れないこと（サイドバー崩れの原因）。
   ================================================================== */

.shop-hero,
.shop-band,
.shop-banner,
.shop-sticky-cta,
header.shop-header,
footer.shop-footer{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:none !important;
}

/* 横スクロールバー対策（上の100vw指定で横スクロールが出るのを防ぐ）
   ★hidden のままだと position:sticky（サイドバーの追従など）が
     効かなくなるため clip を使う。
     1行目の hidden は clip 非対応の古いブラウザ向けの保険。 */
html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

/* サイドバーが本文の横に並ぶPC表示（Blocksyでは幅1000px以上）では、
   送料無料バーを全幅にせず本文カラムの幅に収める。
   全幅のままだと左側がサイドバーの裏に潜り込み、サイドバーを
   追従させた時に、潜り込んでいた部分が見えてしまうため。
   ※スマホ・タブレットでは従来どおり全幅で表示される。 */
@media (min-width:1000px){
  [data-sidebar="left"] .shop-band{
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* ==================================================================
   04. ブロック間の自動余白(Block Gap)無効化
   ================================================================== */

.wp-block-group.alignfull{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* ==================================================================
   05. 共通レイアウト
   ================================================================== */

.shop-sec{
  padding-block:56px;
  background:var(--paper);
}

.shop-sec--alt{ background:var(--paper-alt); }
.shop-sec--soft{ background:var(--key-soft); }
.shop-sec--tight{ padding-block:32px; }

.wrap{
  width:min(var(--container),92vw);
  margin-inline:auto;
}

.wrap--narrow{ width:min(var(--readable),92vw); }

.shop-sec-head{
  margin:0 0 28px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.shop-sec-title{
  margin:0;
  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
}

.shop-sec-title small{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:400;
  color:var(--muted);
}

.shop-viewall{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border:1px solid var(--key);
  border-radius:999px;
  color:var(--key-dark);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}

.shop-viewall:hover{
  background:var(--key);
  color:#fff;
  opacity:1;
}

.shop-band{
  padding:16px 20px;
  background:var(--key);
  color:#fff;
  text-align:center;
  font-weight:700;
  font-size:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.shop-band-icon{ flex-shrink:0; }
.shop-band-icon--flip{ transform:scaleX(-1); }

.shop-band small{
  display:block;
  margin-top:4px;
  font-size:13px;
  font-weight:400;
  opacity:.9;
}


/* ==================================================================
   06. Blocksyヘッダー・フッターの色合わせ
   ================================================================== */

.ct-header .ct-menu-link{
  font-weight:700 !important;
}

.ct-header .ct-menu-link:hover,
.ct-header .current-menu-item > .ct-menu-link{
  color:var(--key-dark) !important;
}

.ct-header-cart .ct-dynamic-count-cart{
  background:var(--key) !important;
  color:#fff !important;
}

#offcanvas .ct-menu-link:hover{
  color:var(--key-dark) !important;
}

.ct-footer .footer-col-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:700;
}

.ct-footer .widget_nav_menu ul{
  margin:0;
  padding:0;
  list-style:none;
}

.ct-footer .widget_nav_menu li{ margin-bottom:8px; }

.ct-footer .widget_nav_menu a{
  font-size:14px;
  text-decoration:none;
}

.shop-payments{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:16px;
}

.shop-payments img{ height:26px; width:auto; }


/* ==================================================================
   07. ヘッダーの検索窓・お気に入り
   ------------------------------------------------------------------
   お気に入りは WPCode の walker_nav_menu_start_el スニペットで
   ハート＋件数バッジを出力（メニュー名「ヘッダーメニュー1」で判定）。
   GTranslateはメニュー項目にCSSクラス gtranslate-slot を付与し、
   WPCodeでdo_shortcode('[gtranslate]')を出力させている。
   ================================================================== */

.shop-search-form{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-width:260px;
  max-width:420px;
  flex:1 1 260px;
  box-sizing:border-box;
}

.shop-search-input{
  width:100%;
  height:44px;
  padding:0 48px 0 18px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  box-sizing:border-box;
}

.shop-search-input:focus{
  border-color:var(--key);
  outline:none;
}

.shop-search-submit{
  position:absolute;
  right:4px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--key);
  border-radius:8px;
  color:var(--key);
  cursor:pointer;
  padding:0;
  line-height:0;
  transition:transform .15s ease;
}

.shop-search-submit:hover{
  background:transparent !important;
  color:var(--key) !important;
  transform:translateY(-48%);
}

.shop-search-submit svg{
  display:block;
  width:16px;
  height:16px;
  flex-shrink:0;
}

.ct-header a.wishlist-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0 !important;
  font-size:0;
  line-height:1;
}

.ct-header a.wishlist-link .wishlist-icon{
  font-size:20px;
  line-height:1;
}

.ct-header a.wishlist-link .wishlist-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background:var(--key);
  color:#fff;
  font-size:11px;
  line-height:16px;
  text-align:center;
  overflow:hidden;
}

.ct-header a.wishlist-link .wishlist-badge *{
  all:unset;
  color:inherit;
  font:inherit;
}

.ct-header a.gtranslate-wrapper,
.ct-header span.gtranslate-wrapper{
  display:inline-flex;
  align-items:center;
}


/* ==================================================================
   08. メインサイドバー（カテゴリーメニュー）
   ================================================================== */

#sidebar .ct-sidebar{ padding:0; }
#sidebar .widget_nav_menu{ margin:0 0 24px; }

#sidebar .widget-menu{
  margin:0;
  padding:0;
  list-style:none;
}

#sidebar .widget-menu > li{
  border-bottom:1px solid var(--line-soft);
}

#sidebar .widget-menu > li:last-child{ border-bottom:none; }

#sidebar .widget-menu > li > a{
  display:block;
  padding:10px 4px;
  color:var(--ink);
  font-size:14px;
  text-decoration:none;
  transition:color .15s ease, padding-left .15s ease;
}

#sidebar .widget-menu > li > a:hover{
  color:var(--key-dark);
  padding-left:8px;
}

#sidebar .sub-menu{
  margin:4px 0 4px 16px;
  padding:0;
  list-style:none;
  border-left:2px solid var(--key-soft);
}

#sidebar .sub-menu li{ border-bottom:none; }

#sidebar .sub-menu a{
  display:block;
  padding:6px 4px 6px 12px;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  transition:color .15s ease, padding-left .15s ease;
}

#sidebar .sub-menu a:hover{
  color:var(--key-dark);
  padding-left:16px;
}

/* ------------------------------------------------------------------
   08-b. サイドバーのスクロール追従（スティッキー）
   ------------------------------------------------------------------
   Blocksyのカスタマイザー側の「Sticky」設定はOFFにして、ここで制御する。
   サイドバーが本文の横に並ぶPC表示（幅1000px以上）でのみ有効。

   --sidebar-top … 追従中のサイドバー上端の位置（固定ヘッダーの高さ＋余白）
     ・ページを開いた直後にサイドバーが送料無料バーより下がって見える → 小さく
     ・スクロール中にサイドバーの上端がヘッダーに隠れる → 大きく
     調整する時は var(--header-offset) を 96px のような数値に置き換える。
     （--admin-bar はログイン中の管理バーの高さ。未ログイン時は0）
   ------------------------------------------------------------------ */

@media (min-width:1000px){
  #sidebar{
    --sidebar-top:calc(var(--admin-bar, 0px) + var(--header-offset));
    position:sticky !important;
    top:var(--sidebar-top) !important;
    align-self:start !important; /* 本文と同じ高さに引き伸ばされると追従できないため */
  }

  /* 画面の低いノートPCなどでカテゴリーが収まりきらない場合は、
     リスト部分だけをスクロールさせる（下のカテゴリーが見切れるのを防ぐ）。
     #sidebar本体にoverflowを付けると枠の影が切れることがあるため、リスト側に付ける。 */
  #sidebar .widget-menu{
    max-height:calc(100vh - var(--sidebar-top) - 100px);
    overflow-y:auto;
    scrollbar-width:thin;
  }
}


/* ==================================================================
   09. ヒーロー
   ================================================================== */

.shop-hero-sec{ padding-block:0 24px; }

.shop-hero-inner img{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  object-fit:cover;
  border-radius:var(--radius-lg);
}

.shop-hero-inner--bg{
  width:100%;
  aspect-ratio: 1916 / 821 !important;
  background-image:url('https://ecdemo02.coursilte.com/wp-content/uploads/2026/09/heroimage.jpg');
  background-size:cover;
  background-position:center;
  border-radius:var(--radius-lg);
}

@media (max-width:767px){
  .shop-hero-inner--bg{
    aspect-ratio:1/1 !important;
    max-height:500px !important;
    background-image:url('https://ecdemo02.coursilte.com/wp-content/uploads/2026/09/heroimage_sp.jpg');
  }
}


/* ==================================================================
   10. WooCommerce 共通
   ================================================================== */

.add_to_cart_button,
.single_add_to_cart_button,
a.button.add_to_cart_button,
.wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
button.added_to_cart,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background:var(--key) !important;
  border-color:var(--key) !important;
  color:#fff !important;
  border-radius:var(--radius) !important;
  font-weight:500 !important;
}

.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background:var(--key-dark) !important;
  border-color:var(--key-dark) !important;
}

.woocommerce ul.products li.product .yith-add-to-wishlist-button-block{
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
}

.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  font-size:12px;
  line-height:1.4;
  white-space:normal;
  word-break:keep-all;
  text-align:center;
  color:var(--muted);
  text-decoration:none;
}

.woocommerce ul.products li.product .yith-wcwl-add-to-wishlist-button-icon{
  width:14px;
  height:14px;
  flex-shrink:0;
}

.woocommerce ul.products,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  margin:0 !important;
  padding:0 !important;
  list-style:none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none !important; }

.woocommerce ul.products li.product,
ul.products li.product{
  width:auto !important;
  margin:0 !important;
  padding:12px !important;
  float:none !important;
  display:flex;
  flex-direction:column;
  min-width:0; /* ← 商品名の長さによって列幅が不揃いになるのを防ぐ */
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  text-align:center;
}

/* aspect-ratioに !important が必要な理由：
   遅延読み込みスクリプトがimgにインラインでaspect-ratio:4/3相当を
   書き込むことがあるため、通常のCSS指定だけでは負けてしまう。 */
.woocommerce ul.products li.product a img{
  margin:0 0 10px;
  border-radius:var(--radius);
  aspect-ratio:1/1 !important;
  object-fit:contain;
  background:#fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  padding:0 !important;
  margin:0 0 6px;
  font-size:14px !important;
  font-weight:500;
  line-height:1.5;
}

.woocommerce ul.products li.product .price{
  margin:0 0 10px;
  color:var(--ink) !important;
  font-size:16px;
  font-weight:700;
}

.woocommerce ul.products li.product .price del{
  margin-right:6px;
  color:var(--muted) !important;
  font-size:13px;
  font-weight:400;
}

.woocommerce ul.products li.product .price ins{
  color:var(--sale) !important;
  text-decoration:none;
}

.woocommerce ul.products li.product .button{
  margin-top:auto !important;
  width:100%;
  font-size:13px !important;
}

.woocommerce span.onsale{
  top:10px !important;
  left:10px !important;
  right:auto !important;
  min-height:0 !important;
  min-width:0 !important;
  padding:3px 10px !important;
  background:var(--sale) !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1.6 !important;
}

/* カテゴリータイル（ショートコード[product_categories]版）：
   画像は横長〜正方形寄りの構図のため、円形(50%)ではなく角丸の
   正方形カードに収めている。object-fit:contain の余白は --paper-alt で埋める。
   ※現在はショートコード版に代えて、下記の独自ショートコード
   [shop_category_tiles]（.shop-cat-grid）を使用中。
   このブロックはショートコード版に戻す可能性を考慮して残してある。 */
.woocommerce ul.products li.product-category{
  padding:0 !important;
  overflow:hidden;
}

.woocommerce ul.products li.product-category a{
  display:block;
  padding:14px 10px;
  text-decoration:none;
}

.woocommerce ul.products li.product-category.product img{
  margin: 0 auto 8px !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
  border-radius: var(--radius-lg) !important;
  background: var(--paper-alt) !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.woocommerce ul.products li.product-category h2{
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  font-weight:500;
}

.woocommerce ul.products li.product-category .count{
  display:block;
  margin-top:2px;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:12px;
  font-weight:400;
}

.shop-cats-6 ul.products{ grid-template-columns:repeat(6,1fr); }
.shop-products-4 ul.products{ grid-template-columns:repeat(4,1fr); }

#sidebar ~ * .woocommerce ul.products,
#sidebar ~ * ul.products{ grid-template-columns:repeat(4,1fr); }

#sidebar ~ * .shop-cats-6 ul.products{ grid-template-columns:repeat(4,1fr); }


/* ------------------------------------------------------------------
   10-b. 独自カテゴリータイル [shop_category_tiles] ショートコード用
   ------------------------------------------------------------------
   WooCommerce標準の[product_categories]を使わず、カテゴリーの
   「表示順(display_order)」メタと元画像(full)を直接使って出力する
   独自ショートコード用のスタイル。クロップ・リサイズを一切経由しない。
   ------------------------------------------------------------------ */

.shop-cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.shop-cat-grid--cols-2{ grid-template-columns:repeat(2,1fr); }
.shop-cat-grid--cols-3{ grid-template-columns:repeat(3,1fr); }
.shop-cat-grid--cols-4{ grid-template-columns:repeat(4,1fr); }
.shop-cat-grid--cols-5{ grid-template-columns:repeat(5,1fr); }
.shop-cat-grid--cols-6{ grid-template-columns:repeat(6,1fr); }

.shop-cat-item{
  display:block;
  padding:14px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  text-align:center;
  text-decoration:none;
  color:var(--ink);
}

.shop-cat-item:hover{
  opacity:1;
  border-color:var(--key);
}

.shop-cat-item img{
  display:block;
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  background:var(--paper-alt);
  border-radius:var(--radius);
  padding:8px;
  box-sizing:border-box;
  margin:0 auto 8px;
}

.shop-cat-item-title{
  display:block;
  font-size:14px;
  font-weight:500;
}

#sidebar ~ * .shop-cat-grid{ grid-template-columns:repeat(3,1fr); }

@media (max-width:1024px){
  .shop-cat-grid,
  .shop-cat-grid--cols-5,
  .shop-cat-grid--cols-6{ grid-template-columns:repeat(3,1fr); }

  #sidebar ~ * .shop-cat-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:767px){
  .shop-cat-grid,
  .shop-cat-grid--cols-3,
  .shop-cat-grid--cols-4,
  .shop-cat-grid--cols-5,
  .shop-cat-grid--cols-6,
  #sidebar ~ * .shop-cat-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
}


/* ==================================================================
   11. 規約系ページ
   ================================================================== */

.legal-page{
  max-width:var(--readable);
  margin-inline:auto;
  padding:56px 20px 96px;
  color:var(--ink);
  line-height:1.9;
  font-size:16px;
}

.legal-page .legal-title{
  margin:0 0 8px;
  font-size:28px;
  font-weight:700;
}

.legal-page .legal-title-en{
  display:block;
  margin-top:6px;
  font-size:15px;
  font-weight:400;
  color:var(--muted);
}

.legal-page .legal-updated{
  margin:0 0 40px;
  padding-bottom:20px;
  border-bottom:2px solid var(--key);
  font-size:14px;
  color:var(--muted);
}

.legal-content h2{
  margin:48px 0 16px;
  padding-left:14px;
  border-left:4px solid var(--key);
  border-radius:0;
  font-size:20px;
  font-weight:700;
  scroll-margin-top:var(--header-offset);
}

.legal-content h2:first-child{ margin-top:0; }

.legal-content h3{
  margin:32px 0 12px;
  font-size:17px;
  font-weight:700;
  scroll-margin-top:var(--header-offset);
}

.legal-content p{ margin:0 0 18px; }

.legal-content ul,
.legal-content ol{ margin:0 0 18px; padding-left:1.4em; }

.legal-content li{ margin-bottom:8px; }

.legal-content a{
  color:var(--key-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.legal-content .legal-note{
  margin:24px 0;
  padding:16px 18px;
  background:var(--key-soft);
  border-radius:6px;
  font-size:15px;
}

.legal-content .legal-en{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
}

.legal-toc{
  margin:0 0 48px;
  padding:20px 24px;
  background:var(--key-soft);
  border-radius:var(--radius);
}

.legal-toc ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
}

.legal-toc li{ margin:0; }

.legal-toc a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  border-bottom:1px solid var(--key);
  padding-bottom:2px;
}

.legal-toc a:hover{ color:var(--key-dark); }

.legal-table{
  margin:0 0 24px;
  border-top:1px solid var(--line);
}

.legal-table > div{
  display:flex;
  border-bottom:1px solid var(--line);
}

.legal-table dt{
  flex:0 0 240px;
  padding:18px 20px;
  background:var(--key-soft);
  font-weight:700;
  font-size:15px;
  line-height:1.7;
}

.legal-table dd{
  flex:1 1 auto;
  margin:0;
  padding:18px 20px;
  font-size:15px;
  line-height:1.8;
}

.legal-table dd p{ margin:0 0 10px; }
.legal-table dd p:last-child{ margin-bottom:0; }
.legal-table dd ul{ margin:0; padding-left:1.3em; }
.legal-table .legal-en{ font-size:13px; }

.legal-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 12px;
  border:1px solid var(--line);
  border-radius:6px;
}

.legal-fare{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:14px;
}

.legal-fare th,
.legal-fare td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:right;
  white-space:nowrap;
  line-height:1.5;
}

.legal-fare th:last-child,
.legal-fare td:last-child{ border-right:none; }

.legal-fare tbody tr:last-child th,
.legal-fare tbody tr:last-child td{ border-bottom:none; }

.legal-fare thead th{
  background:var(--key-soft);
  text-align:center;
  font-weight:700;
  font-size:13px;
}

.legal-fare tbody th{
  text-align:left;
  background:var(--paper-alt);
  font-weight:700;
}

.legal-fare .pref{
  text-align:left;
  white-space:normal;
  min-width:190px;
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  background:var(--paper-alt);
}

.legal-fare--narrow{ min-width:0; }
.legal-fare--narrow tbody th{ background:transparent; }

.legal-scroll-hint{
  margin:0 0 24px;
  font-size:13px;
  color:var(--muted);
}


/* ==================================================================
   12. ユーティリティ
   ================================================================== */

.shop-hide{ display:none !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--key);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ==================================================================
   13. レスポンシブ
   ================================================================== */

@media (max-width:1024px){
  .woocommerce ul.products,
  ul.products{ grid-template-columns:repeat(3,1fr); }
  .shop-cats-6 ul.products{ grid-template-columns:repeat(4,1fr); }
  .shop-products-4 ul.products{ grid-template-columns:repeat(3,1fr); }

  #sidebar ~ * .woocommerce ul.products,
  #sidebar ~ * ul.products,
  #sidebar ~ * .shop-cats-6 ul.products{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:767px){
  :root{ --header-offset:80px; }

  .shop-sec{ padding-block:36px; }
  .shop-sec-title{ font-size:19px; }
  .shop-band{ font-size:15px; }
  .shop-hero-inner img{
    max-height:500px;
    aspect-ratio:1/1 !important;
  }

  .woocommerce ul.products,
  ul.products,
  .shop-cats-6 ul.products,
  .shop-products-4 ul.products,
  #sidebar ~ * .woocommerce ul.products,
  #sidebar ~ * ul.products,
  #sidebar ~ * .shop-cats-6 ul.products{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .legal-page{ padding:36px 16px 72px; font-size:15px; }
  .legal-page .legal-title{ font-size:23px; }
  .legal-content h2{ font-size:18px; margin-top:36px; }
  .legal-content h3{ font-size:16px; }

  .legal-table > div{ display:block; }
  .legal-table dt{ padding:12px 16px; }
  .legal-table dd{ padding:14px 16px; }
}


/* ==================================================================
   印刷（特商法は控えとして印刷されることがある）
   ================================================================== */

@media print{
  .legal-page{ padding:0; max-width:none; }
  .legal-toc{ display:none; }
}


/* ==================================================================
   14. セクション見出し共通の追加調整（⑤〜⑦、ブランド、CTA、フォーム）
   ================================================================== */

.shop-sec-head{
  padding-top:48px;
  margin-bottom:24px;
}
.shop-sec-head + .woocommerce{
  padding-bottom:48px;
}

/* 中央寄せ見出し（⑨ブランド一覧・⑪Contact Usで共用）
   .shop-sec-head は display:flex のため、text-align だけでは
   中央寄せにならない。flex-direction:column + align-items:center
   に切り替えることで確実に中央揃えにしている。 */
.shop-sec-head--center{
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:48px;
}
.shop-sec-head--center .shop-sec-title small{
  margin-top:6px;
}

.shop-brands{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:32px;
  padding-block:32px 56px;
}

.shop-brands-item{ flex:0 0 auto; }

.shop-brands-item img{
  height:40px;
  width:auto;
  display:block;
}

@media (max-width:767px){
  .shop-brands{ gap:24px; padding-block:24px 40px; }
  .shop-brands-item img{ height:32px; }
}

.shop-cta{
  padding-block:56px;
  background:var(--key-soft);
}

.shop-cta-inner{
  max-width:var(--readable);
  margin-inline:auto;
  text-align:center;
}

.shop-cta-title{
  margin:0 0 12px;
  font-size:24px;
  font-weight:700;
}

.shop-cta-title small{
  display:block;
  margin-top:8px;
  font-size:14px;
  font-weight:400;
  color:var(--muted);
}

.shop-cta-text{
  margin:0 0 28px;
  color:var(--ink);
  font-size:15px;
  line-height:1.9;
}

.shop-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 32px;
  background:#25D366;
  color:#fff;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}

.shop-cta-btn:hover{
  background:#1ebe57;
  opacity:1;
  transform:translateY(-2px);
}

@media (max-width:767px){
  .shop-cta{ padding-block:40px; }
  .shop-cta-title{ font-size:20px; }
}

.shop-contact-lead{
  margin:12px auto 0;
  max-width:480px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

.wpcf7-form{
  width:min(var(--readable),92vw);
  margin-inline:auto;
  padding-block:8px 64px;
}

.wpcf7-form .wpcf7-form-control-wrap{
  display:block;
  margin-bottom:4px;
}

.wpcf7-form label{
  display:block;
  margin-bottom:20px;
  font-size:14px;
  font-weight:500;
}

.wpcf7-form label > span.req,
.wpcf7-form label > span.opt{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  vertical-align:middle;
}

.wpcf7-form span.req{
  background:var(--key-soft);
  color:var(--key-dark);
}

.wpcf7-form span.opt{
  background:var(--paper-alt);
  color:var(--muted);
}

.wpcf7-form .wpcf7-form-control{
  width:100%;
  margin-top:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:14px;
  font-family:inherit;
  box-sizing:border-box;
}

.wpcf7-form textarea.wpcf7-form-control{
  min-height:140px;
  resize:vertical;
}

.wpcf7-form .wpcf7-form-control:focus{
  border-color:var(--key);
  outline:none;
}

.wpcf7-form .wpcf7-list-item{ margin:0; }

.wpcf7-form .wpcf7-acceptance{
  display:block;
  margin-bottom:24px;
  font-size:13px;
  color:var(--muted);
}

.wpcf7-form input[type="submit"]{
  display:block;
  width:100%;
  padding:15px;
  background:var(--key);
  color:#fff;
  border:none;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease;
}

.wpcf7-form input[type="submit"]:hover{
  background:var(--key-dark);
}

.wpcf7-form .wpcf7-not-valid-tip{
  margin-top:6px;
  color:var(--sale);
  font-size:12px;
}

.wpcf7-response-output{
  width:min(var(--readable),92vw);
  margin:24px auto 64px !important;
  padding:14px 18px !important;
  border-radius:var(--radius) !important;
  font-size:14px;
  box-sizing:border-box;
}


/* ==================================================================
   15. フッター
   ================================================================== */

.shop-payments--wide img{
  height:60px !important;
  width:auto;
}

.ct-footer .footer-about{
  margin:12px 0 20px;
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}

.ct-footer .footer-contact-list{
  margin:12px 0 0;
  padding:0;
  list-style:none;
}

.ct-footer .footer-contact-list li{
  margin-bottom:8px;
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}

.ct-footer .widget_nav_menu ul.widget-menu{
  margin:12px 0 0;
}

.ct-footer .widget_nav_menu a{ color:var(--muted); }
.ct-footer .widget_nav_menu a:hover{ color:var(--key-dark); }

.ct-footer-copyright,
.ct-footer .ct-footer-bottom{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:20px;
  margin-top:32px;
}

.ct-footer-copyright a,
.ct-footer .ct-footer-bottom a{
  color:var(--muted);
  text-decoration:none;
}

.ct-footer-copyright a:hover,
.ct-footer .ct-footer-bottom a:hover{
  color:var(--key-dark);
}


/* ==================================================================
   16. ヘッダーメニューのカテゴリードロップダウン
   ------------------------------------------------------------------
   Blocksyの.sub-menuは1階層目・孫階層とも同じクラス名を共有するため、
   ここでの指定は基本的に「1階層下のドロップダウン全体」に効く。
   ================================================================== */

.ct-header .sub-menu .ct-menu-link{
  color:var(--ink) !important;
  background:var(--paper) !important;
}

.ct-header .sub-menu .ct-menu-link:hover{
  background:var(--key-soft) !important;
  color:var(--key-dark) !important;
}

.ct-header .sub-menu li:last-child .ct-menu-link{ border-bottom:none; }

.ct-header .sub-menu{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;
  overflow:hidden;
  columns:2;
  column-gap:0;
  width:480px;
  max-width:90vw;
}

.ct-header .sub-menu > li{
  break-inside:avoid;
}