/* ===== ドキュコミの共通の枠（L2 見本 mock/l2.html のヘッダー・フッター・会社概要の写し）＋ L3 の行き来 =====
   L3 のページの CSS（.hdr・.ftr・.btn・h2・h3 など）とぶつからないように、名前はすべて dc- で始める。
   色: ブランドの藍 #3b37c7・ラピッドの赤紫 #c42f6e（濃い側 #8c1f4e）。ページの強調色は body の --dc-acc で決める */
:root{
  --dc-ink:#16151a;--dc-ink2:#3a3942;--dc-ink3:#6b6973;--dc-rule:#d9d6cc;--dc-paper:#f2f0e9;
  --dc-indigo:#3b37c7;--dc-indigo2:#5551ff;--dc-indigo-deep:#24218f;
  --dc-rapid:#c42f6e;--dc-rapid2:#8c1f4e;--dc-yellow:#ffd84a;--dc-pencil:#4f9fd6;
  --dc-out:cubic-bezier(.16,1,.3,1);
  --dc-ff:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,sans-serif;
}
.dc-wrap{width:min(1120px,100% - 32px);margin:0 auto}
.dc-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ボタン（L2 の .btn） ---------- */
.dc-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:48px;padding:0 22px;border-radius:4px;font:800 14.5px/1 var(--dc-ff);letter-spacing:.06em;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--dc-out),box-shadow .18s var(--dc-out),background-color .25s}
.dc-btn-line{background:#fff;color:var(--dc-ink);border:2px solid var(--dc-ink)}
.dc-btn-acc{background:var(--dc-acc);color:#fff;box-shadow:0 0 0 0 var(--dc-ink)}
.dc-btn-rapid{background:var(--dc-rapid);color:#fff}
.dc-btn-pro{background:var(--dc-indigo);color:#fff}
.dc-btn:hover{transform:translate(-3px,-3px)}
.dc-btn-line:hover,.dc-btn-acc:hover,.dc-btn-rapid:hover,.dc-btn-pro:hover{box-shadow:4px 4px 0 0 var(--dc-ink)}
.dc-btn:active{transform:translate(0,0);box-shadow:none;transition-duration:.08s}
.dc-btn .arw{display:inline-block;transition:transform .25s var(--dc-out)}
.dc-btn:hover .arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.dc-btn,.dc-btn .arw{transition:none}.dc-btn:hover{transform:none}}

/* ---------- ヘッダー（L2 の .hdr） ---------- */
.dc-hdr{position:sticky;top:0;z-index:60;height:72px;display:flex;align-items:center;gap:24px;padding:0 28px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--dc-rule);
  font-family:var(--dc-ff);color:var(--dc-ink);line-height:1.85;letter-spacing:.02em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
.dc-logo{display:flex;align-items:center;gap:14px;flex:none;color:inherit;text-decoration:none}   /* ロゴ 1 行＋細い縦線＋2 行の言葉（L2 の .logo・.tagline） */
.dc-logo img{display:block;height:34px;width:auto;max-width:none}
.dc-tagline{padding-left:14px;border-left:1.5px solid var(--dc-rule);font-size:13px;font-weight:900;letter-spacing:.03em;color:var(--dc-ink);line-height:1.35;white-space:nowrap}
.dc-tagline b{font-weight:900;color:var(--dc-indigo)}
.dc-nav{display:flex;gap:4px;margin:0 auto;font-size:13.5px;font-weight:700}
.dc-nav a{position:relative;padding:8px 10px;color:inherit;text-decoration:none;white-space:nowrap}
.dc-nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--dc-ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s var(--dc-out)}
.dc-nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.dc-hdr .dc-cta{display:flex;gap:10px;flex:none}
.dc-hdr .dc-btn{height:44px;padding:0 18px;font-size:13.5px}
/* 3 本線のメニュー（L2 の .hb・.drawer）。幅 980 以下で横のメニューとボタンの代わりに出す。押すと全画面のメニュー */
.dc-hb{display:none;position:relative;flex:0 0 auto;width:46px;height:46px;min-width:0;min-height:0;margin-left:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.dc-hb i{position:absolute;left:11px;right:11px;height:2.5px;border-radius:2px;background:var(--dc-ink);transition:transform .35s var(--dc-out),opacity .2s}
.dc-hb i:nth-child(1){top:15px}.dc-hb i:nth-child(2){top:22px}.dc-hb i:nth-child(3){top:29px}
.dc-hb[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dc-hb[aria-expanded=true] i:nth-child(2){opacity:0}
.dc-hb[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.dc-drawer{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:59;overflow:auto;padding:12px 24px 32px;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--dc-ff);color:var(--dc-ink);line-height:1.85;letter-spacing:.02em;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
.dc-drawer[hidden]{display:none}
.dc-drawer nav{display:grid;margin:0;padding:0}
.dc-drawer nav a{display:block;padding:16px 2px;border-bottom:1px solid var(--dc-rule);font-size:16px;font-weight:800;line-height:1.5;color:var(--dc-ink);text-decoration:none}
.dc-drawer-cta{display:grid;gap:10px;margin-top:24px}.dc-drawer-cta .dc-btn{height:52px}
.dc-ink{position:absolute;left:0;bottom:-2px;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--dc-ink) 0 calc(100% - 26px),rgba(22,21,26,.55) calc(100% - 14px),transparent);pointer-events:none}

/* ---------- 現在地（ヘッダーの下・L2 へ戻る道） ---------- */
.dc-crumb{font:700 12px/1.5 var(--dc-ff);letter-spacing:.04em;color:var(--dc-ink3)}
.dc-crumb ol{display:flex;flex-wrap:wrap;margin:0;padding:12px 28px 0;list-style:none}
.dc-crumb li{margin:0}
.dc-crumb li+li::before{content:"›";margin:0 .7em;color:var(--dc-ink3)}
.dc-crumb a{color:inherit;text-decoration:underline;text-decoration-color:rgba(22,21,26,.28);text-underline-offset:3px}
.dc-crumb a:hover{color:var(--dc-ink)}
.dc-crumb [aria-current]{color:var(--dc-ink)}

/* ---------- ドキュコミの2つのサービス（L2 #services と資料 02 面の書影・帯・事実の写し。L3 同士の行き来） ---------- */
.dc-svc{position:relative;padding:96px 0 104px;background:var(--dc-svc-bg,var(--dc-paper));word-break:auto-phrase;font-family:var(--dc-ff);color:var(--dc-ink);line-height:1.85;letter-spacing:.02em;font-feature-settings:"palt";border-top:1px solid var(--dc-rule)}
.dc-svc-h{max-width:760px;margin:0 0 48px}
.dc-svc-kick{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--dc-pencil)}
.dc-svc-kick::after{content:"";flex:0 0 64px;height:1.5px;background:rgba(79,159,214,.55)}
.dc-svc-h h2{margin:0;font-size:clamp(24px,3vw,36px);font-weight:900;line-height:1.4;letter-spacing:.01em;text-align:left;color:var(--dc-ink)}
.dc-svc-lead{margin:16px 0 0;font-size:15.5px;font-weight:600;line-height:1.9;color:var(--dc-ink2)}
.dc-svc-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.dc-vol{position:relative;display:block;color:inherit;text-decoration:none}
.dc-vol-obi{position:relative;z-index:3;margin:0 -8px;padding:11px 28px 10px;background:var(--dc-ink);color:#fff;font-weight:800;font-size:17px;line-height:1.4;letter-spacing:.04em;text-align:center;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%,14px 50%)}
.dc-vol.rapid .dc-vol-obi{background:var(--dc-rapid)}
.dc-vol.pro .dc-vol-obi{background:var(--dc-indigo)}
.dc-vol-obi em{font-style:normal;color:var(--dc-yellow)}
.dc-vol-obi .nb,.dc-vol-facts .nb{display:inline-block}
.dc-vol-row{display:grid;grid-template-columns:200px 1fr;gap:24px;margin-top:-8px}
.dc-vol-book{position:relative;width:200px;height:278px}
.dc-vol-face{position:absolute;top:0;left:0;bottom:0;right:14px;overflow:hidden;background:#fff;border:2px solid var(--dc-ink)}
.dc-vol-face img{position:absolute;display:block;max-width:none}
.dc-vol.rapid .dc-vol-face img{left:0;top:13%;width:100%;height:auto}
.dc-vol.pro .dc-vol-face img{left:50%;bottom:0;width:165%;height:auto;transform:translateX(-50%)}
.dc-vol-title{position:absolute;left:0;right:0;top:0;z-index:1;display:grid;gap:3px;margin:0;padding:12px 12px 22px;background:linear-gradient(180deg,#fff 68%,rgba(255,255,255,0))}
.dc-vol-title small{font-weight:800;font-size:11px;line-height:1;letter-spacing:.16em;color:var(--dc-ink3)}
.dc-vol-title strong{margin-top:2px;font-weight:900;font-size:26px;line-height:1.1;letter-spacing:.02em}
.dc-vol.rapid .dc-vol-title strong{color:var(--dc-rapid)}
.dc-vol.pro .dc-vol-title strong{color:var(--dc-indigo)}
.dc-vol-title span{font-weight:700;font-size:11px;line-height:1.4;color:var(--dc-ink2)}
.dc-vol-no{position:absolute;right:10px;bottom:6px;z-index:1;font-weight:900;font-style:italic;font-size:40px;line-height:1;color:#fff;-webkit-text-stroke:2px var(--dc-ink);paint-order:stroke fill}
.dc-vol.rapid .dc-vol-no{-webkit-text-stroke-color:var(--dc-rapid2)}
.dc-vol.pro .dc-vol-no{-webkit-text-stroke-color:var(--dc-indigo-deep)}
.dc-vol-spine{position:absolute;top:0;right:0;bottom:0;width:16px;display:grid;place-items:center;background:var(--dc-ink)}
.dc-vol.rapid .dc-vol-spine{background:var(--dc-rapid)}
.dc-vol.pro .dc-vol-spine{background:var(--dc-indigo)}
.dc-vol-spine i{writing-mode:vertical-rl;font-style:normal;font-weight:700;font-size:9px;letter-spacing:.3em;color:#fff}
.dc-vol-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding-top:26px;min-width:0}
.dc-vol-facts{margin:0;border-top:2px solid var(--dc-ink)}
.dc-vol-facts div{display:grid;grid-template-columns:4.6em 1fr;gap:10px;padding:10px 0 9px;border-bottom:1px solid var(--dc-rule)}
.dc-vol-facts dt{padding-top:3px;font-weight:700;font-size:12px;line-height:1.4;letter-spacing:.1em;color:var(--dc-ink3)}
.dc-vol-facts dd{margin:0;font-weight:700;font-size:14.5px;line-height:1.5}
.dc-vol-facts dd small{display:block;margin-top:2px;font-weight:500;font-size:12px;line-height:1.5;color:var(--dc-ink2)}
.dc-vol-here{display:flex;align-items:center;gap:10px;margin:0;font-size:13.5px;font-weight:800;letter-spacing:.04em;color:var(--dc-ink2)}
.dc-vol-here::before{content:"";width:28px;height:2px;background:currentColor}
.dc-vol-go{align-self:flex-start}
a.dc-vol:hover .dc-vol-face{border-color:var(--dc-ink)}
.dc-svc-back{margin:44px 0 0;font-size:14px;font-weight:700}
.dc-svc-back a{color:var(--dc-ink);text-decoration:underline;text-decoration-color:rgba(22,21,26,.3);text-underline-offset:4px}
.dc-svc-back a:hover{text-decoration-color:var(--dc-ink)}

/* ---------- 会社概要（L2 の .company） ---------- */
.dc-co{padding:80px 0;background:var(--dc-ink);color:#fff;word-break:auto-phrase;font-family:var(--dc-ff);line-height:1.85;letter-spacing:.02em;font-feature-settings:"palt"}
.dc-co h2{margin:0 0 26px;font-size:20px;font-weight:900;line-height:1.4;letter-spacing:.1em;text-align:left;color:#fff}
.dc-co dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin:0}
.dc-co dl div{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:14px}
.dc-co dt{font-weight:800;color:rgba(255,255,255,.6)}
.dc-co dd{margin:0;font-weight:600}
.dc-co a{color:inherit}

/* ---------- フッター（L2 の .ftr とサイトの地図） ---------- */
.dc-ftr{padding:56px 0 40px;background:#0d0c10;color:rgba(255,255,255,.7);word-break:auto-phrase;font:400 13px/1.85 var(--dc-ff);letter-spacing:.02em;font-feature-settings:"palt"}
.dc-ftr a{color:inherit;text-decoration:none;font-weight:700}
.dc-ftr a:hover,.dc-ftr a[aria-current]{color:#fff}
.dc-ftr-map{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:28px;padding-bottom:34px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.12)}
.dc-ftr-map h3{margin:0 0 12px;font-size:11.5px;font-weight:800;line-height:1.4;letter-spacing:.14em;text-align:left;color:#8cc6ee}
.dc-ftr-map ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.dc-ftr-map li{margin:0}
.dc-ftr-map .soon{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;color:rgba(255,255,255,.42)}
.dc-ftr-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.dc-ftr-in img{display:block;height:28px;width:auto}
.dc-ftr-in nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.dc-ftr-in small{font-size:12px}
.dc-ftr-build{margin:18px auto 0;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.42)}

/* ---------- 見本だけ（本番では消す）: リンクの行き先が見本の外のとき出す一言・Turnstile の置き場 ---------- */

/* ---------- 幅ごと（L2 と同じ区切り） ---------- */
@media (max-width:1240px){.dc-nav a{padding:8px 7px}.dc-nav a::after{left:7px;right:7px}.dc-nav a:nth-child(n+6){display:none}}
@media (max-width:1080px){.dc-nav a:nth-child(n+4){display:none}}
@media (max-width:980px){
  .dc-nav{display:none}.dc-hdr{justify-content:space-between}.dc-hb{display:block}.dc-hdr .dc-cta{display:none}
  .dc-svc-2{grid-template-columns:1fr;gap:56px}
  .dc-co dl{grid-template-columns:1fr}
}
@media (max-width:760px){
  .dc-hdr{height:60px;padding:0 14px}.dc-logo{gap:9px}.dc-logo img{height:26px}.dc-tagline{padding-left:9px;font-size:10.5px;letter-spacing:.01em}
  .dc-drawer{top:60px}
  .dc-crumb ol{padding:10px 16px 0}
  .dc-svc{padding:72px 0 80px}
  .dc-svc-h{margin-bottom:36px}
  .dc-vol-row{grid-template-columns:132px 1fr;gap:14px}
  .dc-vol-book{width:132px;height:190px}
  .dc-vol-face{right:10px}.dc-vol-spine{width:12px}.dc-vol-spine i{font-size:7px;letter-spacing:.2em}
  .dc-vol-title{padding:8px 8px 16px}.dc-vol-title strong{font-size:19px}.dc-vol-title span{font-size:9.5px}
  .dc-vol-no{font-size:28px;right:6px}
  .dc-vol-obi{font-size:15px;padding:10px 22px 9px}
  .dc-vol-side{padding-top:18px;gap:14px}
  .dc-vol-facts div{grid-template-columns:4em 1fr;gap:8px}
  .dc-vol-facts dd{font-size:13.5px}
  .dc-vol-go{height:44px;padding:0 14px;font-size:13px}
  .dc-co{padding:64px 0}
  .dc-co dl div{grid-template-columns:6.5em 1fr;font-size:13px}
  .dc-ftr-map{grid-template-columns:1fr 1fr;gap:26px 18px}
  .dc-ftr-map>div:first-child{grid-column:1/-1}
  .dc-ftr{padding-bottom:116px}
}
@media (max-width:400px){
  .dc-vol-row{grid-template-columns:112px 1fr;gap:12px}
  .dc-vol-book{width:112px;height:164px}
  .dc-vol-title strong{font-size:17px}.dc-vol-title span{font-size:9px}.dc-vol-title small{font-size:9px}
  .dc-vol-no{font-size:24px}
  .dc-vol-facts div{grid-template-columns:3.4em 1fr;gap:6px}
  .dc-vol-facts dt{font-size:11px;letter-spacing:.04em}
  .dc-vol-facts dd{font-size:13px}
  .dc-vol-facts dd small{font-size:11px}
  .dc-vol-go{padding:0 12px;font-size:12.5px;letter-spacing:.03em}
}
@media print{.dc-hdr{position:static}.dc-hb,.dc-drawer{display:none}}