/* Ad Arch Agents 紹介ページ（A案 写真が主役・2026-10-04）
   白地・墨・橙はボタンと英語小見出しの短い線だけ。角丸はボタンだけ（2px）。常に明るい表示。
   動きは末尾の「動き」のまとまりに集めてある（動きを減らす設定・「動きを止める」では全部静止）。 */
:root{--p:#fff;--alt:#f7f6f4;--k:#111;--s:#6a6a6a;--rule:#e6e4e0;--mute:#b8b8b4;--ac:#f19834;--ac2:#d97f18;--jp:'IBM Plex Sans JP','Hiragino Sans',sans-serif;--en:'IBM Plex Sans',Arial,sans-serif;--pad:clamp(20px,4.5vw,64px);--head:76px;color-scheme:light only}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--head) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--p);color:var(--k);font-family:var(--jp);font-size:15px;font-weight:400;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
h1,h2,h3{font-weight:600;letter-spacing:.02em;line-height:1.3}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:0}
button,a,summary{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
::selection{background:#ffe1b9;color:var(--k)}
[hidden]{display:none!important}
.skip{position:fixed;left:20px;top:10px;transform:translateY(-200%);background:var(--k);color:#fff;z-index:100;padding:10px 18px}
.skip:focus{transform:none}
.wrap{max-width:1280px;margin:0 auto}


/* ヘッダー：最初から白地・墨の文字。動いたら細い線が付く */
.head{position:sticky;top:0;z-index:30;height:var(--head);padding:0 var(--pad);display:flex;align-items:center;gap:clamp(18px,2.6vw,36px);background:#fff;color:var(--k);border-bottom:1px solid var(--rule)}
.js .head:not(.solid){border-color:transparent}
.brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;margin-right:auto}
.brand .logo{width:150px;height:auto;display:block}
.brand img{width:126px;height:auto}
.brand>span{border-left:1px solid currentColor;padding-left:12px;font:500 21px/1 var(--en);letter-spacing:-.01em}
.nav{display:flex;gap:clamp(18px,2.6vw,36px);font-size:13px}
.nav a{padding:8px 0;background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat}
.nav a:hover,.nav a.active{background-size:100% 1px}

/* ボタン（橙・文字は墨） */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:54px;padding:14px 24px;background:var(--ac);color:var(--k);border-radius:2px;font-size:14px;font-weight:600;line-height:1.4}
.btn>span{font:400 20px/1 var(--en)}
.btn:hover{background:#f5a94e}
.btn:hover>span{transform:translate(3px,-3px)}
.btn-k{background:var(--k);color:#fff}
.btn-k:hover{background:#333}
.btn-top{min-height:44px;padding:10px 18px;font-size:13px;gap:18px}
.btn-top>span{font-size:17px}
.btn-big{min-height:78px;padding:20px 34px;gap:44px;font-size:clamp(18px,1.55vw,22px)}
.btn-big>span{font-size:26px}
.text-link{display:inline-flex;align-items:center;gap:22px;font-size:13px;font-weight:500;line-height:1.7;border-bottom:1px solid currentColor;padding:6px 0}
.text-link span{font:400 19px/1 var(--en)}
.text-link:hover span{transform:translate(3px,-3px)}
.copy-mini{border:1px solid var(--k);font-size:11px;font-weight:600;line-height:1;padding:0 12px;min-height:32px;flex-shrink:0;border-radius:2px;white-space:nowrap}
.copy-mini:hover{background:var(--k);color:#fff}
.eb{font:400 11px/1.5 var(--en);letter-spacing:.18em;text-transform:uppercase;color:var(--s);display:flex;align-items:center;gap:.9em}
.eb::before{content:'';width:2.4em;height:2px;background:var(--ac);flex-shrink:0}

/* 冒頭：白地に大見出し → 頼めることの帯 → Claude｜ChatGPT の切替 → 写真の面に白い札 */
.hero-in{padding:clamp(18px,2.4vw,34px) var(--pad) 0}
.hero-mark{font:400 clamp(14px,1.2vw,17px)/1.5 var(--en);color:var(--s);display:flex;align-items:center;gap:.8em}
.hero-mark::before{content:'';width:2.2em;height:2px;background:var(--ac);flex-shrink:0}
.hero h1{font-size:clamp(44px,5.4vw,80px);line-height:1.2;margin-top:12px}
.hero h1 .ln{display:block;overflow:hidden;padding:.04em 0}
.hero h1 .ln>span{display:inline-block;white-space:nowrap}
.kinds{margin-top:clamp(18px,2vw,28px);border-top:1px solid var(--k);border-bottom:1px solid var(--rule);padding:8px 0;scroll-margin-top:calc(var(--head) + 12px)}
.kinds ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 26px;font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.6}
.kinds a{display:inline-flex;align-items:center;min-height:38px;background:linear-gradient(currentColor,currentColor) left 82%/0 1px no-repeat}
.kinds a:hover,.kinds a:focus-visible{background-size:100% 1px}
.kinds ul+ul{display:none}
.hero-tabs{display:flex;align-items:center;gap:8px 20px;margin:clamp(14px,1.5vw,20px) 0 12px;scroll-margin-top:calc(var(--head) + 12px)}
.ai-tabs{display:flex;gap:6px}
.ai-tabs button{font:500 clamp(15px,1.2vw,17px)/1.4 var(--en);padding:10px 22px;min-height:46px;color:var(--s);border:1px solid transparent}
.ai-tabs button:hover{color:var(--k)}
.ai-tabs button[aria-selected=true]{color:var(--k);border-color:var(--k)}
.connector-name{font-size:12px;line-height:1.6;color:var(--s)}
.connect .connector-name{margin-top:14px}
.hero-panel{position:relative;overflow:hidden;background:#1c1c1c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:clamp(300px,25vw,380px);padding:clamp(20px,3.4vw,48px) clamp(12px,3.4vw,48px)}
.hero-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-panel::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28);pointer-events:none}
.hero-card{position:relative;z-index:2;background:#fff;width:min(560px,100%);padding:clamp(22px,2.6vw,34px) clamp(20px,2.8vw,38px)}
html.js .hero-panel:not([data-ai=gpt]) #aiPanel1,html.js .hero-panel[data-ai=gpt] #aiPanel0{display:none}
.hero-card h2{font-size:clamp(19px,1.7vw,24px);line-height:1.4;margin-bottom:clamp(14px,1.5vw,20px)}
.card-url{border:1px solid var(--k);padding:12px 14px 12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-url code{font:400 clamp(15px,1.4vw,20px)/1.4 var(--en);overflow-wrap:anywhere}
.hero-foot{display:flex;justify-content:flex-end;align-items:center;gap:20px;font-size:10px;color:var(--s);padding-top:6px}
.motion{font-size:10px;min-height:30px;display:inline-flex;gap:10px;align-items:center;color:inherit}
.motion:hover{color:var(--k)}

/* 会話デモ（最初は畳んでおく） */
.demo{margin-top:8px}
html.js .demo>summary{display:none}
.demo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:14px 0;font-size:13px;font-weight:500}
.demo>summary::-webkit-details-marker{display:none}
.demo>summary i{font:400 18px/1 var(--en);font-style:normal}
.demo[open]>summary i{transform:rotate(180deg)}
.demo-body{background:var(--alt);padding:clamp(20px,3.4vw,48px);margin-top:14px}
.demo-inner{max-width:820px;margin:0 auto}
.demo-bar{display:flex;justify-content:flex-end}
.demo-close{width:44px;height:44px;display:grid;place-items:center;font:300 28px/1 var(--en);flex-shrink:0}
.demo-close:hover{color:var(--s)}
.conversation-demo{background:#fff;padding:clamp(20px,3vw,30px);margin-top:6px;min-width:0;scroll-margin-top:calc(var(--head) + 14px)}
.conversation-head{display:flex;justify-content:space-between;gap:15px;font-size:11px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.conversation-head span:last-child{color:var(--s);font-size:10px}
.experience-panel{padding-top:24px}
.demo-user{background:var(--alt);padding:16px 20px;margin-left:clamp(12px,4vw,36px)}
.demo-user>span{font-size:10px;color:var(--s);display:block;margin-bottom:6px}
.demo-user p{font-size:15px;line-height:1.85}
.demo-assistant{margin:24px 0 0}
.demo-assistant>p{font-size:14px;line-height:1.95}
.knowledge-label{display:inline-block;font-size:10px;line-height:1.5;border-bottom:1px solid var(--k);padding:0 0 5px;margin-bottom:14px}
.demo-assistant .knowledge-source{font-size:10px;color:var(--s);border-top:1px solid var(--rule);margin-top:18px;padding-top:12px}
.consultation-progress{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--s);margin:18px 0 4px}
.consultation-progress i{font-style:normal;color:var(--mute)}
.consultation-progress span{padding-bottom:5px;border-bottom:2px solid transparent}
.consultation-progress span.current{color:var(--k);border-color:var(--k)}
.consultation-replies{padding:20px 0 4px;border-top:1px solid var(--rule);margin-top:20px}
.consultation-replies>p{font-size:10px;color:var(--s);margin:0 0 10px}
.consultation-reply{width:100%;display:block;text-align:left;background:var(--p);border:1px solid var(--k);padding:15px 42px 15px 17px;font-size:13px;line-height:1.85;position:relative}
.consultation-reply::after{content:'↗';position:absolute;right:14px;bottom:14px;font:400 18px var(--en)}
.consultation-reply:hover{background:var(--alt)}
.consultation-turn{border-top:1px solid var(--rule);padding-top:22px;margin-top:22px}
.consultation-ai-label{font-size:10px;color:var(--s);display:block;margin-bottom:10px}
.consultation-end{border-top:1px solid var(--rule);padding:20px 0 0;margin-top:20px}
.consultation-end p{font-size:13px;line-height:1.9;margin:0 0 12px}
.consultation-end>button{font-size:12px;border-bottom:1px solid var(--k);padding:0 0 4px}
.demo-tools{margin-top:22px}
.demo-tools .text-link{font-size:12px}

/* 段の共通 */
.sec{padding:clamp(60px,6.8vw,98px) var(--pad)}
.sec h2,.connect h2{font-size:clamp(28px,3.2vw,46px);margin-top:18px}
.ph>span{display:inline-block}
.image-note{font-size:10px;color:var(--s);margin-top:10px;line-height:1.7}

/* 「つくる」「届ける」の段と、助言→依頼→受付の図 */
.block{padding-top:clamp(80px,9.6vw,148px);padding-bottom:0}
.block h2{margin-top:12px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:clamp(24px,3vw,44px) 0 12px}
.tabs button{font-size:clamp(14px,1.15vw,16px);font-weight:500;line-height:1.4;padding:10px 20px;min-height:44px;color:var(--s);border:1px solid transparent}
.tabs button:hover{color:var(--k)}
.tabs button[aria-pressed=true]{color:var(--k);border-color:var(--k)}
.showcase{background:var(--alt);padding:clamp(16px,3.4vw,48px)}
.block-actions{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:22px}
.block-actions .text-link{font-size:13px}
.media-shots{display:grid;gap:8px;min-width:0}
.media-shot{position:relative;aspect-ratio:2/1;overflow:hidden;background:#1c1c1c;color:#fff}
html.js .media-shot:not(.on){display:none}
.media-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.6));pointer-events:none}
.media-shot figcaption{position:absolute;z-index:2;left:22px;bottom:16px;font-size:clamp(18px,1.9vw,26px);font-weight:600;line-height:1.4}
.rail-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,5vw,72px);align-items:start;margin-top:clamp(18px,2vw,28px)}
.rail{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;border-top:1px solid var(--k)}
.rail-more{font-size:12px;line-height:1.6;color:var(--s);border-bottom:1px solid var(--rule);margin-top:14px;padding-bottom:2px}
.rail-more:hover{color:var(--k);border-color:var(--k)}
.rail::after{content:'';position:absolute;left:0;right:0;top:-2px;height:3px;background:var(--ac);transform-origin:left center}
.rail li{padding:14px 8px 0 0;font-size:clamp(14px,1.45vw,20px);font-weight:600;line-height:1.5}
.rail b{font:400 13px var(--en);margin-right:10px}
.flowbox .showcase{margin-top:clamp(18px,1.9vw,26px)}
.stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(14px,2.8vw,40px)}
.win{border:1px solid var(--k);background:#fff;display:flex;flex-direction:column;min-width:0}
.win-bar{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--s);padding:14px 22px 0}
.win-body{padding:14px 22px 24px;display:flex;flex-direction:column;gap:14px}
.me{text-wrap:balance;word-break:auto-phrase}
.me{align-self:flex-end;background:var(--k);color:#fff;font-size:clamp(15px,1.2vw,17px);font-weight:500;line-height:1.6;padding:11px 18px;border-radius:18px 18px 3px 18px;max-width:88%}
.ai{align-self:flex-start;background:var(--alt);font-size:clamp(13px,1.05vw,15px);line-height:1.75;padding:12px 16px;border-radius:3px 18px 18px 18px;max-width:94%}
.ai small{display:block;font-size:10px;color:var(--s);margin-bottom:4px}
.request{margin-top:10px}
.request>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--s);padding:6px 0}
.request>summary::-webkit-details-marker{display:none}
html.js .request>summary{display:none}
.request-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px clamp(16px,2.8vw,40px);align-items:end;border-top:1px solid var(--rule);padding:18px 0 4px}
.request-in>p{font-size:12px;color:var(--s);line-height:1.9}
.ask{border:1px solid var(--rule);padding:16px 18px;font-size:13px}
.ask>b{display:block;font-size:14px;font-weight:600;line-height:1.6;margin-bottom:8px}
.ask dl{margin:0}
.ask dl>div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:10px;line-height:1.9}
.ask dt{color:var(--s)}
.site{position:relative;min-height:clamp(240px,22vw,300px)}
.assure{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(20px,3vw,44px);margin-top:clamp(28px,3.4vw,48px)}
.assure li{border-top:1px solid var(--k);padding-top:16px}
.assure b{display:block;font-size:clamp(15px,1.25vw,17px);font-weight:600;line-height:1.6}
.assure span{display:block;font-size:13px;color:var(--s);line-height:1.9;margin-top:6px}
.site-in{position:absolute;inset:0;overflow:hidden;color:#fff;background:#1c1c1c}
.site-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-in::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.68));pointer-events:none}


