/* このファイルは Shopify テーマ（SAMURAI 3D）から移植したものです。
   見た目を一致させるため、原本の指定をそのまま使っています。
   変更点：Google Fonts の @import を削除し、fonts.css のセルフホストに切り替え。 */
 :root{ --sm-orange:#ff6a13; --sm-orange-2:#ff9a4d; --sm-peach:#ffd7b8; --sm-cream:#fff4ea; --sm-ink:#0d0d0d; --sm-gray:#6b625b; --sm-radius:28px; --sm-display:'Archivo Black',"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif; --sm-body:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif; --sm-ease:cubic-bezier(.2,.8,.2,1); } .sm{font-family:var(--sm-body);color:var(--sm-ink);position:relative;overflow:hidden} .sm *{box-sizing:border-box} .sm img,.sm video{display:block;max-width:100%} .sm-wrap{width:min(1240px,100% - 32px);margin-inline:auto} .sm-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sm-display);font-size:12px;letter-spacing:.24em;text-transform:uppercase} .sm-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sm-orange);box-shadow:0 0 0 4px rgba(255,106,19,.2);animation:sm-pulse 2s infinite} .sm-h{font-family:var(--sm-display);font-weight:900;line-height:1.02;letter-spacing:-.01em;margin:0} .sm-h--xl{font-size:clamp(44px,8vw,112px)} .sm-h--lg{font-size:clamp(34px,5.4vw,72px)} .sm-h--md{font-size:clamp(26px,3.4vw,44px)} .sm-p{font-size:clamp(14px,1.3vw,17px);line-height:1.9;color:var(--sm-gray);margin:0} .sm-grad{background:linear-gradient(100deg,var(--sm-orange) 0%,#ff3d00 45%,var(--sm-orange-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .sm-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 30px;border-radius:999px;background:var(--sm-ink);color:#fff !important;font-family:var(--sm-display);font-size:14px;letter-spacing:.08em;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;transition:transform .4s var(--sm-ease),box-shadow .4s var(--sm-ease);box-shadow:0 14px 30px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.2)} .sm-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--sm-orange),#ff3d00);transform:translateY(101%);transition:transform .45s var(--sm-ease)} .sm-btn span,.sm-btn svg{position:relative} .sm-btn:hover{transform:translateY(-3px);box-shadow:0 24px 40px -14px rgba(255,106,19,.7)} .sm-btn:hover::before{transform:translateY(0)} .sm-btn--light{background:#fff;color:var(--sm-ink) !important} .sm-btn--light:hover{color:#fff !important} .sm [data-reveal]{opacity:0;transform:translateY(40px) rotateX(12deg);transform-origin:50% 100%;transition:opacity 1s var(--sm-ease),transform 1s var(--sm-ease)} .sm [data-reveal].is-in{opacity:1;transform:none} .sm [data-reveal][data-delay="1"]{transition-delay:.1s} .sm [data-reveal][data-delay="2"]{transition-delay:.2s} .sm [data-reveal][data-delay="3"]{transition-delay:.3s} .sm [data-tilt]{transform-style:preserve-3d;transition:transform .5s var(--sm-ease);will-change:transform} .sm [data-tilt] .sm-pop{transform:translateZ(50px)} .sm-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light} .sm [data-tilt]:hover .sm-glare{opacity:1} .sm-ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,rgba(0,0,0,.04) 0 12px,transparent 12px 24px),linear-gradient(135deg,var(--sm-peach),var(--sm-cream));display:grid;place-items:center;color:rgba(0,0,0,.35);font-family:var(--sm-display);font-size:12px;letter-spacing:.2em;text-align:center} .sm-ph svg{width:60%;height:60%;opacity:.35} .sm-media{position:relative;overflow:hidden} .sm-media>img,.sm-media>video,.sm-media>.sm-ph{width:100%;height:100%;object-fit:cover} .sm-hero{min-height:100svh;background:var(--sm-cream);display:flex;align-items:center;perspective:1400px;padding:120px 0 80px} .sm-hero__rays{position:absolute;left:50%;top:55%;width:220vmax;height:220vmax;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,rgba(255,106,19,.10) 0 4deg,transparent 4deg 12deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 45%);mask:radial-gradient(circle,#000 0,transparent 45%);animation:sm-spin 90s linear infinite} .sm-hero__glow{position:absolute;inset:auto;left:60%;top:50%;width:70vmin;height:70vmin;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,106,19,.55),rgba(255,154,77,.25) 40%,transparent 70%);filter:blur(20px)} .sm-hero__bgvideo{position:absolute;inset:0} .sm-hero__bgvideo video,.sm-hero__bgvideo img{width:100%;height:100%;object-fit:cover} .sm-hero__bgvideo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,244,234,.95) 0%,rgba(255,244,234,.6) 45%,rgba(255,244,234,0) 80%)} .sm-hero canvas.sm-three{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .sm-hero__word{position:absolute;left:50%;bottom:-2vw;translate:-50% 0;font-family:var(--sm-display);font-size:26vw;line-height:.8;color:transparent;-webkit-text-stroke:2px rgba(13,13,13,.08);white-space:nowrap;pointer-events:none;user-select:none} .sm-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px} .sm-hero__copy{display:grid;gap:24px} .sm-hero__logo{width:min(320px,70%);color:var(--sm-ink)} .sm-logo{display:block;width:100%;height:auto} .sm-hero__stage{position:relative;aspect-ratio:1;transform-style:preserve-3d} .sm-hero__product{position:absolute;inset:6%;border-radius:40px;overflow:hidden;box-shadow:0 60px 80px -40px rgba(120,40,0,.55),0 0 0 1px rgba(255,255,255,.6) inset;animation:sm-float 6s ease-in-out infinite;background:#fff} .sm-hero__product img{width:100%;height:100%;object-fit:cover} .sm-hero__shadow{position:absolute;left:18%;right:18%;bottom:-2%;height:8%;border-radius:50%;background:radial-gradient(rgba(120,40,0,.35),transparent 70%);animation:sm-shadow 6s ease-in-out infinite} .sm-hero__chip{position:absolute;padding:12px 18px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);font-family:var(--sm-display);font-size:12px;letter-spacing:.1em;box-shadow:0 20px 40px -20px rgba(0,0,0,.3);transform:translateZ(90px)} .sm-hero__chip--a{top:8%;left:-4%} .sm-hero__chip--b{bottom:14%;right:-4%} .sm-hero__scroll{position:absolute;left:50%;bottom:24px;translate:-50% 0;z-index:3;width:26px;height:42px;border:2px solid var(--sm-ink);border-radius:20px} .sm-hero__scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--sm-ink);animation:sm-scroll 1.8s infinite} .sm-marquee{background:var(--sm-ink);color:#fff;padding:22px 0;transform:rotate(-2deg);margin:-20px -2vw;width:104vw;z-index:3} .sm-marquee--orange{background:linear-gradient(90deg,var(--sm-orange),#ff3d00);color:var(--sm-ink)} .sm-marquee__track{display:flex;width:max-content;animation:sm-marq var(--speed,30s) linear infinite} .sm-marquee__item{display:flex;align-items:center;gap:40px;padding-right:40px;font-family:var(--sm-display);font-size:clamp(22px,3vw,40px);white-space:nowrap;text-transform:uppercase} .sm-marquee__item svg{width:.8em;height:.8em;fill:currentColor} .sm-benefits{background:var(--sm-cream);padding:clamp(80px,10vw,140px) 0} .sm-benefits__head{text-align:center;display:grid;gap:18px;justify-items:center;margin-bottom:56px} .sm-benefits__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px} .sm-card{position:relative;border-radius:var(--sm-radius);padding:40px 32px;background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.45));border:1px solid rgba(255,255,255,.9);box-shadow:0 40px 60px -40px rgba(120,40,0,.35),inset 0 1px 0 #fff;backdrop-filter:blur(10px);display:grid;gap:14px;align-content:start} .sm-card__icon{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,var(--sm-orange-2),var(--sm-orange) 55%,#e44400);box-shadow:0 18px 30px -10px rgba(255,106,19,.7),inset 0 2px 0 rgba(255,255,255,.5),inset 0 -6px 12px rgba(0,0,0,.15)} .sm-card__icon img{width:60%;height:60%;object-fit:contain} .sm-card__icon svg{width:40%;height:40%;fill:#fff} .sm-card__num{position:absolute;top:24px;right:28px;font-family:var(--sm-display);font-size:14px;color:rgba(0,0,0,.25)} .sm-card h3{font-family:var(--sm-display);font-size:22px;margin:8px 0 0} .sm-story{background:var(--sm-ink);color:#fff;padding:clamp(90px,11vw,160px) 0} .sm-story::before{content:"";position:absolute;right:-20vw;top:-20vw;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(255,106,19,.35),transparent 60%)} .sm-story .sm-p{color:rgba(255,255,255,.7)} .sm-story__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center} .sm-story__media{aspect-ratio:4/5;border-radius:var(--sm-radius);box-shadow:0 60px 100px -40px rgba(255,106,19,.45)} .sm-story__copy{display:grid;gap:26px} .sm-story__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px} .sm-stat{border-top:1px solid rgba(255,255,255,.2);padding-top:16px} .sm-stat b{display:block;font-family:var(--sm-display);font-size:clamp(28px,3.4vw,44px);color:var(--sm-orange)} .sm-stat span{font-size:12px;color:rgba(255,255,255,.6)} .sm-cats{background:var(--sm-cream);padding:clamp(80px,10vw,140px) 0} .sm-cats__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px;flex-wrap:wrap} .sm-cats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;perspective:1400px} .sm-cat{position:relative;display:block;aspect-ratio:5/4;border-radius:var(--sm-radius);overflow:hidden;color:#fff;text-decoration:none;box-shadow:0 50px 80px -50px rgba(0,0,0,.6)} .sm-cat .sm-media{position:absolute;inset:0} .sm-cat .sm-media img,.sm-cat .sm-media video{transition:transform 1.2s var(--sm-ease)} .sm-cat:hover .sm-media img,.sm-cat:hover .sm-media video{transform:scale(1.08)} .sm-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))} .sm-cat__body{position:absolute;left:32px;right:32px;bottom:30px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:16px} .sm-cat__label{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--sm-orange);color:var(--sm-ink);font-family:var(--sm-display);font-size:11px;letter-spacing:.14em;margin-bottom:10px} .sm-cat__arrow{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .5s var(--sm-ease),background .4s} .sm-cat__arrow svg{width:20px;fill:var(--sm-ink)} .sm-cat:hover .sm-cat__arrow{transform:rotate(-45deg);background:var(--sm-orange)} .sm-products{background:linear-gradient(180deg,var(--sm-cream),#ffe6d2);padding:clamp(80px,10vw,140px) 0} .sm-products__head{text-align:center;display:grid;justify-items:center;gap:16px;margin-bottom:56px} .sm-products__grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:22px;perspective:1200px} .sm-pcard{position:relative;display:grid;gap:14px;text-decoration:none;color:var(--sm-ink)} .sm-pcard__img{position:relative;aspect-ratio:1;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 60px -40px rgba(120,40,0,.45)} .sm-pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--sm-ease)} .sm-pcard:hover .sm-pcard__img img{transform:scale(1.06)} .sm-pcard__badge{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:999px;background:var(--sm-ink);color:#fff;font-size:11px;font-family:var(--sm-display);letter-spacing:.1em} .sm-pcard__title{font-weight:700;font-size:15px;margin:0} .sm-pcard__price{font-family:var(--sm-display);font-size:18px} .sm-pcard__cta{position:absolute;right:14px;bottom:14px;z-index:2;width:48px;height:48px;border-radius:50%;background:var(--sm-orange);display:grid;place-items:center;transform:translateY(20px) scale(.6);opacity:0;transition:.5s var(--sm-ease)} .sm-pcard__cta svg{width:18px;fill:#fff} .sm-pcard:hover .sm-pcard__cta{transform:none;opacity:1} .sm-bundle{padding:clamp(40px,6vw,80px) 0;background:#ffe6d2} .sm-bundle__banner{position:relative;border-radius:40px;overflow:hidden;min-height:520px;display:flex;align-items:center;background:linear-gradient(120deg,var(--sm-orange),#ff3d00);color:var(--sm-ink)} .sm-bundle__banner>.sm-media{position:absolute;inset:0} .sm-bundle__banner>.sm-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,106,19,.95),rgba(255,106,19,.3) 60%,transparent)} .sm-bundle__copy{position:relative;z-index:2;padding:clamp(32px,6vw,80px);display:grid;gap:22px;max-width:620px} .sm-bundle__copy .sm-p{color:rgba(13,13,13,.8)} .sm-bundle__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:-80px;position:relative;z-index:3;padding:0 clamp(16px,4vw,48px);perspective:1200px} .sm-bcard{position:relative;display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center;padding:18px;border-radius:24px;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid #fff;box-shadow:0 40px 60px -30px rgba(120,40,0,.45);text-decoration:none;color:var(--sm-ink)} .sm-bcard .sm-media{aspect-ratio:1;border-radius:16px} .sm-bcard h3{font-family:var(--sm-display);font-size:18px;margin:0 0 4px} .sm-bcard small{color:var(--sm-orange);font-weight:700} .sm-gallery{background:var(--sm-ink);color:#fff;padding:clamp(80px,10vw,130px) 0} .sm-gallery__head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:48px;flex-wrap:wrap} .sm-gallery__nav{display:flex;gap:10px} .sm-gallery__nav button{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:.3s} .sm-gallery__nav button:hover{background:var(--sm-orange);border-color:var(--sm-orange)} .sm-gallery__nav svg{width:18px;fill:currentColor} .sm-gallery__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px max(16px,calc((100vw - 1240px)/2));scrollbar-width:none;perspective:1600px} .sm-gallery__track::-webkit-scrollbar{display:none} .sm-slide{flex:0 0 clamp(240px,30vw,400px);aspect-ratio:3/4;border-radius:var(--sm-radius);scroll-snap-align:center;transition:transform .3s linear;box-shadow:0 50px 80px -40px rgba(255,106,19,.35)} .sm-slide .sm-media{width:100%;height:100%;border-radius:inherit} .sm-ingr{background:var(--sm-cream);padding:clamp(80px,10vw,150px) 0} .sm-ingr__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center} .sm-ingr__visual{position:relative;aspect-ratio:1;perspective:1200px} .sm-ingr__orb{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff 0,var(--sm-orange-2) 18%,var(--sm-orange) 45%,#b83200 100%);box-shadow:0 80px 120px -40px rgba(255,106,19,.8),inset -30px -40px 80px rgba(80,20,0,.45),inset 20px 20px 60px rgba(255,255,255,.4);animation:sm-float 7s ease-in-out infinite} .sm-ingr__ring{position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(13,13,13,.25);animation:sm-spin 40s linear infinite} .sm-ingr__ring--2{inset:-6%;border-style:solid;border-color:rgba(255,106,19,.3);animation-duration:60s;animation-direction:reverse} .sm-ingr__img{position:absolute;inset:22%;border-radius:50%;overflow:hidden;transform:translateZ(60px);box-shadow:0 30px 50px -20px rgba(0,0,0,.4)} .sm-ingr__copy{display:grid;gap:24px} .sm-ingr__list{display:grid;gap:12px;margin-top:8px} .sm-ingr__item{display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:20px;background:#fff;box-shadow:0 20px 40px -30px rgba(120,40,0,.4);transition:transform .4s var(--sm-ease)} .sm-ingr__item:hover{transform:translateX(8px)} .sm-ingr__item b{font-family:var(--sm-display);color:var(--sm-orange);font-size:14px;min-width:28px} .sm-faq{background:#fff;padding:clamp(80px,10vw,140px) 0} .sm-faq__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,90px);align-items:start} .sm-faq__head{position:sticky;top:120px;display:grid;gap:20px} .sm-faq details{border-bottom:1px solid rgba(0,0,0,.1)} .sm-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-weight:700;font-size:clamp(15px,1.5vw,18px)} .sm-faq summary::-webkit-details-marker{display:none} .sm-faq__plus{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sm-cream);position:relative;transition:transform .4s var(--sm-ease),background .3s} .sm-faq__plus::before,.sm-faq__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:var(--sm-ink)} .sm-faq__plus::after{transform:rotate(90deg)} .sm-faq details[open] .sm-faq__plus{transform:rotate(45deg);background:var(--sm-orange)} .sm-faq__a{padding:0 60px 26px 0} .sm-news{background:var(--sm-ink);color:#fff;padding:clamp(90px,11vw,150px) 0;text-align:center} .sm-news::before{content:"";position:absolute;left:50%;bottom:-40vw;width:90vw;height:60vw;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,rgba(255,106,19,.55),transparent 60%)} .sm-news__inner{position:relative;display:grid;gap:24px;justify-items:center;max-width:720px;margin-inline:auto} .sm-news .sm-p{color:rgba(255,255,255,.7)} .sm-news form{display:flex;gap:10px;width:100%;max-width:520px;padding:8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px)} .sm-news input[type=email]{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:0 18px;font-size:15px;outline:none} .sm-news input::placeholder{color:rgba(255,255,255,.5)} .sm-news .sm-btn{padding:14px 24px;border:0;cursor:pointer;background:linear-gradient(100deg,var(--sm-orange),#ff3d00)} .sm-news__logo{width:220px;color:#fff} .sm-news__sns{display:flex;gap:12px} .sm-news__sns a{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:.3s} .sm-news__sns a:hover{background:var(--sm-orange);border-color:var(--sm-orange)} .sm-news__sns svg{width:20px;fill:currentColor} .sm-news__msg{color:var(--sm-orange-2);font-weight:700} @keyframes sm-spin{to{rotate:360deg}} @keyframes sm-float{0%,100%{transform:translate3d(0,0,40px) rotate(-2deg)}50%{transform:translate3d(0,-22px,40px) rotate(2deg)}} @keyframes sm-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}} @keyframes sm-marq{to{transform:translateX(-50%)}} @keyframes sm-pulse{50%{box-shadow:0 0 0 9px rgba(255,106,19,0)}} @keyframes sm-scroll{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}} @media (max-width:989px){ .sm-hero canvas.sm-three{opacity:.55} .sm-hero{padding:100px 0 70px} .sm-hero__grid,.sm-story__grid,.sm-ingr__grid,.sm-faq__grid{grid-template-columns:1fr} .sm-hero__stage{width:min(460px,100%);margin-inline:auto;order:-1} .sm-benefits__grid,.sm-bundle__cards{grid-template-columns:1fr} .sm-products__grid{grid-template-columns:repeat(2,1fr)} .sm-bundle__cards{margin-top:-60px} .sm-faq__head{position:static} .sm-hero__chip--a{left:0}.sm-hero__chip--b{right:0} } @media (max-width:640px){ .sm-cats__grid{grid-template-columns:1fr} .sm-cat{aspect-ratio:4/5} .sm-story__stats{grid-template-columns:repeat(3,1fr);gap:10px} .sm-faq__a{padding-right:0} .sm-bundle__banner{min-height:460px;border-radius:28px} } @media (prefers-reduced-motion:reduce){ .sm *,.sm *::before,.sm *::after{animation:none !important;transition:none !important} .sm [data-reveal]{opacity:1;transform:none} }