/* 最初の画面より下の区切り（試作）。黒 #000／白 #fff／細い線 rgba(255,255,255,.2)。色を持つのは写真・動画だけ。
   書体は Saira Condensed（英字）と Zen Kaku Gothic New（日本語）だけ。 */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id],footer[id]{scroll-margin-top:var(--nav-h)}
:root{--pad-y:clamp(88px,13vh,150px)}
.nav.solid{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav{transition:background .3s ease}

/* ---------- 出現（JSが止まっても消えない：html.js のときだけ隠し、3秒で全部表示） ---------- */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in,html.js.showall .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- 画面いっぱいの区切り（衛星・AI導入） ---------- */
.panel{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.panel-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.panel-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(0,0,0,.86) 0,rgba(0,0,0,0) 62%),
  linear-gradient(to right,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 58%)}
.panel-copy{position:absolute;left:var(--gx);bottom:clamp(40px,6.8vh,80px);z-index:5}
.panel-en{
  font-family:var(--font-en);font-weight:600;text-transform:uppercase;white-space:nowrap;
  font-size:calc(min(var(--pn-vw,7.4vw),15vh) * var(--en-k));line-height:1.05;letter-spacing:.005em;
  margin-bottom:clamp(12px,1.6vh,18px);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.panel-jp{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:max(18px,2.1vw);line-height:1.6;letter-spacing:.02em;text-shadow:0 1px 14px rgba(0,0,0,.6);margin-bottom:clamp(10px,1.6vh,16px)}
.jl{display:inline;white-space:nowrap}
.panel-price{font-family:var(--font-jp);font-weight:500;font-size:clamp(13px,1vw,16px);letter-spacing:.06em;opacity:.9;margin-bottom:clamp(16px,3vh,28px);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.panel-copy .hero-btn{margin-top:clamp(10px,2vh,22px)}
.panel-jp + .hero-btn{margin-top:clamp(16px,3vh,28px)}

/* ---------- 黒地の区切り共通 ---------- */
.blk{position:relative;background:#000;padding:var(--pad-y) var(--gx);border-top:1px solid var(--line)}
.blk-head{margin-bottom:clamp(36px,6vh,64px)}
.blk-en{display:block;font-family:var(--font-en);font-weight:600;text-transform:uppercase;font-size:clamp(40px,6.2vw,110px);line-height:1;letter-spacing:.005em}
.blk-jp{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:max(16px,1.7vw);line-height:1.6;letter-spacing:.02em;margin-top:clamp(10px,1.8vh,18px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-family:var(--font-jp);font-weight:700;font-size:15px;letter-spacing:.1em;cursor:pointer;text-align:center;transition:background .3s,color .3s}
.btn:hover,.btn:focus-visible{background:#fff;color:#000}
.btn-orange{background:rgba(255,255,255,.1)}
.btn-line,.btn-ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:default}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- OTHER SERVICES ---------- */
.os-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.os-grid li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.os-grid li:last-child{border-right:0}
.os-grid a{display:grid;grid-template-rows:auto 1fr auto;gap:14px;min-height:clamp(180px,24vh,260px);padding:clamp(20px,2.2vw,36px);height:100%;transition:background .3s}
.os-grid a:hover,.os-grid a:focus-visible{background:rgba(255,255,255,.06)}
.os-name{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:clamp(17px,1.6vw,26px);line-height:1.45}
.os-price{font-family:var(--font-jp);font-weight:500;font-size:clamp(13px,1vw,16px);letter-spacing:.04em;opacity:.85;align-self:end}
.os-arrow{display:block;transition:transform .3s}
.os-grid a:hover .os-arrow{transform:translateX(8px)}

/* ---------- CASE ---------- */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,32px);align-items:stretch}
.case-card{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.case-img{aspect-ratio:16/10;background:#0b0b0b;overflow:hidden;border:1px solid var(--line)}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.case-card:hover .case-img img{transform:scale(1.04)}
.case-org{font-family:var(--font-jp);font-weight:500;font-size:13px;letter-spacing:.08em;opacity:.75}
.case-card h3{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:clamp(18px,1.5vw,24px);line-height:1.5}
.case-text{font-family:var(--font-jp);font-weight:500;font-size:14px;line-height:1.85;opacity:.85}
.case-card .arrow{margin-top:auto;padding-top:6px}

/* ---------- FLOW（黒地に細い線だけ） ---------- */
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-bottom:28px}
.flow li{display:block;padding:clamp(18px,2vw,30px) clamp(14px,1.6vw,26px) clamp(18px,2vw,30px) 0;border-right:1px solid var(--line);padding-left:clamp(14px,1.6vw,26px)}
.flow li:first-child{padding-left:0}
.flow li:last-child{border-right:0}
.flow .step{display:block;font-family:var(--font-en);font-weight:400;font-size:14px;letter-spacing:.16em;opacity:.6;margin-bottom:12px}
.flow h3{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:clamp(17px,1.4vw,22px);line-height:1.5;margin-bottom:10px}
.flow p{font-family:var(--font-jp);font-weight:500;font-size:14px;line-height:1.85;opacity:.85}
.flow-note{font-family:var(--font-jp);font-weight:500;font-size:14px;line-height:1.85;opacity:.85;border-top:1px solid var(--line);padding-top:16px}

/* ---------- FREE KIT ---------- */
#free-kit .kit-cover{display:block;width:min(560px,100%);height:auto;margin-bottom:28px;border:1px solid var(--line)}
#free-kit .text p,.kit-list li,.kit-note{font-family:var(--font-jp);font-weight:500;font-size:15px;line-height:1.9}
.kit-list{margin:18px 0 26px;padding-left:1.2em;max-width:680px}
.kit-actions{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.kit-note{opacity:.8;font-size:13px}
.lead-magnet-form-wrap,.lead-magnet-success{margin-top:28px;padding:clamp(18px,2.4vw,32px);border:1px solid rgba(255,255,255,.4);background:#050505;max-width:720px}
.lead-magnet-form-wrap[hidden],.lead-magnet-success[hidden]{display:none}
.lead-magnet-form-title,.lead-magnet-success h3{font-family:var(--font-jp);font-weight:700;font-size:20px;line-height:1.5}
.lead-magnet-form-desc,.lead-magnet-success p{font-family:var(--font-jp);font-weight:500;font-size:13px;line-height:1.8;opacity:.85;margin-top:6px}
.lead-magnet-form{display:grid;gap:14px;margin-top:16px}
.lead-magnet-field{display:grid;gap:6px;font-family:var(--font-jp);font-size:14px;font-weight:700}
.lead-magnet-input{width:100%;min-height:48px;padding:10px 12px;border:1px solid rgba(255,255,255,.4);border-radius:0;background:#000;color:#fff;font:inherit;font-weight:500}
select.lead-magnet-input{appearance:none;-webkit-appearance:none}
.lead-magnet-consent{display:flex;gap:10px;align-items:flex-start;font-family:var(--font-jp);font-size:13px;line-height:1.8}
.lead-magnet-consent input{margin-top:6px}
.lead-magnet-consent a{text-decoration:underline}
.lead-magnet-message{font-family:var(--font-jp);font-size:13px;min-height:1.2em}
.diagnosis-hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ---------- FAQ ---------- */
.faq-list{max-width:880px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:clamp(16px,1.3vw,20px);line-height:1.6}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list details p{font-family:var(--font-jp);font-weight:500;font-size:15px;line-height:1.95;opacity:.88;padding:0 0 24px;max-width:760px}

/* ---------- カード4枚 ---------- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,20px);padding:var(--pad-y) clamp(10px,1.2vw,20px) clamp(40px,6vh,80px);background:#000;border-top:1px solid var(--line)}
.c4{position:relative;display:block;aspect-ratio:466/710;overflow:hidden;background:#0b0b0b}
.c4>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform .8s ease,filter .4s}
.c4:hover>img:first-child,.c4:focus-visible>img:first-child{transform:scale(1.05);filter:brightness(.8)}
.c4-name{position:absolute;left:0;right:0;top:50%;transform:translateY(-60%);text-align:center;font-family:var(--font-en);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.6vw,64px);line-height:1;letter-spacing:.01em;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.c4-arrow{position:absolute;left:0;right:0;top:calc(50% + clamp(22px,2.6vw,44px));display:flex;justify-content:center}
.c4-mascot{position:absolute;left:50%;bottom:6%;width:34%;height:auto;transform:translateX(-50%)}

/* ---------- CONTACT・フッター ---------- */
#contact .contact-cta{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
#contact p{font-family:var(--font-jp);font-weight:500;font-size:15px;line-height:1.9}
#contact .note{opacity:.8;font-size:13px}
.foot{background:#000;border-top:1px solid var(--line);padding:clamp(40px,6vh,72px) var(--gx) calc(40px + env(safe-area-inset-bottom));font-family:var(--font-jp);font-weight:500;font-size:14px;line-height:1.9}
.foot .name{font-weight:700;font-size:20px;margin-bottom:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0}
.foot-links a{opacity:.85;text-decoration:underline;text-underline-offset:3px}
.foot small{display:block;opacity:.6;margin-top:12px;font-size:12px}

/* ---------- スマホ・タブレット ---------- */
@media (max-width:899px){
  .os-grid{grid-template-columns:1fr}
  .os-grid li{border-right:0}
  .os-grid a{grid-template-columns:1fr auto;grid-template-rows:auto auto;min-height:0;gap:6px 14px;padding:20px 0}
  .os-name{grid-column:1}
  .os-price{grid-column:1;align-self:start}
  .os-arrow{grid-column:2;grid-row:1/3;align-self:center}
  .case-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow li{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}
  .flow li:first-child{padding-left:0}
  .cards4{grid-template-columns:1fr 1fr}
  .c4-name{font-size:clamp(26px,8vw,44px)}
  .blk-en{font-size:clamp(40px,12vw,72px)}
  .blk-jp{font-size:clamp(16px,4.2vw,22px)}
}
/* スマホ（〜599px）：英字見出し・日本語の最長の塊が画面幅いっぱいに収まる最大の大きさ（左20px・右16px） */
@media (max-width:599px){
  .panel-en{font-size:calc((100vw - 36px) / var(--pn-em,6) * .993)}
  .panel-jp{font-size:min(24px,calc((100vw - 36px) / var(--pn-chunk,15) * .993));line-height:1.6}
  .jl{display:block}
}
@media (min-width:900px) and (max-width:1199px){
  .os-grid{grid-template-columns:repeat(2,1fr)}
  .os-grid li:nth-child(2){border-right:0}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow li:nth-child(2){border-right:0}
  .case-grid{grid-template-columns:1fr 1fr}
}

/* 区切りごとの寸法（実測：英字見出しの幅(em)と日本語の最長の塊(em)。スマホの「幅いっぱい」計算に使う） */
#satellite{--pn-em:5.67;--pn-chunk:14.4}
#ai{--pn-em:4.5;--pn-chunk:18.5}
@media (max-width:899px){
  #ai .panel-media,#satellite .panel-media{filter:brightness(.55)}
  .panel-shade{background:linear-gradient(to top,rgba(0,0,0,.92) 0,rgba(0,0,0,0) 74%),linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 70%)}
}

/* ===== 衛星：3枚の絵（2020→2024→森がなくなった所） ===== */
.panel-sat .sat-figs{position:absolute;left:var(--gx);right:var(--gx);top:calc(var(--nav-h) + clamp(20px,3.4vh,44px));z-index:4;color:#fff}
.sat-cap{font-family:var(--font-jp);font-weight:700;font-feature-settings:"palt";font-size:clamp(14px,1.05vw,18px);letter-spacing:.04em;margin-bottom:12px}
.sat-row{display:flex;align-items:flex-start;gap:clamp(8px,1.2vw,22px)}
.sat-row figure{flex:1 1 0;min-width:0;max-width:calc((100vh - var(--nav-h) - 520px) * 1.08)}
.sat-row img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.sat-row figcaption{font-family:var(--font-jp);font-weight:500;font-size:clamp(11px,.9vw,15px);line-height:1.5;letter-spacing:.03em;margin-top:8px}
.sat-arrow{flex:0 0 auto;align-self:center;margin-top:-26px;opacity:.85}
.sat-credit{left:auto;right:var(--gx);bottom:14px;max-width:min(46vw,640px);text-align:right}
.panel-sat .panel-copy{z-index:5}

/* ===== AI導入：デモ画面を細い線の枠に入れる（案B採用） ===== */
.panel-ai .panel-shade{background:linear-gradient(to top,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 40%)}
/* 見積書デモの録画を外したあと、何もない黒が画面1枚ぶん続かないよう、文字の分だけの高さにする */
.panel-ai{height:auto;min-height:0}
.panel-ai .panel-copy{position:relative;left:auto;bottom:auto;padding:clamp(110px,22vh,220px) var(--gx) clamp(40px,6.8vh,80px)}
@media (max-width:899px){
  }

/* ===== カード4枚：COMPANY＝シカケルくん／CASE＝ダイキ様のタブレット／BLOG＝記事の実画面／NEWS＝ヒーロー動画の1コマ ===== */
.c4 .c4-name{top:72%;transform:translateY(-50%)}
.c4 .c4-arrow{top:calc(72% + clamp(22px,2.6vw,44px))}
.c4-company{background:#000}
.c4-company>img:first-child{object-fit:contain;object-position:50% 0;filter:none}
.c4-company:hover>img:first-child{filter:none;transform:none}
.c4-company .c4-name{top:83%}
.c4-company .c4-arrow{top:calc(83% + clamp(22px,2.6vw,44px))}
.c4-case>img:first-child{object-position:88% 50%}
.c4-blog{background:#0a0a0a}

@media (max-width:599px){
  .sat-row{gap:6px}
  .sat-arrow svg{width:14px}
  .sat-row figcaption{font-size:10px;letter-spacing:0;line-height:1.45}
  .sat-row figure{max-width:none}
}

@media (max-width:599px){
  .panel-sat .panel-copy{bottom:calc(84px + env(safe-area-inset-bottom))}
  .sat-credit{left:var(--gx);right:var(--gx);max-width:none;text-align:left;bottom:calc(10px + env(safe-area-inset-bottom))}
}

.case-img:has(.case-logo){display:flex;align-items:center;justify-content:center}
.case-img .case-logo{width:34%;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.9}
.case-card:hover .case-img .case-logo{transform:none}
.cards-credit{background:#000;font-family:var(--font-jp);font-weight:500;font-size:10.5px;line-height:1.6;opacity:.6;padding:0 var(--gx) 28px}

/* ===== お知らせ（本番の #news をそのまま残す） ===== */
.news[hidden]{display:none}
.news:not(:has(.news-item)){display:none}
.news{background:#000;padding:var(--pad-y) var(--gx);border-top:1px solid var(--line)}
.news .head{margin-bottom:clamp(28px,5vh,48px)}
.news .head small{display:none}
.news .head .en{display:block;font-family:var(--font-en);font-weight:600;text-transform:uppercase;font-size:clamp(40px,6.2vw,110px);line-height:1}
.news-list{max-width:900px;border-top:1px solid var(--line)}
.news-item{padding:22px 0;border-bottom:1px solid var(--line);font-family:var(--font-jp)}
.news-item time{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;opacity:.8}
.news-item h3{font-size:clamp(17px,1.4vw,21px);font-weight:700;line-height:1.6;margin:6px 0}
.news-item p{font-size:15px;line-height:1.95;font-weight:500;opacity:.9}
.news-links{margin-top:8px}.news-links a{text-decoration:underline;text-underline-offset:3px}
.anchor-alias{display:block;height:0;scroll-margin-top:var(--nav-h)}
@media (max-width:899px){.news .head .en{font-size:clamp(40px,12vw,72px)}}