/* ホームページ制作・LP制作。主役は「組み上がるページの模型」と「更新を重ねる3つの層」。
   冒頭はブラウザの枠の中のページに点検の光の線が通り続け、本編は工程ごとにページが組み上がり、保守は3つの層に更新の帯が通る。
   動きを止めたとき（スクリプトなし）は、すべて最後の状態（ページが組み上がり、層が更新済み）で表示する。 */
.pd{background:var(--paper)}
.pd .vs-nowrap{white-space:nowrap}
.pd-kicker{font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--teal2)}
/* 節の見出し（このページだけの形）。ブラウザのタブの形。英字の大見出しは使わない */
.pd-tab{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 0 max(0px,calc((100% - 1200px) / 2));padding:14px 22px 14px 18px;border:2px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0;background:#fff;width:fit-content;max-width:100%;box-shadow:inset 0 -6px 0 var(--aqua)}
.pd-tab__dots{display:flex;gap:6px}
.pd-tab__dots i{width:11px;height:11px;border-radius:50%;background:var(--pink2)}
.pd-tab__dots i:nth-child(2){background:var(--lemon)}
.pd-tab__dots i:nth-child(3){background:var(--aqua)}
.pd-tab__en{font:800 12px/1.4 var(--display);letter-spacing:.2em;color:var(--teal2)}
.pd-tab__text{flex-basis:100%;font:900 clamp(24px,3.2vw,40px)/1.35 var(--jp);letter-spacing:-.01em}
.pd-tab--light{background:var(--ink2);border-color:#fff;color:#fff;box-shadow:inset 0 -6px 0 var(--lemon)}
.pd-tab--light .pd-tab__en{color:var(--lemon)}

/* ページの模型（冒頭と「制作すること」で共通）。大きさは置き場の幅に対する割合（cqw） */
.pd-site{position:relative;overflow:hidden;border:2px solid var(--ink);border-radius:3cqw;background:#fff;box-shadow:1.6cqw 1.6cqw 0 var(--teal2)}
.pd-site__bar{display:flex;gap:1.4cqw;align-items:center;height:6cqw;padding:0 2.4cqw;background:var(--ink)}
.pd-site__bar i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--pink2)}
.pd-site__bar i:nth-child(2){background:var(--lemon)}
.pd-site__bar i:nth-child(3){background:var(--aqua)}
.pd-site__page{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4cqw;padding:3.6cqw}
.pd-b{display:block;border-radius:1.4cqw;background:color-mix(in srgb,var(--c) calc(var(--fill,1) * 100%),transparent);outline:1.5px dashed rgba(19,32,43,var(--skel,0));outline-offset:-1.5px}
.pd-b--nav{grid-column:1/-1;height:3cqw;--c:var(--sky);outline-color:rgba(19,32,43,.15)}
.pd-b--hero{grid-column:1/-1;height:17cqw;--c:var(--pink2)}
.pd-b--card{height:11cqw}
.pd-b--c1{--c:var(--teal2)}
.pd-b--c2{--c:var(--orange)}
.pd-b--c3{--c:var(--lemon)}
.pd-b--line{grid-column:1/-1;height:1.6cqw;border-radius:9px;--c:#C9DCEB}
.pd-b--l1{width:92%}
.pd-b--l2{width:74%}
.pd-b--l3{width:84%}
.pd-b--btn{height:5cqw;border-radius:9px;--c:var(--ink)}
/* 点検の光の線が上から下へ通り続ける（常に動くもの） */
.pd-site__scan{position:absolute;left:0;right:0;top:6cqw;height:8cqw;background:linear-gradient(180deg,transparent,rgba(62,214,220,.45) 50%,transparent);animation:pd-scan 3.8s linear infinite;pointer-events:none}
@keyframes pd-scan{from{translate:0 -8cqw}to{translate:0 calc(100cqw * .8)}}

/* 1 冒頭 */
.pd-hero{position:relative;overflow:clip;padding:calc(var(--hh) + 64px) 6% clamp(72px,8vw,120px);background:var(--grain),radial-gradient(45% 45% at 100% 15%,rgba(62,214,220,.28),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(240,88,126,.16),transparent 70%),var(--paper)}
/* 2段：1段目に見出しの文を画面幅で、2段目に左の説明と右の模型。スマホは見出し→模型→説明 */
.pd-hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-title-text);max-width:1240px;margin:0 auto}
.pd-hero__name{display:inline-block;margin-top:20px;padding-bottom:8px;border-bottom:3px solid var(--aqua);font:800 clamp(16px,1.6vw,20px)/1.5 var(--jp);letter-spacing:.06em}
.pd-hero__catch{margin-top:24px;font:900 clamp(24px,7.2vw,72px)/1.22 var(--jp);letter-spacing:-.03em;white-space:nowrap}
.pd-hero__lead{max-width:36em;font-size:16px;line-height:1.95}
.pd-hero__actions{margin-top:var(--s-text-action)}
/* 器（container）自身の余白には cqw を書かない（外側の幅で計算される）。余白は子の margin で取る */
.pd-stage-hero{position:relative;width:min(100%,560px);margin:0 auto;container-type:inline-size}
.pd-site--hero{width:78%;margin:18.5cqw 0 3cqw}
/* タブレットの写真だけ、ユーザー指定で模型の上辺に重ねる（ほかの2枚は重ねない） */
.pd-photo{z-index:3}
.pd-photo--tools{--d:16cqw;left:6%;top:1.5cqw}
.pd-photo--tablet{--d:18cqw;left:47%;top:8cqw}
.pd-photo--wireframe{--d:19cqw;right:0;top:46%}
/* 1024px以上：左に見出し・説明・ボタン、右にページの図（2026-11-02 ユーザー「ホームページも同様です」＝GEOと同じく左に文・右に図。見出しは2行） */
@media(min-width:1024px){
  .pd-hero{min-height:min(100svh,980px);display:flex;align-items:center}
  .pd-hero__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head stage" "body stage";align-content:center;align-items:center;column-gap:clamp(40px,5vw,88px);row-gap:var(--s-title-text);width:100%}
  .pd-hero__head{grid-area:head;align-self:end}
  .pd-hero__body{grid-area:body;align-self:start}
  .pd-stage-hero{grid-area:stage;width:100%;max-width:560px;justify-self:end}
  .pd-hero__catch{font-size:clamp(36px,3.6vw,56px)}
}

