/* 法令の遵守（2026-11-12）：製剤輸入代行の頁の最後の節（#compliance）と、詳しく解説した頁（compliance.html）。
   図は _figs.py が作る SVG。色は図の中だけで、ほかは白・黒・灰（apple design）。ブロックの上端に黒い線は付けない */

/* ── 図（トップの事業の図と同じ作り。見えている間だけ動かす＝site.js の .viz） ── */
.viz{position:relative;border-radius:28px;overflow:hidden;background:var(--floor)}
.viz svg{display:block;width:100%;height:auto}
.viz text{font-family:var(--sans);font-feature-settings:"palt"}
.f-t{font-size:19px;font-weight:700;fill:#1d1d1f}
.f-t.s{font-size:17px;font-weight:600}
.f-t.xs{font-size:16px;font-weight:600}
.f-t.m{fill:#475569}
.f-brand{font-size:24px;letter-spacing:-.01em}
.f-chip{font-size:14px;font-weight:700;fill:#fff}
.f-mk{font-size:16px;font-weight:700;fill:#fff;font-variant-numeric:tabular-nums}
.f-path{fill:none;stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;opacity:.6}
.f-ping{animation:f-ping 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes f-ping{0%{transform:scale(1);opacity:.4}80%,100%{transform:scale(1.5);opacity:0}}
.viz *{animation-play-state:paused}
.viz.play *{animation-play-state:running}
/* 狭い画面では幅の広い図の文字を大きく（縮めて見せるので） */
@media (max-width:640px){.viz.wide .f-t{font-size:22px}.viz.wide .f-t.s{font-size:21px}.viz.wide .f-t.s.g{font-size:18px}.viz.wide .f-brand{font-size:24px}.viz.wide .f-chip{font-size:16px}}
@media (prefers-reduced-motion:reduce){.viz *{animation-play-state:paused!important}.f-ping{animation:none}}
.fig{max-width:820px;margin:clamp(40px,5vw,64px) auto 0}
/* 囲まずに、頁の地にそのまま置く図（製剤輸入代行の頁と、詳しい頁の「私たちの輸入代行」「通知が示す 3 つの形」。2026-11-12 のユーザー指示） */
.viz.bare{background:none;border-radius:0}

.comp-cta{margin-top:clamp(36px,4vw,48px);justify-content:center}
/* 製剤輸入代行の頁の「法令の遵守」は、図も含めて 1 画面に収める（2026-11-12 のユーザー指示）。
   広い画面では節の高さを画面の高さ（ナビの 52px を除く）にそろえ、題・本文・ボタンの残りに図を縮めて入れる
   （SVG は箱いっぱいに広げ、viewBox の比のまま中に収まる）。題は 1 行（狭い画面では「、」のあとで折り返す）、本文は 2 行に */
#compliance .sec-head{max-width:none}
#compliance .lead{max-width:1000px;margin-inline:auto;text-wrap:balance}
#compliance .lead:lang(ja){word-break:auto-phrase}   /* 文節で折り返す（「行／います」のように語の途中で切らない。対応しないブラウザではふつうの折り返し） */
@media (max-width:833px){#compliance{padding-top:clamp(40px,10vw,56px)}}   /* スマホでも 1 画面に（上の節の下の余白があるので、上は詰める） */
@media (min-width:834px){
  #compliance{padding:0}
  #compliance>.wrap{display:flex;flex-direction:column;height:calc(100vh - 52px);height:calc(100svh - 52px);min-height:560px;max-height:1040px;padding-block:clamp(24px,4.5vh,64px)}
  #compliance .sec-head{flex:none}
  #compliance .sec-head .eyebrow{margin-bottom:clamp(12px,2vh,26px)}
  #compliance .sec-head .lead{margin-top:clamp(10px,1.8vh,20px)}
  #compliance .fig{flex:1 1 0;min-height:0;width:100%;margin-top:clamp(12px,2.6vh,40px);display:flex}
  #compliance .fig .viz{flex:1;min-height:0}
  #compliance .fig .viz svg{width:100%;height:100%}
  #compliance .comp-cta{flex:none;margin-top:clamp(12px,2.6vh,36px)}
}

/* 詳しい頁の節の本文も、日本語は文節で折り返す。中央そろえの節は行の長さもそろえる */
:is(#route,#notice,#forms,#parallel,#ours) .lead:lang(ja){word-break:auto-phrase}
:is(#route,#ours) .lead{text-wrap:balance}

/* ── 詳しい頁：目次 ── */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px,3vw,32px)}
.toc a{font-size:14px;font-weight:600;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .1s ease-out}
.toc a:hover{background:#fff}.toc a:active{transform:scale(.97)}

/* 流れの番号の説明（図の下） */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,48px)}
.steps4 li{font-size:15px;line-height:1.75;color:var(--ink2)}
.steps4 b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
@media (max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps4{grid-template-columns:1fr}}

/* 通知の引用と、通知の定義。題は 1 行で（題の幅の上限を外し、本文の幅だけ抑える。2026-11-12） */
.sec-head.wide{max-width:none}
.sec-head.wide .lead{max-width:760px}
.quote{margin-top:clamp(28px,3vw,40px);padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--floor)}
.floor .quote{background:#fff}
.quote p{font-size:clamp(17px,1.6vw,20px);line-height:1.85;font-weight:600;letter-spacing:.005em}
.quote cite{display:block;margin-top:14px;font-size:13px;font-style:normal;color:var(--ink3)}
.defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(16px,2vw,24px)}
.defs div{padding:clamp(20px,2.2vw,28px);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
.defs dt{font-size:17px;font-weight:700}
.defs dd{margin-top:8px;font-size:15px;line-height:1.75;color:var(--ink2)}
@media (max-width:900px){.defs{grid-template-columns:1fr}}
.prose p+p{margin-top:1em}
.prose{color:var(--ink2)}
.src-note{margin-top:14px;font-size:13px;line-height:1.7;color:var(--ink3)}   /* 出典の注（site.css の .note とは別） */

/* 通知が示す 3 つの形 */
.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.nf .viz{border-radius:24px}
.nf .viz.bare{border-radius:0}
.nf figcaption{padding:20px 4px 0}
.nf .tag{font-size:13px;font-weight:700;color:var(--ink3);letter-spacing:.02em}
.nf h3{font-size:clamp(19px,1.6vw,22px);line-height:1.4;margin-top:4px;font-feature-settings:"palt"}
.nf p{margin-top:10px;font-size:15px;line-height:1.75;color:var(--ink2)}
.verdict{display:inline-flex;align-items:center;gap:6px;margin-top:14px;height:30px;padding:0 12px 0 10px;border-radius:99px;font-size:13px;font-weight:700;background:var(--soft);color:var(--ink)}
.verdict svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.verdict.ok{background:var(--ink);color:#fff}
@media (max-width:900px){.forms{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.callout{margin-top:clamp(32px,4vw,48px);padding:clamp(24px,3vw,36px);border-radius:24px;background:var(--ink);color:#fff;display:flex;gap:18px;align-items:flex-start}
.callout svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.callout p{font-size:clamp(16px,1.4vw,18px);line-height:1.8;color:#f5f5f7}

/* 並行輸入：番号の説明・比べる表・罰則 */
.marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(32px,4vw,48px)}
.marks li{padding:clamp(22px,2.4vw,30px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.mk{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.marks h3{font-size:clamp(18px,1.5vw,20px);line-height:1.45;margin-top:14px;font-feature-settings:"palt"}
.marks p{margin-top:10px;font-size:15px;line-height:1.75;color:var(--ink2)}
.law-ref{display:block;margin-top:12px;font-size:13px;font-weight:600;color:var(--ink3)}
@media (max-width:900px){.marks{grid-template-columns:1fr}}
.also{margin-top:clamp(16px,2vw,24px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;padding:clamp(22px,2.6vw,32px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.also .mk{background:var(--soft);color:var(--ink)}
.also h3{font-size:clamp(18px,1.5vw,20px);line-height:1.45;font-feature-settings:"palt"}
.also p{grid-column:2;font-size:15px;line-height:1.75;color:var(--ink2)}
.also .law-ref{grid-column:2;margin-top:0}

.cmp-wrap{margin-top:clamp(48px,6vw,80px)}
.cmp{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px;line-height:1.65}
.cmp th,.cmp td{padding:16px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:13px;font-weight:700;color:var(--ink3);letter-spacing:.02em;padding-top:0}
.cmp tbody th{font-weight:700;width:22%;white-space:nowrap}
.cmp td{width:39%;color:var(--ink2)}
.cmp td.us{color:var(--ink);font-weight:600}
.cmp thead th.us{color:var(--ink)}
@media (max-width:640px){.cmp{font-size:14px}.cmp th,.cmp td{padding:14px 8px}.cmp tbody th{white-space:normal;width:24%}}
.h4{font-size:clamp(20px,1.8vw,24px);line-height:1.35;font-weight:700;font-feature-settings:"palt"}

.pen{margin-top:clamp(48px,6vw,80px);padding:clamp(24px,3vw,40px);border-radius:24px;background:var(--floor)}
.pen dl{display:grid;gap:0;margin-top:16px}
.pen dl>div{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.pen dl>div:last-child{border-bottom:0;padding-bottom:0}
.pen dt{font-size:15px;line-height:1.7}
.pen dd{font-size:15px;line-height:1.7;font-weight:700}
@media (max-width:640px){.pen dl>div{grid-template-columns:1fr}}

/* 守っていること：上から順に点がともり、線が下へ伸びる */
.tl{max-width:760px;margin:clamp(40px,5vw,64px) auto 0}
.tl li{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;padding-bottom:clamp(28px,3.4vw,40px)}
.tl li::before{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:var(--soft);transform-origin:top;transform:scaleY(0);transition:transform 1s var(--ease) calc(var(--d,0s) + .3s)}
.tl li.in::before{transform:none}
.tl li:last-child{padding-bottom:0}.tl li:last-child::before{display:none}
.tl-no{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--floor);color:var(--ink2);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .5s var(--ease) calc(var(--d,0s) + .15s),color .5s var(--ease) calc(var(--d,0s) + .15s)}
.tl li.in .tl-no{background:var(--ink);color:#fff}
.tl h3{font-size:clamp(19px,1.7vw,22px);line-height:1.45;padding-top:10px;font-feature-settings:"palt"}
.tl p{margin-top:8px;font-size:15px;line-height:1.8;color:var(--ink2)}

/* 関係する法令と通知 */
.laws{margin-top:clamp(32px,4vw,48px)}
.laws li{border-bottom:1px solid var(--line)}
.laws a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:20px 0;transition:opacity .2s}
.laws a:hover b{text-decoration:underline;text-underline-offset:4px}
.laws b{font-size:16px;line-height:1.6}
.laws span{grid-column:1;font-size:14px;line-height:1.6;color:var(--ink3)}
.laws svg{grid-column:2;grid-row:1/3;width:16px;height:16px;fill:none;stroke:var(--ink2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.tl li::before{transform:none;transition:none}.tl-no{transition:none}.tl li .tl-no{background:var(--ink);color:#fff}}