/*
Theme Name: loom fb
Theme URI: https://loom-fb.com/
Author: loom fb
Author URI: https://loom-fb.com/
Description: 指スケ（フィンガーボード）のパーク・セクションブランド「loom fb」の公式サイト用ブロックテーマ。単体HTML（loom-fb.html）をWordPressブロックテーマ化したもの。
Version: 1.2.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loom-fb
Tags: one-column, custom-logo, custom-menu, editor-style
*/

/* ==========================================================================
   loom fb design CSS
   （元の loom-fb.html の <style> をそのまま移植。値は変更していない）
   ========================================================================== */
:root{--bg:#e8e9ea;--ink:#17181a;--gray:#cdd0d3;--line:#17181a;--acc:#3f5b4e;--card:#dadbdd;--logo-blend:multiply;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17181a;--ink:#ececea;--gray:#3a3d41;--line:#ececea;--card:#232528;--logo-blend:normal}}
:root[data-theme="dark"]{--bg:#17181a;--ink:#ececea;--gray:#3a3d41;--line:#ececea;--card:#232528;--logo-blend:normal}
*{box-sizing:border-box}html{scroll-padding-top:68px;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;line-height:1.7}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px;background:var(--bg);border-bottom:2.5px solid var(--line)}
.ib{background:none;border:0;width:44px;height:44px;display:grid;place-items:center;position:relative}
.ib svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.logo{height:46px;width:auto;display:block}
#count{position:absolute;top:2px;right:0;min-width:20px;height:20px;border-radius:10px;background:var(--acc);color:#fff;font-size:12px;font-weight:700;display:none;place-items:center;padding:0 5px}
main{max-width:960px;margin:0 auto}
.hero{padding:72px 24px 48px;text-align:center}
.hero h1{font-size:clamp(34px,8vw,64px);line-height:1.2;margin:0 0 24px;font-weight:900;letter-spacing:.02em}
.hero p{max-width:34em;margin:0 auto;font-size:16px}
.video{margin:48px 16px 0;aspect-ratio:2.35/1;background:var(--gray);border:2.5px solid var(--line);border-radius:40px;display:grid;place-items:center;overflow:hidden}
.video video{width:100%;height:100%;object-fit:cover}
.video span{font-weight:700;opacity:.7;text-align:center;padding:8px}
.shop{padding:96px 16px 80px}
.bar{display:flex;gap:10px;justify-content:flex-end;margin-bottom:20px}
.pill{border:2.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 18px;font-weight:700;min-height:44px}
.pill[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.item{background:none;border:0;padding:0;text-align:left}
.thumb{aspect-ratio:1;border:2.5px solid var(--line);border-radius:28px;background:var(--card);display:grid;place-items:center;overflow:hidden;transition:transform .15s}
.item:hover .thumb{transform:rotate(-1.5deg)}
.item b{display:block;margin-top:8px;font-size:15px;line-height:1.4}
.item small{font-size:14px;opacity:.75}
.thumb svg,.slide svg{width:62%;height:auto}
footer{padding:32px 16px 48px;text-align:center;font-size:13px;opacity:.7}
/* drawer */
#veil{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
#drawer{position:fixed;top:0;bottom:0;left:0;width:min(82vw,340px);background:var(--bg);border-right:2.5px solid var(--line);z-index:50;transform:translateX(-102%);transition:transform .25s;padding:calc(20px + env(safe-area-inset-top,0px)) 20px 20px}
body.menu #drawer{transform:none}body.menu #veil{opacity:1;pointer-events:auto}
#drawer input{width:100%;border:2.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:10px 18px;font:inherit;margin-bottom:20px}
#drawer a{display:block;border:2.5px solid var(--line);border-radius:18px;padding:10px 18px;margin-bottom:10px;font-weight:700;text-decoration:none;color:var(--ink)}
/* detail */
#detail{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;display:none;padding-top:env(safe-area-inset-top,0px)}
#detail.on{display:block}
.dwrap{max-width:560px;margin:0 auto;padding:0 20px 140px}
.dbar{display:flex;align-items:center;justify-content:space-between;height:64px;border-bottom:2.5px solid var(--line);margin:0 -20px;padding:0 16px;position:sticky;top:0;background:var(--bg);z-index:2}
.car{position:relative;margin:24px 0}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:2.5px solid var(--line);border-radius:28px;background:var(--card)}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/3;display:grid;place-items:center}
.arr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:2.5px solid var(--line);background:var(--bg);font-size:20px;font-weight:700}
.arr.l{left:-14px}.arr.r{right:-14px}
.dots{display:flex;gap:8px;justify-content:center;margin-top:12px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--gray);border:1.5px solid var(--line)}.dots i.on{background:var(--ink)}
.dwrap h2{font-size:26px;margin:8px 0 0;line-height:1.3}
.price{font-size:22px;font-weight:900;margin:0 0 16px}
.merc{margin-top:48px;border:2.5px dashed var(--line);border-radius:28px;padding:24px;text-align:center}
.merc a{display:inline-block;margin-top:8px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:700;border-radius:999px;padding:10px 24px}
.cta{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:2.5px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;max-width:560px;margin:0 auto}
.cta button{flex:1;min-height:52px;border:2.5px solid var(--line);border-radius:999px;font-weight:900;font-size:16px;background:var(--bg)}
.cta .buy{background:var(--acc);color:#fff;border-color:var(--line)}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;z-index:80}
#toast.on{opacity:1;transform:translate(-50%,0)}
body{font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;letter-spacing:.05em}
header{height:60px;border-bottom:1px solid var(--line)}.dbar,.cta{border-width:1px}
.ib svg{stroke-width:1.6}
.hero{text-align:left;padding:104px 24px 56px}
.hero h1,.dwrap h2{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500}
.hero h1{font-size:clamp(32px,6.5vw,58px);line-height:1.4;letter-spacing:.08em;margin-bottom:32px}
.hero p{margin:0;font-size:15px;line-height:2.1;max-width:30em}
.hero h1.catch{text-align:center}
.catch-en{display:block;font-size:1.14em}
.catch-rule{display:block;width:230px;max-width:62vw;height:1px;background:currentColor;opacity:.4;margin:4px auto 14px;transform:translate(54px,-4px)}
.catch-ja{display:block;font-size:.58em;letter-spacing:.14em;transform:translate(88px,-16px)}
html,body{overflow-x:clip}
.video{margin:64px 0 0;border:0;border-radius:2px}
.shop{padding:96px 24px 104px}
.pill{border:1px solid var(--line);border-radius:2px;font-weight:500;font-size:14px;padding:6px 18px}
.thumb{border:0;border-radius:2px}.item:hover .thumb{transform:none;background:var(--gray)}
.thumb svg *,.slide svg *{stroke:var(--ink);stroke-width:2.5}
.item b{font-weight:500;font-size:14px;margin-top:12px}.item small{opacity:.65}
#drawer{border-right:1px solid var(--line)}
#drawer input{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0}
#drawer a{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 0;font-weight:500;margin:0}
.slides{border:0;border-radius:2px}.arr{border:1px solid var(--line)}
.dwrap h2{font-size:24px;letter-spacing:.06em}.price{font-weight:500;font-size:18px}
.merc{border:1px solid var(--line);border-radius:2px}.merc a{border-radius:2px;font-weight:500}
.cta button{border:1px solid var(--line);border-radius:2px;font-weight:500;letter-spacing:.12em}
.cta .buy{background:var(--acc);border-color:var(--acc)}
#toast{border-radius:2px;font-weight:500}
.soon{text-align:center;padding:72px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.soon p{margin:0;font-size:14px}.soon .en{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(28px,6vw,44px);letter-spacing:.14em;margin-bottom:12px}

#contact,#privacy{position:fixed;inset:0;z-index:60;background:var(--bg);overflow-y:auto;display:none;padding-top:env(safe-area-inset-top,0px)}
#contact.on,#privacy.on{display:block}
.pwrap{max-width:560px;margin:0 auto;padding:0 20px 80px}
.pwrap h2{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;font-size:24px;letter-spacing:.06em;margin:24px 0 8px}
.fld{display:block;margin:24px 0}
.fld>span{display:block;font-size:13px;font-weight:500;margin-bottom:4px}
.fld input,.fld select,.fld textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;padding:10px 0}
.fld textarea{min-height:140px;resize:vertical}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:28px 0;line-height:1.8}
.agree a{color:var(--ink)}
.send{width:100%;background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:2px;padding:14px;font:inherit;font-weight:500;letter-spacing:.12em;cursor:pointer}
.fnote{font-size:12px;opacity:.65;margin-top:16px;line-height:1.8}
.media{display:flex;align-items:center;justify-content:center;gap:30px;padding:30px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.media .mlabel{font-size:11px;letter-spacing:.22em;opacity:.55}
.media a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.08em}
footer a{color:var(--ink);text-decoration:none}
footer p{margin:6px 0 0}
.ptext{font-size:14px;line-height:2.05}
.ptext h3{font-size:15px;margin:30px 0 6px;font-weight:700}

.shop-title{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;font-size:clamp(26px,5.5vw,38px);letter-spacing:.14em;text-align:center;margin:64px 0 40px}
.media .mitem{font-size:14px;letter-spacing:.08em}
.media .mitem a{border-bottom:1px solid var(--line);padding-bottom:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ==========================================================================
   WordPress 調整用（テーマ化にあたって追加した最小限のルール）
   - テンプレートパートのラッパー余白を消す
   - ログイン時、管理バー（admin bar）の高さ分だけ固定ヘッダー等をずらす
   ========================================================================== */
.wp-block-template-part{margin:0}
body.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){body.admin-bar header.wp-block-template-part{top:46px}}
body.admin-bar #detail,body.admin-bar #contact,body.admin-bar #privacy{padding-top:32px}
@media (max-width:782px){body.admin-bar #detail,body.admin-bar #contact,body.admin-bar #privacy{padding-top:46px}}