/* Liquid Glass の見た目と動き(2026-10-18 ogawa「liquid Glass UI で白ベース」「アニメーションふんだんに」「全画面スケルトンローディング」)
   Apple のデザインガイド(HIG の Materials・Color・Motion)に合わせた決まり:
   - ガラスは「操作とナビゲーションの層」だけに使う(ヘッダー・メニュー・ボタン・タブ・札・窓)。本文のカードは白い面(標準の素材)にする
   - 形は角丸の同心円とカプセル。色は控えめに、主なボタンだけ色付きのガラス(UTNOA の青。Board のページは Board の紫)
   - 動きは短く、指やマウスについてくる。押すと縮み、離すとばねで戻る。動きを減らす設定・透明を減らす設定では止める
   全ページで最後に読む(build.py の document())。theme.css・motion.css・home.css・check.css・board.css の上に重ねる */

:root{
 --g-glass:rgba(255,255,255,.62);
 --g-glass-thick:rgba(255,255,255,.8);
 --g-blur:blur(22px) saturate(185%);
 --g-rim:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.55);
 --g-edge:rgba(23,43,73,.09);
 --g-shadow:0 1px 2px rgba(23,43,73,.05),0 10px 30px rgba(23,43,73,.08);
 --g-shadow-lg:0 2px 6px rgba(23,43,73,.05),0 24px 64px rgba(23,43,73,.13);
 --g-card:rgba(255,255,255,.78);
 --r-xl:30px;--r-lg:22px;--r-md:16px;--r-sm:12px;
 --head-h:80px;
 --ease:cubic-bezier(.22,.8,.24,1);
 /* ばね(少し行きすぎて戻る) */
 --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.1,1.077 30.6%,1.019 35.6%,.998 38%,.984 40.8%,.977 44.3%,.983 50%,1.001 61%,1.003 66.3%,1 80%,1);
 --spring-soft:linear(0,.012,.048 2.6%,.188 5.6%,.661 14.2%,.849 19.3%,.957 24.8%,1.006 30.6%,1.021 36.1%,1.016 44.5%,1.002 63%,1);
 interpolate-size:allow-keywords
}
html{background:#fff;scroll-padding-top:96px}
body{background:transparent;position:relative}
/* 白い地に、ガラスが光を拾うための淡い色の場(画面に固定) */
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(56vw 42vw at 6% -8%,rgba(36,91,220,.11),transparent 62%),radial-gradient(48vw 38vw at 100% 2%,rgba(64,170,255,.10),transparent 60%),radial-gradient(60vw 46vw at 70% 108%,rgba(120,104,255,.06),transparent 62%),#fff}

/* ───────── ヘッダー: 浮かぶガラスのカプセル ───────── */
.n-head{position:sticky;top:0;z-index:50;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px 0 8px}
.n-head:before{content:'';position:absolute;inset:0 0 -18px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.82),rgba(255,255,255,.5) 55%,rgba(255,255,255,0));-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent);opacity:0;transition:opacity .35s var(--ease)}
html.g-scrolled .n-head:before{opacity:1}
.n-head-in{position:relative;width:min(1080px,calc(100% - 24px));height:60px;min-height:0;padding:0 8px 0 22px;border-radius:999px;background:var(--g-glass);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow);transition:height .5s var(--spring-soft),width .5s var(--spring-soft),box-shadow .35s,background .35s}
html.g-scrolled .n-head-in{height:54px;width:min(1000px,calc(100% - 24px));background:var(--g-glass-thick);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-logo img{width:84px;transition:transform .5s var(--spring)}
.n-logo:hover img{transform:scale(1.04)}
.n-logo small{display:none}
.n-head-actions{gap:8px}
.n-burger{min-height:44px;padding:8px 16px 8px 14px;border:0;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge);color:var(--text);transition:transform .45s var(--spring),background .25s,box-shadow .25s}
.n-burger:hover{background:rgba(255,255,255,.9);border:0}
.n-burger:active{transform:scale(.93);transition-duration:.12s}
.n-burger-icon{gap:0;height:14px;width:18px;position:relative}
.n-burger-icon i{position:absolute;left:0;right:0;height:2px;transition:transform .45s var(--spring),opacity .2s}
.n-burger-icon i:nth-child(1){top:0}.n-burger-icon i:nth-child(2){top:6px}.n-burger-icon i:nth-child(3){top:12px}
.n-burger[aria-expanded=true] .n-burger-icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.n-burger[aria-expanded=true] .n-burger-icon i:nth-child(2){opacity:0;transform:scaleX(.2)}
.n-burger[aria-expanded=true] .n-burger-icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ───────── ボタン: カプセル。主ボタンは色付きのガラス、ほかは透明なガラス ───────── */
.n-button{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;padding:12px 22px;gap:12px;border:1px solid color-mix(in srgb,var(--blue) 70%,#fff);
 background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff) 0%,var(--blue) 55%,color-mix(in srgb,var(--blue) 88%,#000) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(23,43,73,.12),0 8px 22px color-mix(in srgb,var(--blue) 30%,transparent);
 transition:transform .5s var(--spring),box-shadow .3s var(--ease),background .3s}
.n-button:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
 background:radial-gradient(120px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.45),transparent 70%)}
