/* スクロールに合わせた動き（2026-10-22 試し）
   - 隠した状態から始める印（.an）は anim.js が付ける。JSが動かないときは何も隠れない。
   - 「動きを減らす」設定の端末では、動きを一切つけない。
   - 文・画像・並びは変えない（動かすのは opacity と transform だけ）。 */
.an{opacity:0;transform:translate3d(0,20px,0);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:var(--an-d,0ms)}
.an.an-f{transform:none}
.an.an-in{opacity:1;transform:none}
.an.an-now{transition:none!important}

/* PDCA：P→D→C→Aの順に光り、矢印が輪の上を回る（1歩 約1.2秒、1周 4.8秒） */
.pd-arc{position:absolute;left:-3px;top:-3px;width:calc(100% + 6px);height:calc(100% + 6px);overflow:visible;pointer-events:none;color:var(--navy,#000);transform:rotate(-90deg)}
.pd-arc circle{fill:none;stroke:var(--y,#FFDC00);stroke-width:1.6;stroke-linecap:round}
@media(max-width:860px){.pd-arc circle{stroke-width:2.4}}
.cycle.pd-on .pd-arc{animation:pdSpin 4.8s linear infinite;animation-play-state:paused}
.cycle.pd-on .node b{animation:pdLit 4.8s linear infinite;animation-play-state:paused}
.cycle.pd-on .n-p b{animation-delay:-.48s}
.cycle.pd-on .n-d b{animation-delay:.72s}
.cycle.pd-on .n-c b{animation-delay:1.92s}
.cycle.pd-on .n-a b{animation-delay:3.12s}
.cycle.pd-on.pd-run .pd-arc,.cycle.pd-on.pd-run .node b{animation-play-state:running}
@keyframes pdSpin{
 0%{transform:rotate(-90deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 15%,25%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 40%,50%{transform:rotate(90deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 65%,75%{transform:rotate(180deg);animation-timing-function:cubic-bezier(.45,0,.25,1)}
 90%,100%{transform:rotate(270deg)}
}
@keyframes pdLit{
 0%,27%,100%{transform:none}
 3%,22%{transform:scale(1.16);box-shadow:0 0 0 6px rgba(255,220,0,.55),0 8px 18px -6px rgba(200,160,0,.9)}
}

@media (prefers-reduced-motion:reduce){
 .an{opacity:1!important;transform:none!important;transition:none!important}
 .pd-arc{display:none}
 .cycle.pd-on .node b{animation:none!important}
}

/* トップの導入事例：スマホ（860px以下）は指で横にスライドする（2026-10-22 試し）
   自動で流れる動きは止め、同じカードの写し（aria-hidden）は隠す。PCは今のまま。
   JSが無くてもスライドはできる。下の点（今のカード）だけJSで付ける。 */
@media(max-width:860px){
 #cases .cslider{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-mask-image:none;mask-image:none}
 #cases .cslider::-webkit-scrollbar{display:none}
 #cases .ctrack{animation:none;transform:none;padding:0 24px;gap:14px}
 #cases .ctrack>[aria-hidden="true"]{display:none}
 #cases .ctrack>.case3{width:82vw;max-width:360px;scroll-snap-align:start;scroll-snap-stop:always}
 #cases .cdots{display:flex;justify-content:center;gap:8px;height:16px;align-items:center;margin:-16px 0 0;padding:0;position:relative}
 #cases .cdots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(0,0,0,.22);cursor:pointer;position:relative;transition:width .25s,background .25s}
 #cases .cdots button[aria-current="true"]{width:22px;background:var(--navy,#000)}
 #cases .cdots button::before{content:"";position:absolute;inset:-10px -6px}
}
@media(min-width:861px){#cases .cdots{display:none}}
@media(max-width:860px) and (prefers-reduced-motion:reduce){#cases .cslider{scroll-behavior:auto}#cases .cdots button{transition:none}}

/* 区切りを斜めに（worx.jp を参考に「X」に見える形）2026-10-22 試し
   ・区切りごとに向きを交互に（\ → / → \ …）。どのページも1つ目は \（worx.jp の黒い帯の上と同じ）
   ・2つの色の境目の斜めに、反対向きの細い黄色の帯（高さの約1/3）を、境目がいちばん低い側で交差させる
   ・黄色の区切りでは差し色を黒に。背景の色がちがう区切りだけ。JSなしでも出る。動きではないので「動きを減らす」設定でも同じ
   ・斜めの高さ：スマホ40px、PC100px（幅の約8%。worx.jp の黒い帯に近い角度）。文・画像・ボタン・フォームには重ならない（重なる所は余白を足す） */
:root{--sl:clamp(40px,7.8vw,100px)}
/* 1 最初の画面→紹介動画 \ */
.hero+#video::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23f6f6f8'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 2 紹介動画→悩み / */
#video+#prob::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,10 0,10' fill='%23fff'/%3E%3Cpolygon points='44,10 0,1.5 0,4.8 28,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 3 悩み→選ばれる理由 \（悩みの白を下へ重ねる） */
#prob:has(+#why)::after{content:"";position:absolute;left:0;right:0;bottom:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,10' fill='%23fff'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 4 PDCA→主な機能 / */
.pdca+.sec::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,10 0,10' fill='%23fff'/%3E%3Cpolygon points='44,10 0,1.5 0,4.8 28,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 5 利用シーン→導入事例 \ */
#scenes+#cases::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23fffbe0'/%3E%3Cstop offset='.8' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,0 100,10 0,10' fill='url%28%23g%29'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 6 導入事例→黄色の相談 /（黄色なので差し色は黒） */
#cases+#flow::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,10 0,10' fill='%23FFF000'/%3E%3Cpolygon points='44,10 0,1.5 0,4.8 28,10' fill='%23111'/%3E%3C/svg%3E")}
/* 7 相談→会社 \ */
#flow+#company::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23fff'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 8 会社→よくある質問 / */
#company+.sec--gray::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='100,0 100,10 0,10' fill='%23f5f6fa'/%3E%3Cpolygon points='44,10 0,1.5 0,4.8 28,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 9 よくある質問→黒 \（worx.jp の黒い帯の上と同じ形） */
.sec--gray+.final::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23000'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
/* 事例WorX：本文→ほかの導入事例 \ */
section+section.rel::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23f6f7fa'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
.hero+#video,#video+#prob,#prob:has(+#why),.pdca+.sec,#scenes+#cases,#cases+#flow,#flow+#company,#company+.sec--gray,.sec--gray+.final,section+section.rel{position:relative}
.hero+#video{border-top-color:transparent}
.hero:has(+#video){padding-bottom:calc(32px + var(--sl))}
@media(max-width:860px){.hero:has(+#video){padding-bottom:calc(24px + var(--sl))}}
/* ページ見出し（一覧・個人情報・理由）の下 \ ：見出しの文に重ならないよう、見出しの下の余白を斜めの分だけ足す（タブのある資料請求・お問い合わせは付けない） */
@supports selector(:has(a)){
 section.ph:not(:has(.tabs)):has(+section){padding-bottom:calc(40px + var(--sl))}
 section.ph:not(:has(.tabs))+section{position:relative}
 section.ph:not(:has(.tabs))+section::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23fff'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
 section.ph:not(:has(.tabs))+section.pm[style*="f6f7fa"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23f6f7fa'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
}
@media(max-width:860px){@supports selector(:has(a)){section.ph:not(:has(.tabs)):has(+section){padding-bottom:calc(26px + var(--sl))}}}
/* トップの最後の黒い帯がスマホで出ない形（見出しの無い帯・#9）のときは、よくある質問のすぐ下のフッターに同じ形を付ける */
@media(max-width:860px){@supports selector(:has(a)){
 .sec--gray+.final:not(:has(h2))+footer{position:relative}
 .sec--gray+.final:not(:has(h2))+footer::before{content:"";position:absolute;left:0;right:0;top:calc(1px - var(--sl));height:var(--sl);pointer-events:none;z-index:1;background:no-repeat 0 0/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,10 0,10' fill='%23000'/%3E%3Cpolygon points='56,10 100,1.5 100,4.8 72,10' fill='%23FFDC00'/%3E%3C/svg%3E")}
}}
/* 斜めを深くした分、文・画像に重ならないよう境目の手前の余白を足す（足りている所はそのまま） */
#video:has(+#prob),.pdca:has(+.sec),#scenes:has(+#cases),#cases:has(+#flow),#company:has(+.sec--gray),.sec--gray:has(+.final){padding-bottom:max(72px,calc(var(--sl) + 12px))}
#flow:has(+#company){padding-bottom:max(64px,calc(var(--sl) + 12px))}
#prob+#why{padding-top:max(72px,calc(var(--sl) + 12px))}
section:has(+section.rel){padding-bottom:max(0px,calc(var(--sl) - 40px))}
@media(max-width:860px){
 #video:has(+#prob){padding-bottom:max(36px,calc(var(--sl) + 12px))}
 .pdca:has(+.sec),#scenes:has(+#cases),#cases:has(+#flow),#company:has(+.sec--gray),.sec--gray:has(+.final){padding-bottom:max(48px,calc(var(--sl) + 12px))}
 #prob+#why{padding-top:max(48px,calc(var(--sl) + 12px))}
}
/* 最初の画面の背景を、#10 より前と同じ色のまま、斜めの分だけ縦に伸ばす（2026-10-22 藤原さん「前のカラーをそのまま引き伸ばす形に」「カラーをそのまま使いたい」）
   ・新しい色は足さない。もとの背景（120度の黄色→白→青みのグレー）は、もともと最初の画面の高さいっぱいに広がる
   ・右上の黄色の四角（::before、620px角を11度傾けたもの）だけ、下へ長くする。短いままだと、左下に四角の外の白い三角（白っぽい帯）が出る
   ・幅の広いiPhone（Plus / Pro Max：428〜440px）は四角が右に寄るぶん、左下の白が大きく出る。スマホ幅では、390pxを超えた幅の分も足して長くする
   ・JSは使わない（CSSだけで、JSが動かなくても同じ見え方にする） */
.hero:has(+#video)::before{height:calc(620px + var(--sl))}
@media(max-width:480px){.hero:has(+#video)::before{height:calc(620px + var(--sl) + max(0px,100vw - 390px))}}