/* 1.5 ご相談いただける状況：ブラウザのタブの形の札3枚 */
.pd-situ{position:relative;padding:var(--s-section) 6%;background:var(--grain),linear-gradient(180deg,var(--paper),#fff)}
.pd-situ__tabs{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:clamp(24px,3vw,40px);list-style:none;border:2px solid var(--ink);border-radius:0 24px 24px 24px;background:#fff;box-shadow:8px 8px 0 var(--aqua)}
.pd-situ__tab{display:grid;gap:10px;padding:22px 22px 24px;border-radius:16px;background:var(--sky)}
.pd-situ__tab--2{background:#FFF6DC}
.pd-situ__tab--3{background:#FFEAF0}
.pd-situ__label{font:900 clamp(18px,1.8vw,22px)/1.45 var(--jp)}
.pd-situ__desc{font:600 16px/1.85 var(--jp)}
/* 3列にするのは1024px以上（それより狭いと札の見出しが2行に折れる） */
/* 2026-11-02 原稿P07の改稿：新規・リニューアル・LPの3つの制作。説明が長くなったので、タブレットは縦に並べ、パソコンで3列 */
@media(min-width:1024px){.pd-situ__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 2 制作すること：工程ごとに組み上がるページ */
.pd-make{position:relative;padding:var(--s-section) 6%;background:var(--grain),linear-gradient(180deg,#fff,var(--sky))}
.pd-build-stage{display:grid;gap:var(--s-block);max-width:1200px;margin:0 auto;padding-top:var(--s-block)}
.pd-rows{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.pd-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline;padding:clamp(16px,2vw,24px) 4px;border-bottom:2px solid rgba(19,32,43,.14)}
.pd-row__no{font:800 clamp(20px,2.2vw,30px)/1 var(--display);color:var(--teal2)}
.pd-row__text{font:800 clamp(16px,1.6vw,20px)/1.7 var(--jp);word-break:auto-phrase;text-wrap:balance}
/* 器自身の余白に cqw を書くと外側（画面幅）で計算されるため、親の幅に対する % で書く */
.pd-mock{position:relative;width:min(100%,560px);margin:0 auto;padding:0 0 min(8%,44.8px);container-type:inline-size}
.pd-site--build{width:84%}
.pd-site--build .pd-b{--skel:.35}
.pd-phone{position:absolute;right:0;bottom:0;display:grid;align-content:start;gap:1.6cqw;width:24cqw;aspect-ratio:9/16;padding:4cqw 2.6cqw;border:2px solid var(--ink);border-radius:4cqw;background:#fff;box-shadow:1.2cqw 1.2cqw 0 var(--pink2)}
.pd-phone__hero{height:10cqw;border-radius:1.4cqw;background:var(--pink2)}
.pd-phone__line{height:1.6cqw;border-radius:9px;background:#C9DCEB}
.pd-phone__btn{height:4cqw;margin-top:1cqw;border-radius:9px;background:var(--ink)}
.pd-check{position:absolute;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border:2px solid var(--ink);border-radius:1.6cqw;background:var(--lemon);font:900 3.6cqw/1 var(--jp);font-style:normal}
.pd-check--1{left:64%;top:18cqw}
.pd-check--2{left:4%;top:37cqw}
.pd-check--3{left:26%;top:57cqw}
.pd-cursor{position:absolute;left:44%;top:66cqw;width:5.2cqw;height:7cqw;background:var(--ink);clip-path:polygon(0 0,100% 64%,58% 66%,78% 100%,62% 100%,42% 70%,0 92%)}
.pd-make__after{margin:var(--s-block) auto 0;font-size:16px;line-height:1.95}
@media(min-width:1024px){.pd-build-stage{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;column-gap:clamp(48px,6vw,96px)}.pd-mock{width:100%;padding-bottom:8%}}
@media(max-width:1023px){.pd-mock{order:-1}}

/* 3 公開後の保守管理：更新を重ねる3つの層 */
.pd-care{position:relative;overflow:clip;padding:var(--s-section) 6%;background:var(--grain),radial-gradient(50% 40% at 100% 0%,rgba(62,214,220,.2),transparent 70%),var(--ink);color:#fff}
.pd-care__giant{position:absolute;left:0;top:clamp(40px,6vw,80px);z-index:0;font:800 clamp(80px,15vw,220px)/1 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.12);pointer-events:none}
.pd-care__inner{position:relative;z-index:1;display:grid;gap:var(--s-block);max-width:1200px;margin:0 auto}
/* MAINTENANCE は11文字と長いので、左の列に収まる大きさにする（背景で塗る文字は、はみ出すと切れて見える） */
.pd-care__lead{margin-top:var(--s-title-text);font-size:16px;line-height:1.95;color:rgba(255,255,255,.9)}
.pd-care__list{display:grid;gap:12px;margin:var(--s-title-text) 0 0;padding:0;list-style:none}
.pd-care__list li{position:relative;padding-left:36px;font:800 clamp(15px,1.5vw,18px)/1.7 var(--jp)}
.pd-care__list li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border:2px solid #fff;border-radius:7px;background:var(--lemon)}
.pd-care__list li::after{content:"";position:absolute;left:7px;top:calc(.2em + 4px);width:7px;height:11px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.pd-care__note{margin-top:var(--s-title-text);font-size:15px;line-height:1.9;color:rgba(255,255,255,.78)}
/* 写しの枠を右下へ22pxずらすので、その分だけ細くして画面内に収める */
.pd-stack{position:relative;display:grid;gap:16px;width:min(calc(100% - 24px),460px);margin:0 auto 64px;align-self:center;justify-self:start}
@media(min-width:1024px){.pd-stack{justify-self:center}}
.pd-stack__backup{position:absolute;inset:0;z-index:0;translate:22px 22px;border:2px dashed var(--lemon);border-radius:24px}
.pd-stack__backup b,.pd-stack__backup span{position:absolute;right:0;bottom:-36px}
.pd-stack__backup b{right:auto;left:0;font:800 14px/1 var(--display);letter-spacing:.12em;color:var(--lemon)}
.pd-stack__backup span{font:700 12px/1.4 var(--jp);color:rgba(255,255,255,.75)}
.pd-layer{position:relative;z-index:1;display:grid;gap:4px;padding:clamp(18px,2.2vw,26px) 64px clamp(18px,2.2vw,26px) clamp(18px,2.2vw,28px);overflow:hidden;border:2px solid var(--ink);border-radius:20px;background:#fff;color:var(--ink)}
.pd-layer--plugin{background:#E8FAFB}
.pd-layer--php{background:#FFF6DA}
.pd-layer b{font:800 clamp(18px,2vw,26px)/1.1 var(--display);letter-spacing:-.01em}
.pd-layer span{font:700 12px/1.5 var(--jp);color:var(--muted)}
.pd-layer__bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--teal2),var(--aqua));transform-origin:0 50%}
.pd-layer__ok{position:absolute;right:16px;top:50%;display:grid;place-items:center;width:34px;height:34px;translate:0 -50%;border:2px solid var(--ink);border-radius:10px;background:#06C755;font:900 18px/1 var(--jp);font-style:normal;color:#fff}
@media(min-width:1024px){.pd-care__inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;column-gap:clamp(48px,6vw,104px)}}

/* 4 進め方と費用 */
.pd-proc{position:relative;padding:var(--s-section) 6%;background:var(--grain),radial-gradient(45% 40% at 0% 0%,rgba(245,207,107,.3),transparent 70%),var(--paper)}
.pd-proc__text{margin:var(--s-block) auto 0;font-size:16px;line-height:1.95}
/* 仕様表（期間・確認いただくこと・含まないもの・保証しないこと） */
.pd-spec{max-width:1200px;margin:var(--s-title-text) auto 0;border-top:2px solid var(--ink)}
.pd-spec__row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 32px;padding:18px 4px;border-bottom:1.5px solid rgba(19,32,43,.16)}
.pd-spec__label{font:900 15px/1.6 var(--jp);color:var(--teal)}
.pd-spec__value{margin:0;font:600 16px/1.85 var(--jp)}
@media(min-width:768px){.pd-spec__row{grid-template-columns:200px minmax(0,1fr)}}
.pd-next{max-width:1200px;margin:var(--s-text-action) auto 0}
.pd-next .vs-more{margin-top:28px}
@media(max-width:767px){.pd-next .vs-btn{width:100%}}

/* 共通の integration.css（body.coletlab-experience main p）が段落の最大幅を外すため、幅を決めた段落は #main から指定し直す。
   箱の下の文は箱と同じ幅にそろえる（工程と模型＝1200）。 */
#main .pd-hero__lead{max-width:36em}
#main .pd-make__after{max-width:1200px}
#main .pd-proc__text{max-width:1200px}

/* 札の見出しを語の途中で折り返さない（「運用してほ／しい」となった。2026-11-02 目視） */
.pd-situ__label{word-break:auto-phrase;text-wrap:balance}

.pd-make__after p + p,.pd-proc__text p + p{margin-top:16px}

/* 2026-11-02 ユーザー「ホームページは図形や文章の配置を見直して。余白が広すぎる」
   ・冒頭：右の図を大きくして、右の列の中央に
   ・制作から公開まで：説明の段落を手順の行の下へ（図の区間が終わってから横長の1行で離れて出ていた）。前の節との間を詰める
   ・制作内容と費用：1行が画面いっぱいに長くならないよう、文の幅を抑える */
.pd-build-text{display:grid;gap:var(--s-title-text);align-content:start}
.pd-build-text .pd-make__after{margin:0;max-width:none}
.pd-make{padding-top:calc(var(--s-section) * .55)}
.pd-proc__text{max-width:46em}
#main .pd-proc__text{max-width:46em}
@media(min-width:1024px){
  .pd-stage-hero{max-width:660px;justify-self:center}
  .pd-build-stage{align-items:center}
  .pd-build-text .pd-make__after p{font-size:16px;line-height:1.9}
}
/* 同日：「制作内容と費用」の文は見出しと同じ左端からはじめる（中央に寄せると見出しとずれる）。3つの制作の節の下の余白を詰める */
.pd-proc__text,#main .pd-proc__text{margin-left:max(0px,calc((100% - 1200px) / 2));margin-right:auto}
.pd-situ{padding-bottom:calc(var(--s-section) * .6)}
/* 同日：ユーザー「ここの余白広くない？説明文も枠で囲っちゃうのも良いかも」。見出しと文の間を詰め、文を白い面＋墨の線＋ずらした影の枠に入れる（ほかの箱と同じ部品） */
.pd-proc__text,#main .pd-proc__text{max-width:52em;margin-top:var(--s-title-text);padding:var(--s-box) clamp(22px,4vw,56px);border:2px solid var(--ink);border-radius:24px;background:#fff;box-shadow:8px 8px 0 var(--aqua)}

/* 2026-11-02 ユーザー「タブはあるけど、枠がない。引っ付いてないみたいなデザインはダサい」
   3つの制作と同じく、見出しのタブの下に枠をつなげる（タブの左下と枠の左上を重ね、枠の左上は角を落とさない）。
   制作から公開まで＝白い枠＋水色の影、公開後の保守管理＝暗い面の上の白い線の枠＋黄色の影、制作内容と費用＝白い枠＋水色の影 */
.pd-make__frame{max-width:1200px;margin:0 auto}
.pd-make__frame > .pd-tab{margin-left:0}
.pd-build-stage{margin:0;padding:clamp(24px,3vw,48px);border:2px solid var(--ink);border-radius:0 24px 24px 24px;background:#fff;box-shadow:8px 8px 0 var(--aqua)}
.pd-care .pd-tab{margin-bottom:0}
.pd-care__inner{padding:clamp(24px,3vw,48px);border:2px solid #fff;border-radius:0 24px 24px 24px;background:var(--grain),var(--ink2);box-shadow:8px 8px 0 var(--lemon)}
.pd-proc__text,#main .pd-proc__text{margin-top:0;border-radius:0 24px 24px 24px}
/* 同日：枠を足したぶん、1440×900で「制作から公開まで」が画面に収まらず固定が外れた。枠の内側の余白を詰めて固定を戻す。
   320幅は保守管理の枠の内側を詰めて、層の英字（WORDPRESS・PHP）が層の幅に収まるようにする */
.pd-build-stage{padding:clamp(20px,2.2vw,32px)}
@media(min-width:1024px){.pd-build-stage{row-gap:24px}}
@media(max-width:767px){.pd-care__inner{padding:24px 16px}}
@media(max-width:374px){.pd-layer{padding-right:52px}}