/* 会社概要（原稿P11の新稿）。主役は冒頭の「知識の層」：商品・顧客・現場・考え方の4つの層と、その上を往復する「AI」の光の帯。
   代表メッセージは実際の写真（小さめ）を太枠と色の影で囲む。パートナーは罫線で区切った控えめな1段。会社情報の表とアクセスの地図で終える。
   動きを止めたとき（スクリプトなし）は、すべて最後の状態で表示する。 */
.ab{background:var(--paper)}
.ab .vs-nowrap{white-space:nowrap}
.ab-kicker{font:700 12px/1.4 var(--display);letter-spacing:.22em;color:var(--teal2)}
.ab-en{white-space:nowrap;font:800 clamp(40px,7vw,96px)/1 var(--display);letter-spacing:-.03em;color:transparent;background:linear-gradient(110deg,var(--teal2),var(--ink) 150%);-webkit-background-clip:text;background-clip:text;padding-bottom:.06em}
.ab-title{margin-top:14px;font:900 clamp(24px,3vw,38px)/1.4 var(--jp);letter-spacing:-.01em}

/* 1 冒頭：知識の層 */
.ab-hero{position:relative;overflow:clip;padding:calc(var(--hh) + 64px) 6% 200px;background:var(--grain),radial-gradient(45% 40% at 100% 10%,rgba(245,207,107,.38),transparent 70%),radial-gradient(40% 40% at 0% 100%,rgba(62,214,220,.24),transparent 70%),var(--paper)}
.ab-hero__inner{position:relative;z-index:2;max-width:1320px;margin:0 auto}
.ab-hero__name{display:inline-block;margin-top:20px;padding-bottom:8px;border-bottom:3px solid var(--pink2);font:800 clamp(16px,1.6vw,20px)/1.5 var(--jp);letter-spacing:.06em}
.ab-hero__catch{margin-top:24px;font:900 clamp(32px,8.6vw,76px)/1.22 var(--jp);letter-spacing:-.03em;white-space:nowrap}
.ab-hero__lead{max-width:36em;margin-top:var(--s-title-text)}
.ab-hero__lead p{font-size:16px;line-height:1.95}
.ab-hero__band{bottom:56px;transform:rotate(2deg);background:var(--ink);color:#fff}

/* 層。上から 商品・顧客・現場・考え方（いちばん下が土台で全幅）。色はゆっくり流れ続ける */
.ab-strata{--lw:clamp(64px,19%,150px);position:relative;display:grid;gap:12px;margin-top:var(--s-block);padding-top:52px}
.ab-layer{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:16px 20px;border:2px solid var(--ink);border-radius:20px;box-shadow:8px 8px 0 var(--ink);background-size:auto,220% 100%;animation:ab-flow 12s ease-in-out infinite alternate}
.ab-layer--1{width:86%;margin-left:8%;background-image:var(--grain),linear-gradient(110deg,#FBE29A,var(--lemon),#FBE29A)}
.ab-layer--2{width:94%;background-image:var(--grain),linear-gradient(110deg,var(--aqua),#9FE7EA,var(--aqua));animation-delay:-3s}
.ab-layer--3{width:88%;margin-left:12%;color:#fff;background-image:var(--grain),linear-gradient(110deg,var(--teal2),var(--teal),var(--teal2));animation-delay:-6s}
.ab-layer--4{color:#fff;background-image:var(--grain),linear-gradient(110deg,var(--pink2),var(--orange),var(--pink2));animation-delay:-9s}
@keyframes ab-flow{to{background-position:0 0,100% 0}}
.ab-layer__en{font:800 clamp(24px,6.6vw,44px)/1 var(--display);letter-spacing:-.03em}
.ab-layer__jp{font:800 13px/1.4 var(--jp);letter-spacing:.04em}
/* AIの光の帯：層の上を左右に往復し、通った部分の色を鮮やかに見せる。重なった英字が白く霞まないよう、白は薄くする（2026-11-02 目視） */
.ab-lens{position:absolute;z-index:3;top:0;bottom:-14px;left:0;width:var(--lw);border:2px solid var(--ink);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 60%);-webkit-backdrop-filter:saturate(1.9) brightness(1.08);backdrop-filter:saturate(1.9) brightness(1.08);box-shadow:0 0 0 6px rgba(255,255,255,.4),0 20px 40px rgba(19,32,43,.18);pointer-events:none;animation:ab-scan 7s ease-in-out infinite alternate}
@keyframes ab-scan{to{left:calc(100% - var(--lw))}}
@keyframes ab-shine{to{background-position:-260% 0}}
.ab-lens__label{position:absolute;top:10px;left:0;right:0;text-align:center;font:800 22px/1 var(--display);letter-spacing:-.02em;color:transparent;background:linear-gradient(100deg,var(--pink2),var(--teal2),var(--pink2));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:ab-shine 4s linear infinite}
@media(min-width:768px){
  /* 日本語の見出しは英字の下（左）に置く。右端に置くと、層の上を動くAIのレンズが長く重なる（2026-11-02 目視） */
  .ab-layer{gap:8px;padding:20px clamp(20px,2.4vw,32px)}
  .ab-layer__en{font-size:clamp(30px,4.4vw,56px)}
  .ab-layer__jp{font-size:14px}
}
@media(min-width:1024px){
  .ab-hero{min-height:min(100svh,960px);display:flex;align-items:center;padding-bottom:220px}
  .ab-hero__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;column-gap:clamp(40px,5vw,88px);width:100%}
  .ab-strata{margin-top:0;grid-template-rows:repeat(4,minmax(0,1fr));height:min(58vh,520px);min-height:420px}
  .ab-layer__en{font-size:clamp(28px,3vw,50px)}
  .ab-hero__catch{font-size:clamp(46px,4.6vw,76px)}
}
@media(prefers-reduced-motion:reduce){.ab-layer,.ab-lens,.ab-lens__label{animation:none}}

/* 2 代表メッセージ */
.ab-msg{position:relative;overflow:clip;padding:var(--s-section) 6%}
.ab-msg__en{position:absolute;top:calc(var(--s-section) * .35);left:0;font:800 clamp(80px,18vw,280px)/1 var(--display);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px rgba(15,163,168,.28);pointer-events:none}
.ab-msg__grid{position:relative;z-index:1;display:grid;gap:var(--s-block);max-width:1200px;margin:0 auto}
.ab-msg__photo{width:min(48vw,220px);margin:0}
/* 代表イラストは背景透過。淡い面の枠に置き、頭頂が枠に触れないよう上に余白を取り、肩は枠の下端にそろえる */
.ab-msg__photo img{display:block;width:100%;height:auto;aspect-ratio:1;box-sizing:border-box;padding:9% 3% 0;object-fit:contain;object-position:50% 100%;background:var(--grain),linear-gradient(160deg,var(--sky),#fff);border:2px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--lemon)}
.ab-msg__body{max-width:40em}
.ab-msg__body p{margin-top:24px;font-size:16px;line-height:1.95}
.ab-msg__catch{margin-top:var(--s-title-text);font:900 clamp(19px,5.4vw,30px)/1.55 var(--jp);letter-spacing:-.01em}
.ab-msg__catch+p{margin-top:var(--s-title-text)}
.ab-msg__body strong{font-weight:800;background:linear-gradient(transparent 60%,rgba(245,207,107,.75) 60%,rgba(245,207,107,.75) 92%,transparent 92%) no-repeat 0 0/100% 100%}
.ab-msg__body .ab-sign{margin-top:var(--s-text-action);text-align:right;font:700 14px/1.6 var(--jp)}
/* 署名は筆文字をやめ、太いゴシックの名前と英字の小さなラベル（2026-11-02 ユーザー「筆文字はサイトに合ってない」） */
.ab-sign__name{display:block;margin-top:10px;font:900 clamp(26px,2.8vw,36px)/1.3 var(--jp);letter-spacing:.14em}
.ab-sign__en{display:block;margin-top:8px;font:800 11px/1.4 var(--display);letter-spacing:.2em;color:var(--teal2)}
@media(min-width:1024px){
  .ab-msg__grid{grid-template-columns:minmax(0,260px) minmax(0,1fr);column-gap:clamp(48px,6vw,104px);align-items:start}
  .ab-msg__photo{position:sticky;top:calc(var(--hh) + 48px);width:100%}
  .ab-msg__body{padding-top:clamp(40px,6vw,96px)}
}

/* 代表プロフィールと資格 */
.ab-profile{position:relative;z-index:1;display:grid;gap:var(--s-box);max-width:1200px;margin:var(--s-block) auto 0;padding:var(--s-box) clamp(22px,4vw,56px);border:2px solid var(--ink);border-radius:28px;background:var(--grain),var(--sky);box-shadow:10px 10px 0 var(--teal2)}
.ab-profile h3{display:inline-block;padding-bottom:6px;border-bottom:3px solid var(--lemon);font:900 18px/1.5 var(--jp)}
.ab-profile__cred ul{margin-top:12px}
.ab-profile__cred li{display:flex;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid rgba(19,32,43,.14)}
.ab-profile__cred li:last-child{border-bottom:0}
.ab-profile__cred img{flex:none;width:72px;height:72px;object-fit:contain}
.ab-profile__cred strong{display:block;font:800 15px/1.5 var(--jp)}
.ab-profile__cred small{display:block;margin-top:2px;font:600 13px/1.5 var(--jp);color:var(--muted)}
/* 代表プロフィールの文を外し、資格・認定だけになった（2026-11-02）。1024px以上は資格を3列に並べる */
@media(min-width:1024px){.ab-profile__cred ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,40px)}.ab-profile__cred li{border-bottom:0}}

/* 3 パートナー：会社情報の前に、罫線で区切った控えめな1段として置く */
.ab-pt{padding:0 6% 48px;background:var(--paper)}
.ab-pt__body{display:grid;gap:20px;max-width:1200px;margin:0 auto;padding:32px 0;border-block:1px solid rgba(19,32,43,.16)}
.ab-pt .ab-title{margin-top:0;font-size:clamp(18px,2vw,22px)}
#main .ab-pt .coletlab-partner.coletlab-partner--vision{width:100%;max-width:none;margin:0}
.ab-pt .coletlab-partner--vision .coletlab-partner__inner{grid-template-columns:minmax(0,1fr);gap:16px;max-width:none}
.ab-pt .coletlab-partner--vision .coletlab-partner__badge{width:128px}
.ab-pt .coletlab-partner .coletlab-partner__statement{margin:0 0 4px;font:700 16px/1.7 var(--jp);color:var(--ink)}
.ab-pt .coletlab-partner a.coletlab-partner__link{font-size:13px;color:var(--teal)}
@media(min-width:768px){
  .ab-pt__body{align-items:center}
  .ab-pt .coletlab-partner--vision .coletlab-partner__inner{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:center}
  .ab-pt .coletlab-partner--vision .coletlab-partner__badge{width:150px}
}

/* 4 会社情報：太枠のカードと地図 */
.ab-co{position:relative;padding:var(--s-section) 6%;background:var(--grain),radial-gradient(40% 40% at 100% 100%,rgba(245,207,107,.3),transparent 70%),var(--paper)}
.ab-co__grid{display:grid;gap:var(--s-block);max-width:1200px;margin-inline:auto}
.ab-card,.ab-map{margin-top:var(--s-title-text)}
/* 会社情報とアクセスは列ごとに英字を持つので、列の幅に収まる大きさにする */
.ab-co .ab-en{font-size:clamp(36px,10vw,72px)}
@media(min-width:1024px){.ab-co .ab-en{font-size:clamp(40px,4.4vw,72px)}}
.ab-card{margin-bottom:0;margin-inline:0;padding:clamp(8px,1.4vw,16px) var(--s-box);border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:10px 10px 0 var(--lemon)}
.ab-card>div{display:grid;gap:4px;padding:18px 0;border-bottom:1px solid rgba(19,32,43,.12)}
.ab-card>div:last-child{border-bottom:0}
.ab-card dt{font:800 13px/1.6 var(--jp);letter-spacing:.06em;color:var(--teal)}
.ab-card dd{margin:0;font:600 16px/1.8 var(--jp)}
.ab-map{position:relative}
.ab-access{align-self:start}
.ab-map__frame{overflow:hidden;border:2px solid var(--ink);border-radius:28px;background:#fff;box-shadow:10px 10px 0 var(--teal2)}
/* 地図の高さは280px。Googleの埋め込みは高さ300px未満だと店舗名・クチコミの札を出さない（2026-11-01 実測） */
.ab-map iframe{display:block;width:100%;height:280px;border:0;filter:grayscale(.85) contrast(1.05)}
.ab-map__pin{position:absolute;z-index:2;top:-30px;right:clamp(28px,4vw,48px);width:56px;height:56px;border:2px solid var(--ink);border-radius:50% 50% 50% 0;background:var(--pink2);transform:rotate(-45deg);animation:ab-bob 1.6s ease-in-out infinite;box-shadow:-4px 4px 0 var(--ink)}
.ab-map__pin::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid var(--ink);border-radius:50%;background:#fff}
@keyframes ab-bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.ab-map__link{display:inline-block;margin-top:28px;padding-bottom:3px;border-bottom:2px solid currentColor;font:800 15px/1.6 var(--jp)}
@media(hover:hover){.ab-map__link:hover{color:var(--pink)}}
@media(min-width:640px){.ab-card>div{grid-template-columns:7.5em minmax(0,1fr);gap:20px;align-items:baseline}}
@media(min-width:1024px){.ab-co__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:start}.ab-access{position:sticky;top:calc(var(--hh) + 48px)}}

/* 5 最後：2枚の大きな面 */
.ab-end{display:grid}
.ab-end__panel{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s-title-text);min-height:clamp(240px,32vw,420px);padding:var(--s-box) 6%;border-top:2px solid var(--ink)}
.ab-end__panel--secondary{color:#fff;background:var(--grain),linear-gradient(150deg,var(--teal),var(--teal2) 60%,var(--aqua))}
.ab-end__panel--primary{color:var(--ink);background:var(--grain),linear-gradient(115deg,var(--pink2),var(--orange) 40%,var(--lemon) 72%,var(--aqua));background-size:auto,260% 260%;animation:vs-flow 14s ease-in-out infinite alternate}
.ab-end__en{font:800 clamp(44px,11vw,104px)/1 var(--display);letter-spacing:-.05em;transition:translate .5s cubic-bezier(.16,1,.3,1)}
.ab-end__label{font:900 clamp(20px,2.2vw,28px)/1.4 var(--jp)}
.ab-end .vs-arrow{position:absolute;right:6%;bottom:var(--s-box);width:64px;height:64px;border-color:currentColor;background:transparent;color:inherit;font-size:22px}
@media(hover:hover){.ab-end__panel:hover .ab-end__en{translate:16px 0}.ab-end__panel:hover .vs-arrow{transform:rotate(-45deg)}}
@media(min-width:768px){.ab-end__en{font-size:clamp(44px,6.2vw,104px)}.ab-end{grid-template-columns:1fr 1fr}.ab-end__panel+.ab-end__panel{border-left:2px solid var(--ink)}}

/* 共通の integration.css（body.coletlab-experience main p）が段落の最大幅を外すため、幅を決めた段落は #main から指定し直す。 */
#main .ab-hero__lead p,#main .ab-msg__body p{max-width:40em}
/* 署名は文字が小さいぶん 40em が本文より狭くなるので、本文と同じ右端にそろえる */
#main .ab-msg__body .ab-sign{max-width:none}

/* 768〜1023pxは写真と本文を横に並べる（写真だけが左に寄り、右と下が大きく空いた。600pxからだと本文の列が狭く見出しが3行に割れた。2026-11-02 目視） */
@media(min-width:768px) and (max-width:1023px){.ab-msg__grid{grid-template-columns:200px minmax(0,1fr);column-gap:40px;align-items:start}.ab-msg__photo{width:100%}}