.n-button:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 48%,rgba(255,255,255,0) 52%)}
.n-button:hover{transform:translateY(-1px) scale(1.025);background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 78%,#fff) 0%,var(--blue) 55%,color-mix(in srgb,var(--blue) 88%,#000) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.12),0 2px 4px rgba(23,43,73,.12),0 14px 32px color-mix(in srgb,var(--blue) 36%,transparent)}
.n-button:hover:before{opacity:1}
.n-button:active{transform:scale(.955,.94);transition-duration:.12s}
.n-button>span[aria-hidden]{display:inline-block;transition:transform .5s var(--spring)}
.n-button:hover>span[aria-hidden]{transform:translateX(4px)}
.n-button.secondary{background:rgba(255,255,255,.6);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.8);color:var(--blue)!important;
 box-shadow:var(--g-rim),0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent),0 6px 18px rgba(23,43,73,.07)}
.n-button.secondary:before{background:radial-gradient(120px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--blue) 14%,transparent),transparent 70%)}
.n-button.secondary:after{display:none}
.n-button.secondary:hover{background:rgba(255,255,255,.9);box-shadow:var(--g-rim),0 0 0 1px color-mix(in srgb,var(--blue) 35%,transparent),0 12px 28px rgba(23,43,73,.1)}
.n-button.small{padding:8px 16px}
.n-movie-link{transition:transform .5s var(--spring)}
.n-movie-link:hover{transform:translateX(2px)}
.n-play{width:34px;height:34px;border:0;background:rgba(255,255,255,.7);box-shadow:var(--g-rim),0 0 0 1px color-mix(in srgb,var(--blue) 25%,transparent),0 6px 16px rgba(23,43,73,.08);transition:transform .5s var(--spring)}
.n-movie-link:hover .n-play{transform:scale(1.12)}

