/* フィールドプロモーション（2026-11-02 最新原稿で組み替え）。主役は「企業の商品PR」。
   冒頭は見出しのまわりにPRの場の札が浮かび続け、本編は写真の面が段落に合わせて切り替わる「新商品を知ってもらう」、会話で伺う「商品開発に、顧客の声を活かす」、ご相談について。
   動きを止めたとき（スクリプトなし）は、すべて最後の状態（札・会話が出そろう）で表示する。写真の面は1枚目だけ。 */
.fd{background:var(--paper)}
.fd .vs-nowrap{white-space:nowrap}
.fd-kicker{font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--orange)}

/* 節の見出し（このページだけの形）。英字を吹き出しに入れ、その下に日本語の見出し */
.fd-h{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:1200px;margin:0 auto}
.fd-h__en{position:relative;padding:9px 18px;border-radius:16px;background:var(--orange);color:#fff;font:800 12px/1.2 var(--display);letter-spacing:.18em}
.fd-h__en::after{content:"";position:absolute;left:20px;bottom:-9px;border:9px solid transparent;border-bottom:0;border-top-color:var(--orange)}
.fd-h__text{font:900 clamp(26px,3.4vw,44px)/1.35 var(--jp);letter-spacing:-.01em}
.fd-h--light .fd-h__en{background:var(--lemon);color:var(--ink)}
.fd-h--light .fd-h__en::after{border-top-color:var(--lemon)}
.fd-h--light .fd-h__text{color:#fff}

/* 1 冒頭：大きな見出しと、まわりに浮かぶ吹き出し */
.fd-hero{position:relative;overflow:clip;padding:calc(var(--hh) + 80px) 6% var(--s-block);background:var(--grain),radial-gradient(45% 45% at 100% 10%,rgba(247,137,74,.28),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(245,207,107,.3),transparent 70%),var(--paper)}
.fd-hero__inner{display:grid;gap:var(--s-block);max-width:1240px;margin:0 auto}
.fd-hero__name{display:inline-block;margin-top:20px;padding-bottom:8px;border-bottom:3px solid var(--orange);font:800 clamp(16px,1.6vw,20px)/1.5 var(--jp);letter-spacing:.06em}
.fd-hero__catch{margin-top:var(--s-title-text);font:900 clamp(40px,5.2vw,80px)/1.22 var(--jp);letter-spacing:-.03em}
/* 1024px以上は左の列の幅に収める（2行で最も長い行「商品の魅力の伝え方を考え、」の13字分） */
@media(min-width:1024px){.fd-hero__text{container-type:inline-size}.fd-hero__catch{font-size:min(80px,100cqw/13.4)}}
.fd-hero__lead{margin-top:var(--s-title-text);font-size:17px;line-height:1.95}
.fd-hero__actions{margin-top:var(--s-text-action)}
.fd-voices{position:relative;min-height:clamp(300px,62vw,540px)}
.fd-voice{position:absolute;z-index:1;margin:0;padding:14px 22px;border:2px solid var(--ink);border-radius:26px;background:#fff;box-shadow:6px 6px 0 var(--c,var(--orange));font:900 clamp(17px,2.4vw,28px)/1.3 var(--jp)}
.fd-voice::after{content:"";position:absolute;left:26px;bottom:-12px;width:20px;height:12px;background:#fff;border:2px solid var(--ink);border-top:0;border-right:0;clip-path:polygon(0 0,100% 0,0 100%)}
.fd-voice--1{left:0;top:4%;--c:var(--orange)}
.fd-voice--2{right:0;top:26%;--c:var(--pink2)}
.fd-voice--3{left:4%;top:52%;--c:var(--aqua)}
.fd-voice--4{right:4%;top:76%;--c:var(--lemon)}
.fd-photo--samples{--d:clamp(110px,22vw,200px);left:50%;top:34%;translate:-50% 0}

/* 2 売り場や会場で、商品を伝える（訴求・ページで最も大きい節）：写真の面が段落に合わせて切り替わる（1024px以上）。スマホ・タブレットは段落ごとに写真 */
.fd-sup{position:relative;padding:var(--s-section) 6%;background:var(--grain),radial-gradient(45% 40% at 100% 0%,rgba(247,137,74,.28),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(62,214,220,.16),transparent 70%),var(--ink);color:#fff}
.fd-sup__intro{position:relative;z-index:1;max-width:1200px;margin:var(--s-title-text) auto 0;font-size:17px;line-height:1.95;color:rgba(255,255,255,.88)}
.fd-sup__grid{max-width:1200px;margin:var(--s-block) auto 0}
.fd-stage{display:none}
.fd-items{display:grid;gap:var(--s-block);margin:0;padding:0;list-style:none}
.fd-item{position:relative;display:grid;gap:14px;justify-items:start}
.fd-item__photo{position:relative;--d:clamp(120px,34vw,180px);margin-bottom:8px}
/* 段落の上の札（読み上げ対象外。原稿の語） */
.fd-item__tag{justify-self:start;margin:0;padding:8px 18px;border:2px solid #fff;border-radius:999px;background:var(--c,var(--orange));color:var(--ink);font:900 clamp(15px,1.5vw,18px)/1.4 var(--jp)}
.fd-item--2{--c:var(--pink2)}
.fd-item--3{--c:var(--lemon)}
.fd-item--4{--c:var(--aqua)}
.fd-item--2 .fd-item__tag{color:#fff}
.fd-item__text{font:700 clamp(17px,1.6vw,20px)/1.95 var(--jp);color:rgba(255,255,255,.92)}
@media(min-width:1024px){
  .fd-sup__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,96px)}
  .fd-stage{display:block;position:sticky;top:calc(var(--hh) + 56px);align-self:start;height:min(68vh,560px)}
  .fd-stage__frame{position:absolute;inset:0;display:grid;place-items:center;border:2px solid #fff;border-radius:32px;background:var(--grain),radial-gradient(70% 60% at 30% 20%,rgba(255,255,255,.35),transparent 70%),var(--c);opacity:0}
  .fd-stage__frame--1{--c:var(--orange);opacity:1}
  .fd-stage__frame--2{--c:var(--pink2)}
  .fd-stage__frame--3{--c:var(--lemon)}
  .fd-stage__frame--4{--c:var(--teal2)}
  .fd-stage__photo{position:relative;--d:min(56%,300px);border-width:4px}
  .fd-item__photo{display:none}
  .fd-items{gap:0}
  .fd-item{min-height:62vh;align-content:center;padding-block:40px}
}

/* 3 新商品を知ってもらう：発表会と報道の2枚の札（訴求の節より小さく、写真を左上にはみ出させる） */
.fd-press{position:relative;padding:var(--s-section) 6%;background:var(--grain),radial-gradient(40% 50% at 100% 0%,rgba(245,207,107,.45),transparent 70%),#FFF8E6}
.fd-press__inner{max-width:1200px;margin:0 auto}
.fd-press__cards{display:grid;gap:clamp(56px,6vw,72px);margin-top:var(--s-block);padding-top:40px}
.fd-card{position:relative;display:grid;gap:14px;padding:72px clamp(22px,3vw,40px) clamp(28px,3vw,40px);border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:8px 8px 0 var(--c,var(--orange))}
.fd-card--1{--c:var(--lemon)}
.fd-card--2{--c:var(--aqua)}
.fd-card__photo{position:absolute;left:clamp(22px,3vw,40px);top:-48px;--d:104px}
.fd-card__tag{margin:0;font:900 clamp(20px,2vw,26px)/1.4 var(--jp)}
.fd-card__text{font-size:17px;line-height:1.95}
@media(min-width:768px){.fd-press__cards{grid-template-columns:1fr 1fr;column-gap:clamp(28px,4vw,56px)}}

/* 4 商品開発に、顧客の声を活かす：伺うことが会話で出る */
.fd-proc{position:relative;padding:var(--s-section) 6%;background:var(--grain),linear-gradient(180deg,var(--paper),#FFF1E8)}
.fd-proc__inner{max-width:1200px;margin:0 auto}
.fd-proc__head{max-width:760px}
.fd-chat{display:grid;gap:16px;max-width:760px;margin:var(--s-block) 0 0}
.fd-chat__who{margin:0;font:800 12px/1.4 var(--display);letter-spacing:.2em;color:var(--orange)}
.fd-chat__who--reply{justify-self:end;margin-top:20px;color:var(--teal2)}
.fd-chat__ask{justify-self:start;display:flex;flex-wrap:wrap;margin:0;padding:14px 24px;border:2px solid var(--ink);border-radius:24px 24px 24px 6px;background:#fff;box-shadow:5px 5px 0 var(--ink);font:900 clamp(18px,2.2vw,26px)/1.35 var(--jp)}
.fd-chat__ask--2{margin-left:clamp(12px,4vw,48px)}
.fd-chat__ask--3{margin-left:clamp(24px,8vw,96px)}
.fd-chat__reply{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:min(100%,520px);margin:0;padding:18px 26px;border:2px solid var(--ink);border-radius:24px 24px 6px 24px;background:var(--orange);box-shadow:5px 5px 0 var(--ink);font:900 clamp(18px,2.2vw,26px)/1.5 var(--jp);word-break:auto-phrase;text-wrap-style:balance}
.fd-proc__text{margin-top:var(--s-title-text);font-size:17px;line-height:1.95}
.fd-proc__text + .fd-proc__text{margin-top:1em}
/* 1024px以上は、左に見出しと説明、右に会話を並べる */
@media(min-width:1024px){
  .fd-proc__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .fd-proc__head{position:sticky;top:calc(var(--hh) + 56px)}
  .fd-chat{margin-top:0;max-width:none}
}

/* 5 ご相談について：流れる巨大な英字の上に、白い面 */
.fd-end{position:relative;overflow:clip;padding:var(--s-section) 6%;background:var(--grain),linear-gradient(115deg,var(--orange),var(--lemon) 60%,#FFF1E8)}
.fd-end__giant{position:absolute;left:0;top:50%;translate:0 -50%;margin:0;font:800 clamp(140px,26vw,420px)/1 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(19,32,43,.28);pointer-events:none}
.fd-end__inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:var(--s-box) clamp(22px,4vw,56px);border:2px solid var(--ink);border-radius:32px;background:#fff;box-shadow:10px 10px 0 var(--ink)}
.fd-end__title{font:900 clamp(26px,3.4vw,44px)/1.35 var(--jp)}
.fd-end__text{margin-top:var(--s-title-text);font-size:17px;line-height:1.95}
.fd-end__actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:var(--s-text-action)}

@media(min-width:1024px){
  .fd-hero{min-height:min(100svh,960px);display:flex;align-items:center}
  .fd-hero__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:clamp(40px,5vw,88px);width:100%}
}
@media(max-width:767px){
  .fd-voice{padding:11px 18px}
}
/* 399px以下：締めの白い面の左右を詰め、ボタンの文が3行に割れないようにする（320pxで3行になった） */
@media(max-width:399px){.fd-end{padding-inline:16px}.fd-end__inner{padding-inline:18px}}
/* 359px以下：説明文が入って白い面の中が狭くなり、相談ボタンが3行に割れた（320px。2026-11-02 目視・計測）。ボタンの左右の余白を詰める */
@media(max-width:359px){.fd-end__inner{padding-inline:14px}.fd-end .vs-btn{padding-inline:16px}}

/* 共通の integration.css（body.coletlab-experience main p）が段落の最大幅を外すため、幅を決めた段落は #main から指定し直す。 */
#main .fd-hero__lead{max-width:34em}
#main .fd-proc__text{max-width:760px}
#main .fd-end__text{max-width:760px}
/* 訴求の節の導入文：見出しの左端にそろえ、行の長さは本文と同じ760pxまで（共通の指定で最大幅が外れ、見出しより左へはみ出した。2026-11-02 目視） */
#main .fd-sup__intro{max-width:1200px}
@media(min-width:1024px){#main .fd-sup__intro{padding-right:calc(100% - 760px)}}
/* 768〜1023px：段落は、左に写真、右に札と本文 */
@media(min-width:768px) and (max-width:1023px){
  .fd-item{grid-template-columns:auto minmax(0,1fr);column-gap:40px;align-items:start}
  .fd-item__photo{grid-row:1 / span 2;margin:0}
  .fd-item > :not(.fd-item__photo){grid-column:2}
}