@charset "UTF-8"; :root{color-scheme:light}.sf-body{margin:0;background:#fff}.sf-site{color:var(--sf-ink,#242331);background:var(--sf-bg,#faf9f6);font-family:var(--sf-font,sans-serif);font-size:16px;line-height:1.8;overflow:clip}.sf-site *{box-sizing:border-box}.sf-site a{color:inherit;text-decoration:none}.sf-site img{max-width:100%;height:auto;display:block}.sf-site button,.sf-site input,.sf-site textarea{font:inherit}.sf-site button{cursor:pointer}.sf-site button:focus-visible,.sf-site a:focus-visible,.sf-site input:focus-visible,.sf-site textarea:focus-visible{outline:3px solid var(--sf-accent);outline-offset:5px}.sf-wrap{width:min(var(--sf-width,1180px),calc(100% - 80px));margin-inline:auto}.sf-site h1,.sf-site h2,.sf-site h3,.sf-site p{margin-top:0}.sf-site h1{font-size:clamp(40px,5.6vw,82px);line-height:1.3;letter-spacing:-.01em;font-weight:700;margin-bottom:24px}.sf-site h2{font-size:clamp(28px,3.5vw,48px);line-height:1.45;letter-spacing:0;font-weight:600;margin-bottom:24px}.sf-site h3{font-size:22px;line-height:1.55;letter-spacing:0;margin-bottom:14px}.sf-site p{line-height:1.95}.sf-header{position:relative;z-index:5;padding:25px 0;background:var(--sf-bg);color:var(--sf-ink)}.sf-header-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.sf-brand{font-size:20px;font-weight:700;letter-spacing:0;max-width:280px;overflow-wrap:anywhere}.sf-brand img{max-height:46px;max-width:220px;object-fit:contain}.sf-header nav{display:flex;align-items:center;gap:28px;font-size:13px}.sf-header nav>a:not(.sf-btn){opacity:.8}.sf-header-floating{padding:18px 0;background:var(--sf-bg)}.sf-header-floating .sf-header-inner{border:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);padding:14px 24px;border-radius:99px;background:var(--sf-bg)}.sf-header-minimal{padding:36px 0;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)}.sf-menu-toggle{display:none;background:none;border:0;color:inherit;font-size:24px!important;padding:5px}.sf-skip{position:absolute;left:15px;top:-100px;background:white;color:#222!important;padding:12px;z-index:99}.sf-skip:focus{top:10px}.sf-section{padding:var(--sf-space,88px) 0;position:relative}.sf-tone-plain{background:var(--sf-bg)}.sf-tone-soft{background:color-mix(in srgb,var(--sf-accent) 7%,var(--sf-bg))}.sf-tone-dark{background:#1d2029;color:#f8f8fa}.sf-tone-accent{background:var(--sf-accent);color:#fff}.sf-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--sf-accent);margin-bottom:22px!important;line-height:1.6!important;text-transform:uppercase}.sf-tone-dark .sf-eyebrow,.sf-tone-accent .sf-eyebrow{color:inherit;opacity:.65}.sf-lead{font-size:16px;opacity:.72;max-width:720px;margin-bottom:34px;white-space:normal}.sf-split-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:70px}.sf-hero{padding-top:70px;padding-bottom:90px}.sf-hero .sf-lead{font-size:16px;max-width:570px}.sf-visual{min-width:0;position:relative}.sf-visual>img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--sf-radius)}.sf-art{position:relative;background:linear-gradient(135deg,color-mix(in srgb,var(--sf-accent) 35%,#f4f2ed),var(--sf-accent));aspect-ratio:4/5;border-radius:var(--sf-radius);overflow:hidden;isolation:isolate;display:grid;place-items:center}.sf-art i{display:block;position:absolute;border:1px solid #fff5;background:linear-gradient(145deg,#ffffff66,#ffffff05);border-radius:45%;width:75%;height:68%;transform:rotate(-35deg);top:5%;left:23%;box-shadow:inset 8px 10px 40px #fff3,20px 35px 50px #30224715}.sf-art i:nth-child(2){width:80%;height:70%;left:-38%;top:48%;transform:rotate(25deg)}.sf-art i:nth-child(3){width:23%;height:23%;top:40%;left:53%;border-radius:50%;background:linear-gradient(145deg,#fff9,#fff1)}.sf-art>span{position:absolute;bottom:7%;left:8%;color:#fff9;font:10px/1 sans-serif;letter-spacing:.24em}.sf-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--sf-accent);color:#fff!important;border:1px solid transparent;border-radius:var(--sf-radius);padding:16px 24px;font-weight:600;font-size:14px;line-height:1.5;transition:transform .2s,box-shadow .2s;text-align:center}.sf-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0001}.sf-btn-outline{background:transparent;color:inherit!important;border-color:currentColor}.sf-small{padding:11px 19px;font-size:12px;gap:18px}.sf-tone-accent .sf-btn{background:white;color:var(--sf-accent)!important}.sf-tone-accent .sf-btn-outline{background:transparent;color:white!important;border-color:#fff8}.sf-note{display:block;font-size:11px;opacity:.5;margin-top:20px}.sf-v-reverse .sf-copy{order:2}.sf-v-reverse .sf-visual{order:1}.sf-v-center .sf-split-grid,.sf-v-stacked .sf-split-grid{display:flex;flex-direction:column;text-align:center;gap:50px}.sf-v-center .sf-copy,.sf-v-stacked .sf-copy{max-width:940px}.sf-v-center .sf-lead,.sf-v-stacked .sf-lead{margin-inline:auto}.sf-v-center .sf-actions,.sf-v-stacked .sf-actions{justify-content:center}.sf-v-center .sf-visual,.sf-v-stacked .sf-visual{width:100%;max-width:1000px}.sf-v-center .sf-art,.sf-v-center .sf-visual>img,.sf-v-stacked .sf-art,.sf-v-stacked .sf-visual>img{aspect-ratio:21/9}.sf-v-cover .sf-split-grid{position:relative;min-height:600px;padding:65px 6%;isolation:isolate;display:flex}.sf-v-cover .sf-visual{position:absolute;inset:0;z-index:-2;border-radius:var(--sf-radius);overflow:hidden}.sf-v-cover .sf-visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#111c,#1113)}.sf-v-cover .sf-visual>.sf-art,.sf-v-cover .sf-visual>img{height:100%;width:100%;object-fit:cover;aspect-ratio:auto}.sf-v-cover .sf-copy{color:#fff;max-width:720px}.sf-v-cover .sf-eyebrow{color:#fff9}.sf-v-editorial .sf-copy{padding-right:15px}.sf-v-editorial .sf-visual{padding-top:30px}.sf-v-editorial .sf-visual>img,.sf-v-editorial .sf-art{border-radius:300px 300px 3px 3px}.sf-v-editorial h1{font-weight:400;font-size:clamp(38px,5vw,70px);letter-spacing:.025em;line-height:1.55}.sf-grid{display:grid;grid-template-columns:repeat(var(--sf-cols,3),minmax(0,1fr));gap:24px;margin-top:42px}.sf-card{background:color-mix(in srgb,var(--sf-bg) 94%,var(--sf-ink));padding:34px;border-radius:var(--sf-radius);border:1px solid color-mix(in srgb,var(--sf-ink) 8%,transparent);min-width:0}.sf-tone-soft .sf-card{background:var(--sf-bg)}.sf-tone-dark .sf-card{background:#ffffff08;border-color:#ffffff1a}.sf-tone-accent .sf-card{background:#ffffff12;border-color:#fff3}.sf-card p{font-size:14px;opacity:.7;margin-bottom:0}.sf-card>img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--sf-radius) * .7);margin-bottom:25px}.sf-number{display:inline-flex;font:500 15px/1 sans-serif;letter-spacing:.05em;color:var(--sf-accent);border-bottom:1px solid var(--sf-accent);padding-bottom:12px;margin-bottom:40px}.sf-tone-dark .sf-number,.sf-tone-accent .sf-number{color:inherit;border-color:currentColor;opacity:.65}.sf-meta{font-size:14px!important;letter-spacing:.02em;margin-bottom:20px!important}.sf-pricing .sf-meta{font-size:25px!important;font-weight:600;opacity:1}.sf-pricing .sf-card:nth-child(2){border:2px solid var(--sf-accent)}.sf-v-outline .sf-card{background:transparent;border:1px solid currentColor;border-radius:0}.sf-v-minimal .sf-card{background:none;border:0;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:0;padding:30px 0}.sf-v-bento .sf-card:first-child{grid-column:span 2}.sf-v-dark .sf-card{background:#20212b;color:#fff}.sf-text-link{display:inline-block;margin-top:24px;font-size:13px;border-bottom:1px solid currentColor}.sf-stat{padding:22px 10px;text-align:center}.sf-stat>strong{font-size:clamp(30px,4vw,58px);font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}.sf-stat p{font-size:12px;opacity:.65}.sf-stat img{max-height:70px;max-width:160px;margin:auto;object-fit:contain}.sf-logos .sf-stat strong{font-size:20px;opacity:.6}.sf-gallery figure{margin:0}.sf-gallery figure>img,.sf-gallery .sf-art{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sf-radius)}.sf-gallery figcaption{padding:18px 0;font-size:15px}.sf-gallery figcaption p{font-size:12px;opacity:.6}.sf-team .sf-card>img{aspect-ratio:3/4}.sf-quote{font-family:serif;font-size:60px;line-height:1;color:var(--sf-accent);display:block;margin-bottom:15px}.sf-faq-item{border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent);padding:24px 0}.sf-faq-item summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:25px}.sf-faq-item summary:after{content:'+';font-weight:400;font-size:22px;color:var(--sf-accent)}.sf-faq-item[open] summary:after{content:'−'}.sf-faq-item p{font-size:14px;opacity:.7;margin:20px 0 0;max-width:850px}.sf-video video,.sf-video iframe{display:block;width:100%;aspect-ratio:16/9;background:#181921;border:0;border-radius:var(--sf-radius)}.sf-video-launch{width:100%;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;background:linear-gradient(120deg,#262631,#45424f);border:0;border-radius:var(--sf-radius);color:white;overflow:hidden}.sf-video-launch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}.sf-video-launch>span{display:grid;place-items:center;border:1px solid #fff6;background:#ffffff18;backdrop-filter:blur(6px);border-radius:50%;height:75px;width:75px;font-size:23px;position:relative}.sf-video-launch small{position:relative;text-align:center;font-size:12px}.sf-caption{font-size:12px;opacity:.6;margin:15px 0 0}.sf-form{max-width:720px;margin-top:38px}.sf-form>label{display:block;margin-bottom:23px;font-size:14px;font-weight:500}.sf-form label>span{font-size:9px;background:var(--sf-accent);color:white;padding:2px 5px;margin-left:8px;border-radius:3px}.sf-form input:not([type=checkbox]),.sf-form textarea{display:block;width:100%;padding:14px;background:var(--sf-bg);color:var(--sf-ink);border:1px solid color-mix(in srgb,var(--sf-ink) 18%,transparent);border-radius:calc(var(--sf-radius) / 2);margin-top:9px}.sf-form textarea{resize:vertical}.sf-form .sf-check{display:flex;align-items:center;gap:9px;font-size:12px}.sf-check a{text-decoration:underline}.sf-form .sf-btn{margin-top:18px}.sf-form-result{font-size:14px;margin-top:16px}.sf-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}div.sf-map:not(.sf-map-live){border:1px solid color-mix(in srgb,currentColor 18%,transparent);padding:50px;background:color-mix(in srgb,var(--sf-accent) 5%,var(--sf-bg));border-radius:var(--sf-radius)}div.sf-map>span{font-size:50px;color:var(--sf-accent)}.sf-cta,.sf-banner{text-align:center}.sf-cta .sf-lead,.sf-banner .sf-lead{margin-inline:auto}.sf-cta .sf-actions,.sf-banner .sf-actions{justify-content:center}.sf-banner h2{font-size:21px;margin:0}.sf-cta h2{max-width:900px;margin-inline:auto}.sf-news .sf-card small{opacity:.5;font-size:11px}.sf-news .sf-card h3{margin-top:20px;font-size:20px}.sf-footer{padding:75px 0 25px;border-top:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);background:var(--sf-bg)}.sf-footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.sf-footer h2{font-size:24px}.sf-footer p,.sf-footer a{font-size:12px;opacity:.65}.sf-footer-links{display:flex;gap:20px 35px;flex-wrap:wrap;justify-content:flex-end;align-content:start}.sf-footer-bottom{margin-top:60px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);display:flex;justify-content:space-between;align-items:center;gap:15px}.sf-footer small{font-size:10px;opacity:.5}.sf-consent-open{border:0;background:none;color:inherit;font-size:10px!important;opacity:.6}.sf-consent{position:fixed;bottom:18px;left:18px;right:18px;max-width:650px;background:#fff;color:#292737;border:1px solid #e7e4ec;border-radius:14px;box-shadow:0 8px 40px #0002;padding:22px;z-index:9999;font:13px/1.7 sans-serif}.sf-consent p{margin:0 0 15px}.sf-consent>div{display:flex;gap:10px;flex-wrap:wrap}.sf-consent button{background:#292737;color:#fff;border:1px solid #292737;border-radius:5px;padding:9px 15px;cursor:pointer}.sf-consent button:first-child{background:#fff;color:#292737}.sf-prose{max-width:850px}.sf-prose a{text-decoration:underline}.sf-prose p{overflow-wrap:anywhere}.sf-preview{margin:0}.sf-preview [data-block]{cursor:pointer}.sf-preview [data-block]:hover{outline:1px dashed #8f6cda;outline-offset:-2px}.sf-preview .sf-selected{outline:2px solid #895bcf!important;outline-offset:-3px}.sf-preview [contenteditable=true]{outline:2px solid #a386d7;outline-offset:6px;cursor:text}.sf-preview .sf-skip{display:none}.sf-hide-desktop{display:none}.sf-site .search-form{margin:25px 0;display:flex;gap:10px}.sf-site .search-field{padding:12px;border:1px solid #ddd;border-radius:5px}.sf-site .search-submit{padding:12px 20px;border:0;background:var(--sf-accent);color:#fff;border-radius:5px}.sf-site .nav-links{display:flex;gap:20px;padding-top:40px}.sf-site .page-numbers{padding:8px 14px;border:1px solid #ddd;border-radius:5px} @media(max-width:1000px){.sf-wrap{width:calc(100% - 48px)}.sf-split-grid{gap:35px}.sf-header nav{gap:15px;font-size:11px}.sf-card{padding:24px}.sf-grid{gap:16px}.sf-hero{padding-top:45px;padding-bottom:65px}.sf-site h1{font-size:clamp(36px,5.6vw,64px)}} @media(max-width:767px){.sf-wrap{width:calc(100% - 40px)}.sf-header{padding:18px 0}.sf-brand{font-size:17px;max-width:75%}.sf-header-floating .sf-header-inner{padding:12px 18px}.sf-brand img{max-height:35px;max-width:180px}.sf-menu-toggle{display:block}.sf-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--sf-bg);padding:25px;flex-direction:column;align-items:stretch;border-bottom:1px solid #ddd2;box-shadow:0 10px 20px #0001}.sf-header nav.sf-open{display:flex}.sf-header nav>a{padding:8px}.sf-section{padding-top:min(var(--sf-space),65px);padding-bottom:min(var(--sf-space),65px)}.sf-split-grid{grid-template-columns:1fr;gap:35px}.sf-hero .sf-copy{padding-top:10px}.sf-site h1{font-size:clamp(34px,8.5vw,52px);line-height:1.4}.sf-site h2{font-size:29px}.sf-site h3{font-size:20px}.sf-lead,.sf-hero .sf-lead{font-size:14px;line-height:1.9}.sf-eyebrow{font-size:11px;margin-bottom:16px!important}.sf-v-reverse .sf-copy{order:1}.sf-v-reverse .sf-visual{order:2}.sf-visual>img,.sf-art{aspect-ratio:5/4}.sf-v-editorial .sf-art,.sf-v-editorial .sf-visual>img{aspect-ratio:1}.sf-v-cover .sf-split-grid{min-height:580px;padding:40px 22px}.sf-v-cover .sf-visual{height:100%}.sf-v-center .sf-art,.sf-v-center .sf-visual>img{aspect-ratio:5/4}.sf-grid{grid-template-columns:1fr;gap:18px;margin-top:30px}.sf-gallery .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-logos .sf-grid,.sf-stats .sf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-v-bento .sf-card:first-child{grid-column:auto}.sf-number{margin-bottom:23px}.sf-card{padding:26px}.sf-gallery figcaption{font-size:12px}.sf-gallery figcaption p{font-size:12px}.sf-btn{font-size:13px;padding:14px 20px;gap:20px}.sf-faq-item summary{font-size:15px}.sf-footer-grid{grid-template-columns:1fr;gap:25px}.sf-footer-links{justify-content:flex-start;gap:18px}.sf-footer-bottom{margin-top:35px;align-items:flex-start}.sf-footer{padding-top:50px}div.sf-map{padding:30px}.sf-hide-desktop{display:block}.sf-hide-mobile{display:none}.sf-consent{padding:18px;left:10px;right:10px;bottom:10px;font-size:12px}.sf-video-launch>span{width:50px;height:50px;font-size:16px}.sf-video-launch{gap:10px}.sf-video-launch small{font-size:11px}} .sf-form select{display:block;width:100%;padding:14px;background:var(--sf-bg);color:var(--sf-ink);border:1px solid color-mix(in srgb,var(--sf-ink) 18%,transparent);border-radius:calc(var(--sf-radius) / 2);margin-top:9px;font:inherit}.sf-steps .sf-card{border-top:3px solid var(--sf-accent)}.sf-timeline .sf-grid{display:flex;flex-direction:column;border-left:1px solid color-mix(in srgb,currentColor 20%,transparent);margin-left:15px}.sf-timeline .sf-card{margin-left:25px;position:relative}.sf-timeline .sf-card:before{content:'';position:absolute;width:11px;height:11px;left:-32px;top:40px;border-radius:50%;background:var(--sf-accent)}.sf-comparison .sf-card p{line-height:2.7}.sf-v-stacked .sf-grid{grid-template-columns:1fr}.sf-prose .wp-block-image img{height:auto} @media(prefers-reduced-motion:reduce){.sf-site:not(.sf-motion-force) *,.sf-site:not(.sf-motion-force)::before,.sf-site:not(.sf-motion-force)::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* ============================================================ 3.0 追加スタイル：トーン／和柄／斜め・全面／動画背景／会員 ============================================================ */ /* ---- 追加トーン ---- */ .sf-tone-gradient{background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent2,var(--sf-accent)) 55%,color-mix(in srgb,var(--sf-accent2,var(--sf-accent)) 40%,#000));color:#fff} .sf-tone-gradient .sf-btn{background:#fff;color:var(--sf-accent)!important} .sf-tone-gradient .sf-btn-outline{background:transparent;color:#fff!important;border-color:#fff9} .sf-tone-ink{background:#0d0e13;color:#f4f4f7} .sf-tone-ink .sf-btn{background:var(--sf-accent);color:#fff!important} .sf-tone-paper{background:#f3efe6;color:#2b2722} .sf-tone-glass{background:color-mix(in srgb,var(--sf-ink) 6%,transparent);backdrop-filter:blur(14px)} .sf-tone-dark .sf-card,.sf-tone-ink .sf-card{background:#ffffff0d;border-color:#ffffff1f} .sf-tone-gradient .sf-card{background:#ffffff14;border-color:#ffffff2e} .sf-tone-ink .sf-eyebrow,.sf-tone-gradient .sf-eyebrow{color:inherit;opacity:.7} /* ---- 揃え・高さ・全面 ---- */ .sf-al-center{text-align:center} .sf-al-center .sf-lead,.sf-al-center .sf-eyebrow{margin-inline:auto} .sf-al-center .sf-actions{justify-content:center} .sf-al-right{text-align:right} .sf-al-right .sf-lead{margin-left:auto} .sf-al-right .sf-actions{justify-content:flex-end} .sf-h-tall{min-height:72vh;display:flex;align-items:center} .sf-h-full{min-height:100svh;display:flex;align-items:center} .sf-h-tall>.sf-wrap,.sf-h-full>.sf-wrap{width:min(var(--sf-width,1180px),calc(100% - 80px))} .sf-full>.sf-wrap{width:100%;max-width:none;padding-inline:clamp(18px,4vw,64px)} .sf-full .sf-visual>img,.sf-full>.sf-wrap>img{border-radius:0} /* ---- 背景メディア（動画／YouTube／画像）---- */ .sf-section{isolation:isolate} .sf-bgmedia{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .sf-bgmedia>img,.sf-bgmedia>video,.sf-bgmedia>.sf-bg-yt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sf-bg-yt{border:0} .sf-bg-yt iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);border:0;pointer-events:none} .sf-bg-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#05060bd9,#05060b8c 45%,#05060be6)} .sf-tone-accent .sf-bg-overlay{background:linear-gradient(180deg,color-mix(in srgb,var(--sf-accent) 85%,#000),color-mix(in srgb,var(--sf-accent) 55%,#000))} .sf-bgmedia[data-parallax] img,.sf-bgmedia[data-parallax] video{height:132%;top:-16%} /* ---- 全画面動画ヒーロー ---- */ .sf-videohero{min-height:100svh;display:flex;align-items:flex-end;color:#fff;padding-bottom:clamp(60px,9vh,120px)} .sf-videohero.sf-al-center{align-items:center;padding-bottom:var(--sf-space)} .sf-videohero h1{font-size:clamp(44px,7.4vw,124px);line-height:1.2;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 2px 40px #0006} .sf-videohero .sf-lead{font-size:clamp(15px,1.4vw,20px);opacity:.88;max-width:640px} .sf-videohero .sf-btn-outline{border-color:#fffc;color:#fff!important} .sf-hero-copy{max-width:1000px} .sf-scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;opacity:.75;display:flex;flex-direction:column;align-items:center;gap:10px} .sf-scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(#fff,#fff0);animation:sf-cue 2.2s ease-in-out infinite} @keyframes sf-cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}} .sf-v-cover.sf-hero,.sf-v-overlay.sf-hero{color:#fff} .sf-v-cover.sf-hero .sf-visual,.sf-v-overlay.sf-hero .sf-visual{display:none} .sf-v-cover.sf-hero .sf-split-grid,.sf-v-overlay.sf-hero .sf-split-grid{display:block} /* ---- 斜め・波などの断ち切り形状 ---- */ .sf-shape-diagonal{clip-path:polygon(0 0,100% 4vw,100% 100%,0 100%);margin-top:-4vw;padding-top:calc(var(--sf-space) + 4vw)} .sf-shape-diagonal-rev{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);margin-top:-4vw;padding-top:calc(var(--sf-space) + 4vw)} .sf-shape-tilt{clip-path:polygon(0 3.5vw,100% 0,100% calc(100% - 3.5vw),0 100%);margin-block:-3vw;padding-block:calc(var(--sf-space) + 3.5vw)} .sf-shape-notch{clip-path:polygon(0 0,42% 0,48% 3.4vw,100% 3.4vw,100% 100%,0 100%);padding-top:calc(var(--sf-space) + 2vw)} .sf-shape-arrow{clip-path:polygon(0 0,50% 3.6vw,100% 0,100% 100%,50% calc(100% - 3.6vw),0 100%);margin-block:-3vw;padding-block:calc(var(--sf-space) + 4vw)} .sf-shape-fold{clip-path:polygon(0 0,100% 0,100% calc(100% - 3.4vw),0 100%);padding-bottom:calc(var(--sf-space) + 3vw)} .sf-shape-curve{border-radius:0 0 min(50%,180px) min(50%,180px)/0 0 6vw 6vw} .sf-shape-wave{--sf-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 46c180 44 360 44 540 8s360-52 540-16 260 40 360 26V90H0z'/%3E%3C/svg%3E");padding-bottom:calc(var(--sf-space) + 3vw);-webkit-mask:var(--sf-wave) bottom/100% 6vw no-repeat,linear-gradient(#000,#000) top/100% calc(100% - 5.9vw) no-repeat;mask:var(--sf-wave) bottom/100% 6vw no-repeat,linear-gradient(#000,#000) top/100% calc(100% - 5.9vw) no-repeat} @media (max-width:760px){.sf-shape-diagonal,.sf-shape-diagonal-rev,.sf-shape-tilt,.sf-shape-arrow,.sf-shape-notch{clip-path:none;margin-block:0;padding-block:var(--sf-space)}} /* ---- 和柄・テクスチャ（画像を使わず CSS だけで描画）---- */ .sf-pat-none{--sf-pat:none} [class*=" sf-pat-"]:not(.sf-pat-none)::before,[class^="sf-pat-"]:not(.sf-pat-none)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--sf-pat-op,.5);background-image:var(--sf-pat);background-size:var(--sf-pat-size,60px 60px);background-position:var(--sf-pat-pos,0 0)} .sf-pat-seigaiha{--sf-pat:radial-gradient(circle at 50% 100%,transparent 24%,currentColor 25%,currentColor 26%,transparent 27%,transparent 36%,currentColor 37%,currentColor 38%,transparent 39%,transparent 48%,currentColor 49%,currentColor 50%,transparent 51%);--sf-pat-size:56px 28px;--sf-pat-op:.13} .sf-pat-asanoha{--sf-pat:repeating-linear-gradient(60deg,currentColor 0 1px,transparent 1px 34px),repeating-linear-gradient(-60deg,currentColor 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 59px);--sf-pat-size:auto;--sf-pat-op:.11} .sf-pat-ichimatsu{--sf-pat:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%);--sf-pat-size:72px 72px;--sf-pat-op:.07} .sf-pat-kohshi{--sf-pat:repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 26px);--sf-pat-size:auto;--sf-pat-op:.1} .sf-pat-yagasuri{--sf-pat:repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 14px),repeating-linear-gradient(-45deg,currentColor 0 2px,transparent 2px 14px);--sf-pat-size:auto;--sf-pat-op:.08} .sf-pat-shippou{--sf-pat:radial-gradient(circle at 0 0,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 100% 0,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 0 100%,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 100% 100%,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%);--sf-pat-size:62px 62px;--sf-pat-op:.12} .sf-pat-dots{--sf-pat:radial-gradient(currentColor 1.4px,transparent 1.5px);--sf-pat-size:22px 22px;--sf-pat-op:.16} .sf-pat-grid{--sf-pat:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);--sf-pat-size:64px 64px;--sf-pat-op:.08} .sf-pat-lines{--sf-pat:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 11px);--sf-pat-size:auto;--sf-pat-op:.1} .sf-pat-stripe{--sf-pat:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 16px);--sf-pat-size:auto;--sf-pat-op:.07} .sf-pat-noise{--sf-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");--sf-pat-size:120px 120px;--sf-pat-op:.3} .sf-pat-mesh::before{background:radial-gradient(60% 70% at 12% 18%,color-mix(in srgb,var(--sf-accent) 55%,transparent),transparent 70%),radial-gradient(55% 65% at 88% 22%,color-mix(in srgb,var(--sf-accent2,var(--sf-accent)) 55%,transparent),transparent 70%),radial-gradient(70% 70% at 50% 100%,color-mix(in srgb,var(--sf-accent) 40%,transparent),transparent 72%);opacity:.75;filter:blur(20px)} .sf-pat-glow::before{background:radial-gradient(45% 55% at 50% 0%,color-mix(in srgb,var(--sf-accent) 70%,transparent),transparent 72%);opacity:.6;filter:blur(30px)} .sf-site.sf-grain::after{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E")} .sf-site[class*="sf-pattern-"]:not(.sf-pattern-none){position:relative} /* ---- スクロールアニメーション ---- */ /* スクリプトが動いたときだけ隠す（スクリプトなし・検索エンジン・印刷では最初から表示） */ .sf-anim{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s,clip-path 1s cubic-bezier(.2,.7,.2,1)} .sf-js .sf-anim{opacity:0} .sf-js .sf-anim-pop{transform:scale(.55);transition-timing-function:cubic-bezier(.34,1.56,.64,1)}.sf-js .sf-anim-flip{transform:perspective(900px) rotateX(-32deg) translateY(40px);transform-origin:50% 0}.sf-js .sf-anim-swing{transform:rotate(-5deg) translateX(-40px);transform-origin:0 100%} .sf-anim-pop{transition-timing-function:cubic-bezier(.34,1.56,.64,1)!important;transition-duration:.8s!important} .sf-js .sf-anim-rise{transform:translateY(46px)}.sf-js .sf-anim-zoom{transform:scale(.93)}.sf-js .sf-anim-slide{transform:translateX(-56px)}.sf-js .sf-anim-blur{filter:blur(14px)} /* マスクは内側を切り抜く（外側を切り抜くと「画面に入ったか」の判定が永遠に成立しない） */ .sf-js .sf-anim-mask{opacity:1} .sf-anim-mask>.sf-wrap{transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1)} .sf-js .sf-anim-mask:not(.sf-in)>.sf-wrap{clip-path:inset(0 0 100% 0)} .sf-reveal-all .sf-anim-mask>.sf-wrap,.sf-preview .sf-anim-mask>.sf-wrap,.sf-no-motion .sf-anim-mask>.sf-wrap{clip-path:none!important} .sf-js .sf-anim.sf-in,.sf-reveal-all .sf-anim{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important} @media print{.sf-anim{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}} @media (prefers-reduced-motion:reduce){.sf-site:not(.sf-motion-force) .sf-anim{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none}.sf-scroll-cue::after{animation:none}.sf-marquee-track{animation:none!important}} /* ---- 流れる文字（マーキー）---- */ .sf-marquee{overflow:hidden;--sf-mq:28s} .sf-marquee-track{display:flex;width:max-content;animation:sf-mq var(--sf-mq) linear infinite} .sf-marquee-rev .sf-marquee-track{animation-direction:reverse} .sf-marquee-track>span{display:flex;align-items:center;gap:0;flex:0 0 auto} .sf-marquee i{font-style:normal;font-family:var(--sf-font-head,var(--sf-font));font-size:clamp(34px,7vw,110px);font-weight:800;letter-spacing:-.01em;padding-inline:.28em;white-space:nowrap} .sf-marquee b{font-size:clamp(14px,2vw,30px);opacity:.45} .sf-v-outline .sf-marquee i{color:transparent;-webkit-text-stroke:1.5px var(--sf-ink)} .sf-tone-dark.sf-v-outline .sf-marquee i,.sf-tone-ink.sf-v-outline .sf-marquee i,.sf-tone-accent.sf-v-outline .sf-marquee i,.sf-tone-gradient.sf-v-outline .sf-marquee i{-webkit-text-stroke-color:#fff} @keyframes sf-mq{to{transform:translateX(-50%)}} .sf-marquee:hover .sf-marquee-track{animation-play-state:paused} /* ---- 大きな引用 ---- */ .sf-bigquote{margin:0;max-width:1000px} .sf-bigquote p{font-family:var(--sf-font-head,var(--sf-font));font-size:clamp(24px,3.6vw,54px);line-height:1.5;letter-spacing:0;margin:0} .sf-bigquote p::before{content:"“";opacity:.35;margin-right:.08em} .sf-bigquote p::after{content:"”";opacity:.35} .sf-bigquote cite{display:block;margin-top:28px;font-style:normal;font-size:13px;opacity:.6;letter-spacing:.08em} .sf-al-center .sf-bigquote{margin-inline:auto} /* ---- モザイク（ベント）グリッド ---- */ .sf-mosaic-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;grid-auto-rows:150px} .sf-tile{position:relative;overflow:hidden;border-radius:var(--sf-radius);background:color-mix(in srgb,var(--sf-ink) 6%,var(--sf-bg));grid-column:span 2;grid-row:span 2;display:flex;align-items:flex-end;isolation:isolate} .sf-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .sf-tile:hover img{transform:scale(1.07)} .sf-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0000 35%,#000000c9)} .sf-tile:not(:has(img))::after{background:none} .sf-tile-body{padding:22px;color:#fff;position:relative} .sf-tile:not(:has(img)) .sf-tile-body{color:inherit} .sf-tile-body h3{margin-bottom:6px} .sf-tile-body p{font-size:13px;opacity:.85;margin:0} .sf-tile-body a{display:inline-block;margin-top:10px;font-size:12px;border-bottom:1px solid currentColor} .sf-tile-1{grid-column:span 4;grid-row:span 3} .sf-tile-4{grid-column:span 3;grid-row:span 2} .sf-tile-5{grid-column:span 3;grid-row:span 2} .sf-tile-6{grid-column:span 6;grid-row:span 2} .sf-v-tile .sf-mosaic-grid{grid-auto-rows:210px} .sf-v-tile .sf-tile{grid-column:span 2!important;grid-row:span 1!important} @media (max-width:880px){.sf-mosaic-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}.sf-tile,.sf-tile-1,.sf-tile-4,.sf-tile-5,.sf-tile-6{grid-column:span 2!important;grid-row:span 1!important}} /* ---- 動画グリッド ---- */ .sf-video-grid .sf-video-card{margin:0} .sf-video-card .sf-video-launch{width:100%;aspect-ratio:16/9;border-radius:var(--sf-radius);overflow:hidden;position:relative;display:grid;place-items:center;border:0;padding:0;background:#11131a} .sf-video-card .sf-video-launch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sf-video-card .sf-video-launch span{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:20px;padding-left:4px;box-shadow:0 10px 40px #0005;transition:transform .3s} .sf-video-card .sf-video-launch:hover span{transform:scale(1.12)} .sf-video-card figcaption{padding:16px 2px 0} .sf-video-card figcaption strong{display:block;font-size:16px;margin-bottom:4px} .sf-video-card figcaption p{font-size:13px;opacity:.7;margin:0} .sf-video-card iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--sf-radius)} /* ---- 追加バリエーション ---- */ .sf-v-magazine .sf-grid{grid-template-columns:repeat(var(--sf-cols,3),1fr);gap:0;border-top:2px solid currentColor} .sf-v-magazine .sf-card{border:0;border-right:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:0;padding:30px 26px;background:none} .sf-v-magazine .sf-card:last-child{border-right:0} .sf-v-magazine h2{font-size:clamp(36px,6vw,86px);letter-spacing:-.01em;line-height:1.2;text-transform:uppercase} .sf-v-frame>.sf-wrap{border:1px solid color-mix(in srgb,currentColor 28%,transparent);padding:clamp(28px,5vw,72px);border-radius:var(--sf-radius)} .sf-v-glass .sf-card{background:#ffffff14;border:1px solid #ffffff2e;backdrop-filter:blur(16px);box-shadow:0 20px 60px #0000002e} .sf-v-neon{--sf-neon:color-mix(in srgb,var(--sf-accent) 80%,#fff)} .sf-v-neon h2,.sf-v-neon h1{text-shadow:0 0 6px var(--sf-neon),0 0 26px var(--sf-neon),0 0 60px color-mix(in srgb,var(--sf-accent) 60%,transparent)} .sf-v-neon .sf-card{border-color:color-mix(in srgb,var(--sf-accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--sf-accent) 30%,transparent),0 0 34px color-mix(in srgb,var(--sf-accent) 22%,transparent)} .sf-v-neon .sf-btn{box-shadow:0 0 22px color-mix(in srgb,var(--sf-accent) 60%,transparent)} .sf-v-list .sf-grid{display:block} .sf-v-list .sf-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px;align-items:center;border:0;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent);border-radius:0;padding:34px 0;background:none} .sf-v-list .sf-card h3{font-size:clamp(22px,2.6vw,38px);letter-spacing:0;margin:0} .sf-v-list .sf-card img{grid-row:span 3;border-radius:var(--sf-radius);aspect-ratio:16/10;object-fit:cover} .sf-v-zigzag .sf-grid{display:block} .sf-v-zigzag .sf-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;border:0;background:none;padding:clamp(24px,4vw,56px) 0} .sf-v-zigzag .sf-card:nth-child(even) img{order:2} .sf-v-zigzag .sf-card img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--sf-radius)} .sf-v-wide>.sf-wrap{width:min(1560px,calc(100% - 48px))} .sf-v-compact{--sf-space:44px} .sf-v-compact .sf-card{padding:20px} .sf-v-sticky .sf-split-grid{align-items:start} .sf-v-sticky .sf-copy{position:sticky;top:90px} .sf-v-ticker .sf-grid{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px} .sf-v-ticker .sf-card{flex:0 0 min(78vw,340px);scroll-snap-align:start} .sf-v-card .sf-card{box-shadow:0 22px 60px -30px #0000006b} .sf-v-overlay .sf-card{position:relative;isolation:isolate;color:#fff;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;border:0} .sf-v-overlay .sf-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1} .sf-v-overlay .sf-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0000 30%,#000000d6)} .sf-v-bento .sf-grid{grid-template-columns:repeat(4,1fr)} .sf-v-bento .sf-card:first-child{grid-column:span 2;grid-row:span 2} @media (max-width:880px){.sf-v-bento .sf-grid{grid-template-columns:1fr}.sf-v-bento .sf-card:first-child{grid-column:auto;grid-row:auto}.sf-v-list .sf-card,.sf-v-zigzag .sf-card{grid-template-columns:1fr}.sf-v-zigzag .sf-card:nth-child(even) img{order:0}.sf-v-sticky .sf-copy{position:static}} /* ---- ヘッダーの追加型 ---- */ .sf-header-center .sf-header-inner{flex-direction:column;gap:18px} .sf-header-center nav{justify-content:center;flex-wrap:wrap} .sf-header-split .sf-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center} .sf-header-split .sf-brand{grid-column:2;text-align:center} .sf-header-split nav{grid-column:3;justify-content:flex-end} .sf-header-side{padding:22px 0;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent)} .sf-header-side .sf-brand{font-size:15px;letter-spacing:.24em;text-transform:uppercase} .sf-member-link{font-size:12px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);padding:8px 14px;border-radius:99px} /* ---- 会員まわり（ページ内ブロックでも使う）---- */ .sf-locked{text-align:center;border:1px dashed color-mix(in srgb,currentColor 30%,transparent);border-radius:var(--sf-radius);padding:clamp(34px,6vw,72px) 24px} .sf-locked span{font-size:38px;display:block;margin-bottom:14px} .sf-locked h3{margin-bottom:8px} .sf-locked p{opacity:.7;font-size:14px} .sf-app-grid{display:grid;grid-template-columns:repeat(var(--sf-cols,3),minmax(0,1fr));gap:20px} .sf-app-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--sf-radius);border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,var(--sf-app-color,var(--sf-accent)) 5%,var(--sf-bg));transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s;overflow:hidden;isolation:isolate} .sf-app-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px #00000059;border-color:color-mix(in srgb,var(--sf-app-color,var(--sf-accent)) 55%,transparent)} .sf-app-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--sf-app-color,var(--sf-accent)),color-mix(in srgb,var(--sf-app-color,var(--sf-accent)) 30%,transparent))} .sf-app-icon{font-size:34px;line-height:1} .sf-app-shot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:calc(var(--sf-radius) * .6)} .sf-app-card h3{margin:0;font-size:19px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sf-app-card h3 b{font-size:10px;letter-spacing:.12em;padding:4px 9px;border-radius:99px;background:var(--sf-app-color,var(--sf-accent));color:#fff;font-weight:700} .sf-app-card p{margin:0;font-size:14px;opacity:.72;flex:1} .sf-app-card .sf-btn{align-self:flex-start;padding:11px 18px;font-size:13px;gap:14px} .sf-member-card{border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:var(--sf-radius);padding:26px} .sf-member-card .sf-meta{font-size:13px;opacity:.65} .sf-empty-note{opacity:.65;font-size:14px} .sf-auth-form{display:flex;flex-direction:column;gap:16px;max-width:430px} .sf-auth-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600} .sf-auth-form input{border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:calc(var(--sf-radius) * .5);padding:13px 15px;background:color-mix(in srgb,var(--sf-bg) 92%,#fff);color:inherit;font-weight:400} .sf-auth-form input:disabled{opacity:.6} .sf-auth-form hr{border:0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);width:100%;margin:6px 0} .sf-auth-form label.sf-check{flex-direction:row;align-items:center;gap:9px;font-weight:400;font-size:13px} .sf-auth-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px} .sf-auth-links a{border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);padding-bottom:2px} .sf-auth-note{font-size:12px;opacity:.7;line-height:1.8} .sf-note-error,.sf-note-ok{border-radius:calc(var(--sf-radius) * .5);padding:13px 16px;font-size:14px;margin-bottom:18px} .sf-note-error{background:#fde8e6;color:#8c2019;border:1px solid #f0bcb6} .sf-note-ok{background:#e6f5ec;color:#1d6b40;border:1px solid #b5dfc6} @media (max-width:880px){.sf-app-grid{grid-template-columns:1fr}.sf-videohero h1{font-size:clamp(34px,10vw,56px)}} /* ---- サイト全体の下地パターン ---- */ .sf-site[class*="sf-pattern-"]:not(.sf-pattern-none){position:relative} .sf-site[class*="sf-pattern-"]:not(.sf-pattern-none)::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--sf-pat-op,.5);background-image:var(--sf-pat);background-size:var(--sf-pat-size,60px 60px)} .sf-site[class*="sf-pattern-"]>*:not(.sf-skip):not(.sf-header){position:relative;z-index:1} .sf-site>.sf-skip{position:absolute!important} .sf-site>.sf-header:not(.sf-sticky){position:relative;z-index:5} .sf-pattern-seigaiha{--sf-pat:radial-gradient(circle at 50% 100%,transparent 24%,currentColor 25%,currentColor 26%,transparent 27%,transparent 36%,currentColor 37%,currentColor 38%,transparent 39%,transparent 48%,currentColor 49%,currentColor 50%,transparent 51%);--sf-pat-size:56px 28px;--sf-pat-op:.08} .sf-pattern-asanoha{--sf-pat:repeating-linear-gradient(60deg,currentColor 0 1px,transparent 1px 34px),repeating-linear-gradient(-60deg,currentColor 0 1px,transparent 1px 34px),repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 59px);--sf-pat-size:auto;--sf-pat-op:.07} .sf-pattern-ichimatsu{--sf-pat:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%);--sf-pat-size:72px 72px;--sf-pat-op:.045} .sf-pattern-kohshi{--sf-pat:repeating-linear-gradient(0deg,currentColor 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 26px);--sf-pat-size:auto;--sf-pat-op:.06} .sf-pattern-yagasuri{--sf-pat:repeating-linear-gradient(45deg,currentColor 0 2px,transparent 2px 14px),repeating-linear-gradient(-45deg,currentColor 0 2px,transparent 2px 14px);--sf-pat-size:auto;--sf-pat-op:.05} .sf-pattern-shippou{--sf-pat:radial-gradient(circle at 0 0,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 100% 0,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 0 100%,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%),radial-gradient(circle at 100% 100%,transparent 47%,currentColor 48%,currentColor 49%,transparent 50%);--sf-pat-size:62px 62px;--sf-pat-op:.07} .sf-pattern-dots{--sf-pat:radial-gradient(currentColor 1.4px,transparent 1.5px);--sf-pat-size:22px 22px;--sf-pat-op:.09} .sf-pattern-grid{--sf-pat:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);--sf-pat-size:64px 64px;--sf-pat-op:.05} .sf-pattern-lines{--sf-pat:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 11px);--sf-pat-size:auto;--sf-pat-op:.06} .sf-pattern-stripe{--sf-pat:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 16px);--sf-pat-size:auto;--sf-pat-op:.045} .sf-pattern-noise{--sf-pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");--sf-pat-size:120px 120px;--sf-pat-op:.22} .sf-pattern-mesh::before{background:radial-gradient(60% 60% at 10% 8%,color-mix(in srgb,var(--sf-accent) 40%,transparent),transparent 70%),radial-gradient(55% 55% at 92% 14%,color-mix(in srgb,var(--sf-accent2,var(--sf-accent)) 40%,transparent),transparent 70%);opacity:.6;filter:blur(30px)} .sf-pattern-glow::before{background:radial-gradient(50% 40% at 50% 0,color-mix(in srgb,var(--sf-accent) 45%,transparent),transparent 70%);opacity:.5;filter:blur(40px)} /* ---- その他 ---- */ .sf-faq-list{max-width:900px} .sf-al-center .sf-faq-list{margin-inline:auto;text-align:left} .sf-center{text-align:center;margin-inline:auto} .sf-prose{max-width:820px} .sf-preview .sf-h-full,.sf-preview .sf-videohero{min-height:74vh} .sf-no-motion .sf-anim{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important} .sf-no-motion .sf-marquee-track{animation:none} /* 編集プレビューはスクリプトが動かないため、演出を最初から表示状態にする */ .sf-preview .sf-anim{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important} .sf-bg-yt:empty{background:linear-gradient(135deg,color-mix(in srgb,var(--sf-accent) 70%,#000),color-mix(in srgb,var(--sf-accent2,var(--sf-accent)) 55%,#000))} /* ============================================================ 3.1 追加：ヘッダー追従・ドロップダウン・モバイルメニュー・フッター ============================================================ */ .sf-header.sf-sticky{position:sticky;top:0;z-index:60;transition:padding .28s ease,background .28s ease,box-shadow .28s ease,transform .32s cubic-bezier(.2,.7,.2,1)} .sf-header.sf-sticky.is-scrolled{background:color-mix(in srgb,var(--sf-bg) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 1px 0 color-mix(in srgb,var(--sf-ink) 10%,transparent),0 10px 30px -22px #00000059} .sf-header.sf-sticky[data-scroll="shrink"].is-scrolled{padding-top:10px;padding-bottom:10px} .sf-header.sf-sticky[data-scroll="shrink"].is-scrolled .sf-brand img{max-height:34px} .sf-header.sf-sticky[data-scroll="hide"].is-hidden{transform:translateY(-105%)} .sf-header-floating.sf-sticky.is-scrolled{background:transparent;box-shadow:none;backdrop-filter:none} .sf-header-floating.sf-sticky.is-scrolled .sf-header-inner{background:color-mix(in srgb,var(--sf-bg) 90%,transparent);backdrop-filter:blur(14px);box-shadow:0 12px 34px -24px #00000073} /* ドロップダウン */ .sf-nav-group{position:relative} .sf-nav-toggle{background:none;border:0;color:inherit;font:inherit;padding:6px 0;display:inline-flex;align-items:center;gap:6px;opacity:.8} .sf-nav-toggle span{font-size:.75em;transition:transform .2s} .sf-nav-group.is-open>.sf-nav-toggle span{transform:rotate(180deg)} .sf-subnav{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:210px;background:var(--sf-bg);border:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);border-radius:calc(var(--sf-radius) * .6);box-shadow:0 26px 60px -28px #00000066;padding:10px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:5} .sf-nav-group:hover>.sf-subnav,.sf-nav-group:focus-within>.sf-subnav,.sf-nav-group.is-open>.sf-subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sf-subnav a{padding:10px 14px;border-radius:calc(var(--sf-radius) * .4);white-space:nowrap;opacity:.85} .sf-subnav a:hover{background:color-mix(in srgb,var(--sf-accent) 10%,transparent);opacity:1} .sf-menu-close{display:none;background:none;border:0;color:inherit;font-size:20px;align-self:flex-end;padding:6px 10px} @media(max-width:767px){ .sf-header nav{gap:4px} .sf-nav-group{width:100%} .sf-nav-toggle{width:100%;justify-content:space-between;padding:10px 8px} .sf-subnav{position:static;transform:none;opacity:1;visibility:visible;border:0;box-shadow:none;background:none;padding:0 0 6px 14px;border-left:2px solid color-mix(in srgb,var(--sf-ink) 14%,transparent);display:none;min-width:0} .sf-nav-group.is-open>.sf-subnav{display:flex} .sf-menu-fullscreen nav{position:fixed;inset:0;top:0;height:100dvh;padding:80px 28px 40px;justify-content:center;gap:6px;overflow:auto;border:0;box-shadow:none;background:var(--sf-bg);z-index:80} .sf-menu-fullscreen nav.sf-open{display:flex} .sf-menu-fullscreen nav>a,.sf-menu-fullscreen .sf-nav-toggle{font-size:19px;padding:12px 4px;opacity:1} .sf-menu-fullscreen .sf-menu-close{display:block;position:absolute;top:22px;right:22px;font-size:26px} .sf-menu-fullscreen .sf-btn{margin-top:14px;justify-content:center} body.sf-menu-open{overflow:hidden} } /* フッター */ .sf-footer-grid{grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr));align-items:start} .sf-footer-col h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:14px;font-weight:700} .sf-footer-col .sf-footer-links{flex-direction:column;justify-content:flex-start;gap:10px} .sf-footer-col .sf-footer-links a{opacity:.7} .sf-footer-col .sf-footer-links a:hover{opacity:1} .sf-footer-brand p{max-width:34ch} .sf-footer-tel{display:inline-block;margin-top:8px;font-size:15px!important;opacity:.9!important} .sf-footer-note p{font-size:12px;line-height:1.9;opacity:.6} .sf-foot-center .sf-footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:34px} .sf-foot-center .sf-footer-links{align-items:center;flex-direction:row;justify-content:center} .sf-foot-center .sf-footer-brand p{max-width:48ch} .sf-foot-center .sf-footer-bottom{justify-content:center;flex-direction:column;gap:8px} .sf-foot-compact{padding-top:44px} .sf-foot-compact .sf-footer-grid{grid-template-columns:1fr auto;gap:28px;align-items:center} .sf-foot-compact .sf-footer-col h3{display:none} .sf-foot-compact .sf-footer-col .sf-footer-links{flex-direction:row;gap:18px} .sf-foot-compact .sf-footer-bottom{margin-top:28px} .sf-foot-columns .sf-footer-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} @media(max-width:767px){.sf-footer-grid{grid-template-columns:1fr!important;gap:30px}.sf-foot-compact .sf-footer-col .sf-footer-links{flex-wrap:wrap}} /* ---- 3.2：モダンCSS ---- */ .sf-site h1,.sf-site h2,.sf-site h3{text-wrap:balance} .sf-site p{text-wrap:pretty} @view-transition{navigation:auto} .sf-edit-hint{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);font-size:11px;background:#000a;color:#fff;padding:6px 12px;border-radius:99px;white-space:nowrap} .sf-tile-art{background:linear-gradient(135deg,color-mix(in srgb,var(--sf-accent) 70%,#000),color-mix(in srgb,var(--sf-accent2,var(--sf-accent)) 60%,#fff 10%))!important;color:#fff} .sf-tile-art .sf-tile-body{color:#fff!important} .sf-tile-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,#ffffff40,transparent 45%),radial-gradient(circle at 10% 90%,#00000030,transparent 50%);z-index:-1} .sf-menu-toggle[aria-expanded="true"]{font-size:0!important} .sf-menu-toggle[aria-expanded="true"]::after{content:"✕";font-size:22px} section.sf-marquee>.sf-wrap{width:100%;max-width:none} /* 中央ロゴ・左右割りのヘッダーはスマホで横並びに戻す */ @media(max-width:767px){ .sf-header-center .sf-header-inner,.sf-header-split .sf-header-inner{display:flex;flex-direction:row;justify-content:space-between} .sf-brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sf-v-magazine .sf-grid{grid-template-columns:1fr} } /* 追従ヘッダーがページ内リンクの飛び先を隠さないように */ html:has(.sf-header.sf-sticky){scroll-padding-top:110px} .sf-section{scroll-margin-top:0} /* 3.3 アプリ販売カード */ .sf-store-title{margin:clamp(34px,5vw,56px) 0 16px} .sf-store-card{display:flex;flex-direction:column;cursor:default} .sf-store-card .sf-actions{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:8px} .sf-store-card .sf-btn small{font-size:.78em;opacity:.8;margin-left:4px} .sf-store-bundle{outline:2px solid var(--sf-app-color,var(--sf-accent));outline-offset:-2px} .sf-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:4px 0 6px} .sf-price strong{font-size:1.5em;letter-spacing:-.02em;color:var(--sf-app-color,var(--sf-accent))} .sf-price small{font-size:.8em;opacity:.7}.sf-price-or{font-size:.8em;opacity:.6;margin:0 4px} .sf-schedule-hint{position:absolute;top:8px;right:8px;z-index:5} .sf-member-flash:empty,.sf-member-flash:not(:has(p)){display:none} /* 3.4 背景動画：YouTube はサムネイル→自動再生に切り替え、操作UIは画面外へ逃がす */ .sf-bg-yt{container-type:size;overflow:hidden;background:#000} .sf-bg-yt-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1s ease} .sf-bg-yt.sf-yt-on .sf-bg-yt-poster{opacity:0} .sf-bg-yt iframe{width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);min-width:0;min-height:0;transform:translate(-50%,-50%) scale(1.2)} .sf-preview .sf-bg-yt::after{content:"▶ YouTube 背景（公開画面で自動再生・ループ）";position:absolute;right:12px;bottom:12px;color:#fff;background:#0009;font-size:11px;letter-spacing:.08em;padding:5px 10px;border-radius:20px;white-space:nowrap} .sf-bgmedia video{background:#000} /* 日本語の見出しを文節で折り返す（対応ブラウザのみ。非対応は従来どおり） */ .sf-site h1,.sf-site h2,.sf-site .sf-bigquote p,.sf-site .sf-lead{word-break:auto-phrase;overflow-wrap:break-word} .sf-split-grid>*,.sf-grid>*{min-width:0} /* 3.5 背景動画：サムネイルは再生を確認できるまで動画の上に重ねる（YouTube の再生ボタンやエラー画面を見せない） */ .sf-bg-yt iframe{z-index:0} .sf-bg-yt .sf-bg-yt-poster{z-index:1} .sf-bg-yt.sf-yt-on .sf-bg-yt-poster{opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s} /* iPhone などで自動再生が止められたときに出る再生ボタン・操作バーを隠す */ .sf-bgmedia video::-webkit-media-controls,.sf-bgmedia video::-webkit-media-controls-panel,.sf-bgmedia video::-webkit-media-controls-start-playback-button,.sf-bgmedia video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none!important;opacity:0!important} /* 他のプラグイン・テーマの「動画は幅100%・高さ自動」などの指定に負けないように */ .sf-site .sf-bgmedia>video,.sf-site .sf-bgmedia>img,.sf-site .sf-bgmedia>.sf-bg-yt{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;object-fit:cover;display:block!important;visibility:visible!important;opacity:1} .sf-site .sf-bg-yt iframe{max-width:none!important;max-height:none!important;display:block!important;visibility:visible!important} .sf-site .sf-bgmedia{display:block!important;visibility:visible!important} .sf-site .sf-bgmedia.sf-bg-error>video{display:none!important} /* ================= 楽しい仕掛け ================= */ .sf-fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden} .sf-confetti{position:absolute;width:8px;height:14px;margin:-7px 0 0 -4px;border-radius:2px;animation:sf-confetti var(--d,1.4s) cubic-bezier(.15,.6,.35,1) forwards;will-change:transform,opacity} @keyframes sf-confetti{0%{transform:translate(0,0) rotate(0)}45%{transform:translate(calc(var(--dx)*.75),var(--dy)) rotate(calc(var(--r)*.5));opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 520px)) rotate(var(--r));opacity:0}} .sf-sparkle{position:absolute;font-style:normal;font-size:calc(20px*var(--s,1));line-height:1;margin:-.5em 0 0 -.5em;text-shadow:0 0 8px currentColor;animation:sf-sparkle .95s ease-out forwards} @keyframes sf-sparkle{0%{transform:scale(.2) rotate(0);opacity:1}40%{transform:scale(1) rotate(90deg)}100%{transform:translateY(26px) scale(.2) rotate(200deg);opacity:0}} .sf-tilt{transition:rotate .18s ease-out,box-shadow .3s;position:relative} .sf-g-tilt .sf-grid,.sf-g-tilt .sf-hero .sf-visual,.sf-g-tilt .sf-app-grid,.sf-g-tilt .sf-mosaic-grid{perspective:1100px} .sf-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff8c,#ffffff00 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;z-index:3} .sf-tilt.is-tilt .sf-glare{opacity:1} .sf-tilt.is-tilt{box-shadow:0 30px 60px -20px #0005} .sf-btn.is-magnet{transition:translate .08s linear} .sf-g-magnet .sf-btn{transition:translate .4s cubic-bezier(.34,1.56,.64,1),transform .2s,box-shadow .2s,background .2s} .sf-jiggle{animation:sf-jelly .7s cubic-bezier(.3,.7,.4,1)} @keyframes sf-jelly{0%{scale:1 1}25%{scale:1.14 .86}40%{scale:.9 1.1}55%{scale:1.06 .95}70%{scale:.97 1.03}100%{scale:1 1}} .sf-g-jelly .sf-btn:hover{animation:sf-jelly .7s cubic-bezier(.3,.7,.4,1)} .sf-jumpy{cursor:default} .sf-ch{display:inline-block;white-space:pre;transition:color .3s} .sf-ch.sf-hop{animation:sf-hop .55s cubic-bezier(.3,1.6,.5,1)} @keyframes sf-hop{0%{translate:0 0;rotate:0deg}35%{translate:0 -.32em;rotate:calc((var(--i) - 3)*2deg);color:var(--sf-accent)}70%{translate:0 .04em}100%{translate:0 0;rotate:0deg}} .sf-cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--sf-accent,#ff5ca8);mix-blend-mode:multiply;pointer-events:none;z-index:9999;opacity:0;transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s} .sf-cursor.is-on{opacity:.55} .sf-cursor.is-link{width:70px;height:70px;margin:-35px 0 0 -35px;background:var(--sf-accent2,#2ec4b6)} .sf-cursor.is-down{width:22px;height:22px;margin:-11px 0 0 -11px} .sf-bubble{position:absolute;bottom:-100px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffffee 0 7%,#ffffff33 8% 30%,#ffffff10 55%,#ffffff40 70%,#ffffff00 72%),conic-gradient(from 20deg,#ff9ad544,#9ad6ff44,#b8ff9a44,#ffe99a44,#ff9ad544);box-shadow:inset 0 0 0 1.5px #ffffffaa,inset -6px -8px 16px #ffffff33;animation:sf-bubble var(--t,12s) linear forwards} @keyframes sf-bubble{0%{transform:translate(0,0)}25%{transform:translate(var(--sway),-30vh)}50%{transform:translate(calc(var(--sway)*-1),-60vh)}75%{transform:translate(var(--sway),-90vh)}100%{transform:translate(0,-125vh)}} .sf-bubble.is-pop{animation:sf-bubble-pop .38s ease-out forwards!important;bottom:auto} @keyframes sf-bubble-pop{to{transform:scale(1.6);opacity:0}} .sf-drop{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffffffdd;box-shadow:0 0 6px #fff;animation:sf-drop .6s ease-out forwards} @keyframes sf-drop{to{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}} .sf-pow{position:absolute;font:900 clamp(24px,3.4vw,44px)/1 "Dela Gothic One","Mochiy Pop One",var(--sf-font-head,sans-serif);color:#fff;-webkit-text-stroke:3px #111;paint-order:stroke fill;text-shadow:4px 4px 0 var(--c,#ff5ca8);white-space:nowrap;translate:-50% -50%;animation:sf-pow .8s cubic-bezier(.2,1.6,.4,1) forwards} @keyframes sf-pow{0%{transform:scale(0) rotate(var(--r))}30%{transform:scale(1.2) rotate(var(--r))}60%{transform:scale(1) rotate(var(--r));opacity:1}100%{transform:scale(1.05) translateY(-24px) rotate(var(--r));opacity:0}} .sf-toys{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .sf-g-drag :is(.sf-hero,.sf-videohero)>.sf-wrap{position:relative;z-index:1;pointer-events:none} .sf-g-drag :is(.sf-hero,.sf-videohero) :is(.sf-copy,.sf-hero-copy,.sf-visual>img,a,button){pointer-events:auto} .sf-g-drag :is(.sf-hero,.sf-videohero) .sf-copy{position:relative;z-index:2} .sf-toy{position:absolute;left:0;top:0;width:clamp(44px,6vw,86px);height:clamp(44px,6vw,86px);pointer-events:auto;cursor:grab;touch-action:none;background:var(--c);box-shadow:inset -6px -8px 0 #0000001f,0 10px 20px -8px #0005;will-change:transform;user-select:none} .sf-toy.is-held{cursor:grabbing;filter:brightness(1.08);box-shadow:inset -6px -8px 0 #0000001f,0 24px 40px -10px #0006} .sf-toy-circle{border-radius:50%} .sf-toy-square{border-radius:22%} .sf-toy-ring{border-radius:50%;background:none;border:clamp(10px,1.4vw,18px) solid var(--c);box-shadow:0 10px 20px -8px #0005} .sf-toy-pill{width:clamp(70px,10vw,140px);border-radius:999px} .sf-toy-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:none} .sf-toy-tri{clip-path:polygon(50% 4%,96% 92%,4% 92%);box-shadow:none} .sf-toy-flower{border-radius:50%;background:radial-gradient(circle,#fff6 0 18%,transparent 19%),radial-gradient(circle at 50% 12%,var(--c) 0 26%,transparent 27%),radial-gradient(circle at 88% 50%,var(--c) 0 26%,transparent 27%),radial-gradient(circle at 50% 88%,var(--c) 0 26%,transparent 27%),radial-gradient(circle at 12% 50%,var(--c) 0 26%,transparent 27%),radial-gradient(circle,var(--c) 0 40%,transparent 41%);box-shadow:none} .sf-depth .sf-visual{translate:calc(var(--mx,0)*-26px) calc(var(--my,0)*-20px);transition:translate .25s ease-out} .sf-depth .sf-art i{translate:calc(var(--mx,0)*40px) calc(var(--my,0)*30px);transition:translate .3s ease-out} .sf-depth .sf-art i:nth-child(2){translate:calc(var(--mx,0)*-50px) calc(var(--my,0)*-36px)} .sf-depth .sf-copy{translate:calc(var(--mx,0)*10px) calc(var(--my,0)*8px);transition:translate .3s ease-out} .sf-progress{position:fixed;left:0;top:0;right:0;height:6px;z-index:9997;transform-origin:0 50%;transform:scaleX(0);background:repeating-linear-gradient(-45deg,var(--sf-accent,#ff5ca8) 0 10px,var(--sf-accent2,#ffd23f) 10px 20px);pointer-events:none} html.sf-party .sf-site{animation:sf-party-hue 2.4s linear infinite} html.sf-party .sf-card,html.sf-party .sf-btn,html.sf-party h1,html.sf-party h2{animation:sf-party-bop .5s ease-in-out infinite alternate} @keyframes sf-party-hue{to{filter:hue-rotate(360deg)}} @keyframes sf-party-bop{to{translate:0 -6px;rotate:-2deg}} @media (hover:none){.sf-cursor{display:none}} /* ===== 3.6 仕掛け ===== */ .sf-fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:0} .sf-fx-canvas.is-front{z-index:9997} .sf-ripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--sf-accent,#4aa3df) 70%,#fff);animation:sf-ripple 1.4s cubic-bezier(.2,.6,.3,1) both} @keyframes sf-ripple{from{transform:scale(0);opacity:.9}to{transform:scale(22);opacity:0;border-width:.3px}} .sf-ink{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);background:var(--c);border-radius:var(--r1) var(--r2) var(--r3) var(--r4)/var(--r3) var(--r1) var(--r4) var(--r2);filter:blur(1.5px);mix-blend-mode:multiply;opacity:.8;animation:sf-ink 3.2s cubic-bezier(.1,.7,.2,1) both} .sf-ink-drop{border-radius:50%;filter:none} @keyframes sf-ink{0%{transform:scale(0) rotate(0);opacity:.85}25%{transform:scale(1) rotate(8deg);opacity:.8}75%{opacity:.55}100%{transform:scale(1.18) rotate(12deg);opacity:0}} .sf-bloom{position:absolute;width:0;height:0} .sf-bloom b{position:absolute;left:calc(var(--s)*-.22);top:calc(var(--s)*-1);width:calc(var(--s)*.44);height:var(--s);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(var(--c),color-mix(in srgb,var(--c) 40%,#fff));transform-origin:50% 100%;transform:rotate(var(--a)) scale(0);animation:sf-petal 2.1s cubic-bezier(.34,1.56,.64,1) var(--d) both;box-shadow:inset 0 -6px 10px #fff5} .sf-bloom u{position:absolute;width:calc(var(--s)*.34);height:calc(var(--s)*.34);margin:calc(var(--s)*-.17);border-radius:50%;background:radial-gradient(#fff6b0,#f2b705);animation:sf-bloomc 2.1s ease both} @keyframes sf-petal{0%{transform:rotate(var(--a)) scale(0)}30%,70%{transform:rotate(calc(var(--a) + 12deg)) scale(1);opacity:1}100%{transform:rotate(calc(var(--a) + 40deg)) scale(.9) translateY(-20px);opacity:0}} @keyframes sf-bloomc{0%{transform:scale(0)}30%,70%{transform:scale(1)}100%{transform:scale(0);opacity:0}} .sf-ch{display:inline-block;white-space:pre} .sf-ch.sf-hid{visibility:hidden} .sf-typing .sf-ch.sf-caret{position:relative} .sf-typing .sf-ch.sf-caret::after{content:"";position:absolute;right:-.08em;top:.1em;bottom:.1em;width:.07em;background:currentColor;animation:sf-caret .7s steps(1) infinite} @keyframes sf-caret{50%{opacity:0}} .sf-eyes{position:absolute;right:6%;top:8%;z-index:5;display:flex;gap:.4em;font-size:clamp(34px,5vw,64px);cursor:pointer;animation:sf-eyes-in .8s cubic-bezier(.34,1.56,.64,1) .6s both} .sf-eye{position:relative;width:1em;height:1.15em;border-radius:50%;background:#fff;border:.06em solid #111;box-shadow:0 .08em 0 #0003;overflow:hidden;transition:transform .16s} .sf-eye i{position:absolute;left:50%;top:50%;width:.46em;height:.46em;margin:-.23em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 12%,#111 14%);transition:transform .12s ease-out} .sf-eyes.is-blink .sf-eye{transform:scaleY(.08)} .sf-eyes.is-surprise .sf-eye{transform:scale(1.25)} .sf-eyes.is-surprise .sf-eye i{width:.26em;height:.26em;margin:-.13em} @keyframes sf-eyes-in{from{transform:translateY(-30px) scale(.4);opacity:0}} .sf-spot{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle clamp(140px,22vw,300px) at var(--x,50%) var(--y,40%),transparent 0 60%,#00000094 100%);transition:opacity .5s} .sf-spot.is-off{opacity:0} :is(.sf-hero,.sf-videohero):has(.sf-spot){position:relative} .sf-intro{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;pointer-events:auto;cursor:pointer} .sf-intro span{position:absolute;top:0;bottom:0;width:50.5%;background:var(--sf-intro,var(--sf-bg,#f4efe3));transition:transform 1.15s cubic-bezier(.7,0,.2,1)} .sf-intro .sf-intro-a{left:0;background-image:linear-gradient(90deg,transparent 0 calc(100% - 6px),#0000001a 0),repeating-linear-gradient(0deg,transparent 0 calc(25% - 3px),#8a6d4a 0 25%),repeating-linear-gradient(90deg,transparent 0 calc(33.33% - 3px),#8a6d4a 0 33.33%)} .sf-intro .sf-intro-b{right:0;background-image:repeating-linear-gradient(0deg,transparent 0 calc(25% - 3px),#8a6d4a 0 25%),repeating-linear-gradient(90deg,#8a6d4a 0 3px,transparent 0 33.33%)} .sf-intro strong{position:relative;font:700 clamp(28px,6vw,64px)/1.2 var(--sf-font-head,serif);color:var(--sf-ink,#222);letter-spacing:.2em;animation:sf-intro-t 1s ease both;transition:opacity .4s} .sf-intro.is-open span.sf-intro-a{transform:translateX(-101%)} .sf-intro.is-open span.sf-intro-b{transform:translateX(101%)} .sf-intro.is-open strong{opacity:0} .sf-intro.is-open{pointer-events:none} @keyframes sf-intro-t{from{opacity:0;letter-spacing:.8em;filter:blur(8px)}} .sf-nb{display:inline-block;white-space:nowrap} /* ===== 3.7 動画カルーセル＋拡大再生 ===== */ .sf-vc{--sf-vc-gap:clamp(12px,1.6vw,22px);position:relative} .sf-vc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px} .sf-vc-count{font-size:13px;opacity:.7;letter-spacing:.06em} .sf-vc-nav{display:flex;gap:8px} .sf-vc-nav button{width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:color-mix(in srgb,var(--sf-bg,#fff) 85%,transparent);color:inherit;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,opacity .2s,transform .2s} .sf-vc-nav button:hover:not(:disabled){background:var(--sf-accent);color:#fff;border-color:var(--sf-accent)} .sf-vc-nav button:disabled{opacity:.3;cursor:default} .sf-vc:not(.is-scrollable) .sf-vc-nav,.sf-vc:not(.is-scrollable) .sf-vc-bar{visibility:hidden} .sf-vc-track{list-style:none;margin:0;padding:4px 2px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--sf-vc-gap)*(var(--sf-vc-cols,3) - 1))/var(--sf-vc-cols,3));gap:var(--sf-vc-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .sf-vc-track::-webkit-scrollbar{display:none} .sf-vc-track.is-drag{scroll-snap-type:none;cursor:grabbing} .sf-vc-track.is-drag *{pointer-events:none} .sf-vc-item{scroll-snap-align:start;min-width:0} .sf-vc-open{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--sf-radius,14px);overflow:hidden;background:#111;cursor:pointer;box-shadow:0 14px 30px -18px #0007} .sf-vc-open img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s;-webkit-user-drag:none;user-select:none} .sf-vc-open:hover img,.sf-vc-open:focus-visible img{transform:scale(1.06);filter:brightness(.85)} .sf-vc-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#fffffff0;color:#111;display:grid;place-items:center;font-size:18px;padding-left:3px;box-shadow:0 8px 24px #0005;transition:transform .3s} .sf-vc-open:hover .sf-vc-play{transform:scale(1.14);background:var(--sf-accent);color:#fff} .sf-vc-title{margin:12px 2px 2px;font-weight:700;font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sf-vc-item time{display:block;margin:0 2px;font-size:12px;opacity:.6} .sf-vc-text{margin:4px 2px 0;font-size:13px;opacity:.75} .sf-vc-bar{position:relative;height:3px;border-radius:3px;background:color-mix(in srgb,currentColor 12%,transparent);overflow:hidden} .sf-vc-bar i{position:absolute;top:0;bottom:0;left:0;width:20%;border-radius:3px;background:var(--sf-accent);transition:left .15s linear} .sf-vc-empty{aspect-ratio:16/9} @media(max-width:767px){.sf-vc-track{grid-auto-columns:82%}.sf-vc-nav button{width:38px;height:38px;font-size:20px}} @media(min-width:768px) and (max-width:1023px){.sf-vc-track{grid-auto-columns:calc((100% - var(--sf-vc-gap))/2)}} .sf-lb-lock,.sf-lb-lock body{overflow:hidden} .sf-lightbox{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;background:#000000e6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s;font-family:var(--sf-font,sans-serif)} .sf-lightbox.is-open{opacity:1} .sf-lb-stage{width:min(1100px,92vw);transform:scale(.92);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)} .sf-lightbox.is-open .sf-lb-stage{transform:none} .sf-lb-frame{position:relative;aspect-ratio:16/9;max-height:78vh;margin-inline:auto;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px #000c} .sf-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .sf-lb-info{display:flex;justify-content:space-between;gap:16px;color:#fff;margin-top:14px;font-size:15px} .sf-lb-count{opacity:.6;white-space:nowrap} .sf-lightbox button{position:absolute;border:0;background:#ffffff1f;color:#fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s} .sf-lightbox button:hover{background:#ffffff40} .sf-lb-close{top:18px;right:18px;width:46px;height:46px;font-size:20px} .sf-lb-prev,.sf-lb-next{top:50%;width:54px;height:54px;margin-top:-27px;font-size:30px} .sf-lb-prev{left:max(10px,calc(50vw - 610px))}.sf-lb-next{right:max(10px,calc(50vw - 610px))} @media(max-width:767px){.sf-lb-prev,.sf-lb-next{top:auto;bottom:18px;margin:0}.sf-lb-prev{left:18px}.sf-lb-next{right:18px}} /* ===== 3.8 読みやすさの調整（全デザイン共通） ===== */ .sf-faq-list{display:grid;gap:14px} .sf-faq-item{padding:20px 24px;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:min(var(--sf-radius,12px),20px)} .sf-faq-item summary{line-height:1.6} .sf-faq-item p{margin-top:14px} .sf-card h3,.sf-stat p,.sf-faq-item summary{overflow-wrap:anywhere} .sf-btn{line-height:1.35;overflow-wrap:anywhere} /* リスト型（沿革など）の行が枠つきになるデザインでは、内側に余白と行間をとる */ [class*="sf-theme-"] .sf-v-list .sf-grid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:16px} [class*="sf-theme-"] .sf-v-list .sf-card{padding:28px clamp(20px,3vw,36px)} /* ===== 3.8 仕掛け（時代もの） ===== */ .sf-shuriken{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;background:conic-gradient(from 45deg,#5b6068,#c9ced6,#5b6068,#9aa0a8,#5b6068);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:sf-shuriken-fly .38s cubic-bezier(.2,.7,.3,1) both,sf-shuriken-spin .12s linear infinite;filter:drop-shadow(0 2px 2px #0006)} .sf-shuriken::after{content:"";position:absolute;inset:40%;border-radius:50%;background:#2b2e33} .sf-shuriken.is-hit{animation:sf-shuriken-hit .25s ease both} .sf-shuriken.is-out{opacity:0;transition:opacity .5s} @keyframes sf-shuriken-fly{from{transform:translate(var(--dx),var(--dy)) scale(.8)}} @keyframes sf-shuriken-spin{to{rotate:360deg}} @keyframes sf-shuriken-hit{0%{transform:rotate(18deg) scale(1.15)}50%{transform:rotate(-6deg)}100%{transform:rotate(22deg)}} .sf-shuriken-spark{position:absolute;width:60px;height:60px;margin:-30px;border-radius:50%;background:repeating-conic-gradient(#fff 0 6deg,transparent 6deg 30deg);mask:radial-gradient(circle,transparent 30%,#000 32% 50%,transparent 52%);-webkit-mask:radial-gradient(circle,transparent 30%,#000 32% 50%,transparent 52%);animation:sf-spark .45s ease-out both} @keyframes sf-spark{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}} .sf-stamp{position:absolute;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;font:700 34px/1 var(--sf-stamp-font,"Yuji Syuku","Zen Old Mincho",serif);color:var(--sf-stamp-color,#c8161d);border:4px solid currentColor;border-radius:var(--sf-stamp-radius,8px);background:var(--sf-stamp-bg,transparent);box-shadow:inset 0 0 0 2px transparent;mix-blend-mode:multiply;opacity:.88;transform:rotate(var(--r)) scale(1);animation:sf-stamp .32s cubic-bezier(.3,1.6,.5,1) both} @keyframes sf-stamp{from{transform:rotate(var(--r)) scale(2.4);opacity:0}} .sf-stamp.is-out{opacity:0;transition:opacity .7s} .sf-coin{position:absolute;width:22px;height:30px;margin:-15px 0 0 -11px;border-radius:var(--sf-coin-radius,50%/50%);background:radial-gradient(ellipse at 35% 30%,#fff6c8,#f2c94c 40%,#b8871d 80%);box-shadow:inset 0 0 0 2px #b8871d,inset 0 0 0 4px #f6dc86;will-change:transform} .sf-hw{clip-path:inset(-10% 100% -10% 0);transition:clip-path 1.4s cubic-bezier(.55,.1,.3,1)} .sf-hw.is-written{clip-path:inset(-10% -2% -10% 0)} .sf-gears{position:fixed;inset:0;pointer-events:none;z-index:0;--a:0deg} .sf-gears svg{position:absolute;fill:var(--sf-gear,color-mix(in srgb,var(--sf-accent) 40%,transparent));opacity:.55} .sf-gears svg circle{fill:var(--sf-bg)} .sf-gears .g1{width:220px;right:-70px;top:90px;transform:rotate(var(--a))} .sf-gears .g2{width:140px;right:112px;top:40px;transform:rotate(calc(var(--a) * -1.5))} .sf-gears .g3{width:300px;left:-120px;bottom:-110px;transform:rotate(calc(var(--a) * .75))} @media(max-width:700px){.sf-gears .g1{width:130px;right:-50px}.sf-gears .g2{width:84px;right:62px}.sf-gears .g3{width:180px}} /* ===== 3.9 地図（Google マップをデザインに合わせて色づけ） ===== */ .sf-map.sf-map-live{position:relative;padding:0;border:0;background:none;display:block;--sf-map-filter:saturate(.72) contrast(1.02);--sf-map-tint-op:.16;--sf-map-blend:color} .sf-map.sf-map-live.is-dark{--sf-map-filter:invert(.9) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.95);--sf-map-tint-op:.22;--sf-map-blend:color} .sf-map-canvas{position:relative;height:clamp(320px,46vw,520px);border-radius:var(--sf-radius,14px);overflow:hidden;background:color-mix(in srgb,var(--sf-accent) 8%,var(--sf-bg));box-shadow:0 30px 60px -36px #0007;isolation:isolate} .sf-map-frame,.sf-map-js{position:absolute;inset:0;width:100%;height:100%;border:0;filter:var(--sf-map-filter)} .sf-map-js{filter:none} .sf-map-tint{position:absolute;inset:0;background:var(--sf-map-tint,var(--sf-accent));opacity:var(--sf-map-tint-op);mix-blend-mode:var(--sf-map-blend);pointer-events:none;z-index:1} .sf-map-js~.sf-map-tint{display:none} .sf-map-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;opacity:.6} .sf-map-load{position:absolute;inset:0;z-index:2;display:grid;place-content:center;gap:6px;justify-items:center;border:0;background:repeating-linear-gradient(45deg,transparent 0 22px,color-mix(in srgb,var(--sf-accent) 7%,transparent) 22px 23px),color-mix(in srgb,var(--sf-accent) 6%,var(--sf-bg));color:var(--sf-ink);font:600 16px/1.4 var(--sf-font);cursor:pointer} .sf-map-load span{font-size:40px;color:var(--sf-accent)}.sf-map-load small{font-weight:400;opacity:.65} .sf-map-card{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:-70px 24px 0;padding:20px 24px;border-radius:var(--sf-radius,14px);background:var(--sf-bg);color:var(--sf-ink);box-shadow:0 20px 40px -20px #0006;border:1px solid color-mix(in srgb,currentColor 12%,transparent);max-width:min(640px,calc(100% - 48px))} .sf-map-pin{width:40px;height:40px;flex:none;background:var(--sf-accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;animation:sf-pin 2.4s ease-in-out infinite} @keyframes sf-pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .sf-map-info{flex:1;min-width:180px}.sf-map-info strong{display:block;font-family:var(--sf-font-head);font-size:17px;margin-bottom:2px}.sf-map-info p{margin:0;font-size:14px;opacity:.8} .sf-map-actions{display:flex;flex-wrap:wrap;gap:8px} .sf-al-center .sf-map-card{margin-inline:auto} @media(max-width:700px){.sf-map-card{margin:-40px 12px 0;padding:16px;max-width:calc(100% - 24px)}.sf-map-canvas{height:340px}} /* ===== 4.0：3Dパーツ・VRM・料金シミュレーター・診断・ビフォーアフター・カウントダウン ===== */ .sf-3d{position:relative;overflow:hidden} .sf-3d-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;outline:0} .sf-3d-poster{position:absolute;inset:0;pointer-events:none;transition:opacity .9s ease;opacity:1} .sf-3d-on .sf-3d-poster{opacity:0} .sf-3d-nogl .sf-3d-poster,.sf-3d-failed .sf-3d-poster{opacity:1} /* 3D背景ビジュアル */ .sf-section.sf-scene3d-host{display:flex;align-items:center;min-height:clamp(480px,72vh,820px);overflow:hidden} .sf-section.sf-scene3d-host.sf-h-full{min-height:100vh}.sf-section.sf-scene3d-host.sf-h-tall{min-height:clamp(520px,80vh,900px)} .sf-scene3d-stage{position:absolute!important;inset:0;z-index:0} .sf-scene3d-host>.sf-wrap{position:relative;z-index:1;pointer-events:none;width:min(var(--sf-width,1180px),calc(100% - 80px))} .sf-scene3d-host>.sf-wrap a,.sf-scene3d-host>.sf-wrap button,.sf-scene3d-host>.sf-wrap input{pointer-events:auto} .sf-scene3d-copy{max-width:720px} .sf-scene3d-host.sf-al-center .sf-scene3d-copy{margin-inline:auto;text-align:center}.sf-scene3d-host.sf-al-center .sf-actions{justify-content:center} .sf-scene3d-host.sf-al-right .sf-scene3d-copy{margin-left:auto;text-align:right}.sf-scene3d-host.sf-al-right .sf-actions{justify-content:flex-end} .sf-scene3d-copy h1,.sf-scene3d-copy h2{text-shadow:0 2px 24px color-mix(in srgb,var(--sf-bg,#fff) 55%,transparent)} .sf-tone-dark .sf-scene3d-copy h1,.sf-tone-dark .sf-scene3d-copy h2,.sf-tone-ink .sf-scene3d-copy h1,.sf-tone-ink .sf-scene3d-copy h2{text-shadow:0 2px 30px rgba(0,0,0,.55)} .sf-3dp-galaxy .sf-3d-poster{background:radial-gradient(ellipse 30% 22% at 50% 52%,color-mix(in srgb,var(--sf-accent2) 70%,#fff) 0,transparent 70%),radial-gradient(ellipse 55% 30% at 50% 52%,color-mix(in srgb,var(--sf-accent) 55%,transparent) 0,transparent 70%),radial-gradient(1px 1px at 20% 30%,#fff8 50%,transparent 51%) 0 0/60px 60px} .sf-3dp-blob .sf-3d-poster{background:radial-gradient(circle at 44% 40%,#fff9 0 4%,transparent 12%),radial-gradient(circle at 50% 50%,var(--sf-accent) 0 19%,transparent 19.5%),radial-gradient(circle at 70% 36%,var(--sf-accent2) 0 4%,transparent 4.5%)} .sf-3dp-waves .sf-3d-poster{background:radial-gradient(circle,color-mix(in srgb,var(--sf-accent) 80%,transparent) 1.2px,transparent 1.8px) 0 60%/18px 12px,linear-gradient(to bottom,transparent 45%,color-mix(in srgb,var(--sf-accent2) 20%,transparent));-webkit-mask:linear-gradient(to bottom,transparent 40%,#000 75%);mask:linear-gradient(to bottom,transparent 40%,#000 75%)} .sf-3dp-shapes .sf-3d-poster{background:radial-gradient(circle at 18% 30%,var(--sf-accent) 0 3.2%,transparent 3.4%),radial-gradient(circle at 82% 62%,var(--sf-accent2) 0 4%,transparent 4.2%),radial-gradient(circle at 70% 22%,color-mix(in srgb,var(--sf-accent) 50%,#fff) 0 2.4%,transparent 2.6%),radial-gradient(circle at 28% 75%,color-mix(in srgb,var(--sf-accent2) 50%,#fff) 0 2.8%,transparent 3%)} .sf-3dp-crystal .sf-3d-poster{background:conic-gradient(from 30deg at 50% 50%,transparent,color-mix(in srgb,var(--sf-accent) 30%,transparent),transparent,color-mix(in srgb,var(--sf-accent2) 30%,transparent),transparent);-webkit-mask:radial-gradient(circle at 50% 50%,#000 0 22%,transparent 23%);mask:radial-gradient(circle at 50% 50%,#000 0 22%,transparent 23%)} .sf-3dp-petals .sf-3d-poster{background:radial-gradient(ellipse 6px 4px,#f6b9c9 60%,transparent 62%) 0 0/120px 90px,radial-gradient(ellipse 5px 3px,#fff4f6 60%,transparent 62%) 50px 40px/140px 110px} .sf-3dp-city .sf-3d-poster{background:linear-gradient(to top,color-mix(in srgb,var(--sf-ink) 16%,transparent) 0 26%,transparent 26%),repeating-linear-gradient(90deg,color-mix(in srgb,var(--sf-ink) 12%,transparent) 0 60px,transparent 60px 80px,color-mix(in srgb,var(--sf-ink) 8%,transparent) 80px 130px,transparent 130px 150px);-webkit-mask:linear-gradient(to top,#000 0 40%,transparent 60%);mask:linear-gradient(to top,#000 0 40%,transparent 60%)} /* 3Dモデル */ .sf-model3d-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center} .sf-al-right .sf-model3d-grid,.sf-v-reverse .sf-model3d-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.sf-al-right .sf-model3d-grid>.sf-copy,.sf-v-reverse .sf-model3d-grid>.sf-copy{order:2} .sf-model3d-stage{aspect-ratio:1/1;min-height:360px;border-radius:var(--sf-radius,20px);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--sf-accent) 14%,transparent),transparent 62%),color-mix(in srgb,currentColor 4%,transparent);cursor:grab} .sf-model3d-stage.is-grab{cursor:grabbing} .sf-model3d-stage .sf-3d-poster{background:radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--sf-accent) 60%,transparent) 0 16%,transparent 16.5%),radial-gradient(ellipse 28% 5% at 50% 78%,color-mix(in srgb,currentColor 18%,transparent),transparent 70%)} .sf-3d-status{position:absolute;left:0;right:0;bottom:44px;margin:0;text-align:center;font-size:13px;opacity:.75;pointer-events:none} .sf-3d-hint{position:absolute;right:14px;bottom:12px;font-size:11px;letter-spacing:.08em;opacity:.55;pointer-events:none} .sf-3d-views{display:grid;gap:8px;margin:22px 0} .sf-3d-views button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:12px 16px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:calc(var(--sf-radius,20px)*.6);background:transparent;color:inherit;font:inherit;cursor:pointer;transition:.2s} .sf-3d-views button small{opacity:.72;font-size:13px} .sf-3d-views button:hover,.sf-3d-views button[aria-pressed=true]{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 10%,transparent)} .sf-3d-views button[aria-pressed=true] strong{color:var(--sf-accent)} /* 物理で遊ぶ言葉 */ .sf-physics-stage{height:clamp(340px,52vh,560px);margin-top:28px;border-radius:var(--sf-radius,20px);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--sf-accent) 9%,transparent)),color-mix(in srgb,currentColor 3%,transparent);cursor:grab} .sf-physics-stage.is-grab{cursor:grabbing} .sf-physics-fallback{position:absolute;inset:auto 0 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:24px;margin:0;list-style:none;transition:opacity .6s} .sf-physics-fallback li{padding:10px 18px;border-radius:10px;background:var(--sf-accent);color:#fff;font-weight:800;font-family:var(--sf-font-head,inherit);transform:rotate(calc((var(--i) - 3) * 2.5deg))} .sf-physics-fallback li:nth-child(3n+2){background:var(--sf-accent2)}.sf-physics-fallback li:nth-child(3n){background:var(--sf-ink);color:var(--sf-bg)} .sf-3d-on .sf-physics-fallback{opacity:0;pointer-events:none} .sf-physics-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0 0} .sf-physics-bar small{opacity:.7} .sf-physics-reset{border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:transparent;color:inherit;border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;cursor:pointer} .sf-physics-reset:hover{border-color:var(--sf-accent);color:var(--sf-accent)} /* VRM キャラクター（歩き回る） */ .sf-section.sf-vrm-host:not(.sf-vrm-host-preview){padding:0!important;min-height:0!important;border:0!important} .sf-vrm-walk{position:fixed;left:0;right:0;bottom:0;height:var(--sf-vrm-h,260px);z-index:80;pointer-events:none;overflow:visible;font-family:var(--sf-font,sans-serif)} .sf-vrm-walk .sf-3d-canvas,.sf-vrm-stage .sf-3d-canvas{pointer-events:none} .sf-vrm-hit{position:absolute;left:0;top:0;width:60px;height:60px;padding:0;margin:0;border:0;border-radius:40% 40% 20% 20%;background:transparent;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent} .sf-vrm-hit:focus-visible{outline:3px solid var(--sf-accent,#7057db);outline-offset:4px} .sf-vrm-bubble{position:absolute;left:var(--x,50%);top:var(--y,0);transform:translate(-50%,calc(-100% - 14px));max-width:min(320px,76vw);width:max-content;padding:11px 16px;border-radius:18px;background:#fff;color:#27232f;font-size:14px;line-height:1.65;box-shadow:0 12px 32px -10px rgba(20,16,40,.35),0 0 0 1px rgba(20,16,40,.06);pointer-events:auto;z-index:2} .sf-vrm-bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0;box-shadow:3px 3px 6px -3px rgba(20,16,40,.2)} .sf-vrm-bubble b{display:block;font-size:11px;letter-spacing:.06em;color:var(--sf-accent,#7057db)} .sf-vrm-bubble a{color:inherit;text-decoration:underline;text-decoration-color:var(--sf-accent,#7057db);text-underline-offset:3px} .sf-vrm-bubble.is-pop{animation:sfVrmPop .38s cubic-bezier(.3,1.6,.5,1)} @keyframes sfVrmPop{from{opacity:0;transform:translate(-50%,calc(-100% - 2px)) scale(.7)}to{opacity:1;transform:translate(-50%,calc(-100% - 14px)) scale(1)}} .sf-vrm-close{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;border:0;background:rgba(20,16,40,.55);color:#fff;font-size:14px;line-height:24px;padding:0;cursor:pointer;pointer-events:auto;opacity:.55;transition:opacity .2s} .sf-vrm-close:hover,.sf-vrm-close:focus-visible{opacity:1} .sf-vrm-credit{position:absolute;left:10px;top:6px;font-size:10px;opacity:.6;pointer-events:auto;color:var(--sf-ink,#333);background:color-mix(in srgb,var(--sf-bg,#fff) 70%,transparent);padding:1px 6px;border-radius:6px} .sf-vrm-bye{opacity:0;transform:translateY(40px);transition:.6s} @media print{.sf-vrm-walk{display:none}} /* VRM キャラクター（セクションの中） */ .sf-vrm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:40px;align-items:center} .sf-al-right .sf-vrm-grid{grid-template-columns:minmax(280px,.8fr) minmax(0,1fr)}.sf-al-right .sf-vrm-grid>.sf-copy{order:2} .sf-vrm-stage{height:clamp(380px,60vh,560px);overflow:visible} .sf-vrm-poster i{position:absolute;left:50%;bottom:6%;width:34%;height:78%;transform:translateX(-50%);border-radius:48% 48% 30% 30%/30% 30% 20% 20%;background:radial-gradient(circle at 50% 16%,#ffe6d6 0 13%,transparent 13.5%),linear-gradient(var(--sf-accent),var(--sf-accent)) 50% 58%/46% 34% no-repeat,linear-gradient(currentColor,currentColor) 38% 100%/9% 30% no-repeat,linear-gradient(currentColor,currentColor) 62% 100%/9% 30% no-repeat;opacity:.9} .sf-vrm-preview{display:flex;align-items:center;gap:18px;padding:18px 22px;border:2px dashed color-mix(in srgb,var(--sf-accent) 45%,transparent);border-radius:var(--sf-radius,20px);background:color-mix(in srgb,var(--sf-accent) 6%,transparent)} .sf-vrm-preview p{margin:.2em 0 0;font-size:13px;opacity:.8} .sf-vrm-mini{flex:0 0 56px;height:72px;position:relative}.sf-vrm-mini i{position:absolute;inset:0;border-radius:40% 40% 20% 20%;background:radial-gradient(circle at 50% 22%,#ffe6d6 0 18%,transparent 19%),linear-gradient(var(--sf-accent),var(--sf-accent)) 50% 70%/60% 40% no-repeat;animation:sfVrmMini 1s ease-in-out infinite alternate} @keyframes sfVrmMini{to{transform:translateY(-6px) rotate(4deg)}} /* 料金シミュレーター */ .sf-sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:28px;align-items:start;margin-top:28px} .sf-sim-groups{display:grid;gap:22px} .sf-sim-group{border:0;margin:0;padding:0;display:grid;gap:10px} .sf-sim-group legend{font-weight:800;margin-bottom:10px;padding:0;font-family:var(--sf-font-head,inherit)} .sf-sim-opt{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:calc(var(--sf-radius,20px)*.6);cursor:pointer;transition:.18s;background:color-mix(in srgb,var(--sf-bg,#fff) 80%,transparent)} .sf-sim-opt:hover{border-color:color-mix(in srgb,var(--sf-accent) 55%,transparent)} .sf-sim-opt.is-on{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 9%,var(--sf-bg,#fff));box-shadow:0 8px 20px -14px var(--sf-accent)} .sf-sim-opt input[type=radio],.sf-sim-opt input[type=checkbox]{width:20px;height:20px;accent-color:var(--sf-accent);flex:0 0 auto;margin:0} .sf-sim-opt input[type=number]{width:74px;padding:8px 10px;border-radius:10px;border:1.5px solid color-mix(in srgb,currentColor 22%,transparent);font:inherit;text-align:right;background:transparent;color:inherit} .sf-sim-txt{flex:1;display:flex;flex-direction:column;min-width:0} .sf-sim-txt small{opacity:.7;font-size:13px;line-height:1.6} .sf-sim-opt em{font-style:normal;font-weight:700;white-space:nowrap} .sf-sim-total{position:sticky;top:96px;padding:24px;border-radius:var(--sf-radius,20px);background:var(--sf-ink,#242331);color:var(--sf-bg,#fff);display:grid;gap:8px} .sf-sim-total>p{margin:0;font-size:13px;opacity:.8} .sf-sim-total strong{font-size:clamp(30px,3.4vw,42px);line-height:1.2;font-family:var(--sf-font-head,inherit);color:inherit} .sf-sim-total strong.is-bump{animation:sfBump .35s} @keyframes sfBump{40%{transform:scale(1.06)}} .sf-sim-total small{opacity:.75} .sf-sim-total ul{list-style:none;margin:6px 0;padding:10px 0 0;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);display:grid;gap:4px;font-size:13px} .sf-sim-total li{display:flex;justify-content:space-between;gap:12px} .sf-sim-note{font-size:12px;opacity:.75;margin:0} .sf-sim-total .sf-btn{justify-content:center;margin-top:6px} /* 診断チャート */ .sf-shindan{position:relative;margin-top:28px;padding:clamp(22px,4vw,44px);border-radius:var(--sf-radius,20px);background:color-mix(in srgb,var(--sf-accent) 7%,var(--sf-bg,#fff));color:var(--sf-ink,#242331);overflow:hidden} .sf-shindan-bar{height:6px;border-radius:6px;background:color-mix(in srgb,currentColor 12%,transparent);margin-bottom:22px;overflow:hidden} .sf-shindan-bar i{display:block;height:100%;width:0;background:var(--sf-accent);transition:width .45s} .sf-shindan:not(.is-live) .sf-shindan-bar{display:none} .sf-shindan-no{font-size:12px;letter-spacing:.14em;color:var(--sf-accent);font-weight:700;margin:0 0 6px} .sf-shindan-q h3,.sf-shindan-r h3{margin:0 0 18px;font-size:clamp(20px,2.4vw,28px);line-height:1.45} .sf-shindan-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .sf-shindan-c{padding:16px 20px;border-radius:calc(var(--sf-radius,20px)*.6);border:2px solid color-mix(in srgb,var(--sf-accent) 30%,transparent);background:var(--sf-bg,#fff);color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:.18s} .sf-shindan-c:hover{border-color:var(--sf-accent);transform:translateY(-2px)} .sf-shindan-c.is-picked{background:var(--sf-accent);color:#fff;transform:scale(.98)} .sf-shindan-steps,.sf-shindan-results{display:grid;gap:26px} .sf-shindan.is-live .sf-shindan-q,.sf-shindan.is-live .sf-shindan-r{display:none} .sf-shindan.is-live .sf-shindan-q.is-on{display:block;animation:sfShin .4s both} .sf-shindan.is-live .sf-shindan-r.is-on{display:block;animation:sfShinR .6s cubic-bezier(.3,1.4,.5,1) both} @keyframes sfShin{from{opacity:0;transform:translateX(24px)}} @keyframes sfShinR{from{opacity:0;transform:scale(.9) rotate(-2deg)}} .sf-shindan-r img{width:100%;max-height:280px;object-fit:cover;border-radius:calc(var(--sf-radius,20px)*.6);margin-bottom:16px} .sf-shindan:not(.is-live) .sf-shindan-r{padding-top:18px;border-top:1px dashed color-mix(in srgb,currentColor 25%,transparent)} .sf-shindan-retry{margin-top:20px;border:0;background:transparent;color:var(--sf-accent);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px} /* ビフォー・アフター */ .sf-ba{position:relative;margin:28px 0 0;aspect-ratio:16/10;border-radius:var(--sf-radius,20px);overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent);user-select:none} .sf-ba-img{position:absolute;inset:0}.sf-ba-img img,.sf-ba-img .sf-art{width:100%;height:100%;object-fit:cover;display:block} .sf-ba-after{clip-path:inset(0 0 0 var(--pos,50%))} .sf-ba-before .sf-art{filter:grayscale(1) brightness(.85)} .sf-ba-label{position:absolute;top:14px;padding:4px 12px;border-radius:999px;background:rgba(20,16,30,.62);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;pointer-events:none} .sf-ba-l{left:14px}.sf-ba-r{right:14px;background:var(--sf-accent)} .sf-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none} .sf-ba-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:#333;display:grid;place-items:center;font-style:normal;font-size:11px;letter-spacing:-.1em;box-shadow:0 6px 18px rgba(0,0,0,.25)} .sf-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y} .sf-ba-range:focus-visible+.sf-ba-handle,.sf-ba:focus-within .sf-ba-handle i{outline:3px solid var(--sf-accent)} .sf-ba figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;background:linear-gradient(transparent,rgba(0,0,0,.55));color:#fff;font-size:13px;pointer-events:none} /* カウントダウン */ .sf-count{margin:26px 0} .sf-count-units{display:flex;flex-wrap:wrap;gap:12px} .sf-al-center .sf-count-units{justify-content:center} .sf-count-u{min-width:88px;padding:14px 12px;border-radius:calc(var(--sf-radius,20px)*.6);background:color-mix(in srgb,currentColor 7%,transparent);text-align:center} .sf-count-u b{display:block;font-size:clamp(32px,4.4vw,56px);line-height:1.1;font-family:var(--sf-font-head,inherit);font-variant-numeric:tabular-nums;color:var(--sf-accent)} .sf-tone-accent .sf-count-u b,.sf-tone-gradient .sf-count-u b{color:inherit} .sf-count-u b.is-tick{animation:sfTick .4s} @keyframes sfTick{from{transform:translateY(-8px);opacity:.3}} .sf-count-u small{font-size:12px;opacity:.75} .sf-count-until{font-size:13px;opacity:.75;margin:10px 0 0} .sf-count-end{font-weight:700;font-size:18px} .sf-count.is-ended .sf-count-units,.sf-count.is-ended .sf-count-until{display:none} @media(max-width:900px){.sf-model3d-grid,.sf-vrm-grid,.sf-sim{grid-template-columns:minmax(0,1fr)!important}.sf-model3d-grid>.sf-copy,.sf-vrm-grid>.sf-copy{order:0!important}.sf-sim-total{position:static}.sf-count-u{min-width:70px}} @media(max-width:767px){.sf-scene3d-host>.sf-wrap{width:calc(100% - 40px)}.sf-model3d-stage{min-height:300px}.sf-vrm-stage{height:400px}.sf-ba{aspect-ratio:4/3}} @media(prefers-reduced-motion:reduce){.sf-vrm-bubble.is-pop,.sf-shindan.is-live .sf-shindan-q.is-on,.sf-shindan.is-live .sf-shindan-r.is-on{animation:none}} .sf-scene3d-copy{position:relative} .sf-scene3d-copy::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--sf-bg,#fff) 72%,transparent),transparent)} .sf-tone-dark .sf-scene3d-copy::before,.sf-tone-ink .sf-scene3d-copy::before,.sf-tone-gradient .sf-scene3d-copy::before,.sf-tone-accent .sf-scene3d-copy::before{background:radial-gradient(closest-side,rgba(8,6,16,.5),transparent)} .sf-scene3d-host.sf-tone-dark .sf-scene3d-copy :is(h1,h2,.sf-lead),.sf-scene3d-host.sf-tone-ink .sf-scene3d-copy :is(h1,h2,.sf-lead){color:#fff;-webkit-text-fill-color:currentColor} .sf-vrm-walk .sf-vrm-credit{top:auto;bottom:6px} /* 4.0.1：キャラクターの表示・非表示ボタン、読み込み中の表示 */ .sf-vrm-walk.is-hidden{display:none} .sf-vrm-toggle{position:fixed;left:14px;bottom:14px;z-index:81;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:#27232f;font:600 12px/1.2 var(--sf-font,sans-serif);box-shadow:0 8px 22px -10px rgba(20,16,40,.45),0 0 0 1px rgba(20,16,40,.08);cursor:pointer;transition:transform .2s,box-shadow .2s} .sf-vrm-toggle:hover{transform:translateY(-2px)}.sf-vrm-toggle:focus-visible{outline:3px solid var(--sf-accent,#7057db);outline-offset:3px} .sf-vrm-toggle i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#ffe6d6 0 28%,transparent 29%),radial-gradient(circle at 50% 118%,var(--sf-accent,#7057db) 0 52%,transparent 53%),color-mix(in srgb,var(--sf-accent,#7057db) 18%,#fff)} .sf-vrm-toggle.is-off i{filter:grayscale(.2)}.sf-vrm-toggle.is-off{background:var(--sf-accent,#7057db);color:#fff} .sf-vrm-loading{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:#27232f;font-size:12px;white-space:nowrap;box-shadow:0 6px 18px -10px rgba(0,0,0,.4);pointer-events:none;z-index:2} .sf-vrm-walk .sf-vrm-loading{left:auto;right:16px;transform:none;bottom:16px} .sf-vrm-loading.is-error{white-space:normal;max-width:90%;background:#fff4f2;color:#9b2c1f;left:8px;right:8px;transform:none;text-align:center;border-radius:10px} .sf-vrm-mini-stage{flex:0 0 150px;height:190px;overflow:visible}.sf-vrm-mini-stage .sf-vrm-mini{position:absolute;inset:auto 0 0;height:72px;margin:auto;width:56px} .sf-vrm-mini-stage.sf-3d-on .sf-vrm-mini{display:none}.sf-vrm-mini-stage .sf-vrm-bubble{font-size:11px;max-width:220px} @media print{.sf-vrm-toggle{display:none}} .sf-vrm-mini-stage .sf-vrm-bubble,.sf-vrm-mini-stage .sf-vrm-credit{display:none!important}.sf-vrm-mini-stage{flex-basis:170px;height:230px} .sf-vrm-walk .sf-vrm-credit{left:auto;right:10px} /* ===== 4.1：記事カード・一覧・記事ページ ===== */ .sf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .sf-postgrid{display:grid;grid-template-columns:repeat(var(--sf-cols,3),minmax(0,1fr));gap:26px;margin-top:34px} .sf-postcard{min-width:0} .sf-postcard .sf-pc-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;background:color-mix(in srgb,var(--sf-bg) 92%,var(--sf-ink) 3%);border:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);border-radius:var(--sf-radius);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} .sf-postcard .sf-pc-link:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px color-mix(in srgb,var(--sf-ink) 55%,transparent);border-color:color-mix(in srgb,var(--sf-accent) 45%,transparent)} .sf-postcard .sf-pc-link:focus-visible{outline:3px solid var(--sf-accent);outline-offset:3px} .sf-pc-img{margin:0;aspect-ratio:16/10;overflow:hidden;background:color-mix(in srgb,var(--sf-accent) 14%,var(--sf-bg));display:grid;place-items:center} .sf-pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .sf-pc-link:hover .sf-pc-img img{transform:scale(1.04)} .sf-pc-img span{font-size:clamp(40px,6vw,64px);font-weight:800;color:var(--sf-accent);opacity:.55;font-family:var(--sf-font-head)} .sf-pc-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1} .sf-pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font-size:12px;opacity:.75;letter-spacing:.04em} .sf-pc-cat{background:color-mix(in srgb,var(--sf-accent) 14%,transparent);color:var(--sf-accent);padding:2px 10px;border-radius:99px;font-weight:700;opacity:1} .sf-site .sf-pc-title{font-size:clamp(16px,1.35vw,19px);line-height:1.55;margin:2px 0 0;font-weight:700;letter-spacing:.01em;text-shadow:none;-webkit-text-stroke:0;font-family:var(--sf-font-head);overflow-wrap:anywhere} .sf-pc-ex{margin:0;font-size:13.5px;line-height:1.75;opacity:.78;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sf-pc-more{margin-top:auto;padding-top:6px;font-size:12.5px;font-weight:700;color:var(--sf-accent)} .sf-post-empty{opacity:.7;margin-top:28px} .sf-site .sf-news-more{margin:32px 0 0;text-align:center} .sf-archive-head h1{margin:.2em 0 .1em;overflow-wrap:anywhere} .sf-archive-desc{max-width:760px;opacity:.85} .sf-archive-count{font-size:13px;opacity:.65;margin:.4em 0 0} .sf-archive-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px} .sf-catnav{display:flex;flex-wrap:wrap;gap:8px} .sf-catnav a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--sf-ink) 14%,transparent);font-size:13px;color:inherit;text-decoration:none;background:var(--sf-bg);transition:background .2s,border-color .2s} .sf-catnav a small{font-size:11px;opacity:.6} .sf-catnav a:hover{border-color:var(--sf-accent)} .sf-catnav a[aria-current="page"]{background:var(--sf-accent);border-color:var(--sf-accent);color:#fff} .sf-searchform{display:flex;gap:8px;align-items:stretch;flex:0 1 360px} .sf-searchform label{flex:1;display:flex} .sf-searchform input{flex:1;min-width:0;border:1px solid color-mix(in srgb,var(--sf-ink) 18%,transparent);border-radius:calc(var(--sf-radius) * .6);padding:10px 14px;font:inherit;font-size:14px;background:var(--sf-bg);color:inherit} .sf-searchform .sf-btn{margin:0} .sf-pager{margin-top:44px} .sf-pager ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0;margin:0} .sf-pager a,.sf-pager span{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;padding:0 12px;border-radius:99px;border:1px solid color-mix(in srgb,var(--sf-ink) 14%,transparent);color:inherit;text-decoration:none;font-size:14px} .sf-pager .current{background:var(--sf-accent);border-color:var(--sf-accent);color:#fff} .sf-pager .dots{border:0} .sf-article-head{max-width:820px;padding-top:clamp(40px,6vw,80px)} .sf-article-head h1{margin:.25em 0 0;overflow-wrap:anywhere} .sf-article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-size:13px;opacity:.85} .sf-article-cats{display:inline-flex;flex-wrap:wrap;gap:6px} .sf-article-cats a{background:var(--sf-accent);color:#fff;padding:3px 12px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none} .sf-article-mod{opacity:.7} .sf-article-strip{max-width:820px;padding-top:24px} .sf-article-eyecatch{margin:32px 0 0;border-radius:var(--sf-radius);overflow:hidden} .sf-article-eyecatch img{width:100%;height:auto;display:block} .sf-article-body{padding-top:32px!important} .sf-article-foot{max-width:1100px;padding-bottom:clamp(56px,8vw,96px)} .sf-article-tags{display:flex;flex-wrap:wrap;gap:8px;max-width:820px;margin:0 auto 20px} .sf-article-tags a{font-size:13px;color:var(--sf-accent);text-decoration:none} .sf-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:820px;margin:0 auto;padding:22px 0;border-top:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-share>span{font-size:13px;font-weight:700;margin-right:6px} .sf-share a,.sf-share button{font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:99px;border:1px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);background:var(--sf-bg);color:inherit;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s} .sf-share a:hover,.sf-share button:hover{background:var(--sf-ink);color:var(--sf-bg);border-color:var(--sf-ink)} .sf-share .sf-share-line:hover{background:#06c755;border-color:#06c755;color:#fff} .sf-share .sf-share-bluesky:hover{background:#1185fe;border-color:#1185fe;color:#fff} .sf-share .sf-share-facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff} .sf-share .sf-share-hatena:hover{background:#00a4de;border-color:#00a4de;color:#fff} .sf-article-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:820px;margin:28px auto 0} .sf-article-pn a{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-radius:calc(var(--sf-radius) * .7);border:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);color:inherit;text-decoration:none;font-weight:700;font-size:14px;line-height:1.6} .sf-article-pn a small{font-weight:400;opacity:.65;font-size:12px} .sf-article-pn a.is-next{text-align:right} .sf-article-pn a:hover{border-color:var(--sf-accent)} .sf-site .sf-article-rel{margin-top:56px} .sf-article-rel h2{font-size:clamp(20px,2.2vw,26px);text-align:center;margin:0} .sf-site .sf-article-back{text-align:center;margin:48px 0 0} @media (max-width:900px){.sf-postgrid{--sf-cols:2!important}} @media (max-width:600px){.sf-postgrid{--sf-cols:1!important;gap:18px}.sf-article-pn{grid-template-columns:1fr}.sf-article-pn a.is-next{text-align:left}.sf-searchform{flex-basis:100%}} /* ===== 4.1：リンク先のある親メニュー（文字はリンク、▾で開く）とドロップダウンの隙間 ===== */ .sf-nav-group.has-link{display:inline-flex;align-items:center;gap:2px} .sf-nav-caret{padding:6px 4px} @media (min-width:768px){.sf-subnav::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}} @media (max-width:767px){.sf-nav-group.has-link{display:flex;flex-wrap:wrap;width:100%}.sf-nav-group.has-link>.sf-nav-parent{flex:1}.sf-nav-group.has-link>.sf-nav-caret{width:auto;padding:10px 12px}.sf-nav-group.has-link>.sf-subnav{flex-basis:100%}} /* ===== 4.2：本文パーツ（WordPress の本文をそのまま表示） ===== */ .sf-richtext .sf-rich,.sf-richtext .sf-rich-title,.sf-richtext .sf-edit-hint{max-width:820px;margin-left:auto;margin-right:auto} .sf-richtext .sf-rich-title{margin-bottom:.6em;overflow-wrap:anywhere} .sf-rich{font-size:16.5px;line-height:1.95;overflow-wrap:anywhere} .sf-rich>*:first-child{margin-top:0}.sf-rich>*:last-child{margin-bottom:0} .sf-rich p{margin:0 0 1.3em} .sf-site .sf-rich h2{font-size:clamp(22px,2.5vw,30px);line-height:1.45;margin:1.8em 0 .7em} .sf-site .sf-rich h3{font-size:clamp(19px,2vw,23px);line-height:1.5;margin:1.6em 0 .6em} .sf-site .sf-rich h4,.sf-site .sf-rich h5,.sf-site .sf-rich h6{font-size:17px;margin:1.4em 0 .5em} .sf-rich img,.sf-rich video{max-width:100%;height:auto;border-radius:calc(var(--sf-radius) * .5)} .sf-rich figure{margin:1.8em 0} .sf-rich figcaption,.sf-rich .wp-element-caption{font-size:13px;opacity:.7;text-align:center;margin-top:.6em} .sf-rich ul,.sf-rich ol{padding-left:1.5em;margin:0 0 1.3em} .sf-rich li{margin:.3em 0} .sf-rich blockquote{margin:1.6em 0;padding:.4em 0 .4em 1.2em;border-left:4px solid var(--sf-accent);opacity:.9} .sf-rich table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px} .sf-rich .wp-block-table{overflow-x:auto}.sf-rich .wp-block-table table{margin:0} .sf-section.sf-richtext:has(+ .sf-richtext){padding-bottom:8px} .sf-rich th,.sf-rich td{border:1px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);padding:.6em .8em;text-align:left} .sf-rich th{background:color-mix(in srgb,var(--sf-accent) 8%,transparent)} .sf-rich pre{background:color-mix(in srgb,var(--sf-ink) 90%,transparent);color:var(--sf-bg);padding:1em 1.2em;border-radius:10px;overflow-x:auto;font-size:14px} .sf-rich code{font-size:.92em} .sf-rich hr{border:0;border-top:1px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);margin:2.4em 0} .sf-rich a{color:var(--sf-accent);text-decoration:underline;text-underline-offset:3px} .sf-rich .wp-block-embed iframe,.sf-rich iframe{max-width:100%} .sf-rich .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9} .sf-rich .wp-block-embed.wp-embed-aspect-16-9 iframe{position:absolute;inset:0;width:100%;height:100%} .sf-rich .aligncenter{margin-left:auto;margin-right:auto;text-align:center} .sf-rich .alignleft{float:left;margin:0 1.2em 1em 0}.sf-rich .alignright{float:right;margin:0 0 1em 1.2em} .sf-rich .wp-block-button__link{display:inline-block;background:var(--sf-accent);color:#fff;padding:.8em 1.6em;border-radius:var(--sf-radius);text-decoration:none;font-weight:700} .sf-rich .wp-block-columns{display:flex;gap:1.6em;flex-wrap:wrap}.sf-rich .wp-block-column{flex:1 1 240px;min-width:0} .sf-rich .wp-block-gallery{display:flex;flex-wrap:wrap;gap:8px}.sf-rich .wp-block-gallery figure{margin:0;flex:1 1 30%} .sf-rich::after{content:"";display:block;clear:both} /* ===== 4.2.1：記事の見た目（タイトルの大きさ・幅）と「見やすく整える」 ===== */ .sf-article{--sf-read:820px} .sf-article.sf-aw-s{--sf-read:680px}.sf-article.sf-aw-l{--sf-read:1000px} .sf-article .sf-article-head,.sf-article .sf-article-strip,.sf-article .sf-share,.sf-article .sf-article-tags,.sf-article .sf-article-pn,.sf-article .sf-richtext .sf-rich,.sf-article .sf-richtext .sf-rich-title,.sf-article .sf-article-body{max-width:var(--sf-read)} .sf-site .sf-article:is(.sf-at-s,.sf-at-m,.sf-at-l) .sf-article-head h1{color:var(--sf-ink);-webkit-text-stroke:0;transform:none;letter-spacing:.01em;font-family:var(--sf-font-head)} .sf-site .sf-article:is(.sf-at-s,.sf-at-m) .sf-article-head h1{text-shadow:none;line-height:1.45;font-weight:800} .sf-site .sf-article.sf-at-s .sf-article-head h1{font-size:clamp(21px,2.4vw,28px)} .sf-site .sf-article.sf-at-m .sf-article-head h1{font-size:clamp(24px,3.2vw,36px)} .sf-site .sf-article.sf-at-l .sf-article-head h1{font-size:clamp(30px,4.6vw,52px);line-height:1.35} /* 本文を見やすく整える：前のテーマの色・文字サイズの指定で、文字と背景が同じ色になったり、極端に大きくなったりしないように */ .sf-site .sf-tidy{color:var(--sf-ink)} .sf-site .sf-tidy :is(h1,h2,h3,h4,h5,h6){color:var(--sf-ink)!important;-webkit-text-stroke:0!important;text-shadow:none!important;transform:none!important;background:none!important;font-family:var(--sf-font-head)} .sf-site .sf-tidy h1{font-size:clamp(24px,3vw,34px)!important} .sf-site .sf-tidy h2{font-size:clamp(21px,2.4vw,28px)!important;padding-bottom:.35em;border-bottom:2px solid color-mix(in srgb,var(--sf-accent) 55%,transparent)} .sf-site .sf-tidy h3{font-size:clamp(18px,2vw,22px)!important;padding-left:.6em;border-left:4px solid var(--sf-accent)} .sf-site .sf-tidy :is(h4,h5,h6){font-size:17px!important} .sf-site .sf-tidy :is(p,li,td,th,dd,dt,figcaption,span,a,strong,em,cite)[style*="font-size"],.sf-site .sf-tidy :is(p,li,span,div)[class*="-font-size"]{font-size:inherit!important} .sf-site .sf-tidy [style*="color"]:not(.wp-block-button__link):not(.sf-fc),.sf-site .sf-tidy .has-text-color:not(.wp-block-button__link){color:inherit!important} .sf-site .sf-tidy :is(p,div,figure,section,blockquote,ul,ol,table,td,th,tr,span)[style*="background"],.sf-site .sf-tidy :is(p,div,figure,section,blockquote,ul,ol,span).has-background{background:color-mix(in srgb,var(--sf-accent) 7%,var(--sf-bg))!important;color:var(--sf-ink)!important} .sf-site .sf-tidy :is(p,div,section,blockquote).has-background,.sf-site .sf-tidy :is(p,div,section)[style*="background"]{padding:1.1em 1.3em;border-radius:calc(var(--sf-radius) * .5);border:1px solid color-mix(in srgb,var(--sf-accent) 22%,transparent)} .sf-site .sf-tidy .has-background :is(p,li,span,strong,em):not(.sf-fc){color:inherit!important} .sf-site .sf-tidy mark,.sf-site .sf-tidy .has-inline-color{background:color-mix(in srgb,var(--sf-accent) 22%,transparent)!important;color:inherit!important} .sf-site .sf-tidy a:not(.wp-block-button__link){color:var(--sf-accent)!important} .sf-site .sf-tidy table,.sf-site .sf-tidy :is(th,td){color:var(--sf-ink)!important;border-color:color-mix(in srgb,var(--sf-ink) 18%,transparent)!important} .sf-site .sf-tidy tr:nth-child(odd) td{background:transparent!important} .sf-site .sf-tidy .is-style-stripes tbody tr:nth-child(odd){background:color-mix(in srgb,var(--sf-ink) 5%,transparent)!important} .sf-site .sf-tidy thead,.sf-site .sf-tidy th{background:color-mix(in srgb,var(--sf-accent) 10%,transparent)!important;border-bottom-width:1px!important} .sf-site .sf-tidy .wp-block-pullquote{border:0;border-top:3px solid var(--sf-accent);border-bottom:3px solid var(--sf-accent);padding:1.4em 1em;margin:2em 0;text-align:center;color:var(--sf-ink)!important;background:none!important} .sf-site .sf-tidy .wp-block-pullquote blockquote{border:0;padding:0;margin:0} .sf-site .sf-tidy .wp-block-pullquote p{font-size:clamp(18px,2vw,22px)!important;line-height:1.7;font-weight:700} .sf-site .sf-tidy .wp-block-cover{min-height:0!important;padding:2em 1.4em!important;border-radius:calc(var(--sf-radius) * .6);overflow:hidden} .sf-site .sf-tidy .wp-block-cover .wp-block-cover__inner-container,.sf-site .sf-tidy .wp-block-cover :is(p,h2,h3){color:#fff!important} .sf-site .sf-tidy .wp-block-separator{border:0!important;border-top:1px solid color-mix(in srgb,var(--sf-ink) 18%,transparent)!important;background:none!important;height:0!important;opacity:1} .sf-site .sf-tidy pre,.sf-site .sf-tidy code{color:inherit} .sf-site .sf-tidy pre{background:color-mix(in srgb,var(--sf-ink) 8%,var(--sf-bg))!important;color:var(--sf-ink)!important;border:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-site .sf-tidy img{height:auto!important;max-width:100%!important} .sf-site .sf-tidy .wp-block-image,.sf-site .sf-tidy figure{max-width:100%} /* 暗いデザインでも、記事の部品の文字が背景に溶けないように */ .sf-site .sf-article :is(.sf-article-meta,.sf-share,.sf-article-pn a,.sf-article-rel h2,.sf-article-tags){color:var(--sf-ink)} .sf-site .sf-article .sf-article-rel h2{-webkit-text-stroke:0;text-shadow:none;transform:none} .sf-footer-links a.sf-footer-sub{padding-left:1.1em;font-size:.92em;opacity:.75;position:relative}.sf-footer-links a.sf-footer-sub::before{content:"–";position:absolute;left:0;opacity:.6} .sf-site .sf-tidy :is(p,div,section,blockquote).has-background{margin:0 0 1.3em} .sf-site .sf-tidy .has-background>:last-child{margin-bottom:0} .sf-site .sf-tidy .wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0} .sf-site .sf-tidy .wp-block-button__link.sf-btn{text-decoration:none!important;margin:0} .sf-site .sf-tidy{text-align:left} .sf-site .sf-tidy :is(h1,h2,h3,h4,h5,h6){display:block!important;text-align:left!important;width:auto!important;margin-left:0!important;margin-right:0!important} .sf-site .sf-tidy :is(h1,h2,h3,h4,h5,h6)::before,.sf-site .sf-tidy :is(h1,h2,h3,h4,h5,h6)::after{display:none!important} .sf-site .sf-tidy table{width:100%!important;margin-left:0!important;margin-right:0!important} .sf-site .sf-tidy :is(p,ul,ol,blockquote:not(.wp-block-pullquote blockquote)){text-align:left} .sf-site .sf-tidy .has-text-align-center{text-align:center!important}.sf-site .sf-tidy .has-text-align-right{text-align:right!important} .sf-site .sf-richtext .sf-rich,.sf-site .sf-richtext .sf-rich-title{width:100%;box-sizing:border-box;text-align:left} .sf-site .sf-tidy .wp-block-pullquote p,.sf-site .sf-tidy .wp-block-pullquote cite{text-align:center!important} .sf-site .sf-pc-more{color:color-mix(in srgb,var(--sf-accent) 72%,var(--sf-ink))} /* ===================== 4.3：便利なパーツ・3D・ゲーム ===================== */ .sf-ph{display:grid;place-items:center;width:100%;height:100%;min-height:120px;background:linear-gradient(135deg,color-mix(in srgb,var(--sf-accent) calc(22% + var(--i,0) * 7%),var(--sf-bg)),color-mix(in srgb,var(--sf-accent2) 40%,var(--sf-bg)));color:#fff} .sf-ph b{font-size:clamp(18px,3vw,30px);font-weight:900;text-shadow:0 2px 12px #0003} .sf-play-note{text-align:center;font-size:12.5px;opacity:.65;margin:14px 0 0} /* 写真ギャラリー */ .sf-pgrid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px;margin-top:32px} .sf-photo{margin:0;position:relative;overflow:hidden;border-radius:calc(var(--sf-radius) * .6);background:color-mix(in srgb,var(--sf-ink) 6%,transparent)} .sf-photo a{display:block;height:100%;cursor:zoom-in} .sf-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s} .sf-photo:hover img{transform:scale(1.05)} .sf-photo figcaption{pointer-events:none;position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,#0009);opacity:0;transition:opacity .3s} .sf-photo:hover figcaption,.sf-photo:focus-within figcaption{opacity:1} .sf-ph-grid .sf-photo{aspect-ratio:1} .sf-ph-masonry{display:block;columns:var(--cols,3);column-gap:12px}.sf-ph-masonry .sf-photo{break-inside:avoid;margin-bottom:12px}.sf-ph-masonry img{height:auto} .sf-ph-wide{grid-auto-rows:clamp(120px,16vw,200px)}.sf-ph-wide .sf-photo:first-child{grid-column:span 2;grid-row:span 2} .sf-ph-film{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}.sf-ph-film .sf-photo{flex:0 0 min(70%,340px);aspect-ratio:4/3;scroll-snap-align:start} @media (max-width:700px){.sf-pgrid{--cols:2!important}.sf-ph-masonry{columns:2}} /* ライトボックス */ .sf-lb{position:fixed;inset:0;z-index:99990;background:#0b0b10ee;display:none;align-items:center;justify-content:center;padding:56px 64px} .sf-lb.is-open{display:flex} html.sf-lb-lock{overflow:hidden} .sf-lb figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px} .sf-lb img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:8px;box-shadow:0 30px 80px #000a} .sf-lb figcaption{color:#fff;font-size:14px;text-align:center} .sf-lb button{position:absolute;background:#ffffff1f;color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer;display:grid;place-items:center} .sf-lb button:hover,.sf-lb button:focus-visible{background:#ffffff40} .sf-lb-x{top:14px;right:14px}.sf-lb-p{left:12px;top:50%;translate:0 -50%}.sf-lb-n{right:12px;top:50%;translate:0 -50%} .sf-lb.is-single .sf-lb-p,.sf-lb.is-single .sf-lb-n,.sf-lb.is-single .sf-lb-count{display:none} .sf-lb-count{position:absolute;top:24px;left:24px;color:#fffb;font-size:13px} @media (max-width:600px){.sf-lb{padding:56px 8px}.sf-lb-p,.sf-lb-n{top:auto!important;bottom:12px;translate:none!important}} /* スライダー */ .sf-slides{position:relative;margin-top:32px;border-radius:var(--sf-radius);overflow:hidden;aspect-ratio:16/7;background:color-mix(in srgb,var(--sf-ink) 8%,transparent)} .sf-sl-track{position:absolute;inset:0} .sf-sl-slide{position:absolute;inset:0} .sf-sl-slide img,.sf-sl-slide .sf-ph{width:100%;height:100%;object-fit:cover;display:block} .sf-sl-slide .sf-ph{min-height:0} .sf-sl-slide{opacity:0;transition:opacity .9s,transform .8s cubic-bezier(.6,.05,.2,1);pointer-events:none}.sf-sl-slide.is-on{opacity:1;pointer-events:auto} .sf-sllook-slide .sf-sl-slide{opacity:1;transform:translateX(calc((var(--k,0) - var(--i,0)) * 100%))} .sf-sllook-ken .sf-sl-slide img{transition:transform 7s linear;transform:scale(1)}.sf-sllook-ken .sf-sl-slide.is-on img{transform:scale(1.12)} .sf-sl-cap{position:absolute;left:0;right:0;bottom:0;padding:48px clamp(18px,4vw,48px) clamp(18px,3vw,36px);color:#fff;background:linear-gradient(transparent,#000a)} .sf-sl-cap strong{display:block;font-size:clamp(18px,2.4vw,30px);font-family:var(--sf-font-head)} .sf-sl-cap p{margin:.3em 0 0;font-size:14px;max-width:640px} .sf-sl-cap .sf-btn{margin-top:12px} .sf-sl-prev,.sf-sl-next,.sf-sl-pause{position:absolute;z-index:2;border:0;background:#0006;color:#fff;border-radius:50%;width:44px;height:44px;font-size:24px;cursor:pointer;display:grid;place-items:center} .sf-sl-prev{left:12px;top:50%;translate:0 -50%}.sf-sl-next{right:12px;top:50%;translate:0 -50%}.sf-sl-pause{right:12px;top:12px;width:34px;height:34px;font-size:12px} .sf-sl-dots{position:absolute;z-index:2;bottom:12px;right:16px;display:flex;gap:6px} .sf-sl-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer} .sf-sl-dots button[aria-selected="true"]{background:#fff} @media (max-width:700px){.sf-slides{aspect-ratio:4/3}.sf-sl-prev,.sf-sl-next{width:36px;height:36px}} /* タブ */ .sf-tabbox{margin-top:32px} .sf-tabs-list{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-tabs-list button{font:inherit;font-weight:700;background:none;border:0;padding:12px 18px;color:inherit;opacity:.6;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px} .sf-tabs-list button[aria-selected="true"]{opacity:1;border-color:var(--sf-accent);color:var(--sf-accent)} .sf-tabs-panel{padding:26px 4px;animation:sf-fadein .4s} .sf-tabs-panel.has-img{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center} .sf-tabs-panel img{width:100%;border-radius:calc(var(--sf-radius) * .6)} .sf-tabs-panel p{margin:0 0 1em} @keyframes sf-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (max-width:700px){.sf-tabs-panel.has-img{grid-template-columns:1fr}.sf-tabs-list{flex-wrap:nowrap;overflow-x:auto}.sf-tabs-list button{white-space:nowrap}} /* 表 */ .sf-tablewrap{margin-top:28px;overflow-x:auto} .sf-tbl{width:100%;border-collapse:collapse;font-size:15px} .sf-tbl :is(th,td){padding:14px 16px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-tbl thead th{font-size:13px;letter-spacing:.04em;background:color-mix(in srgb,var(--sf-accent) 10%,transparent);border-bottom:2px solid var(--sf-accent)} .sf-tb-stripe tbody tr:nth-child(odd){background:color-mix(in srgb,var(--sf-ink) 4%,transparent)} @media (max-width:640px){.sf-tb-card thead{display:none}.sf-tb-card tr{display:block;border:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);border-radius:12px;margin-bottom:12px;overflow:hidden}.sf-tb-card :is(th,td){display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 8%,transparent)}.sf-tb-card :is(th,td)::before{content:attr(data-label);font-weight:700;opacity:.6;font-size:12px}} /* 営業時間 */ .sf-hourbox{margin-top:28px;max-width:560px} .sf-hours-now{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:8px 16px;border-radius:99px;background:color-mix(in srgb,var(--sf-ink) 6%,transparent);margin:0 0 14px} .sf-hours-now i{width:10px;height:10px;border-radius:50%;background:#aaa} .sf-hours-now[data-st="on"]{background:#e3f6ea;color:#17683c}.sf-hours-now[data-st="on"] i{background:#1fae5b;box-shadow:0 0 0 4px #1fae5b33;animation:sf-pulse 1.6s infinite} .sf-hours-now[data-st="soon"]{background:#fff4dc;color:#7a5a12}.sf-hours-now[data-st="soon"] i{background:#e0a32e} .sf-hours-now[data-st="off"]{background:#fde8e8;color:#9b2c2c}.sf-hours-now[data-st="off"] i{background:#d4453b} @keyframes sf-pulse{50%{box-shadow:0 0 0 8px #1fae5b00}} .sf-hourbox dl{margin:0;border-top:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-hourbox dl>div{display:flex;justify-content:space-between;gap:16px;padding:12px 10px;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 12%,transparent)} .sf-hourbox dt{font-weight:700}.sf-hourbox dd{margin:0} .sf-hourbox .is-today{background:color-mix(in srgb,var(--sf-accent) 10%,transparent);border-radius:8px} .sf-hourbox .is-today dt::after{content:"今日";font-size:11px;background:var(--sf-accent);color:#fff;border-radius:99px;padding:1px 8px;margin-left:8px;vertical-align:2px} /* 営業日カレンダー */ .sf-cal{margin-top:28px} .sf-cal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} .sf-cal-m{width:100%;border-collapse:separate;border-spacing:4px;text-align:center;font-size:14px} .sf-cal-m caption{font-weight:800;font-size:17px;margin-bottom:6px;font-family:var(--sf-font-head)} .sf-cal-m th{font-size:12px;opacity:.7;font-weight:700}.sf-cal-m .w0{color:#d4453b}.sf-cal-m .w6{color:#2a78d6} .sf-cal-m td{height:44px;border-radius:10px;vertical-align:middle;position:relative} .sf-cal-m td span{display:block;font-weight:600}.sf-cal-m td small{display:block;font-size:10px;line-height:1} .sf-cal-m td.is-off{background:color-mix(in srgb,#d4453b 14%,transparent);color:#b3261e} .sf-cal-m td.is-today{outline:2px solid var(--sf-accent);outline-offset:-2px} .sf-cal-legend{font-size:12.5px;opacity:.8;display:flex;gap:14px;align-items:center;margin-top:12px} .sf-cal-legend span{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px} .sf-cal-legend .is-off{background:color-mix(in srgb,#d4453b 30%,transparent)}.sf-cal-legend .is-today{outline:2px solid var(--sf-accent);outline-offset:-2px} /* グラフ */ .sf-barset{margin-top:30px;display:grid;gap:16px} .sf-bars-bar .sf-bar{display:grid;grid-template-columns:minmax(90px,200px) 1fr auto;gap:14px;align-items:center} .sf-bar-l{font-weight:700;font-size:14px}.sf-barset strong{font-weight:800;font-variant-numeric:tabular-nums} .sf-bar-t{height:14px;border-radius:99px;background:color-mix(in srgb,var(--sf-ink) 8%,transparent);overflow:hidden} .sf-bar-t i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--sf-accent),var(--sf-accent2));transition:width 1.4s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .12s)} .sf-barset.is-in .sf-bar-t i{width:calc(var(--p) * 1%)} .sf-bars-ring{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));text-align:center} .sf-bars-ring .sf-bar{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px} .sf-bars-ring svg{width:130px;height:130px;transform:rotate(-90deg)} .sf-bars-ring circle{fill:none;stroke:color-mix(in srgb,var(--sf-ink) 8%,transparent);stroke-width:12} .sf-bars-ring .sf-ring-v{stroke:var(--sf-accent);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * .15s)} .sf-bars-ring.is-in .sf-ring-v{stroke-dasharray:var(--p) 100} .sf-bars-ring strong{position:absolute;top:44px;font-size:22px} .sf-bars-ring span{font-weight:700;font-size:14px} @media (max-width:600px){.sf-bars-bar .sf-bar{grid-template-columns:1fr auto}.sf-bar-t{grid-column:1/-1;grid-row:2}} /* QR */ .sf-qrbox{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:28px} .sf-qr-code{width:200px;height:200px;background:#fff;border-radius:14px;padding:8px;box-shadow:0 10px 30px -12px #0004} .sf-qr-code svg{width:100%;height:100%;display:block} .sf-qr-side{flex:1;min-width:220px}.sf-qr-url{font-size:12.5px;opacity:.7;word-break:break-all} /* シェア */ .sf-share-part{margin:26px 0 0;padding:0;border:0;max-width:none} /* 音声 */ .sf-player{margin-top:30px;border-radius:var(--sf-radius);background:color-mix(in srgb,var(--sf-ink) 5%,var(--sf-bg));border:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);padding:20px;max-width:760px} .sf-au-main{display:flex;gap:20px;align-items:center} .sf-au-art{flex:0 0 120px;height:120px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent2));display:grid;place-items:center;color:#fff;font-size:44px} .sf-au-art img{width:100%;height:100%;object-fit:cover} .sf-player.is-playing .sf-au-art{animation:sf-beat 1.2s ease-in-out infinite} @keyframes sf-beat{50%{transform:scale(1.03)}} .sf-au-info{flex:1;min-width:0} .sf-au-title{display:block;font-size:18px}.sf-au-artist{opacity:.7} .sf-au-viz{display:block;width:100%;height:42px;margin:8px 0} .sf-au-ctrl{display:flex;align-items:center;gap:8px} .sf-au-ctrl button{border:0;background:var(--sf-accent);color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:14px;flex:0 0 auto} .sf-au-ctrl .sf-au-prev,.sf-au-ctrl .sf-au-next{background:color-mix(in srgb,var(--sf-ink) 10%,transparent);color:inherit;width:34px;height:34px} .sf-au-seek{flex:1;accent-color:var(--sf-accent);min-width:60px} .sf-au-time{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;white-space:nowrap} .sf-au-list{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);counter-reset:au} .sf-au-list button{display:flex;width:100%;gap:10px;align-items:baseline;background:none;border:0;padding:10px 6px;font:inherit;color:inherit;text-align:left;cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 8%,transparent);counter-increment:au} .sf-au-list button::before{content:counter(au);opacity:.5;width:1.6em;font-size:12px} .sf-au-list button[aria-current]{color:var(--sf-accent);font-weight:700} .sf-au-list small{opacity:.6;margin-left:auto} @media (max-width:560px){.sf-au-main{flex-direction:column;align-items:stretch}.sf-au-art{flex-basis:auto;height:160px}} /* クーポン */ .sf-ticket{display:flex;margin-top:28px;max-width:720px;border-radius:18px;overflow:hidden;background:linear-gradient(120deg,var(--sf-accent),var(--sf-accent2));color:#fff;position:relative;box-shadow:0 20px 40px -24px color-mix(in srgb,var(--sf-accent) 70%,#000)} .sf-cp-main{flex:1;padding:26px 30px}.sf-cp-main small{letter-spacing:.2em;opacity:.85;font-weight:700} .sf-cp-main strong{display:block;font-size:clamp(28px,4vw,44px);line-height:1.2;font-family:var(--sf-font-head);margin:4px 0} .sf-cp-main p{margin:6px 0 0;font-size:13.5px;opacity:.92} .sf-cp-side{flex:0 0 220px;padding:24px 20px;background:#ffffff1f;border-left:3px dashed #ffffffa0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center} .sf-cp-code{font:800 20px/1.2 ui-monospace,monospace;letter-spacing:.08em;background:#fff;color:var(--sf-ink);padding:8px 14px;border-radius:8px} .sf-cp-copy{border:2px solid #fff;background:transparent;color:#fff;border-radius:99px;padding:6px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer} .sf-cp-until{font-size:12px;opacity:.9} .sf-ticket.is-ended{filter:grayscale(1);opacity:.6} @media (max-width:560px){.sf-ticket{flex-direction:column}.sf-cp-side{flex-basis:auto;border-left:0;border-top:3px dashed #ffffffa0}} /* めくれるカード */ .sf-flips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;margin-top:30px;perspective:1200px} .sf-flip{border:0;padding:0;background:none;font:inherit;color:inherit;cursor:pointer;aspect-ratio:3/4;text-align:left} .sf-flip-in{position:relative;display:block;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d} .sf-flip[aria-pressed="true"] .sf-flip-in{transform:rotateY(180deg)} @media (hover:hover){.sf-flip:hover .sf-flip-in{transform:rotateY(180deg)}} .sf-flip-front,.sf-flip-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--sf-radius);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end} .sf-flip-front img,.sf-flip-front .sf-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sf-flip-front b{position:relative;padding:40px 18px 16px;color:#fff;background:linear-gradient(transparent,#0009);font-size:18px} .sf-flip-back{transform:rotateY(180deg);background:linear-gradient(150deg,var(--sf-accent),var(--sf-accent2));color:#fff;padding:22px;justify-content:center;gap:10px} .sf-flip-back b{font-size:19px}.sf-flip-back span{font-size:14px;line-height:1.8} /* 3D キューブ */ .sf-cube-stage{height:clamp(260px,34vw,380px);display:grid;place-items:center;perspective:1000px;margin-top:24px;cursor:grab;touch-action:pan-y;outline:none} .sf-cube-stage:active{cursor:grabbing} .sf-cube3{--z:clamp(90px,11vw,130px);width:calc(var(--z) * 2);height:calc(var(--z) * 2);position:relative;transform-style:preserve-3d} .sf-cube-f{position:absolute;inset:0;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 2px #fff6;display:grid;place-items:end center;backface-visibility:visible} .sf-cube-f img,.sf-cube-f .sf-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;min-height:0} .sf-cube-f b{position:relative;margin-bottom:12px;background:#000a;color:#fff;padding:4px 12px;border-radius:99px;font-size:13px} .sf-cube-front{transform:translateZ(var(--z))}.sf-cube-back{transform:rotateY(180deg) translateZ(var(--z))}.sf-cube-right{transform:rotateY(90deg) translateZ(var(--z))}.sf-cube-left{transform:rotateY(-90deg) translateZ(var(--z))}.sf-cube-top{transform:rotateX(90deg) translateZ(var(--z))}.sf-cube-bottom{transform:rotateX(-90deg) translateZ(var(--z))} /* 3D 回転ギャラリー */ .sf-c3d{height:clamp(300px,36vw,440px);perspective:1400px;display:grid;place-items:center;margin-top:24px;cursor:grab;touch-action:pan-y;outline:none;overflow:hidden} .sf-c3d-ring{--w:240px;position:relative;width:var(--w);height:calc(var(--w) * 1.25);transform-style:preserve-3d} .sf-c3d-item{position:absolute;inset:0;transform:rotateY(calc(360deg / var(--n) * var(--k))) translateZ(var(--r,300px));border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -18px #0007;background:#fff} .sf-c3d-item img,.sf-c3d-item .sf-ph{width:100%;height:100%;object-fit:cover;display:block;min-height:0;pointer-events:none} .sf-c3d-item span{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;color:#fff;font-size:13px;font-weight:700;background:linear-gradient(transparent,#000a)} /* 粒子の文字 */ .sf-ptcl{position:relative;margin-top:10px} .sf-ptcl canvas{display:block;width:100%;height:280px;touch-action:pan-y;cursor:crosshair} .sf-particles-text{text-align:center;margin:0} .sf-ptcl.is-on .sf-particles-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .sf-ptcl:not(.is-on) canvas{display:none} /* 3D 立体文字・3D 写真の回廊 */ .sf-text3d-stage{position:relative;height:clamp(240px,30vw,380px);margin-top:10px} .sf-text3d-stage canvas{position:absolute;inset:0;width:100%;height:100%} .sf-text3d-fallback{text-align:center;padding-top:80px} .sf-text3d-stage.sf-3d-on .sf-text3d-fallback{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0} .sf-gallery3d-stage{position:relative;height:clamp(360px,48vw,560px);margin-top:26px;border-radius:var(--sf-radius);overflow:hidden;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--sf-accent) 18%,var(--sf-bg)),var(--sf-bg));touch-action:pan-y;cursor:grab} .sf-gallery3d-stage canvas{position:absolute;inset:0;width:100%;height:100%} .sf-gallery3d-fallback{list-style:none;padding:20px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .sf-gallery3d-fallback img,.sf-gallery3d-fallback .sf-ph{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;min-height:0} .sf-gallery3d-stage.sf-3d-on .sf-gallery3d-fallback{display:none} /* ゲーム共通 */ .sf-game{margin-top:28px;text-align:center;position:relative} .sf-game-bar{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center;font-size:14px;margin-bottom:14px} .sf-game-bar b{font-variant-numeric:tabular-nums;font-size:18px} .sf-game-bar button,.sf-game-reset,.sf-pz-hint{font:inherit;font-size:13px;border:1px solid color-mix(in srgb,var(--sf-ink) 20%,transparent);background:var(--sf-bg);color:inherit;border-radius:99px;padding:6px 14px;cursor:pointer} .sf-game-result{margin-top:20px;animation:sf-pop .5s cubic-bezier(.2,1.6,.4,1)} @keyframes sf-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} .sf-res-card{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:24px 30px;border-radius:var(--sf-radius);background:var(--sf-bg);border:2px solid var(--sf-accent);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--sf-accent) 70%,#000);max-width:min(100%,460px)} .sf-res-card img{max-width:180px;max-height:180px;border-radius:12px} .sf-res-title{font-size:clamp(24px,3.4vw,34px);font-family:var(--sf-font-head);color:var(--sf-accent);line-height:1.3} .sf-res-card p{margin:0}.sf-res-note{font-size:12.5px;opacity:.7} .sf-res-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;background:color-mix(in srgb,var(--sf-accent) 8%,transparent);padding:8px 12px;border-radius:10px} .sf-res-code code{font:800 18px ui-monospace,monospace;letter-spacing:.06em} .sf-res-copy{border:0;background:var(--sf-accent);color:#fff;border-radius:99px;padding:4px 12px;font:inherit;font-size:12px;cursor:pointer} .sf-cf{position:fixed;width:9px;height:14px;border-radius:2px;z-index:99999;pointer-events:none;animation:sf-cf 1.6s cubic-bezier(.2,.6,.4,1) forwards} @keyframes sf-cf{to{transform:translate(var(--dx),calc(var(--dy) + 420px)) rotate(var(--r));opacity:0}} /* おみくじ・ガチャ */ .sf-gacha-machine{position:relative;width:180px;height:200px;margin:0 auto 18px} .sf-gacha-body{position:absolute;inset:0;border-radius:18px 18px 12px 12px} .sf-gacha-omikuji .sf-gacha-body{background:repeating-linear-gradient(90deg,#b42318 0 22px,#c93a2d 22px 44px);border:6px solid #3a1d10;box-shadow:inset 0 -18px 0 #0002} .sf-gacha-omikuji .sf-gacha-body::after{content:"御\A神\A籤";white-space:pre;position:absolute;left:50%;top:50%;translate:-50% -50%;background:#fff8e1;color:#3a1d10;font:900 22px/1.15 serif;padding:10px 8px;border-radius:4px} .sf-gacha-capsule .sf-gacha-body{border-radius:50% 50% 16px 16px;background:radial-gradient(circle at 35% 30%,#fff 0 6%,transparent 7%),radial-gradient(circle at 30% 35%,#fff9,#fff2 60%),conic-gradient(from 0deg,#ffd84a,#ff7eb6,#6ecbff,#9be38a,#ffd84a);border:6px solid var(--sf-ink)} .sf-gacha-box .sf-gacha-body{background:linear-gradient(var(--sf-accent),var(--sf-accent2));border-radius:14px;border:6px solid var(--sf-ink)} .sf-gacha-box .sf-gacha-body::after{content:"くじ";position:absolute;left:50%;top:50%;translate:-50% -50%;color:#fff;font:900 30px var(--sf-font-head)} .sf-gacha-ball{position:absolute;left:50%;bottom:-14px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:linear-gradient(#ff7eb6 50%,#fff 50%);border:3px solid var(--sf-ink);opacity:0} .sf-gacha-omikuji .sf-gacha-ball{width:14px;height:60px;margin-left:-7px;border-radius:3px;background:#fff8e1} .sf-gacha.is-drawing .sf-gacha-body{animation:sf-shake .12s infinite} .sf-gacha.is-open .sf-gacha-ball{animation:sf-drop .8s cubic-bezier(.3,1.4,.5,1) forwards} @keyframes sf-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg) translateX(-3px)}75%{transform:rotate(6deg) translateX(3px)}} @keyframes sf-drop{0%{opacity:1;transform:translateY(-60px)}100%{opacity:1;transform:translateY(24px)}} /* ルーレット */ .sf-rl-wrap{position:relative;width:min(88vw,380px);margin:0 auto 18px} .sf-rl-wheel{width:100%;height:auto;display:block;border-radius:50%;box-shadow:0 20px 50px -20px #0007,0 0 0 8px var(--sf-ink)} .sf-rl-pin{position:absolute;top:-18px;left:50%;translate:-50% 0;font-size:34px;color:var(--sf-ink);filter:drop-shadow(0 3px 2px #0005)} /* スクラッチ */ .sf-sc-card{position:relative;width:min(92vw,420px);aspect-ratio:16/9;margin:0 auto;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--sf-accent) 14%,var(--sf-bg)),var(--sf-bg));border:3px solid var(--sf-accent)} .sf-sc-prize{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px} .sf-sc-prize strong{font-size:clamp(22px,3.4vw,32px);font-family:var(--sf-font-head);color:var(--sf-accent)} .sf-sc-prize img{max-height:55%;max-width:60%;object-fit:contain} .sf-sc-cover{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none;transition:opacity .6s} .sf-sc-cover.is-gone{opacity:0;pointer-events:none} /* クイズ */ .sf-quiz-body{max-width:640px;margin:0 auto} .sf-quiz-no{font-size:13px;opacity:.7;margin:0} .sf-quiz-body>img{max-width:100%;max-height:260px;border-radius:12px;margin:10px 0} .sf-quiz-q{font-size:clamp(19px,2.4vw,26px);margin:8px 0 18px} .sf-quiz-ch{display:grid;gap:10px} .sf-quiz-ch button{font:inherit;font-weight:700;padding:14px 18px;border-radius:14px;border:2px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);background:var(--sf-bg);color:inherit;cursor:pointer;text-align:left;transition:transform .15s,border-color .15s} .sf-quiz-ch button:hover:not(:disabled){border-color:var(--sf-accent);transform:translateY(-2px)} .sf-quiz-ch .is-ok{border-color:#1fae5b;background:#e3f6ea;color:#17683c}.sf-quiz-ch .is-ng{border-color:#d4453b;background:#fde8e8;color:#9b2c2c} .sf-quiz-ex{margin-top:14px}.sf-quiz-ex .is-ok b{color:#17683c}.sf-quiz-ex .is-ng b{color:#b3261e} /* 神経衰弱 */ .sf-mm-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px;max-width:560px;margin:0 auto;perspective:900px} .sf-mm-card{aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;font:inherit} .sf-mm-in{position:relative;display:block;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d} .sf-mm-card.is-open .sf-mm-in,.sf-mm-card.is-got .sf-mm-in{transform:rotateY(180deg)} .sf-mm-back,.sf-mm-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;display:grid;place-items:center;overflow:hidden} .sf-mm-back{background:repeating-linear-gradient(45deg,var(--sf-accent) 0 10px,color-mix(in srgb,var(--sf-accent) 80%,#fff) 10px 20px);color:#fff;font-size:28px;font-weight:900;box-shadow:inset 0 0 0 3px #fff5} .sf-mm-face{transform:rotateY(180deg);background:var(--sf-bg);border:2px solid var(--sf-accent)} .sf-mm-face b{font-size:clamp(28px,6vw,44px)}.sf-mm-face img{width:100%;height:100%;object-fit:cover} .sf-mm-card.is-got .sf-mm-face{border-color:#1fae5b;box-shadow:0 0 0 3px #1fae5b55} /* スライドパズル */ .sf-pz-board{--n:3;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px;width:min(92vw,420px);aspect-ratio:1;margin:0 auto;padding:4px;background:var(--sf-ink);border-radius:14px} .sf-pz-tile{border:0;border-radius:8px;cursor:pointer;background-color:var(--sf-accent);color:#fff;font:900 clamp(18px,4vw,30px) var(--sf-font-head);background-size:calc(var(--n) * 100%) calc(var(--n) * 100%);background-position:calc(var(--x) * 100% / (var(--n) - 1)) calc(var(--y) * 100% / (var(--n) - 1));transition:transform .12s} .sf-pz-tile:hover{transform:scale(.97)} .sf-pz-empty{border-radius:8px;background:#0003} .sf-puzzle.is-hint .sf-pz-board::after{content:"";position:absolute;inset:4px;border-radius:10px;background:var(--pz-img,none) center/cover,linear-gradient(135deg,var(--sf-accent),var(--sf-accent2));opacity:.9;pointer-events:none} .sf-puzzle.is-solved .sf-pz-board{gap:0;padding:0;background:none} .sf-puzzle.is-solved .sf-pz-tile,.sf-puzzle.is-solved .sf-pz-empty{border-radius:0} /* キャッチゲーム */ .sf-ct-field{position:relative;width:100%;max-width:720px;aspect-ratio:16/10;margin:0 auto;border-radius:18px;overflow:hidden;background:linear-gradient(color-mix(in srgb,var(--sf-accent) 12%,var(--sf-bg)),var(--sf-bg));border:2px solid color-mix(in srgb,var(--sf-accent) 40%,transparent);touch-action:none} .sf-ct-field canvas{position:absolute;inset:0;width:100%;height:100%} .sf-ct-field .sf-game-go{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0} .sf-catch.is-bad .sf-ct-field{animation:sf-shake .2s 2} .sf-catch:focus{outline:none} /* じゃんけん */ .sf-jk-stage{display:flex;flex-direction:column;align-items:center;gap:6px} .sf-jk-cpu{position:relative;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--sf-accent) 12%,var(--sf-bg));display:grid;place-items:center;border:3px solid var(--sf-accent)} .sf-jk-cpu img{width:100%;height:100%;object-fit:cover;border-radius:50%} .sf-jk-face{font-size:70px} .sf-jk-hand{position:absolute;right:-26px;bottom:-6px;font-size:52px;background:var(--sf-bg);border-radius:50%;width:74px;height:74px;display:grid;place-items:center;box-shadow:0 8px 20px -8px #0006} .sf-janken.is-shaking .sf-jk-hand{animation:sf-shake .2s infinite} .sf-jk-msg{font-weight:800;font-size:18px;min-height:1.6em;margin:18px 0 6px} .sf-janken[data-r="win"] .sf-jk-msg{color:#17683c}.sf-janken[data-r="lose"] .sf-jk-msg{color:#b3261e} .sf-jk-btns{display:flex;gap:12px;justify-content:center} .sf-jk-btns button{font-size:40px;width:92px;height:92px;border-radius:22px;border:2px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);background:var(--sf-bg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .15s} .sf-jk-btns button small{font-size:12px;font-weight:700;color:var(--sf-ink)} .sf-jk-btns button:hover{transform:translateY(-4px);border-color:var(--sf-accent)} .sf-jk-score{font-size:14px;opacity:.8} @media (prefers-reduced-motion:reduce){html:not(:has(.sf-motion-force)) :is(.sf-flip-in,.sf-mm-in,.sf-sl-slide,.sf-bar-t i,.sf-ring-v){transition-duration:.01s!important}} /* 音楽プレイヤー（波形つき） */ .sf-mplayer{margin-top:30px;border-radius:calc(var(--sf-radius) * 1.1);padding:clamp(18px,3vw,30px);background:color-mix(in srgb,var(--sf-ink) 4%,var(--sf-bg));border:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent);box-shadow:0 30px 60px -40px color-mix(in srgb,var(--sf-accent) 60%,#000);max-width:980px;position:relative;overflow:hidden} .sf-mu-head{display:flex;gap:clamp(18px,3vw,34px);align-items:center} .sf-mu-art{position:relative;flex:0 0 clamp(150px,20vw,210px);aspect-ratio:1} .sf-mu-ring{position:absolute;inset:-18%;width:136%;height:136%;pointer-events:none} .sf-mu-disc{position:absolute;inset:12%;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent2));display:grid;place-items:center;color:#fff;font-size:54px;box-shadow:0 18px 40px -16px #0008;transition:border-radius .6s} .sf-mu-disc img{width:100%;height:100%;object-fit:cover} .sf-mu-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:62px;height:62px;border-radius:50%;border:0;background:#fffe;color:var(--sf-ink);font-size:22px;cursor:pointer;box-shadow:0 10px 30px -8px #0009;display:grid;place-items:center;transition:transform .2s,opacity .3s} .sf-mu-play:hover{transform:scale(1.08)} .sf-mplayer.is-playing .sf-mu-play{opacity:0}.sf-mplayer.is-playing .sf-mu-art:hover .sf-mu-play,.sf-mplayer.is-playing .sf-mu-play:focus-visible{opacity:1} .sf-mu-meta{flex:1;min-width:0} .sf-mu-now{letter-spacing:.22em;font-size:11px;font-weight:800;color:var(--sf-accent)} .sf-mplayer.is-playing .sf-mu-now::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sf-accent);margin-right:6px;animation:sf-pulse 1.2s infinite;vertical-align:1px} .sf-mu-title{display:block;font-size:clamp(19px,2.4vw,27px);line-height:1.35;font-family:var(--sf-font-head);margin-top:2px;overflow-wrap:anywhere} .sf-mu-artist{display:block;opacity:.7;font-size:14px} .sf-mu-wave{position:relative;height:clamp(64px,8vw,92px);margin:14px 0 6px;cursor:pointer;outline:none;border-radius:8px} .sf-mu-wave:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-accent) 50%,transparent)} .sf-mu-wave canvas{width:100%;height:100%;display:block} .sf-mu-tip{position:absolute;top:-8px;translate:-50% -100%;background:var(--sf-ink);color:var(--sf-bg);font-size:11px;padding:2px 7px;border-radius:6px;pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums} .sf-mu-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .sf-mu-cur,.sf-mu-dur{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75;min-width:3em} .sf-mu-dur{text-align:right} .sf-mu-ctrl{display:flex;align-items:center;gap:6px;margin:0 auto} .sf-mu-ctrl button{border:0;background:none;color:inherit;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;display:grid;place-items:center;opacity:.8} .sf-mu-ctrl button:not(.sf-mu-play2):hover{opacity:1;background:color-mix(in srgb,var(--sf-ink) 8%,transparent)} .sf-mu-ctrl .sf-mu-play2:hover{filter:brightness(1.08);transform:scale(1.05)} .sf-mu-ctrl .sf-mu-play2{width:48px;height:48px;background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent2));color:#fff;opacity:1;font-size:15px;box-shadow:0 10px 24px -10px var(--sf-accent)} .sf-mu-ctrl [aria-pressed="true"]{color:var(--sf-accent);opacity:1} .sf-mu-vol{display:flex;align-items:center;gap:4px;font-size:13px}.sf-mu-vol input{width:80px;accent-color:var(--sf-accent)} .sf-mu-note{font-size:12.5px;opacity:.7;margin:8px 0 0} .sf-mu-list{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid color-mix(in srgb,var(--sf-ink) 10%,transparent)} .sf-mu-list button{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid color-mix(in srgb,var(--sf-ink) 8%,transparent);padding:10px 8px;font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:8px} .sf-mu-list button:hover{background:color-mix(in srgb,var(--sf-accent) 7%,transparent)} .sf-mu-list img,.sf-mu-list i{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 40px;background:linear-gradient(135deg,var(--sf-accent),var(--sf-accent2));color:#fff;display:grid;place-items:center;font-style:normal} .sf-mu-no{width:1.6em;font-size:12px;opacity:.5;text-align:right} .sf-mu-lt{flex:1;min-width:0}.sf-mu-lt b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sf-mu-lt small{opacity:.6;font-size:12px} .sf-mu-len{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums} .sf-mu-list button[aria-current]{color:var(--sf-accent)}.sf-mu-list button[aria-current] .sf-mu-no{opacity:1} .sf-mu-list button[aria-current] .sf-mu-no::before{content:"▶ ";font-size:9px} /* 見た目：光の輪 */ .sf-mlook-circle .sf-mu-disc{border-radius:50%} .sf-mlook-circle.is-playing .sf-mu-disc{animation:sf-spin 18s linear infinite} @keyframes sf-spin{to{rotate:360deg}} /* 見た目：ネオン */ .sf-mlook-neon{background:radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--sf-accent) 35%,#0b0b14),#0b0b14 60%);color:#f3f2ff;border-color:#ffffff1a;box-shadow:0 30px 70px -30px color-mix(in srgb,var(--sf-accent) 80%,#000),inset 0 0 0 1px #ffffff10} .sf-mlook-neon .sf-mu-title{color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--sf-accent) 80%,transparent)} .sf-mlook-neon .sf-mu-disc{border-radius:50%;box-shadow:0 0 40px color-mix(in srgb,var(--sf-accent) 70%,transparent)} .sf-mlook-neon.is-playing .sf-mu-disc{animation:sf-spin 14s linear infinite} .sf-mlook-neon .sf-mu-tip{background:#fff;color:#111} .sf-mlook-neon .sf-mu-list{border-color:#ffffff1a}.sf-mlook-neon .sf-mu-list button{border-color:#ffffff12} @media (max-width:640px){.sf-mu-head{flex-direction:column;align-items:stretch}.sf-mu-art{flex-basis:auto;width:62%;margin:0 auto 6px}.sf-mu-vol{display:none}.sf-mu-ctrl{margin:0 auto}} /* 4.3.1：写真ギャラリー「きれいに並べる」（写真の形そのまま、行の高さをそろえて隙間なく） */ .sf-ph-justified{display:flex;flex-wrap:wrap;gap:8px} .sf-ph-justified .sf-photo{--ar:1.5;flex:calc(var(--ar) * 100) 1 calc(var(--ar) * clamp(150px,18vw,230px));aspect-ratio:var(--ar);min-width:0;border-radius:calc(var(--sf-radius) * .4)} .sf-ph-justified::after{content:"";flex:1000 1 0} @media (max-width:600px){.sf-ph-justified .sf-photo{flex-basis:calc(var(--ar) * 110px)}} /* ================= 4.4：平安の遊び ================= */ .sf-heian{--wa-red:#b8323a;--wa-gold:#c9a24a;--wa-paper:#fbf6ea;--wa-ink:#2a2230} .sf-heian .sf-game-reset{font:inherit;font-size:13px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit;border-radius:99px;padding:5px 14px;cursor:pointer} .sf-hk-stage{max-width:960px;margin:0 auto} .sf-kai-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px} .sf-kai{appearance:none;border:0;padding:0;background:none;cursor:pointer;aspect-ratio:1/.86;perspective:900px;font:inherit;color:var(--wa-ink)} .sf-kai-in{position:relative;display:block;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d} .sf-kai.is-open .sf-kai-in{transform:rotateY(180deg)} .sf-kai-back,.sf-kai-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;display:flex;flex-direction:column;align-items:center;justify-content:center} .sf-kai-back{background:radial-gradient(circle at 50% 108%,transparent 0 16%,#0000 16.5%),repeating-radial-gradient(circle at 50% 110%,#fff8 0 2px,transparent 2px 13px),linear-gradient(160deg,#fdf3e4,#e9d3b3 60%,#c9a878);box-shadow:inset 0 -6px 12px #7a552d33,0 8px 18px -10px #5a3b1f88;border:2px solid #fff} .sf-kai-back::after{content:"";position:absolute;inset:18% 22% 30%;border-radius:50%;background:radial-gradient(circle,var(--wa-gold) 0 30%,transparent 32%),conic-gradient(from 0deg,#c9a24a33,#b8323a33,#c9a24a33,#6d3f8a33,#c9a24a33);opacity:.8} .sf-kai-face{transform:rotateY(180deg);background:linear-gradient(170deg,#fffdf6,var(--wa-paper));border:2px solid var(--wa-gold);padding:10px 12px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:13px;line-height:1.5;text-align:center;box-shadow:0 8px 18px -10px #5a3b1f88} .sf-kai-face small{font-size:10px;color:var(--wa-red);letter-spacing:.2em;margin-bottom:4px} .sf-kai.is-got .sf-kai-face{background:linear-gradient(170deg,#fff,#fbe9ef);border-color:var(--wa-red);animation:sf-pop .5s} .sf-kai-log{list-style:none;padding:0;margin:18px auto 0;display:grid;gap:6px;max-width:640px;text-align:left} .sf-kai-log li{padding:8px 14px;border-left:3px solid var(--wa-red);background:color-mix(in srgb,var(--wa-gold) 10%,transparent);font-family:"Yu Mincho","Hiragino Mincho ProN",serif;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .sf-kai-log small{opacity:.65} .sf-kt-intro{padding:40px 16px;border:1px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:var(--sf-radius)} .sf-kt-yomi{max-width:560px;margin:0 auto 18px;padding:18px 22px;background:linear-gradient(170deg,#fffdf6,var(--wa-paper));color:var(--wa-ink);border:2px solid var(--wa-gold);border-radius:8px;box-shadow:0 14px 30px -20px #0006} .sf-kt-yomi small{font-size:11px;letter-spacing:.2em;color:var(--wa-red)} .sf-kt-kami{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(18px,2.6vw,26px);min-height:1.6em;margin:6px 0 0;letter-spacing:.08em} .sf-kt-fuda{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .sf-kt-card{width:clamp(78px,11vw,104px);aspect-ratio:52/73;border:3px solid #3b7a3a;border-radius:6px;background:#fffdf4;color:#1f1a14;cursor:pointer;padding:10px 6px;font:500 clamp(12px,1.4vw,15px)/1.6 "Yu Mincho","Hiragino Mincho ProN",serif;writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -8px #0008;transition:transform .15s} .sf-kt-card:hover{transform:translateY(-4px) rotate(-1deg)} .sf-kt-card.is-take{transform:translateY(-30px) rotate(-12deg) scale(1.08);opacity:0;transition:transform .45s,opacity .45s} .sf-kt-card.is-miss{animation:sf-shake .4s;border-color:#c33} .sf-kt-otetsuki{color:#c33;font-weight:800;margin:10px 0 0} @keyframes sf-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} .sf-km-field{position:relative;height:clamp(340px,46vw,480px);border-radius:var(--sf-radius);overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 1px #0001} .sf-km-field canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer} .sf-km-call{position:absolute;left:50%;top:14%;translate:-50%;font:900 clamp(22px,3.6vw,36px) "Yu Mincho","Hiragino Mincho ProN",serif;color:var(--wa-red);margin:0;pointer-events:none;opacity:0} .sf-km-call.is-pop{animation:sf-kmcall .7s ease-out} @keyframes sf-kmcall{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-20px)}} .sf-ht-body{max-width:560px;margin:0 auto;min-height:220px;position:relative} .sf-ht-q{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 6px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif} .sf-ht-box,.sf-ht-part{display:grid;place-items:center;width:clamp(76px,12vw,110px);aspect-ratio:1;font-size:clamp(40px,6vw,64px);border-radius:10px;background:var(--wa-paper);color:var(--wa-ink);border:2px solid var(--wa-gold)} .sf-ht-box{border-style:dashed;color:var(--wa-red)} .sf-ht-plus{font-size:28px;opacity:.6} .sf-ht-ask{font-size:14px;opacity:.75} .sf-ht-ch{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .sf-ht-ch button{font:700 20px "Yu Mincho","Hiragino Mincho ProN",serif;min-width:88px;padding:12px 16px;border-radius:12px;border:2px solid color-mix(in srgb,var(--sf-ink) 16%,transparent);background:var(--sf-bg);color:inherit;cursor:pointer} .sf-ht-ch button:hover:not(:disabled){border-color:var(--sf-accent)} .sf-ht-ch .is-ok{border-color:#1fae5b;background:#e3f6ea;color:#17683c}.sf-ht-ch .is-ng{border-color:#d4453b;background:#fde8e8;color:#9b2c2c} .sf-ht-ans{margin-top:14px}.sf-ht-ans .is-ok b{color:#17683c}.sf-ht-ans .is-ng b{color:#b3261e} .sf-ht-kanji{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:20px} .sf-hentsugi-box .sf-ht-body .sf-game-go{position:static;translate:none;margin-top:70px} .sf-site .sf-km-field .sf-game-go{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;margin:0} /* ================= 4.4：便利・面白いパーツ ================= */ /* 目次 */ .sf-tocnav{margin-top:18px} .sf-tocnav-box{border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:var(--sf-radius);padding:18px 22px;max-width:720px} .sf-al-center .sf-tocnav-box{margin-inline:auto} .sf-toc-list{margin:0;padding-left:1.5em;display:grid;gap:6px;counter-reset:none} .sf-toc-list a{color:inherit;text-decoration:none;border-bottom:1px dashed transparent;transition:color .2s} .sf-toc-list a:hover{border-color:currentColor} .sf-toc-list a.is-on{color:var(--sf-accent);font-weight:700} .sf-tocnav-float.is-floating{position:fixed;right:18px;bottom:18px;z-index:60;margin:0;font-family:var(--sf-font)} .sf-toc-btn{border:0;background:var(--sf-accent);color:#fff;font:700 14px/1 var(--sf-font);padding:13px 18px;border-radius:99px;box-shadow:0 12px 30px -12px #0008;cursor:pointer} .sf-tocnav-float .sf-toc-list{display:none;position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,86vw);max-height:60vh;overflow:auto;background:var(--sf-bg);color:var(--sf-ink);padding:16px 18px 16px 2.2em;border-radius:14px;box-shadow:0 24px 60px -20px #0009} .sf-tocnav-float.is-open .sf-toc-list{display:grid} .sf-tocnav-float:not(.is-floating){display:inline-block} .sf-tocnav-float:not(.is-floating) .sf-toc-list{display:grid;position:static;box-shadow:none} /* チャット */ .sf-chat{max-width:560px;margin:22px auto 0;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:calc(var(--sf-radius) + 4px);overflow:hidden;background:color-mix(in srgb,var(--sf-accent) 4%,var(--sf-bg));text-align:left} .sf-chat-log{height:300px;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth} .sf-chat-msg{display:flex;gap:8px;align-items:flex-end;max-width:88%;animation:sf-pop .35s} .sf-chat-msg p{margin:0;padding:10px 14px;border-radius:16px;line-height:1.6;font-size:14.5px} .sf-chat-msg.is-bot p{background:var(--sf-bg);border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-bottom-left-radius:4px} .sf-chat-msg.is-me{align-self:flex-end} .sf-chat-msg.is-me p{background:var(--sf-accent);color:#fff;border-bottom-right-radius:4px} .sf-chat-msg small{font-size:11px;opacity:.6;display:block;margin:0 0 2px 4px} .sf-chat-av{flex:0 0 32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--sf-accent) 18%,var(--sf-bg));display:grid;place-items:center;overflow:hidden;font-size:16px} .sf-chat-av img{width:100%;height:100%;object-fit:cover} .sf-chat-link{color:var(--sf-accent);font-weight:700;font-size:13px} .sf-chat-dots{display:inline-flex;gap:4px}.sf-chat-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:sf-dot 1s infinite}.sf-chat-dots i:nth-child(2){animation-delay:.15s}.sf-chat-dots i:nth-child(3){animation-delay:.3s} @keyframes sf-dot{50%{opacity:1;transform:translateY(-3px)}} .sf-chat-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid color-mix(in srgb,currentColor 8%,transparent)} .sf-chat-chips button{flex:none;font:inherit;font-size:12.5px;border:1px solid var(--sf-accent);color:var(--sf-accent);background:var(--sf-bg);border-radius:99px;padding:6px 12px;cursor:pointer} .sf-chat-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid color-mix(in srgb,currentColor 8%,transparent);background:var(--sf-bg)} .sf-chat-form input{flex:1;min-width:0;font:inherit;padding:10px 14px;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 20%,transparent);background:transparent;color:inherit} /* 投票 */ .sf-pollbox{max-width:600px;margin:22px auto 0;text-align:left} .sf-pollbox ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .sf-pollbox button{position:relative;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;font:inherit;font-weight:700;padding:14px 18px;border-radius:14px;border:2px solid color-mix(in srgb,var(--sf-ink) 14%,transparent);background:var(--sf-bg);color:inherit;cursor:pointer;text-align:left;overflow:hidden;transition:border-color .2s,transform .15s} .sf-pollbox button:hover:not(:disabled){border-color:var(--sf-accent);transform:translateY(-2px)} .sf-poll-bar{grid-column:1/-1;height:8px;border-radius:99px;background:color-mix(in srgb,var(--sf-ink) 8%,transparent);overflow:hidden;display:none} .sf-poll-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sf-accent),var(--sf-accent2));border-radius:inherit;transition:width 1s cubic-bezier(.2,.8,.2,1)} .sf-poll-n{display:none;font-variant-numeric:tabular-nums;color:var(--sf-accent)} .sf-pollbox.is-results .sf-poll-bar,.sf-pollbox.is-results .sf-poll-n{display:block} .sf-pollbox button.is-mine{border-color:var(--sf-accent)} .sf-pollbox button.is-mine .sf-poll-t::after{content:" ✓ あなたの票";font-size:12px;color:var(--sf-accent)} .sf-pollbox button:disabled{cursor:default} .sf-poll-total{text-align:right;font-size:13px;opacity:.65;margin:8px 0 0} .sf-pollbox:not(.is-results) .sf-poll-total{visibility:hidden} /* 拍手 */ .sf-react{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px} .sf-al-left .sf-react{justify-content:flex-start} .sf-react button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:74px;padding:10px 12px;border-radius:16px;border:2px solid color-mix(in srgb,var(--sf-ink) 12%,transparent);background:var(--sf-bg);color:inherit;font:inherit;cursor:pointer;transition:transform .15s,border-color .2s} .sf-react button:hover{transform:translateY(-3px)} .sf-react button.is-on{border-color:var(--sf-accent);background:color-mix(in srgb,var(--sf-accent) 8%,var(--sf-bg))} .sf-react button.is-pop .sf-react-e{animation:sf-pop .45s cubic-bezier(.2,1.8,.4,1)} .sf-react-e{font-size:28px;line-height:1.1} .sf-react b{font-variant-numeric:tabular-nums;font-size:15px} .sf-react small{font-size:11px;opacity:.65} .sf-react-fly{position:absolute;left:50%;top:0;font-size:24px;pointer-events:none;animation:sf-fly .9s ease-out forwards} @keyframes sf-fly{to{transform:translate(-50%,-70px) scale(1.5);opacity:0}} /* 目標 */ .sf-goalbox{max-width:760px;margin:22px auto 0} .sf-goal-nums{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:center;margin-bottom:16px} .sf-goal-nums div{display:flex;flex-direction:column;align-items:center} .sf-goal-nums small{font-size:12px;opacity:.65} .sf-goal-nums strong{font:800 clamp(22px,3vw,32px) var(--sf-font-head);font-variant-numeric:tabular-nums} .sf-goal-nums div:first-child strong{color:var(--sf-accent)} .sf-goal-bar{position:relative;height:22px;border-radius:99px;background:color-mix(in srgb,var(--sf-ink) 8%,transparent);overflow:hidden} .sf-goal-bar i{position:absolute;inset:0 auto 0 0;width:calc(min(var(--p),100) * 1%);background:linear-gradient(90deg,var(--sf-accent),var(--sf-accent2));border-radius:inherit;transition:width 1.6s cubic-bezier(.2,.8,.2,1)} .sf-goal-bar i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#fff3 0 10px,transparent 10px 20px);animation:sf-stripe 1s linear infinite} @keyframes sf-stripe{to{background-position:28px 0}} .sf-goal-bar span{position:absolute;right:10px;top:50%;translate:0 -50%;font:800 12px var(--sf-font);color:var(--sf-ink);text-shadow:0 0 4px var(--sf-bg)} .sf-js .sf-goalbox[data-play]:not(.is-in) .sf-goal-bar i{width:0} .sf-goal-note{text-align:center;margin:14px 0 0;opacity:.8} /* 月額・年額 */ .sf-pt{margin-top:22px} .sf-pt-switch{display:flex;width:max-content;margin:0 auto 22px;padding:4px;border-radius:99px;background:color-mix(in srgb,var(--sf-ink) 7%,transparent)} .sf-pt-switch button{font:700 14px var(--sf-font);border:0;background:transparent;color:inherit;padding:10px 20px;border-radius:99px;cursor:pointer;display:flex;gap:6px;align-items:center} .sf-pt-switch [aria-pressed=true]{background:var(--sf-bg);box-shadow:0 4px 14px -6px #0005;color:var(--sf-accent)} .sf-pt-switch em{font-style:normal;font-size:11px;background:var(--sf-accent2);color:#fff;border-radius:99px;padding:2px 8px} .sf-pt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:stretch} .sf-pt-card{border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:var(--sf-radius);padding:24px;display:flex;flex-direction:column;gap:8px;background:var(--sf-bg);color:var(--sf-ink)} .sf-pt-card.is-pick{border:2px solid var(--sf-accent);box-shadow:0 24px 50px -30px var(--sf-accent);transform:translateY(-6px)} .sf-pt-card h3{margin:0;font-size:18px} .sf-pt-price{font:800 clamp(26px,3vw,34px) var(--sf-font-head);margin:0;color:var(--sf-accent)} .sf-pt-price small{font-size:13px;opacity:.7;color:var(--sf-ink)} .sf-pt-save{margin:0;font-size:12.5px;font-weight:700;color:var(--sf-accent2)} .sf-pt-card ul{margin:6px 0 10px;padding-left:1.2em;font-size:14px;flex:1} .sf-pt-card .sf-btn{align-self:flex-start} /* 混み具合 */ .sf-stbox{max-width:560px;margin:0 auto;padding:28px;border-radius:var(--sf-radius);border:1px solid color-mix(in srgb,currentColor 14%,transparent);--st:#e0b020} .sf-site .sf-section .sf-stbox h2{margin:4px 0 16px;font-size:clamp(22px,2.8vw,30px)} .sf-status-lamp{display:inline-flex;align-items:center;gap:14px;padding:12px 26px;border-radius:99px;background:color-mix(in srgb,var(--st) 14%,var(--sf-bg))} .sf-status-lamp i{width:22px;height:22px;border-radius:50%;background:var(--st);box-shadow:0 0 0 6px color-mix(in srgb,var(--st) 25%,transparent);animation:sf-lamp 2s ease-in-out infinite} @keyframes sf-lamp{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--st) 0%,transparent)}} .sf-status-lamp strong{font-size:clamp(20px,2.6vw,28px)} .sf-st-free{--st:#1fae5b}.sf-st-normal{--st:#e0b020}.sf-st-busy{--st:#ef7d22}.sf-st-full{--st:#d8342c}.sf-st-closed{--st:#555}.sf-st-holiday{--st:#999} .sf-st-closed .sf-status-lamp i,.sf-st-holiday .sf-status-lamp i{animation:none} .sf-status-note{margin:14px 0 4px} .sf-status-at{font-size:12px;opacity:.55} /* 暦 */ .sf-kybox{max-width:780px;margin:0 auto} .sf-ky-main{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px} .sf-ky-main>div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 12px;border-radius:var(--sf-radius);background:color-mix(in srgb,var(--sf-accent) 6%,var(--sf-bg));border:1px solid color-mix(in srgb,currentColor 10%,transparent)} .sf-ky-main small{font-size:12px;opacity:.65;letter-spacing:.1em} .sf-ky-main strong{font:800 clamp(24px,3.4vw,38px) "Yu Mincho","Hiragino Mincho ProN",var(--sf-font-head),serif} .sf-ky-next,.sf-ky-dow{font-size:13px;opacity:.75} .sf-ky-moonicon{font-size:34px;line-height:1} .sf-ky-greet{margin:18px auto 0;max-width:560px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:17px;line-height:1.9} @media (max-width:640px){.sf-ky-main{grid-template-columns:1fr 1fr}.sf-ky-main>div:first-child{grid-column:1/-1}} /* 時計 */ .sf-clockbox{display:flex;flex-direction:column;align-items:center;gap:10px} .sf-al-left .sf-clockbox{align-items:flex-start} .sf-clock-face{width:min(300px,70vw);aspect-ratio:1;display:block;filter:drop-shadow(0 18px 30px #0003)} .sf-clock-text{font-size:18px;margin:0} .sf-clock-text b{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:1.4em;color:var(--sf-accent)} .sf-clock-text small{margin-left:10px;opacity:.6;font-variant-numeric:tabular-nums} .sf-clock-big{font:800 clamp(56px,10vw,120px)/1 var(--sf-font-head);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--sf-ink)!important;font-family:var(--sf-font-head)!important} .sf-clock-big small{font-size:.4em;opacity:.5;margin:0} /* 縦書き */ .sf-tate{display:flex;justify-content:center} .sf-tate-in{writing-mode:vertical-rl;text-orientation:mixed;max-height:min(70vh,560px);font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;line-height:2.1;letter-spacing:.14em;overflow-x:auto;max-width:100%} .sf-tate-in h2{font-size:clamp(22px,3vw,30px);margin:0 0 0 1.2em;letter-spacing:.2em} .sf-tate-text{margin:0;font-size:clamp(16px,1.8vw,19px)} .sf-tate-by{margin:0 1.4em 0 0;align-self:flex-end;font-size:14px;opacity:.75;text-align:end} .sf-tate-washi .sf-tate-in{padding:40px 36px;background:#fbf7ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");color:#1f1a18;border-radius:4px;box-shadow:0 20px 40px -26px #0007} .sf-tate-waka .sf-tate-in{padding:44px 40px;background:linear-gradient(160deg,#fffdf7,#f3ead5);color:#1f1a18;border:3px double #c9a24a;border-radius:6px;box-shadow:0 20px 40px -26px #0007;display:flex;flex-direction:column} .sf-tate-waka .sf-tate-text{display:flex;flex-direction:column;font-size:clamp(18px,2.2vw,24px)} .sf-tate-waka .sf-tate-text span:nth-child(n+4){margin-top:2.2em} .sf-tate-waka .sf-tate-text span:nth-child(2){margin-top:1em} /* ピンで説明する画像 */ .sf-imap{margin-top:22px} .sf-imap-stage{position:relative;border-radius:var(--sf-radius)} .sf-imap-stage>img,.sf-imap-stage>.sf-ph{display:block;width:100%;border-radius:var(--sf-radius)} .sf-imap-pin{position:absolute;translate:-50% -50%;width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:var(--sf-accent);color:#fff;font:800 14px var(--sf-font);cursor:pointer;box-shadow:0 6px 16px -4px #0008;display:grid;place-items:center;padding:0;z-index:2} .sf-imap-pin::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--sf-accent);animation:sf-ping 2s ease-out infinite;pointer-events:none} @keyframes sf-ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}} .sf-imap-pin[aria-expanded=true]{background:var(--sf-accent2)} .sf-imap-pop{position:absolute;z-index:5;width:min(280px,80vw);translate:-50% calc(-100% - 26px);background:var(--sf-bg);color:var(--sf-ink);border-radius:14px;padding:16px 18px;box-shadow:0 24px 50px -16px #0008;text-align:left;animation:sf-pop .3s} .sf-imap-pop img{width:100%;border-radius:8px;margin-bottom:8px;max-height:140px;object-fit:cover} .sf-imap-pop p{margin:6px 0 10px;font-size:14px} .sf-imap-x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:16px;cursor:pointer;color:inherit;opacity:.6} .sf-imap-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:14px 0 0;font-size:13px;opacity:.8} .sf-imap-list b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--sf-accent);color:#fff;font-size:11px} @media (max-width:640px){.sf-imap-pop{left:50%!important;top:auto!important;bottom:0;translate:-50% 0;position:absolute}} /* 360°パノラマ */ .sf-pano-stage{height:clamp(320px,50vw,560px);margin-top:22px;border-radius:var(--sf-radius);background:#111} .sf-pano-stage canvas{position:absolute;inset:0;width:100%;height:100%} .sf-pano-fallback{position:absolute;inset:0;overflow-x:auto} .sf-pano-fallback img{height:100%;width:auto;max-width:none;display:block} .sf-3d-on.sf-pano-stage .sf-pano-fallback{display:none} .sf-pano-stage .sf-3d-hint{color:#fff;z-index:2} /* 誕生日占い */ .sf-ftbox{margin-top:22px;text-align:center} .sf-ft-form{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center} .sf-ft-form label{display:flex;gap:8px;align-items:center;font-weight:700} .sf-ft-form select{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:var(--sf-bg);color:inherit} .sf-ft-result{margin-top:22px} .sf-ft-card dl{display:grid;grid-template-columns:auto auto;gap:4px 18px;margin:6px 0;text-align:left} .sf-ft-card dl div{display:contents} .sf-ft-card dt{font-size:13px;opacity:.7} .sf-ft-card dd{margin:0;color:var(--sf-accent2);letter-spacing:.1em} /* メッセージカード */ .sf-cardmk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:22px;margin-top:22px;align-items:start;text-align:left} .sf-cm-form{display:grid;gap:12px} .sf-cm-form label{display:grid;gap:4px;font-size:13px;font-weight:700} .sf-cm-form input,.sf-cm-form textarea{font:inherit;font-weight:400;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:var(--sf-bg);color:inherit} .sf-cm-preview canvas{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 20px 40px -24px #0008} .sf-cm-actions{grid-column:2;display:flex;gap:10px;flex-wrap:wrap} @media (max-width:760px){.sf-cardmk{grid-template-columns:1fr}.sf-cm-actions{grid-column:1}} /* スタンプラリー */ .sf-rally{margin-top:22px;text-align:center} .sf-rally-card{display:inline-block;padding:22px;border-radius:var(--sf-radius);background:color-mix(in srgb,var(--sf-accent) 5%,var(--sf-bg));border:2px dashed color-mix(in srgb,var(--sf-accent) 40%,transparent)} .sf-rally-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px;min-width:min(520px,80vw)} .sf-rally-slot{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px} .sf-rally-slot a{color:var(--sf-accent);font-weight:700} .sf-rally-stamp{width:78px;height:78px;border-radius:50%;border:2px dashed color-mix(in srgb,currentColor 25%,transparent);display:grid;place-items:center;overflow:hidden} .sf-rally-slot.is-got .sf-rally-stamp{border:3px solid #c8323a;color:#c8323a;transform:rotate(-12deg);background:color-mix(in srgb,#c8323a 6%,var(--sf-bg));font:900 15px/1.2 "Yu Mincho","Hiragino Mincho ProN",serif} .sf-rally-stamp img{width:100%;height:100%;object-fit:cover} .sf-rally-slot.is-new .sf-rally-stamp{animation:sf-stampin .6s cubic-bezier(.2,1.6,.4,1)} @keyframes sf-stampin{from{transform:scale(2.4) rotate(10deg);opacity:0}} .sf-rally-prog{margin:14px 0 0}.sf-rally-prog b{font-size:22px;color:var(--sf-accent)} .sf-rally-msg{margin:14px auto 0;max-width:520px} .sf-rally-msg .sf-res-code{margin-top:8px;display:inline-flex} /* 読み上げ */ .sf-ttsbox{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center} .sf-al-left .sf-ttsbox{justify-content:flex-start} .sf-tts-stop{font:700 14px var(--sf-font);border:2px solid currentColor;background:transparent;color:inherit;border-radius:99px;padding:10px 18px;cursor:pointer} .sf-tts-rate{font-size:13px;display:flex;gap:6px;align-items:center} .sf-tts-rate select{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:var(--sf-bg);color:inherit} .sf-tts-now{flex-basis:100%;text-align:center;font-size:12.5px;opacity:.7;margin:0;min-height:1em} .sf-tts-reading{background:color-mix(in srgb,var(--sf-accent) 18%,transparent);outline:3px solid color-mix(in srgb,var(--sf-accent) 30%,transparent);border-radius:4px;transition:background .3s} /* 日めくり */ .sf-daily{display:flex;flex-direction:column;align-items:center} .sf-daily-page{position:relative;width:min(340px,86vw);background:#fffdf8;color:#231f1c;border-radius:6px;box-shadow:0 2px 0 #e6dfd2,0 4px 0 #efe9dd,0 20px 40px -20px #0007;text-align:center;overflow:hidden} .sf-daily-mekuri .sf-daily-page::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(90deg,transparent 0 22px,#0002 22px 26px),#b8323a} .sf-daily-top{padding:30px 0 8px;display:flex;flex-direction:column;align-items:center} .sf-daily-m{font-size:14px;letter-spacing:.2em;opacity:.7} .sf-daily-d{font:900 clamp(80px,14vw,120px)/1 var(--sf-font-head);color:#231f1c} .sf-daily.is-sun .sf-daily-d,.sf-daily.is-sun .sf-daily-w{color:#c8323a} .sf-daily.is-sat .sf-daily-d,.sf-daily.is-sat .sf-daily-w{color:#2a64b8} .sf-daily-w{font-size:14px} .sf-daily-word{font:800 clamp(22px,3vw,30px)/1.5 "Yu Mincho","Hiragino Mincho ProN",serif;margin:12px 20px 4px;padding-top:14px;border-top:1px dashed #0002} .sf-daily-by{display:block;padding:0 22px 26px;font-size:13.5px;opacity:.75} .sf-daily-card .sf-daily-page{border:1px solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 20px 40px -24px #0006} .sf-daily-card .sf-daily-top{flex-direction:row;gap:10px;justify-content:center;align-items:baseline;padding-top:22px} .sf-daily-card .sf-daily-d{font-size:44px} /* 来場者カウンター */ .sf-cntbox{text-align:center} .sf-cnt-title{font-weight:800;margin:0 0 10px} .sf-cnt-line{margin:0;font-size:15px} .sf-cnt-digits{display:inline-flex;gap:3px;vertical-align:middle;margin:0 6px} .sf-cnt-digits i{font-style:normal} .sf-cnt-retro .sf-cnt-line{display:inline-block;padding:10px 16px;background:#000080;color:#ffff66;font-family:"MS PGothic","Osaka",monospace;border:3px ridge #c0c0c0} .sf-cnt-retro .sf-cnt-digits i{display:inline-block;width:1.1em;padding:3px 0;background:#000;color:#39ff14;font:700 20px "Courier New",monospace;border:1px solid #333;text-shadow:0 0 6px #39ff14} .sf-cnt-modern .sf-cnt-digits i{display:inline-block;width:1.1em;padding:6px 0;border-radius:8px;background:var(--sf-ink);color:var(--sf-bg);font:800 22px var(--sf-font-head);font-variant-numeric:tabular-nums} .sf-cnt-kiri{margin:12px 0 0;font-weight:800;color:var(--sf-accent2);animation:sf-pop .6s} .sf-cntbox small{display:block;margin-top:10px;opacity:.6} /* 言葉の球 */ .sf-wcloud{position:relative;margin:22px auto 0;max-width:520px} .sf-wc-ball{list-style:none;position:relative;margin:0;padding:0;height:420px} .sf-wc-ball li{position:absolute;left:50%;top:50%;white-space:nowrap;font:800 clamp(15px,2vw,22px) var(--sf-font-head);transform:translate(-50%,-50%);will-change:transform,opacity;transition:none} .sf-wc-ball li:nth-child(3n+1){color:var(--sf-accent)}.sf-wc-ball li:nth-child(3n+2){color:var(--sf-accent2)} .sf-wc-ball a{color:inherit;text-decoration:none} .sf-wc-ball a:hover{text-decoration:underline} /* 懐中電灯 */ .sf-flash-stage{position:relative;margin-top:22px;border-radius:var(--sf-radius);overflow:hidden;cursor:none;touch-action:none;user-select:none} .sf-flash-stage>img,.sf-flash-stage>.sf-ph{display:block;width:100%;pointer-events:none} .sf-flash-dark{position:absolute;inset:0;--x:50%;--y:50%;background:radial-gradient(circle clamp(70px,12vw,130px) at var(--x) var(--y),transparent 0 60%,rgba(5,5,15,.97) 100%);pointer-events:none;transition:opacity 1s} .sf-flash-stage:not(.is-lit) .sf-flash-dark{background:rgba(5,5,15,.97)} .sf-flash-stage.is-clear .sf-flash-dark{opacity:0} .sf-flash-found{position:absolute;translate:-50% -50%;z-index:2;pointer-events:none} .sf-flash-found b{display:block;padding:4px 10px;border-radius:99px;background:var(--sf-accent2);color:#fff;font-size:13px;box-shadow:0 0 0 4px #fff8;animation:sf-pop .4s} .sf-flash-msg{text-align:center;margin:12px 0 0;font-weight:700} @media (prefers-reduced-motion:reduce){.sf-imap-pin::before,.sf-status-lamp i,.sf-goal-bar i::after{animation:none}} /* 4.5：本文の文字色（デザインの色は、配色を変えると一緒に変わる） */ .sf-site .sf-fc-a{color:var(--sf-accent)} .sf-site .sf-fc-b{color:var(--sf-accent2)} .sf-site .sf-tidy .sf-fc-a{color:var(--sf-accent)!important} .sf-site .sf-tidy .sf-fc-b{color:var(--sf-accent2)!important} /* 4.5.3：画像と文章に置く動画（自分のメディアの MP4／YouTube） */ .sf-visual>.sf-vis-media{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--sf-radius);background:#11131a} .sf-v-editorial .sf-visual>.sf-vis-media{aspect-ratio:1;border-radius:300px 300px 3px 3px} .sf-v-cover .sf-visual>.sf-vis-media{height:100%;width:100%;aspect-ratio:auto} .sf-full .sf-visual>.sf-vis-media{border-radius:0} .sf-visual>.sf-vis-yt{width:100%;aspect-ratio:16/9;border-radius:var(--sf-radius);overflow:hidden;position:relative;display:grid;place-items:center;border:0;padding:0;background:#11131a;cursor:pointer} .sf-vis-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sf-vis-yt span{position:relative;z-index:1;width:72px;height:72px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:22px;padding-left:4px;transition:transform .2s} .sf-vis-yt:hover span{transform:scale(1.12)} .sf-visual>iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--sf-radius)} /* 4.5.4：動画・動画ギャラリーに自分のメディアの MP4 */ .sf-vc-open .sf-vc-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s} .sf-vc-open:hover .sf-vc-still,.sf-vc-open:focus-visible .sf-vc-still{transform:scale(1.06);filter:brightness(.85)} .sf-lb-frame.is-file video{position:absolute;inset:0;width:100%;height:100%;background:#000;object-fit:contain} .sf-video-card .sf-video-file{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--sf-radius);background:#000;object-fit:contain}