/* Claude Designの書き出しの見た目（port.mjs で写した。手で直さない） */
:root{
--ink-950:#0B0C0D;--ink-900:#111314;--ink-850:#16181A;--ink-800:#1C1F21;--ink-700:#26292C;--ink-600:#34383C;--ink-500:#4A4F54;
--steel-400:#7C8288;--steel-300:#A4A9AE;--steel-200:#C9CCCF;--steel-100:#E4E5E6;
--paper-50:#FFFFFF;--paper-100:#F6F5F2;--paper-200:#ECEAE5;
--spark-300:#FFA266;--spark-400:#FF8333;--spark-500:#FF6A13;--spark-600:#E5520A;--spark-700:#B83F06;
--line-subtle:var(--ink-700);
--font-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
--font-display:"Barlow Condensed","Zen Kaku Gothic New",sans-serif;
--font-ui:"Barlow","Zen Kaku Gothic New",sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,monospace;
--fs-hero:clamp(40px,7vw,88px);--fs-h1:clamp(28px,4.2vw,48px);--fs-h2:clamp(28px,3.6vw,40px);--fs-h3:clamp(17px,1.5vw,19px);
--fs-body:16px;--fs-small:13px;--fs-price:clamp(32px,3.4vw,40px);
--container:1200px;--narrow:860px;--pad:clamp(20px,4vw,40px);--section-y:clamp(80px,10vw,144px);
--radius-1:2px;--header-h:72px;
--shadow-card-light:0 1px 2px rgba(11,12,13,.06),0 8px 24px rgba(11,12,13,.06);
--shadow-card-hover:0 1px 2px rgba(11,12,13,.08),0 16px 40px rgba(11,12,13,.12);
--ease-out:cubic-bezier(.2,.7,.2,1);--dur-fast:140ms;--dur-base:240ms;--dur-slow:600ms;
--ph-dark:repeating-linear-gradient(135deg,var(--ink-800) 0 12px,var(--ink-850) 12px 24px);
--ph-dark-2:repeating-linear-gradient(135deg,var(--ink-600) 0 12px,var(--ink-700) 12px 24px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--header-h)}
body{margin:0;background:var(--paper-100);color:var(--ink-950);font-family:var(--font-jp);font-size:var(--fs-body);line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
a{color:var(--spark-700);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--spark-600)}
::selection{background:var(--spark-500);color:#fff}
@keyframes pbZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.pb-d{display:contents}.pb-m{display:none}
@media (max-width:767px){.pb-d{display:none}.pb-m{display:contents}.pb-hero{width:100% !important}[data-k="4"],[data-k="5"]{display:none !important}footer{padding-bottom:calc(104px + env(safe-area-inset-bottom)) !important}}
.pb-box{position:fixed;inset:0;z-index:100;background:rgba(11,12,13,.94);display:flex;align-items:center;justify-content:center}
.pb-box[hidden]{display:none}
.pb-box img{max-width:94vw;max-height:84vh;object-fit:contain}
.pb-box button{position:absolute;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:400 30px/1 var(--font-ui);cursor:pointer}
.pb-box button:hover{background:var(--spark-500);color:var(--ink-950)}
.pb-box .pb-close{top:16px;right:16px}.pb-box .pb-prev{left:16px;top:50%;margin-top:-26px}.pb-box .pb-next{right:16px;top:50%;margin-top:-26px}
.pb-box .pb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;font:500 13px/1 var(--font-mono);color:var(--steel-300)}
.pb-burger{display:none;flex:none;position:relative;width:44px;height:44px;margin-left:8px;padding:0;border:1px solid var(--ink-700);border-radius:var(--radius-1);background:transparent;cursor:pointer}
.pb-burger span,.pb-burger span::before,.pb-burger span::after{content:"";position:absolute;width:20px;height:2px;background:#fff;transition:transform .2s,background .2s}
.pb-burger span{left:11px;top:20px}.pb-burger span::before{left:0;top:-7px}.pb-burger span::after{left:0;top:7px}
.pb-burger[aria-expanded="true"] span{background:transparent}
.pb-burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.pb-burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
.pb-menu{position:absolute;top:100%;left:0;right:0;padding:4px var(--pad) 12px;background:rgba(11,12,13,.96);border-bottom:1px solid var(--ink-700)}
.pb-menu[hidden]{display:none}
.pb-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--ink-700);font:700 16px/1.4 var(--font-jp);letter-spacing:.08em;color:#fff}
.pb-menu a:last-child{border-bottom:0}
@media (max-width:1023px){[data-wide-nav]{display:none !important}[data-wide-nav]+a{margin-left:auto}.pb-burger{display:block}}
@media (min-width:1024px){.pb-menu{display:none !important}}
.pb-top{position:fixed;right:20px;bottom:24px;z-index:55;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(11,12,13,.55);color:#fff;font:400 22px/1 var(--font-ui);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pb-top.on{opacity:1;visibility:visible}
.pb-top:hover{background:var(--spark-500);color:var(--ink-950)}
@media (max-width:767px){.pb-top{bottom:calc(88px + env(safe-area-inset-bottom))}}
.pb-arrow{position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-22px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(11,12,13,.45);color:#fff;font:400 30px/1 var(--font-ui);cursor:pointer}
.pb-arrow:hover{background:var(--spark-500);color:var(--ink-950)}
.pb-arrow-l{left:10px}.pb-arrow-r{right:10px}
.pb-note{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;flex-direction:column;padding:clamp(14px,7cqi,28px);background:linear-gradient(140deg,var(--ink-800) 0%,var(--ink-950) 70%);border:1px solid var(--ink-700);container-type:inline-size;text-align:left}
.pb-note::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:3px;background:var(--spark-500)}
.pb-note-fill{position:absolute;inset:0;aspect-ratio:auto;border:0}
.pb-note-k{display:flex;align-items:center;gap:10px;font:700 11px/1 var(--font-display);letter-spacing:.24em;color:var(--spark-400)}
.pb-note-k::before{content:"";width:24px;height:1px;background:currentColor}
.pb-note-t{margin:auto 0;color:#fff;font-family:var(--font-jp);font-weight:900;letter-spacing:.04em;line-height:1.45;word-break:auto-phrase;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.pb-note-l .pb-note-t{font-size:clamp(18px,8.6cqi,32px);-webkit-line-clamp:3}
.pb-note-m .pb-note-t{font-size:clamp(16px,6.6cqi,26px);-webkit-line-clamp:4}
.pb-note-s .pb-note-t{font-size:clamp(14px,5.2cqi,21px);-webkit-line-clamp:5}
.pb-note-shop{align-self:flex-end;font:700 11px/1 var(--font-jp);letter-spacing:.14em;color:var(--steel-400)}
@media (max-width:767px){header>div{gap:10px !important}header .pb-m>a[href^="tel:"]{flex:none;gap:0 !important;padding:0 14px !important;font-size:0 !important}}
.h1:hover{color:var(--spark-400) !important}
.h2:hover{background:var(--spark-400) !important;color:var(--ink-950) !important}