/* 全国 */
.block+.nation{margin-top:clamp(80px,9.6vw,148px)}
.nation{position:relative;min-height:clamp(400px,39vw,560px);display:flex;align-items:center;color:#fff;background:#1c1c1c;overflow:hidden}
.nation>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nation::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.56);pointer-events:none}
.nation-in{position:relative;z-index:2;width:100%;padding:64px var(--pad)}
.nation h2{font-size:clamp(30px,4.5vw,64px)}
.regions{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px clamp(16px,2vw,28px);font-size:clamp(16px,1.55vw,22px);margin-top:28px}
.nation .text-link{margin-top:32px}

/* よくある質問 */
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:8%}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child{border-top:1px solid var(--k)}
.faq summary{list-style:none;cursor:pointer;font-size:15px;padding:22px 40px 22px 0;position:relative;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'＋';position:absolute;right:2px;top:21px;font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details p{font-size:13px;color:var(--s);padding:0 40px 24px 0;line-height:1.95}

/* AIにつなぐ */
.connect{background:var(--alt);padding:clamp(64px,7.6vw,110px) var(--pad)}
.connect-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px clamp(32px,5.5vw,80px);align-items:end;margin-top:36px}
.url{border-bottom:1px solid var(--k);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.url code{font:400 clamp(16px,1.8vw,26px)/1.4 var(--en);overflow-wrap:anywhere}
.connect-actions{display:flex;flex-wrap:wrap;gap:12px}
.current-service-note{background:#fff;font-size:12px;color:var(--s);line-height:1.95;padding:16px 20px;margin-top:36px}

/* フッター */
.foot{padding:48px var(--pad) 28px;border-top:1px solid var(--rule)}
.foot-top{display:flex;gap:20px;justify-content:space-between;align-items:center}
.foot-links{display:flex;gap:32px;font-size:12px}
.foot-links a:hover{text-decoration:underline}
.foot-info{display:flex;justify-content:space-between;gap:30px;margin:32px 0;color:var(--s);font-size:11px;line-height:1.95}
.copyright{font:400 10px var(--en);color:var(--s);border-top:1px solid var(--rule);padding-top:20px}

/* スマホの下固定ボタン・お知らせ */
.mbar{display:none}
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,10px);background:var(--k);color:#fff;padding:11px 20px;font-size:12px;opacity:0;visibility:hidden;pointer-events:none;z-index:90;max-width:90vw;width:max-content}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

@media(max-width:860px){
.stage{grid-template-columns:1fr}
.rail-wrap{grid-template-columns:1fr;gap:0}
.rail-more{justify-self:end;margin-top:10px}
.request-in{grid-template-columns:1fr}
.assure{grid-template-columns:1fr;gap:16px}
.win-bar{padding:12px 16px 0}
.win-body{padding:12px 16px 18px}
.rail li{font-size:12px;padding:10px 0 0;white-space:nowrap}
.rail b{display:block;margin:0 0 2px;font-size:11px}
.ask dl>div{grid-template-columns:6.2em minmax(0,1fr)}
.site{min-height:260px}
}
@media(max-width:1000px){
.faq-grid{grid-template-columns:1fr;gap:28px}
.connect-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
:root{--head:64px}
.tabs button{padding:8px 13px;min-height:40px;font-size:13px}
.showcase{padding:12px}
.media-shot figcaption{left:14px;bottom:10px}
body{font-size:14px}
.nav,.btn-top{display:none}
.brand .logo{width:112px}
.brand>span{font-size:18px;padding-left:10px}
.brand{gap:10px}
.hero-in{padding-top:12px}
.hero h1{font-size:clamp(30px,9.6vw,38px);line-height:1.24;margin-top:6px}
.kinds{padding:8px 0;margin-top:12px}
.kinds ul{font-size:12px;gap:5px}
.kinds a{border:1px solid var(--k);padding:0 8px;min-height:29px;background:none}
.media-shot{aspect-ratio:4/3}
.hero-tabs{margin:8px 0 6px}
.ai-tabs button{padding:8px 16px;min-height:42px;font-size:15px}
.hero-panel{min-height:0;padding:14px 12px}
.hero-card{padding:16px}
.hero-card h2{font-size:17px;text-wrap:balance;margin-bottom:12px}
.hero-card .btn-big{width:100%}
.card-url code{font-size:14px}
.btn-big{min-height:60px;padding:14px 20px;font-size:18px}
.hero-foot{gap:16px}
.demo-user p{font-size:14px}
.nation-in{padding:56px var(--pad)}
.regions{gap:6px 18px}
.faq summary{font-size:14px;padding:19px 34px 19px 0}
.faq summary::after{top:18px}
.faq details p{padding-right:10px}
.url code{font-size:17px}
.connect-actions .btn{flex:1 1 100%}
.foot{padding:36px var(--pad) 104px}
.foot-top{flex-direction:column;align-items:flex-start;gap:24px}
.foot-links{gap:24px}
.foot-info{flex-direction:column;gap:18px;margin:26px 0}
.mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--rule);padding:10px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden}
.mbar.show{transform:none;visibility:visible}
.mbar .btn{width:100%;min-height:52px;font-size:15px}
.toast{bottom:92px}
}
@media(max-width:360px){
.rail li{font-size:11px}
.kinds ul{font-size:11px;gap:4px}
.kinds a{padding:0 7px}
.hero-card h2{font-size:15px}
.card-url{padding:10px 10px 10px 12px;gap:8px}
.card-url code{font-size:12px}
.copy-mini{padding:0 9px}
.url code{font-size:15px}
}