/* ───────── 最初の画面: 白い地に、ゆっくり動く光の場 ───────── */
.n-hero,.n-service-hero,.n-top-hero{position:relative;isolation:isolate;background:transparent!important;border-bottom:0!important;overflow:hidden}
.n-hero:before,.n-service-hero:before,.n-top-hero:before{content:'';position:absolute;z-index:-1;width:min(54vw,720px);aspect-ratio:1;right:-10vw;top:calc(min(54vw,720px) * -.2);border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 15%,transparent),color-mix(in srgb,var(--blue) 6%,transparent) 45%,transparent 75%);animation:gDrift 18s ease-in-out infinite alternate}
/* 左下の光の場は、段の下の端で切れて線に見えるので置かない */
@keyframes gDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4vw,3vw,0) scale(1.08)}100%{transform:translate3d(3vw,-2vw,0) scale(.96)}}
.n-stage:before{inset:8% -6% 4% 10%;border-radius:var(--r-xl);transform:rotate(-3deg);background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 14%,#fff),rgba(255,255,255,0));filter:blur(.5px)}
.n-video-frame{border:0;border-radius:var(--r-lg);padding:8px;background:var(--g-glass);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-video-frame video{border-radius:calc(var(--r-lg) - 8px)}
.n-window-bar{padding:2px 8px 8px}
.n-video-meta button,#video-toggle{border:0;border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.65);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge);transition:transform .45s var(--spring)}
.n-video-meta button:active{transform:scale(.93)}
.n-chapters{gap:6px;padding:5px;border-radius:999px;background:rgba(255,255,255,.5);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge)}
.n-chapters button{border:0;border-radius:999px;padding:6px 8px;text-align:center;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.n-chapters button[aria-pressed=true]{background:#fff;box-shadow:0 1px 2px rgba(23,43,73,.1),0 4px 12px rgba(23,43,73,.08);color:var(--blue)}
.n-proof{border-top:1px solid var(--g-edge)}
.n-service-visual{transform:none;border:0;border-radius:var(--r-lg);padding:10px;background:var(--g-card);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-service-visual>img{border-radius:calc(var(--r-lg) - 10px)}
.n-brand-stage{border:0;border-radius:var(--r-lg);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-brand-hero{background:rgba(255,255,255,.7)}

/* ───────── 段: 白い地。淡い段は薄い色の帯 ───────── */
.n-section{background:transparent}
.n-section.pale,.n-closing,.n-check-page .n-closing,.n-board-page .n-closing{background:linear-gradient(180deg,rgba(255,255,255,0),color-mix(in srgb,var(--blue) 5%,transparent) 22%,color-mix(in srgb,var(--blue) 5%,transparent) 78%,rgba(255,255,255,0))}
.n-closing{border:0;position:relative;padding:72px 16px}
.n-closing:before{content:'';position:absolute;inset:24px max(16px,calc(50% - 520px));z-index:-1;border-radius:var(--r-xl);background:var(--g-card);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow)}
.n-closing{isolation:isolate}
.n-why,.n-roi,.n-money-heading,.n-overview{border-top-color:transparent}

/* ───────── 本文のカード: 白い面・同心円の角丸・やわらかい影(ガラスにはしない) ───────── */
.n-service-card,.n-price,.n-top-column,.v-card,.n-download-card,.n-form,.n-roi-result,.n-support-graph,.n-board-set,.n-data,.n-top-diagnosis,.n-roi-company,.n-ai-note,.n-calculator,.n-step,.m-card,.c-dfig,.n-legacy .card,.n-legacy .use-card,.n-legacy .offer-card{
 border:0!important;border-radius:var(--r-lg)!important;background:var(--g-card)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px var(--g-edge),var(--g-shadow)!important}
.n-price.recommended,.n-download-card:first-child,.n-top-diagnosis{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1.5px color-mix(in srgb,var(--blue) 60%,transparent),0 14px 36px color-mix(in srgb,var(--blue) 14%,transparent)!important}
.n-service-card:first-child{background:linear-gradient(135deg,rgba(255,255,255,.92),color-mix(in srgb,var(--blue) 6%,#fff))!important}
a.n-service-card,a.n-top-column,a.n-download-card,.n-top-product-shot{transition:transform .6s var(--spring),box-shadow .35s var(--ease)!important}
a.n-service-card:hover,a.n-top-column:hover,a.n-download-card:hover{transform:translateY(-5px)!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent),var(--g-shadow-lg)!important}
a.n-service-card:active,a.n-top-column:active,a.n-download-card:active{transform:translateY(-1px) scale(.985)!important;transition-duration:.15s!important}
.n-service-card .more{display:inline-flex;gap:4px;transition:gap .45s var(--spring)}
.n-service-card:hover .more{gap:10px}
.n-badge{border-radius:999px;padding:3px 12px;background:color-mix(in srgb,var(--blue) 10%,#fff)}
.n-top-column{overflow:hidden}
.n-top-column img{border-bottom:0;transition:transform .8s var(--ease)}
.n-top-column:hover img{transform:scale(1.04)}
.n-top-product-shot{border:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-top-product-shot:hover{transform:translateY(-4px) scale(1.01)}
.n-screen{border:0;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-screen img{transition:transform .8s var(--ease)}
.n-screen button:hover img{transform:scale(1.015)}
.n-screen figcaption{border-top-color:var(--g-edge)}
.n-top-columns,.n-services,.n-downloads,.n-price-grid{gap:20px}
.n-profile>div{border-bottom-color:var(--g-edge)}

/* ───────── タブ: ガラスの切り替え。選んだ印が、ばねで動く ───────── */
.n-tabs{position:relative;isolation:isolate;gap:4px;padding:6px;border-radius:var(--r-lg);background:rgba(255,255,255,.55);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),0 8px 24px rgba(23,43,73,.06)}
.n-tab{border:0!important;background:transparent!important;border-radius:calc(var(--r-lg) - 6px);box-shadow:none!important;padding:12px 10px!important;transition:color .3s,transform .45s var(--spring)}
.n-tab:hover{color:var(--blue)}
.n-tab:active{transform:scale(.95)}
.n-tab[aria-selected=true]{color:var(--blue)}
.n-tab[aria-selected=true]:after{display:none}
.n-tabs:not(.g-has-thumb) .n-tab[aria-selected=true]{background:#fff!important;box-shadow:0 1px 3px rgba(23,43,73,.1),0 6px 16px rgba(23,43,73,.08)!important}
.g-thumb{position:absolute;z-index:-1;left:0;top:0;border-radius:calc(var(--r-lg) - 6px);background:#fff;box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent),0 2px 4px rgba(23,43,73,.08),0 8px 20px rgba(23,43,73,.1);
 transition:transform .55s var(--spring),width .55s var(--spring),height .55s var(--spring);pointer-events:none}
.n-feature-panel:not([hidden]){animation:gPanel .6s var(--ease) both}
@keyframes gPanel{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* 札(絞り込み・人数の選択・近道) */
.c-chip,.n-roi-presets button,.n-anchor-list a,.m-chip{border:0!important;border-radius:999px!important;background:rgba(255,255,255,.62)!important;box-shadow:var(--g-rim),0 0 0 1px var(--g-edge)!important;transition:transform .45s var(--spring),background .3s,color .3s,box-shadow .3s!important}
.c-chip:hover,.n-roi-presets button:hover,.n-anchor-list a:hover{background:#fff!important;box-shadow:var(--g-rim),0 0 0 1px color-mix(in srgb,var(--blue) 30%,transparent)!important}
.c-chip:active,.n-roi-presets button:active,.n-anchor-list a:active{transform:scale(.93)}
.c-chip[aria-pressed=true],.n-roi-presets button[aria-pressed=true]{background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 82%,#fff),var(--blue))!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px color-mix(in srgb,var(--blue) 30%,transparent)!important}
.c-idx-cats{border:0;padding:16px 18px;border-radius:var(--r-lg);background:rgba(255,255,255,.55);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),0 8px 24px rgba(23,43,73,.05)}
.c-idx-list li:not([hidden]){animation:gPanel .45s var(--ease) both}
.c-idx-list a{border-bottom-color:var(--g-edge);transition:transform .5s var(--spring)}
.c-idx-list a:hover{transform:translateX(4px)}
.c-idx-list img,.c-idx-noimg{border:0;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--g-edge)}

/* サービスのページの近道: 画面の上に浮かぶガラスの列 */
.n-service-route{position:sticky;top:76px;z-index:30;padding:6px 0;background:transparent;border:0}
.n-service-route .n-wrap{width:fit-content;max-width:calc(100% - 24px);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:2px;padding:5px;border-radius:999px;background:var(--g-glass);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow)}
.n-service-route .n-wrap::-webkit-scrollbar{display:none}
.n-service-route a{white-space:nowrap;padding:6px 14px;border-radius:999px;color:var(--text);transition:background .3s,color .3s}
.n-service-route a:hover{background:#fff;color:var(--blue)}

/* よくあるご質問: 1問ずつの白い面。開くと高さがなめらかに伸び、印が回る */
.n-faq details,#faq details{border:0!important;border-radius:var(--r-md);background:var(--g-card);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--g-edge);padding:0 20px;margin-bottom:10px;transition:box-shadow .3s}
.n-faq details[open],#faq details[open]{box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent),var(--g-shadow)}
.n-faq details>summary,#faq details>summary{padding:16px 0;min-height:0;align-items:center}
.n-faq summary::-webkit-details-marker{display:none}
.n-faq details>summary::after,#faq details>summary::after,.n-faq details[open]>summary::after,#faq details[open]>summary::after{content:''!important;flex:0 0 9px;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-3px) rotate(45deg);transition:transform .5s var(--spring)}
.n-faq details[open]>summary::after,#faq details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.n-faq details::details-content,#faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.n-faq details[open]::details-content,#faq details[open]::details-content{block-size:auto}
.n-faq details p,#faq details>p,#faq details>div{margin-top:0;margin-bottom:16px}

/* フォーム */
.n-form input:not([type=checkbox]):not([type=radio]),.n-form select,.n-form textarea,.n-roi-number-input input,.n-support-inputs select{border:0!important;border-radius:var(--r-sm)!important;background:rgba(255,255,255,.9)!important;box-shadow:inset 0 1px 2px rgba(23,43,73,.06),0 0 0 1px rgba(23,43,73,.14)!important;transition:box-shadow .25s}
.n-form input:focus,.n-form select:focus,.n-form textarea:focus,.n-roi-number-input input:focus{outline:0;box-shadow:inset 0 1px 2px rgba(23,43,73,.06),0 0 0 2px var(--blue),0 0 0 6px color-mix(in srgb,var(--blue) 16%,transparent)!important}
.n-form .pick{border:0;border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(23,43,73,.12);transition:box-shadow .25s,transform .45s var(--spring)}
.n-form .pick:has(input:checked){box-shadow:0 0 0 2px var(--blue),0 8px 20px color-mix(in srgb,var(--blue) 14%,transparent)}
.n-form button.submit{border-radius:999px}

/* ───────── メニュー: 右から出るガラスの板 ───────── */
.n-drawer-backdrop{background:rgba(23,43,73,.16);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .4s var(--ease)}
.n-drawer-panel{top:12px;right:12px;bottom:12px;width:min(380px,calc(100% - 24px));border:0;border-radius:var(--r-xl);padding:12px 22px 28px;background:rgba(255,255,255,.74);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);
 box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),0 30px 80px rgba(23,43,73,.22);transform:translateX(calc(100% + 32px)) scale(.96);transform-origin:right center;transition:transform .6s var(--spring-soft)}
.n-drawer.is-open .n-drawer-panel{transform:none}
.n-drawer-top{border-bottom-color:var(--g-edge)}
.n-drawer-close{border:0;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge);transition:transform .45s var(--spring)}
.n-drawer-close:active{transform:scale(.92)}
.n-drawer-group{border-bottom-color:var(--g-edge)}
.n-drawer-group.is-local{margin:8px -10px;padding:12px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--blue) 7%,rgba(255,255,255,.6));border-bottom:0}
.n-drawer-group>a:not(.n-button){border-radius:10px;padding:8px 10px;margin:0 -10px;transition:background .25s,transform .45s var(--spring)}
.n-drawer-group>a:not(.n-button):hover{background:rgba(255,255,255,.85);transform:translateX(4px)}
.n-drawer.is-open .n-drawer-group{animation:gIn .6s var(--spring-soft) both}
.n-drawer.is-open .n-drawer-group:nth-child(2){animation-delay:.04s}.n-drawer.is-open .n-drawer-group:nth-child(3){animation-delay:.08s}.n-drawer.is-open .n-drawer-group:nth-child(4){animation-delay:.12s}.n-drawer.is-open .n-drawer-group:nth-child(5){animation-delay:.16s}.n-drawer.is-open .n-drawer-group:nth-child(6){animation-delay:.2s}
@keyframes gIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* 画面の拡大・動画の窓 */
.n-dialog,.n-movie-dialog{border:0;border-radius:var(--r-xl);background:rgba(255,255,255,.82);backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),0 40px 100px rgba(23,43,73,.3);
 opacity:0;transform:scale(.94) translateY(14px);transition:opacity .3s var(--ease),transform .55s var(--spring-soft),overlay .4s allow-discrete,display .4s allow-discrete}
.n-dialog[open],.n-movie-dialog[open]{opacity:1;transform:none}
@starting-style{.n-dialog[open],.n-movie-dialog[open]{opacity:0;transform:scale(.94) translateY(14px)}}
.n-dialog::backdrop,.n-movie-dialog::backdrop{background:rgba(23,43,73,.32);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.n-dialog-toolbar{background:transparent;border-bottom-color:var(--g-edge)}
.n-dialog-toolbar button,.n-movie-dialog>button{border:0!important;border-radius:999px!important;background:rgba(255,255,255,.8)!important;box-shadow:var(--g-rim),0 0 0 1px var(--g-edge)}
.n-movie-dialog video{border-radius:calc(var(--r-xl) - 12px)}

/* フッター */
.n-foot{background:rgba(255,255,255,.7);border-top:1px solid var(--g-edge)}
.n-foot a{transition:color .2s}
.n-foot a:hover{color:var(--blue)}
.n-foot-bottom{border-top-color:var(--g-edge)}

/* 上へ戻るボタン(ガラスの丸) */
.g-top{position:fixed;right:18px;bottom:18px;z-index:40;width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--blue);font-size:18px;font-weight:700;
 background:var(--g-glass);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim),0 0 0 1px var(--g-edge),var(--g-shadow);
 opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .3s,transform .55s var(--spring)}
.g-top.is-on{opacity:1;transform:none;pointer-events:auto}
.g-top:hover{transform:scale(1.08)}
.g-top:active{transform:scale(.9)}
/* 読んだ量の線(コラム) */
.g-progress{position:fixed;left:0;top:0;z-index:60;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 60%,#7cc4ff),var(--blue));pointer-events:none}

/* ───────── 画面に入ったら出る(JS が data-r を付ける。JS が無いときは最初から見える) ───────── */
html.js [data-r]:not(.is-in){opacity:0}
html.js [data-r].is-in{animation:gReveal .95s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--d,0) * 70ms)}
html.js [data-r=left].is-in{animation-name:gRevealLeft}
html.js [data-r=zoom].is-in{animation-name:gRevealZoom}
@keyframes gReveal{from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gRevealLeft{from{opacity:0;transform:translateX(-28px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes gRevealZoom{from{opacity:0;transform:scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
/* トップの最初の画面の動きは、読み込みの板が消えてから始める */
html.js:not(.g-ready) .n-top-hero *{animation-play-state:paused!important}

/* 読み込み中の画像: 光が流れる下地 */
img.g-loading{background:linear-gradient(100deg,#eef2f8 30%,#f8fafd 50%,#eef2f8 70%) 0 0/300% 100%;animation:gShimmer 1.3s linear infinite}
img.g-loaded{animation:gImg .6s var(--ease) both}
@keyframes gShimmer{from{background-position:100% 0}to{background-position:0 0}}
@keyframes gImg{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}

/* ───────── 全画面のスケルトンローディング ─────────
   HTML の最初に置き、ヘッダーの下の画面をすべて覆う。JS が「中身の準備ができた」で消す。
   リンクを押したときも、次のページが出るまでこの板を出す。JS が無いときは出さない。4秒たったら必ず消える */
.n-skel{display:none}
html.js .n-skel{display:block;position:fixed;inset:0;z-index:45;padding-top:var(--head-h);overflow:hidden;background:#fff;animation:gSkelSafety .3s 4s forwards}
html.js .n-skel:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(56vw 42vw at 6% -8%,rgba(36,91,220,.09),transparent 62%),radial-gradient(48vw 38vw at 100% 2%,rgba(64,170,255,.08),transparent 60%)}
html.js.g-ready .n-skel{opacity:0;visibility:hidden;animation:none;transition:opacity .5s var(--ease),visibility 0s .5s}
html.js.g-leaving .n-skel{opacity:1;visibility:visible;animation:none;transition:opacity .22s var(--ease)}
@keyframes gSkelSafety{to{opacity:0;visibility:hidden}}
.sk-wrap{width:min(928px,calc(100% - 64px));margin:0 auto}
.sk{display:block;border-radius:10px;background:linear-gradient(100deg,#edf1f7 30%,#f8fafd 50%,#edf1f7 70%) 0 0/300% 100%;animation:gShimmer 1.3s linear infinite}
.sk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center;padding:44px 0 36px}
.sk-line{height:14px;margin:12px 0;border-radius:7px}
.sk-title{height:38px;margin:14px 0;border-radius:12px}
.sk-eyebrow{height:16px;width:34%;margin-bottom:22px;border-radius:8px}
.sk-row{display:flex;gap:12px;margin-top:26px}
.sk-btn{width:170px;height:48px;border-radius:999px}
.sk-btn.ghost{width:140px;opacity:.7}
.sk-media{aspect-ratio:16/10;border-radius:var(--r-lg)}
.sk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:12px}
.sk-card{height:170px;border-radius:var(--r-lg)}
.sk-article{width:min(760px,calc(100% - 48px));padding:36px 0}
.sk-article .sk-media{aspect-ratio:16/9;margin:26px 0}
.sk-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;padding-top:20px}
.sk-item{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:center}
.sk-thumb{aspect-ratio:16/9;border-radius:var(--r-sm)}
.sk-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.sk-chip{width:96px;height:32px;border-radius:999px}
.w20{width:20%}.w30{width:30%}.w40{width:40%}.w55{width:55%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}

@media (max-width:760px){
 :root{--head-h:72px}
 html{scroll-padding-top:84px}
 .n-head{padding:8px 0 6px}
 .n-head-in{height:56px;padding:0 6px 0 16px}
 html.g-scrolled .n-head-in{height:52px}
 .n-head-actions .n-button.small{padding:7px 12px;font-size:13px}
 .n-burger{padding:8px 12px}
 .n-service-route{top:66px}
 .n-tabs{border-radius:var(--r-md)}
 .n-tab{border-radius:calc(var(--r-md) - 6px);padding:10px 4px!important}
 .g-thumb{border-radius:calc(var(--r-md) - 6px)}
 .n-closing:before{inset:12px}
 .sk-split{grid-template-columns:1fr;gap:22px;padding:24px 0}
 .sk-title{height:30px}
 .sk-cards{grid-template-columns:1fr}
 .sk-cards .sk-card:nth-child(n+2){display:none}
 .sk-list{grid-template-columns:1fr}
 .sk-wrap{width:calc(100% - 32px)}
 .sk-btn{width:46%}
 .g-top{right:12px;bottom:12px;width:44px;height:44px}
}
@media (max-width:420px){.n-burger-label{display:none}.n-burger{padding:10px 12px}}

/* ガラスが描けない環境では、白を濃くして読みやすく */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .n-head-in,.n-tabs,.n-drawer-panel,.n-dialog,.n-movie-dialog,.n-service-route .n-wrap,.g-top,.n-video-frame{background:rgba(255,255,255,.96)}
}
/* 透明を減らす設定: ガラスをやめて白い面に */
@media (prefers-reduced-transparency:reduce){
 .n-head-in,.n-tabs,.n-drawer-panel,.n-dialog,.n-movie-dialog,.n-service-route .n-wrap,.g-top,.n-video-frame,.n-button.secondary,.c-chip{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* コントラストを上げる設定: 線を濃く */
@media (prefers-contrast:more){
 :root{--g-edge:rgba(23,43,73,.4)}
}
/* 動きを減らす設定: 出てくる動き・光・ばねを止め、最後の形で見せる */
@media (prefers-reduced-motion:reduce){
 html.js [data-r]{opacity:1!important;animation:none!important}
 .n-hero:before,.n-service-hero:before,.n-top-hero:before{animation:none}
 .sk,img.g-loading{animation:none}
 img.g-loaded,.n-feature-panel:not([hidden]),.c-idx-list li:not([hidden]),.n-drawer.is-open .n-drawer-group{animation:none}
 .n-button,.n-tab,.c-chip,.n-drawer-panel,.n-dialog,.n-movie-dialog,a.n-service-card,a.n-top-column,.g-thumb,.n-head-in{transition-duration:.01s!important}
 .n-button:hover,a.n-service-card:hover,a.n-top-column:hover{transform:none!important}
}
@media print{.n-skel,.g-top,.g-progress{display:none!important}html.js [data-r]{opacity:1!important;animation:none!important}}
/* 製品の画面の傾き(JS が g-tilt を付ける) */
.g-tilt{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--spring-soft),box-shadow .35s!important}
.g-tilt.is-tilting{transition:transform .12s linear,box-shadow .35s!important}
.n-top-product-shot.g-tilt:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
/* 題は単語の途中で折り返さない(折り返しは nb と br で決める) */
.n-hero h1,.n-service-hero h1,.n-form-title{word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
@media (min-width:1100px){.n-hero h1{font-size:46px}}
/* コラムのアイキャッチと目次 */
.column-eyecatch img,.n-legacy .column-eyecatch img{border:0!important;border-radius:var(--r-lg);box-shadow:0 0 0 1px var(--g-edge),var(--g-shadow-lg)}
.n-legacy .toc{top:96px;padding:16px 18px;border:0!important;border-radius:var(--r-lg)!important;background:rgba(255,255,255,.6)!important;box-shadow:var(--g-rim),0 0 0 1px var(--g-edge)!important}
/* 料金の前置き: 左の太い線をやめ、薄い色の面に */
.n-pricing-basis{border:0!important;border-radius:var(--r-lg);background:color-mix(in srgb,var(--blue) 7%,rgba(255,255,255,.8));box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--blue) 18%,transparent)}
@media (max-width:760px){
 /* スマホでは近道の列は止めず、横に送れる1行に */
 .n-service-route{position:static;padding:10px 0 0}
 .n-service-route .n-wrap{display:flex!important;flex-wrap:nowrap!important;max-width:calc(100% - 24px);gap:2px!important}
 .n-service-route a{font-size:13.6px;padding:6px 12px}
}
@media (max-width:560px){.n-hero h1{font-size:clamp(24px,7.6vw,34px)!important;line-height:1.5}}