/* 株式会社DiO 古い機械のCAD・BIM化（公式サイト組み込み用）。すべてのルールは .lp3d 配下に限定。共通CSS（リセット・ヘッダー・フッター）はサイト側。 */
:root{
  --navy:#0B2545;--navy-deep:#071a33;--navy-soft:#12305a;
  --cyan:#1EC8E6;--cyan-dark:#087189;
  --muted:#b9c7da;--line:rgba(255,255,255,.14);
  --paper:#f3f6fa;--ink:#0B2545;--ink-muted:#4a5d78;
  --radius:12px;--max:1160px;
  --lp-font:"Noto Sans JP",sans-serif;
  --lp-font-en:"Baskervville",serif;
}
.lp3d--zh-hans{--lp-font:"Noto Sans SC",sans-serif}
.lp3d--zh-hant{--lp-font:"Noto Sans TC",sans-serif}
.lp3d{display:block;margin:0;background:var(--navy);color:#fff;font-family:var(--lp-font);font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;text-align:left}
.lp3d *,.lp3d *::before,.lp3d *::after{box-sizing:border-box}
.lp3d img,.lp3d video{max-width:100%;height:auto;display:block}
/* カード／グリッド: 固有幅で列を押し広げない(芳巳さん 2026-10-05) */
.lp3d .hero .wrap > *,
.lp3d .hero-wrap-media,
.lp3d .hero-media,
.lp3d .video-grid > *,
.lp3d .video-frame,
.lp3d .problems > *,
.lp3d .paths > *,
.lp3d .steps figure,
.lp3d .outcome > *,
.lp3d .benefit > *,
.lp3d .menu > *,
.lp3d .card,
.lp3d .biz > *,
.lp3d .process > *{min-width:0}
.lp3d a{color:inherit}
.lp3d p,.lp3d ul,.lp3d ol,.lp3d dl,.lp3d dd,.lp3d figure{margin:0;padding:0}
.lp3d ul,.lp3d ol{list-style:none}
.lp3d .wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.lp3d section{padding:96px 0;scroll-margin-top:72px}
.lp3d .eyebrow{display:inline-block;font-family:var(--lp-font-en);font-size:15px;letter-spacing:.18em;color:var(--cyan);font-weight:400;text-transform:uppercase;margin-bottom:10px;line-height:1.4}
.lp3d h1,.lp3d h2,.lp3d h3{line-height:1.45;margin:0;font-weight:700;letter-spacing:.02em;font-family:var(--lp-font)}
.lp3d--en h1,.lp3d--en h2,.lp3d--en h3{font-family:var(--lp-font-en);font-weight:400;letter-spacing:.01em}
.lp3d h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:18px}
.lp3d .lead{color:var(--muted);font-size:18px;max-width:780px}
.lp3d .accent{color:var(--cyan)}
.lp3d .light{background:var(--paper);color:var(--ink)}
.lp3d .light .lead{color:var(--ink-muted)}
.lp3d .light .eyebrow{color:var(--cyan-dark)}
.lp3d .light .accent{color:var(--cyan-dark)}
.lp3d .note{font-size:13px;color:var(--muted);margin:20px 0 0;line-height:1.8}
.lp3d .nobr{white-space:nowrap}
.lp3d .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--cyan);color:var(--navy);font-family:var(--lp-font);font-weight:700;text-decoration:none;border:0;border-radius:999px;padding:16px 34px;font-size:17px;cursor:pointer;transition:background .2s;line-height:1.4}
.lp3d a.btn{color:var(--navy)}
.lp3d .btn:hover{background:#56d9f0}
.lp3d .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.lp3d .btn.ghost,.lp3d a.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.lp3d .btn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.lp3d .btn .arrow{font-size:18px;line-height:1}

/* hero: 文字は画像・動画に重ねない（左に文章、右にメディア） */
.lp3d .hero{background:var(--navy-deep);padding:84px 0 76px}
.lp3d .hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.lp3d .hero-text{container-type:inline-size}
.lp3d{--h1-div:10.7}
.lp3d--zh-hans,.lp3d--zh-hant{--h1-div:11.9}
.lp3d .hero h1{font-size:clamp(26px,calc(100cqw / var(--h1-div)),54px);line-height:1.38;letter-spacing:.03em}
.lp3d .hero h1 .line{display:block;white-space:nowrap}
.lp3d--en .hero h1 .line{white-space:normal}
.lp3d .hero p.sub{font-size:clamp(16px,1.5vw,19px);color:#dbe5f1;max-width:600px;margin:26px 0 12px}
.lp3d .hero p.partner{font-size:14.5px;color:#c9d6e6;max-width:600px;margin:0 0 32px}
.lp3d .hero .actions{display:flex;flex-wrap:wrap;gap:14px}
.lp3d .hero .cta-note{font-size:13.5px;color:#c9d6e6;margin:16px 0 0;max-width:600px}
.lp3d .hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.lp3d .hero .chips li{font-size:13px;background:rgba(255,255,255,.06);border:1px solid rgba(30,200,230,.35);border-radius:999px;padding:5px 16px;color:#e6eef7;line-height:1.6}
.lp3d .hero-media{border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lp3d .hero-media video,.lp3d .hero-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lp3d .media-note{font-size:12px;color:#9fb0c6;margin:10px 2px 0}

/* video / still */
.lp3d .video-sec{background:var(--navy-deep);padding:80px 0 88px}
.lp3d .video-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:52px;align-items:center}
.lp3d .video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.45);border:1px solid var(--line)}
.lp3d .video-frame video,.lp3d .video-frame img{width:100%;height:100%;object-fit:contain;background:#000}
.lp3d .video-frame img{object-fit:cover}
.lp3d .video-frame video::cue{font-family:var(--lp-font);background:rgba(11,37,69,.66);color:#fff;line-height:1.5}
.lp3d .video-caption h2{font-size:clamp(24px,2.6vw,32px)}
.lp3d .video-caption p{color:var(--muted);font-size:15.5px}
.lp3d .chapters{margin:20px 0 0;font-size:15px}
.lp3d .chapters li{border-bottom:1px solid var(--line)}
.lp3d .chapters button{all:unset;box-sizing:border-box;display:flex;gap:14px;width:100%;padding:10px 2px;cursor:pointer;color:var(--muted);font-family:var(--lp-font)}
.lp3d .chapters button:hover,.lp3d .chapters button:focus-visible{color:#fff}
.lp3d .chapters button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lp3d .chapters time{flex:none;width:44px;color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}

/* problems */
.lp3d .problems{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:44px 0 0}
.lp3d .problems li{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #dfe6ef;display:flex;flex-direction:column}
.lp3d .problems img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lp3d .problems .txt{padding:20px 20px 22px}
.lp3d .problems strong{display:block;font-size:17px;line-height:1.5;margin-bottom:8px;color:var(--ink)}
.lp3d .problems strong::before{content:"";display:block;width:28px;height:3px;background:var(--cyan);margin-bottom:14px}
.lp3d .problems span{color:var(--ink-muted);font-size:15px;line-height:1.75;display:block}
.lp3d .problem-close{margin:44px 0 0;font-size:clamp(19px,2.1vw,24px);font-weight:700;color:var(--ink)}

/* flow */
.lp3d .paths{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.lp3d .path{background:var(--navy-soft);border:1px solid var(--line);border-radius:16px;padding:32px 28px 30px}
.lp3d .path-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.lp3d .path-no{flex:none;width:44px;height:44px;border-radius:50%;background:var(--cyan);color:var(--navy);font-family:var(--lp-font-en);font-size:22px;display:flex;align-items:center;justify-content:center}
.lp3d .path h3{font-size:24px}
.lp3d .path .flow-text{color:var(--cyan);font-weight:700;font-size:15px;margin:0 0 22px;letter-spacing:.04em}
.lp3d .steps{display:flex;flex-direction:column}
.lp3d .steps figure{border-radius:10px;overflow:hidden;background:#06152b}
.lp3d .steps figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lp3d .steps figure.paper{background:#fff}
.lp3d .steps figure.paper img{object-fit:contain;padding:6px}
.lp3d .steps .cap{display:flex;align-items:baseline;gap:10px;padding:12px 2px 0;flex-wrap:wrap}
.lp3d .steps .cap b{font-size:17px}
.lp3d .steps .cap small{display:block;width:100%;color:var(--muted);font-size:14px;line-height:1.7}
.lp3d .steps .tag{font-size:12px;font-weight:700;color:var(--cyan);border:1px solid var(--cyan);border-radius:4px;padding:0 7px;flex:none}
.lp3d .steps li + li::before{content:"";display:block;width:0;height:0;margin:14px auto;border-style:solid;border-width:12px 10px 0 10px;border-color:var(--cyan) transparent transparent transparent}
.lp3d .outcome{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;margin-top:40px;background:linear-gradient(135deg,var(--navy-soft),#0d2a4f);border:1px solid rgba(30,200,230,.45);border-radius:16px;padding:32px}
.lp3d .outcome figure{border-radius:10px;overflow:hidden;background:#fff}
.lp3d .outcome img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lp3d .outcome h3{font-size:clamp(22px,2.4vw,28px);margin:6px 0 12px}
.lp3d .outcome p{color:var(--muted)}
.lp3d .benefit{margin-top:28px;display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.lp3d .benefit figure{border-radius:12px;overflow:hidden}
.lp3d .benefit img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lp3d .benefit h3{font-size:clamp(24px,2.8vw,34px);margin-bottom:14px}
.lp3d .benefit p{color:var(--muted)}

/* menu */
.lp3d .menu{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.lp3d .card{background:#fff;border:1px solid #dfe6ef;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.lp3d .card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--navy)}
.lp3d .card .body{padding:26px 24px 28px}
.lp3d .card .letter{font-family:var(--lp-font-en);font-size:15px;color:var(--cyan-dark);letter-spacing:.14em}
.lp3d .card h3{font-size:22px;margin:4px 0 10px;color:var(--ink)}
.lp3d .card p{color:var(--ink-muted);font-size:15.5px}
.lp3d .card ul{margin:14px 0 0;padding-left:1.2em;list-style:disc;color:var(--ink-muted);font-size:14.5px}

/* process */
.lp3d .process{margin:48px 0 0;display:grid;grid-template-columns:repeat(6,1fr);counter-reset:step}
.lp3d .process li{position:relative;padding:0 12px;text-align:center}
.lp3d .process li::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--cyan);color:var(--cyan);font-family:var(--lp-font-en);font-size:20px;background:var(--navy);position:relative;z-index:1}
.lp3d .process li::after{content:"";position:absolute;top:28px;left:50%;width:100%;height:2px;background:var(--line);z-index:0}
.lp3d .process li:last-child::after{display:none}
.lp3d .process b{display:block;font-size:17px;line-height:1.5;margin-bottom:8px}
.lp3d .process span{display:block;color:var(--muted);font-size:14px;line-height:1.7}

/* philosophy */
.lp3d .philo{background:var(--navy-soft);text-align:center}
.lp3d .philo .big{font-size:clamp(28px,4vw,48px);line-height:1.5;letter-spacing:.04em;margin:8px 0 26px}
.lp3d .philo p.lead{margin:0 auto}
.lp3d .biz{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:44px 0 0;text-align:left}
.lp3d .biz li{border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:rgba(11,37,69,.6)}
.lp3d .biz b{display:block;font-size:18px;margin-bottom:6px}
.lp3d .biz span{color:var(--muted);font-size:15px;line-height:1.75;display:block}
.lp3d .biz li.here{border-color:var(--cyan)}
.lp3d .biz li.here b{color:var(--cyan)}

/* faq */
.lp3d .faq{max-width:960px;margin:40px 0 0}
.lp3d .faq details{background:#fff;border:1px solid #dfe6ef;border-radius:var(--radius);margin-bottom:14px}
.lp3d .faq summary{list-style:none;cursor:pointer;padding:22px 56px 22px 64px;font-weight:700;font-size:17px;position:relative;color:var(--ink)}
.lp3d .faq summary::-webkit-details-marker{display:none}
.lp3d .faq summary::before{content:"Q";position:absolute;left:24px;top:17px;font-family:var(--lp-font-en);font-size:24px;font-weight:400;color:var(--cyan-dark)}
.lp3d .faq summary::after{content:"+";position:absolute;right:24px;top:16px;font-size:26px;font-weight:400;color:var(--ink-muted)}
.lp3d .faq details[open] summary::after{content:"−"}
.lp3d .faq .a{padding:0 28px 24px 64px;color:var(--ink-muted);font-size:16px;position:relative}
.lp3d .faq .a::before{content:"A";position:absolute;left:25px;top:-4px;font-family:var(--lp-font-en);font-size:24px;color:#4a5d78}

/* contact（フォームはサイト側。ここはリンクのボタンのみ） */
.lp3d .cta{background:var(--navy);text-align:center;padding:96px 0}
.lp3d .cta .closing{font-size:clamp(22px,3vw,34px);font-weight:700;margin:0 0 8px;line-height:1.5}
.lp3d .cta h2{margin-bottom:16px}
.lp3d .cta .lead{margin:0 auto}
.lp3d .cta .btn{margin-top:32px;padding:20px 48px;font-size:19px}
.lp3d .cta .btn-note{font-size:13.5px;color:#c9d6e6;margin:14px 0 0}
.lp3d .direct{margin:40px auto 0;display:flex;gap:16px 40px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--muted)}
.lp3d .direct a{text-decoration:none;font-weight:700;color:#fff;font-size:17px}
.lp3d .direct a:hover{color:var(--cyan)}

.lp3d br.sp{display:none}
.lp3d br.pc{display:inline}
@media (max-width:1024px){
  .lp3d .hero .wrap{grid-template-columns:1fr;gap:32px}
  .lp3d .hero-wrap-media{order:-1}
  .lp3d .video-grid{grid-template-columns:1fr;gap:32px}
  .lp3d .problems{grid-template-columns:1fr 1fr}
  .lp3d .menu{grid-template-columns:1fr 1fr}
  .lp3d .biz{grid-template-columns:1fr}
  .lp3d .process{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .lp3d .process li:nth-child(3)::after{display:none}
  .lp3d .outcome,.lp3d .benefit{grid-template-columns:1fr;gap:24px}
}
@media (max-width:760px){
  .lp3d{font-size:16px}
  .lp3d section{padding:64px 0}
  .lp3d .wrap{padding:0 20px}
  .lp3d .hero{padding:32px 0 56px}
  .lp3d br.sp{display:inline}
  .lp3d br.pc{display:none}
  .lp3d .hero .actions .btn{width:100%}
  .lp3d .video-sec{padding:48px 0 56px}
  .lp3d .problems{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .lp3d .paths{grid-template-columns:1fr;gap:22px}
  .lp3d .path{padding:24px 16px}
  .lp3d .path h3{font-size:21px}
  .lp3d .outcome{padding:20px 16px}
  .lp3d .menu{grid-template-columns:1fr}
  .lp3d .process{grid-template-columns:1fr;row-gap:0;text-align:left}
  .lp3d .process li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;text-align:left;padding:0 0 26px}
  .lp3d .process li::before{grid-row:span 2;margin:0}
  .lp3d .process li::after{top:56px;left:27px;width:2px;height:calc(100% - 56px)}
  .lp3d .process li:nth-child(3)::after{display:block}
  .lp3d .process li:last-child::after{display:none}
  .lp3d .process b{margin:12px 0 2px}
  .lp3d .faq summary{padding:18px 44px 18px 52px;font-size:16px}
  .lp3d .faq summary::before{left:18px;top:13px}
  .lp3d .faq summary::after{right:16px;top:12px}
  .lp3d .faq .a{padding:0 20px 20px 52px;font-size:15px}
  .lp3d .faq .a::before{left:19px}
  .lp3d .cta .btn{width:100%;padding:18px 24px}
}
@media (prefers-reduced-motion:reduce){.lp3d *{scroll-behavior:auto}}
.lp3d .video-caption .coming-soon{margin-top:18px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;display:inline-block;color:#fff}

/* 2026-10-04: 句点を外して文ごとに改行したため、最終行が1文字だけ落ちるのを防ぐ（折り返し位置だけを調整） */
.lp3d p,.lp3d small,.lp3d li span,.lp3d .a,.lp3d summary{text-wrap:pretty}

/* 2026-10-04 (第3回): 見出し・強調文・カード見出しなどの折り返し調整（最終行に1〜2文字だけ落ちない／意味の区切りで均等に折る） */
.lp3d--ja{word-break:auto-phrase}
.lp3d h1,.lp3d h2,.lp3d h3,.lp3d .closing,.lp3d .problem-close,.lp3d .problems strong,.lp3d .process b,.lp3d .steps .cap b,.lp3d .flow-text,.lp3d .biz b,.lp3d summary,.lp3d .btn,.lp3d .chips li,.lp3d .big,.lp3d .eyebrow{text-wrap:balance}
.lp3d .lead,.lp3d .sub,.lp3d .partner,.lp3d .problems span,.lp3d .process span,.lp3d .steps .cap small,.lp3d .biz span,.lp3d .card p,.lp3d .card li,.lp3d .outcome p,.lp3d .benefit p,.lp3d .cta-note,.lp3d .btn-note,.lp3d .media-note,.lp3d .video-caption p,.lp3d .direct span{text-wrap:balance}
.lp3d .seg{display:block;text-wrap:balance}