.paused *,.paused *::before,.paused *::after{transition:none!important}

/* ============ 動き ============
   ・ここより上だけで全部読める（JSが無い・動きを減らす設定・「動きを止める」＝全部静止で表示）
   ・現れる動きは html.js のときだけ「隠して→現す」。隠すのは .in が付くまで */
@media(prefers-reduced-motion:no-preference){
html:not(.paused){scroll-behavior:smooth}
html:not(.paused) .head{transition:border-color .45s}
html:not(.paused) :is(.btn,.copy-mini,.consultation-reply){transition:background-color .25s,color .25s}
html:not(.paused) :is(.btn>span,.text-link span,.demo>summary i){transition:transform .45s cubic-bezier(.2,.7,.2,1)}
html:not(.paused) .nav a{transition:background-size .35s}
html:not(.paused) .toast{transition:opacity .25s,transform .25s,visibility .25s}
html:not(.paused) .mbar{transition:transform .4s cubic-bezier(.2,.7,.2,1),visibility .4s}

/* 冒頭の入り：写真がゆっくり寄る／見出しが行ごとに下から／アーチの線が描かれる */
html:not(.paused) .hero-mark{animation:fade-in .9s ease-out .05s both}
html:not(.paused) .hero h1 .ln>span{animation:line-rise 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
html:not(.paused) .hero h1 .ln+.ln>span{animation-delay:.36s}
html:not(.paused) .kinds{animation:fade-up .9s ease-out 1s both}
html:not(.paused) .hero-tabs{animation:fade-in .9s ease-out 1.25s both}
html:not(.paused) .hero-panel{animation:open-y 1.2s cubic-bezier(.5,0,.2,1) 1.35s both}
html:not(.paused) .hero-panel>img{animation:hero-zoom 20s cubic-bezier(.2,.5,.3,1) 1.35s both}
html:not(.paused) .hero-card{animation:fade-up .45s ease-out both}
html:not(.paused) .hero-panel:not(.ready) .hero-card{animation-delay:2.1s}
html:not(.paused) .hero-foot{animation:fade-in 1s ease-out 2.2s both}
html:not(.paused) .ai-tabs button{transition:color .25s,border-color .25s}
/* 頼めることの帯：PC幅ではゆっくり横に流れる（同じ並びを3つつないで切れ目なく）。マウスを乗せる・キーで入ると止まって押せる。
   スマホ・「動きを止める」・動きを減らす設定では、1つ分を折り返して全部見せる */
@media(min-width:701px){
html:not(.paused) .kinds{overflow:hidden}
html:not(.paused) .kinds-track{display:flex;width:max-content;animation:kinds-flow 72s linear infinite}
html:not(.paused) .kinds:hover .kinds-track,html:not(.paused) .kinds:focus-within .kinds-track{animation-play-state:paused}
html:not(.paused) .kinds ul,html:not(.paused) .kinds ul+ul{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:0 26px;padding-right:26px}
}
html:not(.paused) .head .arch-draw{stroke-dasharray:1;animation:arch-draw 1.5s cubic-bezier(.4,.1,.2,1) .2s both}
html:not(.paused) .head .logo-word{animation:fade-in .9s ease-out .9s both}
html:not(.paused) .head .brand>span{animation:fade-in .9s ease-out 1.15s both}


/* スクロールで現れる */
html.js:not(.paused) [data-rv]:not(.in){opacity:0;transform:translateY(22px)}
html.js:not(.paused) [data-rv]{transition:opacity .9s ease-out,transform .9s cubic-bezier(.2,.7,.2,1)}
html.js:not(.paused) h2[data-rv]{transition-delay:.08s}
/* 「つくる」の図：相談する → 助言をもらう → 自分で進める。画面に入ったら1回、切替を押したらもう1回（.play）。くり返さない。
   動かないとき（JSなし・動きを減らす・動きを止める）は最後まで進んだ状態 */
html.js:not(.paused) .flowbox:not(.play) :is(.me,.ai){opacity:0}
html.js:not(.paused) .flowbox:not(.play) .site-in{clip-path:inset(0 0 100% 0)}
html.js:not(.paused) .flowbox:not(.play) .rail::after{transform:scaleX(0)}
html.js:not(.paused) .flowbox:not(.play) .rail li{color:var(--mute)}
html:not(.paused) .flowbox.play .me{animation:fade-up .5s ease-out .2s both}
html:not(.paused) .flowbox.play .ai{animation:fade-up .5s ease-out 1.2s both}
html:not(.paused) .flowbox.play .me2{animation-delay:2.8s}
html:not(.paused) .flowbox.play .ai2{animation-delay:3.9s}
html:not(.paused) .flowbox.play .site-in{animation:open-y 1.1s cubic-bezier(.5,0,.2,1) 4.9s both}
html:not(.paused) .flowbox.play .site-in img{animation:site-zoom 5s cubic-bezier(.2,.6,.2,1) 4.9s both}
html:not(.paused) .flowbox.play .rail::after{animation:rail-go 5.6s linear both}
html:not(.paused) .flowbox.play .rail li{animation:step-lit .45s ease-out both}
html:not(.paused) .flowbox.play .rail li:nth-child(1){animation-delay:.3s}
html:not(.paused) .flowbox.play .rail li:nth-child(2){animation-delay:1.3s}
html:not(.paused) .flowbox.play .rail li:nth-child(3){animation-delay:5.1s}
html:not(.paused) .request[open] .request-in{animation:fade-up .45s ease-out both}
html.js:not(.paused) .assure:not(.in)>li{opacity:0;transform:translateY(14px)}
html.js:not(.paused) .assure>li{transition:opacity .8s ease-out calc(var(--i,0) * .12s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .12s)}
html:not(.paused) .tabs button{transition:color .25s,border-color .25s}
html:not(.paused) .media-shot.on{animation:open-y .9s cubic-bezier(.5,0,.2,1) both}
html:not(.paused) .media-shot.on img{animation:site-zoom 4s cubic-bezier(.2,.6,.2,1) both}
/* 全国：写真が開き、地方名が順に灯る */
html.js:not(.paused) .nation:not(.in)>img{transform:scale(1.08)}
html.js:not(.paused) .nation>img{transition:transform 2.4s cubic-bezier(.2,.6,.2,1)}
html.js:not(.paused) .nation:not(.in) h2{opacity:0;transform:translateY(22px)}
html.js:not(.paused) .nation h2{transition:opacity .9s ease-out .1s,transform .9s cubic-bezier(.2,.7,.2,1) .1s}
html.js:not(.paused) .nation:not(.in) .regions li{opacity:.28}
html.js:not(.paused) .nation .regions li{transition:opacity .7s ease-out calc(var(--i,0) * .16s + .5s)}
html.js:not(.paused) .nation:not(.in) .text-link{opacity:0}
html.js:not(.paused) .nation .text-link{transition:opacity .8s ease-out 1.9s}
/* 会話デモ */
html:not(.paused) .demo[open] .demo-body{animation:fade-up .5s ease-out both}
html:not(.paused) .experience-panel{animation:fade-in .35s ease-out}
html:not(.paused) .consultation-turn{animation:fade-up .4s ease-out}
}
@keyframes hero-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes open-y{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes kinds-flow{from{transform:none}to{transform:translateX(-33.3333%)}}
@keyframes line-rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes arch-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes step-lit{from{color:var(--mute)}to{color:var(--k)}}
@keyframes site-zoom{from{transform:scale(1.08)}to{transform:none}}
@keyframes rail-go{0%,3%{transform:scaleX(0)}9%,20%{transform:scaleX(.3334)}27%,88%{transform:scaleX(.6667)}96%,100%{transform:scaleX(1)}}