/*
Theme Name: obiobi child
Theme URI: https://obiobi.jp/
Description: obiobi shop 用の子テーマ。親テーマ Storefront をベースに、docs/site-design.md §3/§4 のデザインシステム（おびピンク・安心グリーン・きなりクリーム・丸ゴシック・角丸・マスコット）を実装する。本 CSS は wireframes/assets/obiobi-wireframe.css を土台に、WordPress/WooCommerce の実マークアップへ適用する（§5）。
Author: obiobi
Template: storefront
Version: 0.3.28
Text Domain: obiobi-child
*/
/* =============================================================================
本ファイルの構成（wireframes/assets/obiobi-wireframe.css に準拠）
1. Variables 2. Reset/Base 3. Mascot 4. Header/Nav 5. Buttons
6. Section共通 7. Footer/Handheldバー 8. Breadcrumb
9. トップページ 10. 静的ページ 11. 商品一覧 12. 商品詳細 13. カート
14. 購入手続き 15. マイアカウント 16. 注文完了 17. FAQ 18. 特商法表
19. お問い合わせ 20. 404 21. Responsive
22. WordPress / WooCommerce 実マークアップ適用（子テーマ固有）
============================================================================= */
/* ============================ 1. Variables ============================ */
:root {
--obi-pink:#FF7BA8; --obi-green:#2FA56F; --obi-cream:#FBEEDF; --obi-ink:#33302D;
--obi-pink-50:#FFF0F5; --obi-pink-100:#FFD9E6; --obi-pink-300:#FFC2D4;
--obi-pink-700:#E85C8C; --obi-pink-900:#B23E66;
--obi-green-100:#E4F2EA; --obi-green-700:#1E8456;
--obi-cream-0:#FFFDF9; --obi-cream-200:#F3E3D0;
--obi-ink-400:#8A817A; --obi-ink-700:#5A534E;
--obi-sale:#E5544F; --obi-warning:#F2B441; --obi-info:#6BB5D8; --obi-error:#E5484D;
--color-bg:var(--obi-cream-0); --color-surface:var(--obi-cream); --color-text:var(--obi-ink);
--color-primary:var(--obi-pink); --color-primary-cta:var(--obi-pink-700); --color-primary-h:var(--obi-pink-900);
--color-trust:var(--obi-green); --color-border:var(--obi-cream-200); --color-footer:var(--obi-green-700);
--radius-card:18px; --radius-btn:999px; --radius-field:12px;
--obi-radius:16px; --obi-radius-lg:24px; --obi-radius-pill:999px;
--font-head:'Zen Maru Gothic','Noto Sans JP',sans-serif;
--font-body:'Noto Sans JP',sans-serif;
--font-en:'Quicksand','Noto Sans JP',sans-serif;
--obi-font-heading:var(--font-head); --obi-font-body:var(--font-body);
--maxw:1200px;
}
/* 親店舗 nainai 由来の変数を obi トークンへ再スキン（参考ワイヤー互換） */
:root {
--nainai-main:var(--obi-green); --nainai-sub:var(--obi-pink);
--nainai-accent:var(--obi-pink-700); --nainai-accent-hover:var(--obi-pink-900);
--nainai-base:var(--obi-cream-0); --nainai-surface:var(--obi-cream);
--nainai-text:var(--obi-ink); --nainai-text-sub:var(--obi-ink-400); --nainai-border:var(--obi-cream-200);
}
/* ============================ 2. Reset/Base ============================ */
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.8;overflow-x:hidden}
a{color:var(--obi-pink-900);text-decoration:none}
a:hover{color:var(--obi-pink-700);text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;line-height:1.4}
.col-full{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.hfeed.site{display:flex;flex-direction:column;min-height:100vh}
.site-content{flex:1}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%)}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;clip:auto;clip-path:none;z-index:2000;background:var(--obi-pink-700);color:#fff;padding:8px 16px;border-radius:8px}
/* ============================ 3. Mascot ============================ */
.obi-mascot{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin:0 auto}
.obi-mascot__img{height:96px;width:auto;display:block}
.obi-mascot__caption{font-family:var(--font-head);font-size:13px;color:var(--obi-ink-700)}
.obi-mascot--mini .obi-mascot__img{height:60px}
.obi-mascot--lg .obi-mascot__img{height:130px}
.obi-mascot__placeholder{display:block;width:96px;height:96px;border-radius:50%;background:var(--obi-pink-100);border:3px dashed var(--obi-pink-300);position:relative}
.obi-mascot__placeholder::after{content:"♡";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--obi-pink);font-size:28px}
.obi-head-icon{display:inline-block;vertical-align:middle;width:26px;height:26px;margin-right:8px;background:var(--obi-pink-100);border:2px solid var(--obi-pink);border-radius:50%;position:relative;top:-3px}
.obi-head-icon::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:9px;background:var(--obi-pink);clip-path:path('M5 9 L0.7 4.7 A2.6 2.6 0 1 1 5 1.2 A2.6 2.6 0 1 1 9.3 4.7 Z')}
/* ============================ 4. Header/Nav ============================ */
.site-header{background:var(--color-bg);position:sticky;top:0;z-index:1000;transition:background-color .3s,box-shadow .3s;border-bottom:1px solid var(--color-border);padding:0}
.site-header.is-scrolled{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.site-header>.col-full{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;gap:16px}
.site-branding{display:flex;align-items:center;gap:12px;min-width:0;margin:0}
.site-branding .custom-logo-link{flex:0 0 auto;padding:0}
.site-branding .custom-logo{height:56px;width:auto;border-radius:10px}
.site-branding__text{min-width:0}
.site-branding .site-title{font-size:1em;margin:0;font-family:var(--font-en)}
.site-branding .site-title a{font-family:var(--font-en);font-size:1.25em;font-weight:700;letter-spacing:.5px;color:var(--obi-pink-900)}
.site-branding .site-description{display:block;font-size:.8em;color:var(--obi-ink-400);margin:0}
.site-description__seg{white-space:nowrap}
.site-search{flex:0 0 240px}
.site-search .woocommerce-product-search{display:flex;align-items:center}
.site-search .search-field{width:100%;padding:9px 14px;font-size:14px;border:1.5px solid var(--color-border);border-right:none;border-radius:var(--radius-btn) 0 0 var(--radius-btn);background:var(--obi-cream-0);color:var(--obi-ink)}
.site-search .search-field::placeholder{color:var(--obi-ink-400)}
.site-search button[type="submit"]{width:64px;padding:9px;cursor:pointer;font-size:14px;font-weight:700;background:var(--obi-pink-700);color:#fff;border:1.5px solid var(--obi-pink-700);border-radius:0 var(--radius-btn) var(--radius-btn) 0}
.storefront-primary-navigation{background:var(--color-bg);border-top:1px solid var(--color-border);margin:0}
.storefront-primary-navigation>.col-full{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.main-navigation{margin:0;width:auto}
.main-navigation ul{margin:0}
.main-navigation .primary-navigation>.menu{display:flex}
.main-navigation .primary-navigation>.menu>li{margin:0}
.main-navigation .primary-navigation>.menu>li>a{display:block;padding:4px 0;margin:6px 18px;font-size:14px;font-weight:700;font-family:var(--font-head);color:var(--obi-ink);border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.main-navigation .primary-navigation>.menu>li>a:hover,.main-navigation .primary-navigation>.menu>li.current-menu-item>a,.main-navigation .primary-navigation>.menu>li.current>a{text-decoration:none;color:var(--obi-pink-700);border-bottom-color:var(--obi-pink)}
.main-navigation .menu-toggle{display:none}
.site-header-cart{display:flex;align-items:center;margin:0;padding:0}
.site-header-cart li{margin:0}
.site-header-cart .cart-contents{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--obi-ink);font-size:14px;font-weight:700;padding:8px 14px;border:1.5px solid var(--obi-pink);border-radius:var(--radius-btn)}
.site-header-cart .cart-contents:hover{background:var(--obi-pink-50);text-decoration:none}
.site-header-cart .count{background:var(--obi-pink-700);color:#fff;font-size:11px;padding:2px 8px;border-radius:var(--radius-btn)}
.site-header-cart .amount{color:var(--obi-ink)}
/* ============================ 5. Buttons ============================ */
.obi-btn,.button,.wp-block-button__link,
button.button,input.button,a.button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.add_to_cart_button,.single_add_to_cart_button,.checkout-button,#place_order,
.wc-block-cart__submit-button{display:inline-flex;align-items:center;justify-content:center;padding:13px 30px;font-size:15px;font-weight:700;font-family:var(--font-head);border-radius:var(--radius-btn);cursor:pointer;text-decoration:none;border:2px solid transparent;transition:transform .12s ease,background-color .2s,box-shadow .2s;line-height:1.4}
.obi-btn:hover,.button:hover,.wp-block-button__link:hover{text-decoration:none;transform:translateY(-2px)}
.obi-btn--primary,.button,.add_to_cart_button,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.single_add_to_cart_button,.checkout-button,#place_order,.wc-block-cart__submit-button{background:var(--obi-pink-700);color:#fff;border-color:var(--obi-pink-700);box-shadow:0 6px 14px rgba(232,92,140,.28)}
.obi-btn--primary:hover,.button:hover,.add_to_cart_button:hover,.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.single_add_to_cart_button:hover,.checkout-button:hover,#place_order:hover{background:var(--obi-pink-900);color:#fff}
.obi-btn--outline{background:var(--obi-cream-0);color:var(--obi-pink-900);border-color:var(--obi-pink);box-shadow:none}
.obi-btn--outline:hover{background:var(--obi-pink-50);color:var(--obi-pink-900)}
.obi-btn--ghost{background:transparent;color:var(--obi-ink-700);border-color:var(--color-border);box-shadow:none}
.obi-btn--ghost:hover{background:var(--obi-cream);color:var(--obi-ink)}
.obi-btn--lg{padding:15px 36px;font-size:16px}
.obi-buttons{display:flex;gap:16px;flex-wrap:wrap}
/* ============================ 6. Section共通 ============================ */
.obi-section{padding:64px 20px}
.obi-section__inner{max-width:var(--maxw);margin:0 auto}
.obi-section--cream{background:var(--obi-cream)}
.obi-section--white{background:var(--obi-cream-0)}
.nainai-section-title,.obi-section-title{font-size:28px;text-align:center;margin-bottom:8px;color:var(--obi-ink)}
.nainai-section-sub,.obi-section-sub{font-size:15px;color:var(--obi-ink-700);text-align:center;margin-bottom:40px}
.entry-header{display:none}
/* ============================ 7. Footer/Handheldバー ============================ */
.site-footer{background:var(--color-footer);color:#fff;padding-top:48px;margin:0}
.footer-widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18);float:none;width:auto}
.footer-widgets .block,.footer-widgets .widget{margin:0;padding:0;background:none;border:none}
.footer-widgets .widget-title{display:block;font-family:var(--font-head);font-size:15px;font-weight:700;margin-bottom:16px;color:#fff}
.footer-widgets .menu{margin:0}
.footer-widgets .menu li{margin-bottom:8px}
.footer-widgets .menu a,.footer-widgets .widget a{color:rgba(255,255,255,.85);font-size:14px}
.footer-widgets .menu a:hover,.footer-widgets .widget a:hover{color:#fff;text-decoration:underline}
.sns-menu a{display:inline-flex;align-items:center;gap:8px}
.sns-menu a:hover{text-decoration:none}
.sns-icon{width:20px;height:20px;flex:0 0 auto}
.site-footer__mascot{display:flex;justify-content:center;margin:24px 0 0}
.site-footer__mascot .obi-mascot__img{height:56px}
.site-info{text-align:center;padding:20px 0;font-size:13px;color:rgba(255,255,255,.75);font-family:var(--font-en)}
.storefront-handheld-footer-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--obi-cream-0);box-shadow:0 -2px 8px rgba(0,0,0,.1);border-top:1px solid var(--color-border)}
.storefront-handheld-footer-bar ul{display:flex;margin:0;padding:0}
.storefront-handheld-footer-bar ul>li{flex:1;text-align:center;border:none}
.storefront-handheld-footer-bar ul>li>a{display:block;padding:12px 8px;font-size:12px;font-weight:700;font-family:var(--font-head);color:var(--obi-ink);min-height:48px}
.storefront-handheld-footer-bar .count{background:var(--obi-pink-700);color:#fff;font-size:10px;padding:1px 6px;border-radius:var(--radius-btn)}
/* ============================ 8. Breadcrumb ============================ */
.obi-breadcrumb{background:var(--obi-cream);border-bottom:1px solid var(--color-border)}
.obi-breadcrumb .col-full{padding-top:12px;padding-bottom:12px}
.woocommerce-breadcrumb{font-size:13px;color:var(--obi-ink-400);margin:0;padding:0}
.woocommerce-breadcrumb a{color:var(--obi-pink-900)}
.woocommerce-breadcrumb .sep{margin:0 8px;color:var(--obi-ink-400)}
/* ============================ 9. トップページ ============================ */
.obi-hero{position:relative;overflow:hidden;min-height:540px;display:flex;align-items:center;background:radial-gradient(circle at 18% 30%,var(--obi-pink-100) 0,transparent 38%),radial-gradient(circle at 85% 75%,var(--obi-green-100) 0,transparent 42%),linear-gradient(160deg,var(--obi-pink-50) 0%,var(--obi-cream) 60%,var(--obi-cream-0) 100%)}
.obi-hero__deco{position:absolute;opacity:.5;pointer-events:none}
.obi-hero__deco.h1{left:8%;top:18%;font-size:28px;color:var(--obi-pink-300)}
.obi-hero__deco.h2{left:46%;top:10%;font-size:18px;color:var(--obi-pink)}
.obi-hero__deco.h3{right:30%;bottom:14%;font-size:22px;color:var(--obi-pink-300)}
.obi-hero__deco.d1{left:30%;bottom:20%;width:12px;height:12px;background:var(--obi-green);border-radius:50%;opacity:.35}
.obi-hero__inner{position:relative;z-index:1;max-width:var(--maxw);width:100%;margin:0 auto;padding:60px 20px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px}
.obi-hero__copy{max-width:600px}
.obi-hero__eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--obi-green-700);background:var(--obi-green-100);padding:4px 14px;border-radius:var(--radius-btn);margin-bottom:18px}
.obi-hero__title{font-size:40px;line-height:1.35;color:var(--obi-ink);margin-bottom:18px}
.obi-hero__title .accent{color:var(--obi-pink-700)}
.obi-hero__sub{font-size:16px;line-height:1.9;color:var(--obi-ink-700);margin-bottom:32px}
.obi-hero__sub strong{color:var(--obi-green-700)}
.hero-mascot{display:flex;justify-content:center}
.hero-mascot .obi-mascot__img{height:128px}
.hero-mascot .obi-mascot__caption{font-size:15px;margin-top:10px;background:var(--obi-cream-0);padding:4px 16px;border-radius:var(--radius-btn);border:2px dashed var(--obi-pink-300)}
.obi-trust{background:var(--obi-cream);padding:40px 20px}
.obi-trust__inner{max-width:var(--maxw);margin:0 auto}
.obi-trust__lead{text-align:center;margin-bottom:24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.obi-trust__lead .obi-mascot__caption{font-size:14px;color:var(--obi-green-700);font-weight:700}
.obi-trust__cols{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.obi-trust__col{flex:0 0 auto;text-align:center;min-width:130px}
.obi-trust__icon{width:60px;height:60px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--obi-green-100);border:2.5px solid var(--obi-green);border-radius:50%}
.obi-trust__col.is-local .obi-trust__icon{background:var(--obi-pink-100);border-color:var(--obi-pink)}
.obi-trust__text{font-size:13px;line-height:1.55;color:var(--obi-ink)}
.obi-trust__text strong{display:block;font-family:var(--font-head);font-size:14px}
/* Product/Category card（一覧・トップ・関連・クロスセル共通） */
ul.products{display:grid;gap:24px;padding:0;margin:0;list-style:none}
ul.products::before,ul.products::after{display:none}
ul.products.columns-2{grid-template-columns:repeat(2,1fr)}
ul.products.columns-3{grid-template-columns:repeat(3,1fr)}
ul.products.columns-4{grid-template-columns:repeat(4,1fr)}
ul.products li.product,ul.products li.product-category{width:auto;margin:0;float:none;clear:none}
li.product,li.product-category{position:relative;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 2px 6px rgba(51,48,45,.05);transition:box-shadow .2s,transform .2s}
li.product:hover,li.product-category:hover{box-shadow:0 10px 22px rgba(255,123,168,.18);transform:translateY(-3px)}
li.product::before{display:none}
.woocommerce-LoopProduct-link{display:block;text-decoration:none;color:var(--obi-ink)}
.woocommerce-LoopProduct-link:hover{text-decoration:none}
.obi-thumb,ul.products li.product img,ul.products li.product-category img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--obi-cream-200);margin:0;border-radius:0}
.obi-thumb--ph{display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-size:14px;color:var(--obi-ink-400);background:repeating-linear-gradient(45deg,var(--obi-cream) 0 12px,var(--obi-cream-200) 12px 24px);padding:16px}
.obi-badge{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-head);font-size:12px;font-weight:700;color:#fff;background:var(--obi-pink-700);padding:3px 12px;border-radius:var(--radius-btn)}
.obi-badge--gf{background:var(--obi-green)}
.obi-badge--sale{background:var(--obi-sale)}
.woocommerce-loop-product__title{font-family:var(--font-head);font-size:15px;font-weight:700;padding:14px 16px 2px}
.obi-unit{padding:0 16px;font-size:12px;color:var(--obi-ink-400)}
.price{display:block;padding:4px 16px 10px;font-size:18px;font-weight:700;color:var(--obi-pink-900);font-family:var(--font-en)}
.price .woocommerce-Price-currencySymbol{font-size:14px}
.price .tax{font-size:11px;color:var(--obi-ink-400);font-family:var(--font-body)}
.price del{color:var(--obi-ink-400);font-size:14px;margin-right:6px}
.price ins{text-decoration:none;color:var(--obi-sale)}
li.product .add_to_cart_button,li.product .button{display:block;width:calc(100% - 32px);margin:0 16px 16px;padding:11px;text-align:center;font-size:14px;box-shadow:none}
.product-category a{display:block;text-decoration:none;color:var(--obi-ink)}
.product-category .obi-thumb{transition:transform .3s}
.product-category:hover .obi-thumb{transform:scale(1.05)}
.woocommerce-loop-category__title{font-family:var(--font-head);font-size:15px;font-weight:700;text-align:center;padding:14px 8px}
.woocommerce-loop-category__title .count{color:var(--obi-ink-400);font-size:13px;font-weight:400}
/* Commitment / Reviews / Blog / Gift */
.obi-commit-block{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-bottom:32px;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 2px 6px rgba(51,48,45,.05)}
.obi-commit-block.is-right .obi-commit-media{order:2}
.obi-commit-block.is-right .obi-commit-text{order:1}
.obi-commit-media{min-height:280px;display:flex;align-items:center;justify-content:center;color:var(--obi-ink-400);font-family:var(--font-head);background:repeating-linear-gradient(45deg,var(--obi-cream) 0 14px,var(--obi-cream-200) 14px 28px)}
.obi-commit-media img{width:100%;height:100%;object-fit:cover;min-height:280px}
.obi-commit-text{padding:44px}
.obi-commit-step{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;font-family:var(--font-en);font-weight:700;font-size:18px;color:#fff;background:var(--obi-green);border-radius:50%}
.obi-commit-text h3{font-size:21px;margin-bottom:12px;color:var(--obi-ink)}
.obi-commit-text p{font-size:15px;line-height:1.9;color:var(--obi-ink-700)}
.obi-commit-text .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;font-family:var(--font-head);color:var(--obi-green-700);background:var(--obi-green-100);padding:3px 12px;border-radius:var(--radius-btn)}
.obi-reviews-grid{display:flex;gap:24px;flex-wrap:wrap}
.obi-review-card{flex:1;min-width:280px;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:26px;box-shadow:0 2px 6px rgba(51,48,45,.05)}
.obi-review-stars{color:var(--obi-warning);font-size:18px;margin-bottom:12px;letter-spacing:2px}
.obi-review-quote{font-size:15px;line-height:1.9;margin-bottom:12px;color:var(--obi-ink)}
.obi-review-cite{font-size:13px;color:var(--obi-ink-400)}
.obi-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.obi-blog-card{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 2px 6px rgba(51,48,45,.05);transition:box-shadow .2s,transform .2s}
.obi-blog-card:hover{box-shadow:0 10px 22px rgba(255,123,168,.16);transform:translateY(-3px)}
.obi-blog-card .obi-thumb{aspect-ratio:16/9}
.obi-blog-card__body{padding:18px 20px 22px}
.obi-blog-card__title{font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--obi-ink);display:block;margin-bottom:8px}
.obi-blog-card__title:hover{color:var(--obi-pink-700)}
.obi-blog-card__excerpt{font-size:14px;color:var(--obi-ink-700);line-height:1.7}
.obi-gift{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--obi-pink-50)}
.obi-gift__media{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(circle at 50% 40%,var(--obi-pink-100) 0,transparent 55%),repeating-linear-gradient(45deg,var(--obi-cream) 0 14px,var(--obi-cream-200) 14px 28px)}
.obi-gift__box{width:120px;height:84px;background:var(--obi-cream-0);border:3px solid var(--obi-ink);border-radius:10px;position:relative}
.obi-gift__box::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:16px;transform:translateX(-50%);background:var(--obi-pink)}
.obi-gift__box::after{content:"";position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:34px;height:18px;background:var(--obi-pink);border:2px solid var(--obi-ink);clip-path:polygon(0 0,45% 50%,0 100%,100% 100%,55% 50%,100% 0)}
.obi-gift__content{padding:60px 44px}
.obi-gift__content h2{font-size:28px;margin-bottom:16px;color:var(--obi-ink)}
.obi-gift__content p{font-size:15px;line-height:1.9;margin-bottom:20px;color:var(--obi-ink-700)}
.obi-gift-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.obi-gift-tag{display:inline-block;padding:5px 16px;font-size:13px;font-family:var(--font-head);font-weight:700;background:var(--obi-cream-0);border:1.5px solid var(--obi-pink-300);border-radius:var(--radius-btn);color:var(--obi-pink-900)}
/* ============================ 10. 静的ページ ============================ */
.obi-page-hero{position:relative;overflow:hidden;padding:54px 20px;text-align:center;background:radial-gradient(circle at 20% 20%,var(--obi-pink-100) 0,transparent 45%),linear-gradient(160deg,var(--obi-pink-50),var(--obi-cream))}
.obi-page-hero__inner{max-width:760px;margin:0 auto;position:relative;z-index:1}
.obi-page-hero h1{font-size:32px;color:var(--obi-ink);margin-bottom:10px}
.obi-page-hero .lead{font-size:15px;color:var(--obi-ink-700)}
.obi-page-hero .obi-mascot{margin-bottom:14px}
.obi-prose{max-width:760px;margin:0 auto;padding:56px 20px}
.obi-prose>section{margin-bottom:40px}
.obi-prose h2{font-size:24px;color:var(--obi-ink);margin:0 0 16px;padding-bottom:10px;border-bottom:2px dotted var(--obi-pink-300)}
.obi-prose h3{font-size:18px;color:var(--obi-green-700);margin:24px 0 10px}
.obi-prose p{font-size:15px;line-height:1.95;color:var(--obi-ink);margin-bottom:14px}
.obi-prose ul{margin:0 0 16px;padding:0;list-style:none}
.obi-prose ul li{position:relative;padding-left:24px;margin-bottom:10px;font-size:15px;line-height:1.8}
.obi-prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:10px;height:9px;background:var(--obi-pink);clip-path:path('M5 9 L0.7 4.7 A2.6 2.6 0 1 1 5 1.2 A2.6 2.6 0 1 1 9.3 4.7 Z')}
.obi-prose ol{margin:0 0 16px;padding:0;counter-reset:obi;list-style:none}
.obi-prose ol>li{position:relative;padding-left:44px;margin-bottom:14px;font-size:15px;line-height:1.8;counter-increment:obi}
.obi-prose ol>li::before{content:counter(obi);position:absolute;left:0;top:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--font-en);font-weight:700;color:#fff;background:var(--obi-green);border-radius:50%}
.obi-prose blockquote{background:var(--obi-cream);border-left:4px solid var(--obi-pink);border-radius:0 12px 12px 0;padding:16px 20px;margin:18px 0;font-size:15px;color:var(--obi-ink-700)}
.obi-prose blockquote a{font-weight:700}
.obi-prose img{border-radius:var(--radius-card)}
.obi-callout{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 16px;list-style:none}
.obi-callout li{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:14px;padding:16px 18px;font-size:14px}
.obi-callout li::before{display:none}
.obi-callout li strong{display:block;font-family:var(--font-head);color:var(--obi-green-700);margin-bottom:4px}
.obi-cta-band{text-align:center;background:var(--obi-cream);padding:44px 20px;border-radius:var(--radius-card);margin:8px auto 0;max-width:760px}
.obi-cta-band p{font-family:var(--font-head);font-size:18px;color:var(--obi-ink);margin-bottom:18px}
.obi-cta-band .obi-buttons{justify-content:center}
/* ============================ 11. 商品一覧 ============================ */
.col-full--shop{display:flex;flex-wrap:wrap;gap:40px;padding-top:32px;padding-bottom:64px}
.col-full--shop #primary,#primary.content-area{flex:1;min-width:0;width:auto;float:none;margin:0}
.col-full--shop #secondary,#secondary.widget-area{flex:0 0 280px;width:280px;float:none;margin:0;padding:0}
.woocommerce-products-header{margin-bottom:8px}
.woocommerce-products-header__title,.page-title{font-size:28px;margin-bottom:8px;color:var(--obi-ink)}
.obi-shop__intro,.term-description{color:var(--obi-ink-700);font-size:14px;margin-bottom:20px}
.storefront-sorting,.woocommerce-ordering{margin:0}
.woocommerce-result-count{font-size:14px;color:var(--obi-ink-400);margin:0}
.storefront-sorting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;padding:12px 0;border-bottom:1px solid var(--color-border)}
.woocommerce-ordering select,.storefront-sorting select{padding:8px 12px;border:1.5px solid var(--color-border);border-radius:var(--radius-field);font-size:14px;color:var(--obi-ink);background:var(--obi-cream-0)}
/* WooCommerce は @media 内で `.woocommerce-pagination{float:right}` を指定する。float された
要素は幅が中身に縮むため、display:flex;justify-content:center でも nav 自体が右端に寄り、
ページネーションが中央に来ない。float を解除し全幅にして、中の数字を中央寄せする。 */
.woocommerce-pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;border:none;float:none;width:100%}
.woocommerce-pagination ul{display:flex;gap:8px;border:none;margin:0}
.woocommerce-pagination ul li{border:none;margin:0}
.woocommerce-pagination a,.woocommerce-pagination span{display:flex;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--radius-btn);border:1.5px solid var(--color-border);font-family:var(--font-en);font-weight:700;color:var(--obi-ink);background:none;padding:0}
.woocommerce-pagination .current{background:var(--obi-pink-700);color:#fff;border-color:var(--obi-pink-700)}
#secondary .widget{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:20px;margin-bottom:24px}
#secondary .widget-title,#secondary .widget .widget-title{display:block;font-family:var(--font-head);font-size:15px;font-weight:700;margin-bottom:14px;color:var(--obi-ink)}
#secondary .widget ul{margin:0;list-style:none}
#secondary .widget ul li{margin-bottom:8px;font-size:14px}
#secondary .widget ul li a{color:var(--obi-ink)}
#secondary .widget ul li a:hover{color:var(--obi-pink-700)}
.obi-pricefilter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--obi-ink-700)}
.obi-pricefilter .bar{flex:1;height:6px;border-radius:3px;background:var(--obi-cream-200);position:relative}
.obi-pricefilter .bar::after{content:"";position:absolute;left:15%;right:25%;top:0;bottom:0;background:var(--obi-green);border-radius:3px}
/* ============================ 12. 商品詳細 ============================ */
/* 商品詳細はフル幅。サイドバーは functions.php（is_product 時に woocommerce_sidebar を除去）で
出さない。Storefront は #primary を .content-area{float:left;width:73.913%} にするので上書きする。 */
.single-product #primary,
.single-product.woocommerce #primary{float:none;width:100%;margin:0}
/* Storefront の「前後の商品」ナビ（サムネ付き・画面端に絶対配置）は WF に無く、
左右端に画像がはみ出す原因になるため出さない。 */
.single-product .storefront-product-pagination{display:none}
/* 列間 40px は必要だが、行間は 0 にする。行間 40px を残すと .woocommerce-tabs /
.related の margin-top:56px と二重取りになり、ギャラリー→タブ間が 96px になってしまう
（WF は 56px）。row-gap を 0 にして各セクションの margin-top だけで間隔を作る。 */
.single-product div.product{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding-top:32px}
.product-gallery-summary{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-top:32px}
.single-product div.product .woocommerce-product-gallery{width:auto;margin:0;float:none}
.woocommerce-product-gallery__image img,.obi-gallery__main{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-border)}
.obi-gallery__main{aspect-ratio:1/1}
.obi-gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.obi-gallery__thumbs .obi-thumb{border-radius:12px;border:1px solid var(--color-border);cursor:pointer}
.single-product div.product .entry-summary,.entry-summary{width:auto;margin:0;float:none}
.entry-summary .product_title,.product_title{font-family:var(--font-head);font-size:26px;color:var(--obi-ink);margin-bottom:10px}
.entry-summary .price,.single-product .summary .price{padding:0;font-size:26px;margin-bottom:6px;color:var(--obi-pink-900)}
.entry-summary .obi-unit{padding:0;margin-bottom:14px}
.woocommerce-product-details__short-description{font-size:15px;line-height:1.9;color:var(--obi-ink-700);margin-bottom:18px}
.obi-stock,.single-product .stock.in-stock{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--obi-green-700);background:var(--obi-green-100);padding:4px 14px;border-radius:var(--radius-btn);margin-bottom:18px}
.obi-stock::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--obi-green)}
.obi-ship-box{background:var(--obi-cream);border:1px dashed var(--obi-green);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--obi-ink-700);margin-bottom:20px}
.obi-ship-box strong{color:var(--obi-green-700)}
.obi-qty{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.single-product form.cart{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.quantity{display:inline-flex;align-items:center;border:1.5px solid var(--color-border);border-radius:var(--radius-btn);overflow:hidden;background:var(--obi-cream-0)}
.quantity button{width:44px;height:52px;border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--obi-ink)}
.quantity input,.quantity .qty{width:48px;height:52px;border:none;text-align:center;font-size:16px;font-family:var(--font-en);background:transparent}
.single_add_to_cart_button{min-height:56px;padding:0 36px;font-size:16px}
.entry-summary .product_meta,.product_meta{margin-top:18px;font-size:13px;color:var(--obi-ink-400);border-top:1px solid var(--color-border);padding-top:14px}
.entry-summary .product_meta span,.product_meta>span{display:block;margin-bottom:4px}
/* SKU 値は WooCommerce 既定で .sku が block になり「品番（SKU）:」とラベルが改行するため inline に戻す
（WF は「品番（SKU）: SG-NT-09」を1行で表示）。上の >span は直下の各行だけを block にする。 */
.entry-summary .product_meta .sku,.product_meta .sku{display:inline}
.woocommerce-tabs{margin-top:56px;grid-column:1/-1}
/* WooCommerce 既定は縦タブ（ul.tabs を width:29%/float:left、パネルを float:right）。
WF は横並びタブ＋その下に全幅パネルなので、幅/float を解除して全幅の行にする。
woocommerce.css の `.woocommerce-tabs ul.tabs`（0,0,3,0）に勝つよう同詳細度以上で指定。 */
.woocommerce-tabs ul.tabs{width:auto;float:none}
.woocommerce-tabs .wc-tab,.woocommerce-tabs .panel,.woocommerce-tabs .woocommerce-Tabs-panel{width:auto;float:none}
/* タブ本体（フォルダタブ意匠、WF product.html）。
woocommerce.css の `.woocommerce-tabs ul.tabs li a`（0,0,2,3）が padding:1em 0（横パディング0）で
勝ちタブが詰まるため、`.single-product ... ul.tabs`（0,0,3,3）へ格上げして WF の padding:12px 20px を効かせる。
同カスタマイザーのインライン `li.active a` グレー文字も同時に上書きする。 */
.woocommerce-tabs .tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--color-border);margin-bottom:0;padding:0;list-style:none;width:auto;float:none}
.woocommerce-tabs .tabs::before,.woocommerce-tabs .tabs::after{display:none}
.woocommerce-tabs .tabs li{margin:0;background:none;border:none;border-radius:0}
/* Storefront の base/icons.css が li::after に Font Awesome のシェブロン（＞）を付けるため消す
（WF にはこのアイコンは無い）。icons.css の `.woocommerce-tabs ul.tabs li::after`(0,0,2,3) に勝つよう
.single-product ... ul.tabs(0,0,3,3) で指定。 */
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{display:none;content:none}
.single-product .woocommerce-tabs ul.tabs li a{display:block;padding:12px 20px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--obi-ink-700);border:2px solid transparent;border-bottom:none;border-radius:12px 12px 0 0}
.woocommerce-tabs .tabs li a::before,.woocommerce-tabs .tabs li a::after{display:none}
.single-product .woocommerce-tabs ul.tabs li.active a{color:var(--obi-pink-900);background:var(--obi-cream-0);border-color:var(--color-border);position:relative;top:2px}
.woocommerce-tabs .panel,.woocommerce-Tabs-panel{background:var(--obi-cream-0);border:2px solid var(--color-border);border-top:none;border-radius:0 0 12px 12px;padding:28px;margin:0}
.woocommerce-tabs .panel h2{font-size:18px;color:var(--obi-ink);margin-bottom:12px}
.woocommerce-tabs .panel p{font-size:15px;line-height:1.9;color:var(--obi-ink-700);margin-bottom:10px}
.woocommerce-tabs .panel table{width:100%;border-collapse:collapse;font-size:14px}
.woocommerce-tabs .panel th,.woocommerce-tabs .panel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--color-border);vertical-align:top}
.woocommerce-tabs .panel th{width:34%;color:var(--obi-ink-700);background:var(--obi-cream)}
.related.products,.up-sells{margin-top:56px;grid-column:1/-1;clear:both}
.related.products>h2,.up-sells>h2{font-size:22px;text-align:center;margin-bottom:28px;color:var(--obi-ink)}
/* top:auto を明示。親テーマ由来で top:0 が効くと bottom:0 と両立して高さがビューポート全体
（100vh）に伸び、表示時に画面全体を覆ってしまうため（下端固定の細いバーに保つ）。 */
.storefront-sticky-add-to-cart{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:998;background:var(--obi-cream-0);border-top:1px solid var(--color-border);box-shadow:0 -2px 10px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .25s}
.storefront-sticky-add-to-cart.is-visible{transform:translateY(0)}
.storefront-sticky-add-to-cart .col-full{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.storefront-sticky-add-to-cart__content{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700}
.storefront-sticky-add-to-cart__content .price{padding:0;font-size:18px}
/* ============================ 13. カート ============================ */
.obi-cart{padding-top:32px;padding-bottom:64px}
.obi-ship-progress{background:var(--obi-cream);border-radius:var(--radius-card);padding:18px 22px;margin-bottom:28px;text-align:center}
.obi-ship-progress p{font-size:14px;color:var(--obi-ink-700);margin-bottom:10px}
.obi-ship-progress p strong{color:var(--obi-green-700)}
.obi-ship-progress .bar{height:12px;border-radius:6px;background:var(--obi-cream-200);overflow:hidden}
.obi-ship-progress .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--obi-green),var(--obi-green-700));border-radius:6px}
.woocommerce-cart-form__contents,.cart-table{width:100%;border-collapse:collapse;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.cart-table th,.woocommerce table.shop_table th{text-align:left;font-family:var(--font-head);font-size:13px;color:var(--obi-ink-700);background:var(--obi-cream);padding:14px 16px}
.cart-table td,.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--color-border);vertical-align:middle;font-size:14px}
.cart-table .prod{display:flex;align-items:center;gap:14px}
.cart-table .prod .obi-thumb{width:64px;height:64px;border-radius:12px;flex:0 0 64px}
.cart-table .prod .name{font-family:var(--font-head);font-weight:700;color:var(--obi-ink)}
.cart-table .prod .sku{font-size:12px;color:var(--obi-ink-400)}
.cart-table .subtotal,.woocommerce .product-subtotal{font-family:var(--font-en);font-weight:700;color:var(--obi-pink-900)}
.cart-table .remove,.woocommerce a.remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--obi-cream);color:var(--obi-ink-700);font-size:16px;border:1px solid var(--color-border)}
.cart-table .remove:hover,.woocommerce a.remove:hover{background:var(--obi-pink-100);color:var(--obi-pink-900)!important;text-decoration:none}
.cart-coupon,.woocommerce .coupon{display:flex;gap:10px;margin-top:18px}
.cart-coupon input,.woocommerce .coupon input{flex:1;padding:12px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius-field);font-size:14px;background:var(--obi-cream-0)}
.cart-summary,.cart_totals{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px;position:sticky;top:90px}
.cart-summary h2,.cart_totals h2{font-size:18px;margin-bottom:16px;color:var(--obi-ink)}
.cart-summary .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--obi-ink-700)}
.cart-summary .row.total{border-top:2px dotted var(--obi-pink-300);margin-top:8px;padding-top:14px;font-size:16px;color:var(--obi-ink);font-weight:700}
.cart-summary .row.total .amount{font-family:var(--font-en);font-size:22px;color:var(--obi-pink-900)}
.cart-summary .checkout-button,.cart_totals .checkout-button{width:100%;margin-top:18px;min-height:52px}
.obi-cards-pay{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.obi-paychip{font-size:11px;font-family:var(--font-en);font-weight:700;color:var(--obi-ink-700);background:var(--obi-cream);border:1px solid var(--color-border);border-radius:6px;padding:3px 8px}
.obi-empty-cart{text-align:center;max-width:560px;margin:0 auto;padding:48px 20px}
.obi-empty-cart .obi-mascot{margin-bottom:18px}
.obi-empty-cart h1{font-size:24px;color:var(--obi-ink);margin-bottom:10px}
.obi-empty-cart p{color:var(--obi-ink-700);margin-bottom:22px}
.obi-empty-cart__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ============================ 14. 購入手続き ============================ */
.obi-checkout{padding-top:32px;padding-bottom:64px}
.obi-checkout__layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}
.obi-express{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.obi-express .obi-btn{flex:1;min-width:140px}
.obi-express--apple{background:#000;border-color:#000}
.obi-express--paypay{background:#ec1c2e;border-color:#ec1c2e}
.obi-divider{display:flex;align-items:center;gap:12px;color:var(--obi-ink-400);font-size:13px;margin:18px 0}
.obi-divider::before,.obi-divider::after{content:"";flex:1;height:1px;background:var(--color-border)}
.obi-form fieldset,.woocommerce-checkout .col-1,.woocommerce-checkout .col-2,#order_review{border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px;margin-bottom:24px;background:var(--obi-cream-0)}
.obi-form legend,.woocommerce-checkout h3{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--obi-ink);padding:0}
.form-row{margin-bottom:16px}
.form-row.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row label,.woocommerce form .form-row label{display:block;font-size:13px;font-weight:700;color:var(--obi-ink-700);margin-bottom:6px}
.form-row .req,.required{color:var(--obi-sale);font-size:11px;margin-left:6px}
.form-row input,.form-row select,.form-row textarea,
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{width:100%;padding:12px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius-field);font-size:15px;background:var(--obi-cream-0);font-family:var(--font-body)}
.form-row .hint{font-size:12px;color:var(--obi-ink-400);margin-top:4px}
.obi-jp-note{font-size:12px;color:var(--obi-green-700);background:var(--obi-green-100);border-radius:10px;padding:8px 12px;margin-bottom:16px}
.obi-pay-option,.wc_payment_method{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1.5px solid var(--color-border);border-radius:var(--radius-field);margin-bottom:10px;cursor:pointer;list-style:none}
.obi-pay-option.is-selected{border-color:var(--obi-pink);background:var(--obi-pink-50)}
.obi-pay-option input{margin-top:4px}
.obi-pay-option .label{font-family:var(--font-head);font-weight:700;color:var(--obi-ink)}
.obi-pay-option .desc{font-size:12px;color:var(--obi-ink-400)}
.obi-order-review{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px;position:sticky;top:90px}
.obi-order-review h2{font-size:18px;margin-bottom:16px}
.obi-order-review .line{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:10px 0;border-bottom:1px solid var(--color-border)}
.obi-order-review .line .name{color:var(--obi-ink)}
.obi-order-review .line .name small{display:block;color:var(--obi-ink-400)}
.obi-order-review .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--obi-ink-700)}
.obi-order-review .row.total{border-top:2px dotted var(--obi-pink-300);margin-top:6px;padding-top:12px;font-weight:700;color:var(--obi-ink)}
.obi-order-review .row.total .amount{font-family:var(--font-en);font-size:20px;color:var(--obi-pink-900)}
.obi-place-order,#place_order{width:100%;margin-top:16px;min-height:56px;font-size:16px}
.obi-agree{font-size:12px;color:var(--obi-ink-400);text-align:center;margin-top:10px}
/* ============================ 15. マイアカウント ============================ */
.obi-account,.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px 1fr;gap:32px;padding-top:32px;padding-bottom:64px}
.woocommerce-MyAccount-navigation ul{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden;list-style:none;margin:0}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a{display:block;padding:13px 18px;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--obi-ink);border-bottom:1px solid var(--color-border)}
.woocommerce-MyAccount-navigation li.is-active a{background:var(--obi-pink-50);color:var(--obi-pink-900)}
.woocommerce-MyAccount-navigation li a:hover{background:var(--obi-cream);text-decoration:none}
.woocommerce-MyAccount-content h2{font-size:20px;margin-bottom:14px;color:var(--obi-ink)}
.woocommerce-MyAccount-content p{font-size:15px;color:var(--obi-ink-700);margin-bottom:14px}
.obi-table-scroll{overflow-x:auto}
.account-orders,.woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.account-orders th,.woocommerce-orders-table th{text-align:left;background:var(--obi-cream);padding:12px 14px;font-family:var(--font-head);font-size:13px;color:var(--obi-ink-700)}
.account-orders td,.woocommerce-orders-table td{padding:12px 14px;border-top:1px solid var(--color-border)}
.obi-status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:var(--radius-btn);background:var(--obi-green-100);color:var(--obi-green-700)}
/* ============================ 16. 注文完了（サンクス） ============================ */
.obi-thankyou{max-width:720px;margin:0 auto;padding:56px 20px;text-align:center}
.obi-thankyou .obi-mascot{margin-bottom:18px}
.obi-thankyou h1{font-size:30px;color:var(--obi-ink);margin-bottom:8px}
.obi-thankyou .lead{color:var(--obi-ink-700);margin-bottom:28px}
.obi-thankyou .order-box{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:24px;text-align:left;margin-bottom:28px}
.obi-thankyou .order-box .row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;color:var(--obi-ink-700)}
.obi-thankyou .order-box .row strong{color:var(--obi-ink)}
.obi-next{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:8px}
.obi-next a{display:block;background:var(--obi-cream);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:18px;font-family:var(--font-head);font-weight:700;color:var(--obi-ink)}
.obi-next a:hover{background:var(--obi-pink-50);text-decoration:none;color:var(--obi-pink-900)}
/* ============================ 17. FAQ ============================ */
.obi-faq{max-width:760px;margin:0 auto}
.obi-faq details{background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:14px;margin-bottom:12px;overflow:hidden}
.obi-faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--obi-ink);position:relative}
.obi-faq summary::-webkit-details-marker{display:none}
.obi-faq summary::after{content:"+";position:absolute;right:18px;top:14px;font-size:22px;color:var(--obi-pink-700);transition:transform .2s}
.obi-faq details[open] summary::after{transform:rotate(45deg)}
.obi-faq .ans{padding:0 18px 18px;font-size:14px;line-height:1.9;color:var(--obi-ink-700)}
/* ============================ 18. 特商法表 ============================ */
.obi-legal-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--obi-cream-0);border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.obi-legal-table th,.obi-legal-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--color-border);vertical-align:top}
.obi-legal-table th{width:32%;background:var(--obi-cream);font-family:var(--font-head);font-size:14px;color:var(--obi-ink-700)}
.obi-legal-table td .todo{color:var(--obi-ink-400);font-style:italic}
/* ============================ 19. お問い合わせ ============================ */
.obi-contact{max-width:680px;margin:0 auto}
.obi-contact .cf7-note{font-size:12px;color:var(--obi-ink-400);background:var(--obi-cream);border:1px dashed var(--color-border);border-radius:10px;padding:10px 14px;margin-bottom:20px}
/* ============================ 20. 404 ============================ */
.obi-404{max-width:560px;margin:0 auto;padding:64px 20px;text-align:center}
.obi-404 .obi-mascot{margin-bottom:18px}
.obi-404__title{font-size:28px;color:var(--obi-ink);margin-bottom:10px}
.obi-404__lead{color:var(--obi-ink-700);margin-bottom:24px}
.obi-404__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
/* ============================ 21. Responsive ============================ */
@media (max-width:1023px){
.footer-widgets{grid-template-columns:repeat(2,1fr)}
.obi-hero__inner{grid-template-columns:1fr .8fr}
.obi-hero__title{font-size:32px}
.hero-mascot .obi-mascot__img{height:96px}
ul.products.columns-3,ul.products.columns-4{grid-template-columns:repeat(2,1fr)}
.obi-blog-grid{grid-template-columns:repeat(2,1fr)}
.obi-commit-block,.obi-gift{grid-template-columns:1fr}
.obi-commit-block.is-right .obi-commit-media,.obi-commit-block.is-right .obi-commit-text{order:0}
.col-full--shop{flex-direction:column}
#secondary,.col-full--shop #secondary{flex:0 0 auto;width:auto}
.single-product div.product,.product-gallery-summary{grid-template-columns:1fr}
.obi-checkout__layout,.woocommerce-account .woocommerce{grid-template-columns:1fr}
.cart-summary,.cart_totals,.obi-order-review{position:static}
.obi-account{grid-template-columns:1fr}
.obi-next{grid-template-columns:1fr}
}
@media (max-width:767px){
.site-header>.col-full{flex-wrap:wrap}
.site-branding .custom-logo{height:42px}
.site-branding .site-title{display:none}
.site-branding .site-description{font-size:11px;line-height:1.45}
.site-search{flex:0 0 100%;order:3;margin-top:8px}
.main-navigation .menu-toggle{display:block;background:none;border:1.5px solid var(--obi-pink);color:var(--obi-pink-900);font-size:14px;font-weight:700;font-family:var(--font-head);padding:8px 16px;border-radius:var(--radius-btn);cursor:pointer}
.storefront-primary-navigation>.col-full{justify-content:space-between}
.main-navigation .primary-navigation{display:none;flex-basis:100%}
.main-navigation .primary-navigation.is-open{display:block}
.main-navigation .primary-navigation>.menu{flex-direction:column}
.storefront-handheld-footer-bar{display:block}
body{padding-bottom:56px}
.footer-widgets{grid-template-columns:repeat(2,1fr);gap:24px}
.obi-hero{min-height:440px}
.obi-hero__inner{grid-template-columns:1fr;text-align:center}
.obi-hero__copy{max-width:none;margin:0 auto}
.obi-hero__title{font-size:28px}
.obi-buttons{flex-direction:column;align-items:center}
.obi-btn,.button{width:100%;max-width:340px;min-height:48px}
.hero-mascot{display:none}
.nainai-section-title,.obi-section-title{font-size:22px}
.obi-section{padding:48px 20px}
ul.products.columns-3,ul.products.columns-4{grid-template-columns:repeat(2,1fr);gap:12px}
.obi-blog-grid{grid-template-columns:1fr}
.obi-review-card{min-width:100%}
.obi-trust__cols{gap:16px}.obi-trust__col{min-width:100px}
.obi-commit-text{padding:28px 22px}
.obi-gift__content{padding:32px 22px}
.obi-callout{grid-template-columns:1fr}
.form-row.two{grid-template-columns:1fr}
.obi-page-hero h1{font-size:26px}
.obi-prose{padding:40px 20px}
.woocommerce-tabs .tabs{flex-wrap:wrap}
.obi-express{flex-direction:column}
}
/* =============================================================================
22. WordPress / WooCommerce 実マークアップ適用（子テーマ固有）
============================================================================= */
/* 管理バー表示時、position:sticky ヘッダが admin bar と重ならないように */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
/* スティッキーヘッダの復旧（重要）
Storefront は `.site{overflow-x:hidden}`（0,0,1,0）を指定する。overflow-x が visible 以外だと
overflow-y は auto に計算され、.hfeed.site が「実スクロールコンテナ」になる。position:sticky は
最も近いスクロール祖先を基準に貼り付くため、実際にスクロールするビューポートへ追従できず
§4 の `.site-header{position:sticky}` が効かなくなる。
横スクロール抑止は §2 の `body{overflow-x:hidden}` が担う（body の overflow はビューポートへ
伝播するため sticky を壊さない）。WF も「.hfeed.site=visible / body=hidden」の構成。 */
.hfeed.site{overflow-x:visible}
/* Storefront が親テーマで付与する余白・区切りを obi 用に無効化 */
.site-header .col-full,.storefront-primary-navigation .col-full{background:none}
.page-template-front-page #content,.home #content{background:none}
/* ヘッダ配置の詳細度対策（重要）
Storefront は @media (min-width:768px) 内で `.woocommerce-active .site-header X`
（詳細度 0,0,3,0）や `.site-header .site-branding`（0,0,2,0）で float / width / display を
指定する。§4 のヘッダ規則は WF 由来の単一クラス（`.site-branding` = 0,0,1,0）なので
そのままでは詳細度負けし、ロゴとテキストが縦積み・ナビが左寄せ・カート幅が固定される。
本 CSS は storefront/style.css より後に読み込まれるため、同等の詳細度に上げれば勝てる。 */
.woocommerce-active .site-header .site-branding,
.site-header .site-branding{display:flex;float:none;width:auto}
.woocommerce-active .site-header .main-navigation,
.site-header .main-navigation{float:none;width:auto}
.woocommerce-active .site-header .site-header-cart,
.site-header .site-header-cart{float:none;width:auto}
/* Storefront の clearfix 疑似要素（.col-full::before / ::after）は float 前提の遺物。
§4 でヘッダ行を display:flex にすると 0 幅のフレックスアイテムになり、
justify-content の端（space-between / flex-end）を占有して中身を内側へ押し込む。
ヘッダ行では消す（WF には Storefront の clearfix が無いため発生しない差異）。 */
.site-header > .col-full::before,
.site-header > .col-full::after,
.storefront-primary-navigation > .col-full::before,
.storefront-primary-navigation > .col-full::after,
.col-full--shop::before,
.col-full--shop::after,
.storefront-sorting::before,
.storefront-sorting::after{content:none}
/* ページネーションの現在ページ。§11 の `.woocommerce-pagination .current`（0,0,2,0）は、
Storefront カスタマイザーのインライン CSS
`.woocommerce-pagination .page-numbers li .page-numbers.current`（0,0,4,3）に負け、
ピンクではなくグレー（rgb(230,230,230)）になる。実マークアップ（span.page-numbers.current）を
同等以上の詳細度で狙って WF のおびピンクへ戻す。リンク側の枠色は §11 の指定を活かす。 */
.woocommerce-pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination ul li span.page-numbers.current{
background:var(--obi-pink-700);
color:#fff;
border-color:var(--obi-pink-700);
}
/* フッタも同じ問題。§7 で .footer-widgets を 4カラム grid にしているため、clearfix の
::before/::after が「グリッドアイテム」としてセルを1つずつ占有し、4つのブロックが
2〜4列目へずれて4つ目が2段目に折り返される（フッタが約290px 縦に伸びる）。 */
.footer-widgets::before,
.footer-widgets::after{content:none}
/* フッタの余白・リスト・リンク装飾を WF に合わせる。Storefront は次を指定しており、
§7 はいずれも未指定のため素通りしてしまう（フッタが 455→582px に伸び、
リンクに黒丸と下線が付く）:
.footer-widgets{padding-top:4.2358em} → WF は 0
.site-footer{padding:1.618em 0 3.70633em} → WF は下 0（上 48px は §7 が指定済み）
ul{list-style:disc} → WF は `ul,ol{list-style:none}` の全体リセットで none。
子テーマはコンポーネント単位でリセットする方針のため
フッタのメニューだけ漏れていた
.site-footer a{text-decoration:underline}(0,0,2,0) → 子の `a{text-decoration:none}`(0,0,0,1) が負ける。
ホバー時の下線は §7 の :hover 規則（より高詳細度）が担う */
.footer-widgets{padding-top:0}
.site-footer{padding-bottom:0}
.site-footer .footer-widgets ul{list-style:none;margin:0;padding:0}
.site-footer a{text-decoration:none}
/* フッタのリンク文字色。Storefront のカスタマイザーはインライン CSS で
`.site-footer a:not(.button):not(.components-button){color:#333}` を出力する。
:not() は引数の詳細度が加算されるため (0,0,3,1) となり、§7 の
`.footer-widgets .menu a`(0,0,2,1) が負けて、緑地に濃いグレー（rgb(51,51,51)）の
ほぼ読めない文字になる（WF は rgba(255,255,255,.85)）。
同じ :not() 二段重ねで (0,0,4,1) に上げて WF の白系へ戻す。 */
.site-footer .footer-widgets a:not(.button):not(.components-button){color:rgba(255,255,255,.85)}
.site-footer .footer-widgets a:not(.button):not(.components-button):hover{color:#fff}
/* 同じインライン CSS は handheld フッタバー（モバイルで表示される固定バー。地色は
きなりホワイト）にも専用ルール
`.site-footer .storefront-handheld-footer-bar a:not(.button):not(.components-button)`
（0,0,4,1）を出力する。§7 の `.storefront-handheld-footer-bar ul>li>a`（0,0,1,3）が
負けて色が #333333 になる（設計トークンは --obi-ink #33302D）。
詳細度はクラス数から先に比較されるため、:not() を二段重ねて (0,0,4,3) にして勝たせる。 */
.site-footer .storefront-handheld-footer-bar ul > li > a:not(.button):not(.components-button){color:var(--obi-ink)}
/* 商品一覧の説明文。WF は 、WooCommerce はショップページ本文を
で出力する（カテゴリ archive は .term-description）。
§10 は .obi-shop__intro と .term-description しか見ていないため、ショップページだけ
16px・濃色の素の段落になる。.page-description も同じ扱いにする。 */
.page-description{color:var(--obi-ink-700);font-size:14px;margin-bottom:20px}
.page-description p:last-child{margin-bottom:0}
/* 商品一覧サイドバーの実マークアップ対応。
§10 は WF の手書きモック（.obi-pricefilter 等）に合わせて書かれているが、実サイトは
WooCommerce の本物のウィジェットを出すため、以下が素の Storefront/WooCommerce のままになる。 */
/* リンクの下線: Storefront の `.widget-area .widget a{text-decoration:underline}`（0,0,3,1）が
§2 の `a{text-decoration:none}`（0,0,0,1）に勝つ。WF のサイドバーは下線なし（ホバーのみ）。 */
#secondary .widget a{text-decoration:none}
#secondary .widget a:hover{text-decoration:underline}
/* カテゴリ: Storefront が icons.css で Font Awesome のフォルダアイコンを付ける（WF は無し）。 */
#secondary .widget_product_categories ul li::before{content:none}
/* カテゴリ件数: WooCommerce が右端へ float する（WF は名前の直後にインライン）。 */
#secondary .widget.woocommerce li .count{float:none;color:var(--obi-ink-400);font-size:13px}
/* 価格フィルタ: WF のモック（.obi-pricefilter）は静的なバー。実体は jQuery UI スライダーで、
既定色（紫）のままなので obi のトークンへ寄せる（トラック＝クリーム、選択範囲とつまみ＝安心グリーン）。 */
#secondary .widget_price_filter .price_slider_wrapper .ui-widget-content{background:var(--obi-cream-200)}
#secondary .widget_price_filter .ui-slider .ui-slider-range{background:var(--obi-green)}
#secondary .widget_price_filter .ui-slider .ui-slider-handle{background:var(--obi-green);border:2px solid #fff;box-shadow:0 1px 3px rgba(51,48,45,.3)}
#secondary .widget_price_filter .price_label{color:var(--obi-ink-700);font-size:13px}
/* Storefront はトップ（.home.blog 等）で .site-header に margin-bottom:4.2358em(≒68px) を付け、
ヘッダとコンテンツの間に隙間を作る。obi のヒーローはヘッダ直下から始まる設計なので打ち消す。
Storefront と同じ詳細度（0,0,3,0）で、後勝ちさせる。 */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header{margin-bottom:0}
/* Storefront は icons.css で .site-header-cart .cart-contents::after に Font Awesome の
カゴアイコンを付ける。WF のカートは「¥0 ＋ 丸バッジ」のみなので消す
（icons.css より後に読まれるため、同詳細度で後勝ちする）。 */
.site-header-cart .cart-contents::after{content:none}
/* Storefront は @media 内で .col-full{box-sizing:content-box} を指定する。§2 の
`*{box-sizing:border-box}`（詳細度 0）では負け、max-width:1200 に padding が加算されて
コンテナが 1240px になり、中身が WF より 20px 外側へずれる。WF は border-box 前提なので戻す。 */
.col-full{box-sizing:border-box}
/* Storefront は @media 内で `.site-header .site-branding img{height:auto}`（0,0,3,0）を
指定するため、§4 の `.site-branding .custom-logo{height:56px}`（0,0,2,0）が負けて
ロゴが自然高（61px）になる。同詳細度に上げて WF の 56px を復元する。 */
.site-header .site-branding .custom-logo{height:56px}
/* 商品グリッドの詳細度対策（重要）
§11 は ul.products を CSS Grid にし、`ul.products li.product{width:auto;float:none}`
（0,0,2,2）で WooCommerce の float グリッドを打ち消す想定だった。しかし WooCommerce は
`.site-main ul.products.columns-4 li.product{width:22.05%}`（0,0,4,2）や
`.site-main ul.products li.product{float:left}`（0,0,3,2）を @media 内で指定するため
詳細度負けする。結果、グリッドトラック（282px）に対して 22.05% が効き、カードが
62px幅へ潰れて文字が一列に折り返される。同詳細度に上げてグリッドアイテムを素の幅に戻す。 */
.site-main ul.products li.product,
.site-main ul.products li.product-category,
.site-main ul.products[class*="columns-"] li.product,
.site-main ul.products[class*="columns-"] li.product-category{width:auto;float:none;margin:0}
/* カード内のタイトル。§11 の `.woocommerce-loop-product__title{15px/700}`（0,0,1,0）は、
WooCommerce の `ul.products li.product .woocommerce-loop-product__title{font-size:1rem;
font-weight:400}`（0,0,3,2）に詳細度負けし、16px の標準字になる。
商品一覧（カード幅 264px）では2行に折り返してカードが縦に伸びる原因にもなる。 */
.site-main ul.products li.product .woocommerce-loop-product__title{
font-family:var(--font-head);
font-size:15px;
font-weight:700;
color:var(--obi-ink);
}
/* カード内の価格。§11 の `.price`（0,0,1,0）は、WooCommerce の
`ul.products li.product .price{color:#43454b;font-weight:400}`（0,0,3,2）と
Storefront カスタマイザーのインライン CSS（同 0,0,3,2・グレー）に詳細度負けし、
WF のピンク太字ではなくグレー標準字になる。同詳細度以上に上げて WF の見た目へ戻す。 */
.site-main ul.products li.product .price{
color:var(--obi-pink-900);
font-family:var(--font-en);
font-size:18px;
font-weight:700;
}
.site-main ul.products li.product .price .tax{
color:var(--obi-ink-400);
font-family:var(--font-body);
font-size:11px;
font-weight:400;
}
/* カード内の縦の積み上げ。WooCommerce/Storefront は h2・p・.price に margin-bottom を付ける
（タイトル 8.65px／単価 17px／価格 16px）が、WF のカードは全て margin:0 で密に積み上げ、
カート追加ボタンの下だけ 16px の余白を持つ（img280+title37+単価22+価格46=385、+ボタン47+16=450）。
これを合わせないとカードが約29px 縦に伸びる。 */
.site-main ul.products li.product .woocommerce-loop-product__title,
.site-main ul.products li.product .obi-unit,
.site-main ul.products li.product .price{margin:0}
.site-main ul.products li.product .add_to_cart_button{margin-bottom:16px}
/* カテゴリカード（トップ「お好みで選ぶ」）も同じ詳細度負け。
WooCommerce は `ul.products li.product.product-category img{margin-bottom:1.618em}`（0,0,3,3）と
`ul.products li.product .woocommerce-loop-category__title{font-size:1rem;font-weight:400;
margin-bottom:.54em}`（0,0,3,2）を持ち、§11 の `…li.product-category img{margin:0}`（0,0,2,3）と
`.woocommerce-loop-category__title{15px/700}`（0,0,1,0）が負ける。結果、画像下に約23px の余白が
入り見出しが 16px/400 になってカードが約33px 伸びる（WF 331 → 364）。
実マークアップの li は class="product-category product" なので li.product.product-category も併記する。 */
.site-main ul.products li.product-category img,
.site-main ul.products li.product.product-category img{margin:0}
.site-main ul.products li.product-category .woocommerce-loop-category__title,
.site-main ul.products li.product.product-category .woocommerce-loop-category__title{
font-family:var(--font-head);
font-size:15px;
font-weight:700;
margin:0;
}
/* WooCommerce の onsale バッジを obi バッジ化 */
.woocommerce span.onsale,.woocommerce ul.products li.product .onsale{position:absolute;top:12px;right:12px;left:auto;min-height:0;min-width:0;margin:0;padding:3px 12px;font-family:var(--font-head);font-size:12px;font-weight:700;color:#fff;background:var(--obi-sale);border-radius:var(--radius-btn);line-height:1.6}
/* WooCommerce メッセージ（成功・エラー・情報）を obi トーンに */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border-top-color:var(--obi-pink);background:var(--obi-cream-0);border-radius:var(--radius-field)}
.woocommerce-message::before{color:var(--obi-green)}
.woocommerce-info::before{color:var(--obi-info)}
/* 数量入力（WooCommerce 標準）をステッパー風の見た目に寄せる。
JS で − / ＋ ボタンを付けるので、ブラウザ標準の上下スピナーは不要（WF にも無い）。
Firefox は -moz-appearance:textfield、WebKit/Blink はスピナー擬似要素を明示的に消す
（input の appearance:none だけでは ::-webkit-inner-spin-button がホバーで出るため）。 */
.woocommerce .quantity .qty{-moz-appearance:textfield;appearance:textfield}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
/* 単一商品のギャラリー・サマリーが Storefront の float で崩れないように */
.single-product div.product::before,.single-product div.product::after{display:none}
/* フロントページ（front-page.php）は entry-title を隠す（ヒーローが見出しを兼ねる） */
.home .entry-header,.page-template-front-page .entry-header,
.home .storefront-breadcrumb,.home .woocommerce-breadcrumb{display:none}
.home #content,.page-template-front-page #content{padding:0}
.home #primary,.home #main,.page-template-front-page #primary,.page-template-front-page #main{margin:0;padding:0;max-width:none;width:100%}
/* 固定ページ本文（the_content）を obi-prose のトーンに寄せる */
.obi-prose .entry-content>h2:first-child{margin-top:0}
/* フルブリード: ヘッダが開く .col-full（最大幅1200・左右padding）の内側でも、
obi の各バンドは画面幅いっぱいに広げる。各バンドの __inner が内容を再度中央寄せする。
body{overflow-x:hidden} 済みなので横スクロールは出ない。 */
.obi-hero,.obi-trust,.obi-section,.obi-gift,.obi-page-hero{
position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw
}
/* front-page.php / 404.php では #content 直下の col-full の余白を詰める（ヘッダ/フッタの col-full は対象外） */
.home #content>.col-full,.error404 #content>.col-full{padding-left:0;padding-right:0}
.obi-prose,.obi-404,.obi-thankyou,.obi-empty-cart,.obi-contact{padding-left:20px;padding-right:20px}