@charset "UTF-8";
/* =========================================================
   S-passo 下層ページ共通スタイル
   （事業内容 / ホームページ制作 / 導入実例 / お役立ち情報 / お問い合わせ）

   トップページと同じ設計言語で構成する:
     濃紺フォトヒーロー → .stage の曲線白シートがせり上がる →
     セリフ英字の大見出し（Cormorant Garamond / --navy）＋青アクセント
     ＋角丸カード＋青グラデのCTA。
   トークン・ヘッダー・.stage・.contact・.ft は style.css を共有する。
   ========================================================= */

/* ============ PAGE HERO（濃紺フォト） ============ */
.phero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(470px,72svh,780px);background:var(--dark);color:#fff;
  padding:clamp(7rem,16vh,10rem) clamp(1.2rem,4vw,3rem) clamp(9rem,22vh,15rem);}
.phero__photo{position:absolute;inset:0;z-index:0;}
.phero__photo img{width:100%;height:100%;object-fit:cover;opacity:.44;filter:grayscale(.14);}
.phero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(112deg,rgba(9,15,28,.94) 0%,rgba(9,15,28,.74) 48%,rgba(9,15,28,.40) 100%);}
.phero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;}
.phero__crumb{display:flex;align-items:center;gap:.85em;font-size:.78rem;letter-spacing:.06em;
  color:#93a3c0;margin-bottom:clamp(1.4rem,3.2vw,2.4rem);}
.phero__crumb a{transition:color .25s;}
.phero__crumb a:hover{color:#fff;}
.phero__crumb .sep{color:#54607a;}
.phero__crumb .cur{color:#e7ecf6;}
.phero__mark{display:block;font-weight:700;font-size:clamp(.72rem,1vw,.85rem);letter-spacing:.14em;
  color:#8ab4f8;margin-bottom:.75em;}
.phero__en{font-family:var(--serif-en);font-weight:600;text-transform:uppercase;color:#fff;
  font-size:clamp(3rem,9.6vw,8rem);line-height:.98;letter-spacing:.01em;}
.phero__jp{margin-top:clamp(.7rem,1.8vw,1.2rem);font-weight:900;letter-spacing:.07em;
  font-size:clamp(1.08rem,2.2vw,1.6rem);}
.phero__sub{margin-top:clamp(.9rem,2vw,1.4rem);color:#c6cfe0;max-width:40em;
  font-size:clamp(.94rem,1.2vw,1.08rem);line-height:1.95;}
.phero__btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.6rem,3.4vw,2.4rem);}

/* ============ ボタン ============ */
.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:700;border-radius:999px;line-height:1.4;
  padding:.95em 1.9em;font-size:clamp(.88rem,1.15vw,1rem);
  transition:transform .4s var(--ease),box-shadow .4s,background .3s,color .3s;}
.btn--fill{background:var(--grad-d);color:#fff;box-shadow:0 20px 40px -20px rgba(37,99,235,.6);}
.btn--fill:hover{transform:translateY(-3px);}
.btn--out{border:1.5px solid currentColor;}
.btn--out:hover{background:#fff;color:var(--ink);}
.btn--ink{background:var(--ink);color:#fff;}
.btn--ink:hover{transform:translateY(-3px);background:var(--blue);}
.center-btn{text-align:center;margin-top:clamp(2rem,4.5vw,3.4rem);}
.center-btn--pair{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.8rem,1.6vw,1.2rem);}

/* ============ セクション枠・見出し ============ */
.psec{max-width:var(--maxw);margin-inline:auto;padding:clamp(3.6rem,8vw,7rem) clamp(1.2rem,3vw,2rem);}
.pband{background:var(--bg-2);}
.pband--soft{background:#eaeefa;}
.shd{text-align:center;margin-bottom:clamp(2rem,4.4vw,3.4rem);}
.shd__mark{display:block;font-weight:700;font-size:clamp(.72rem,1vw,.85rem);letter-spacing:.14em;
  color:var(--blue);margin-bottom:.55em;}
.shd__en{font-family:var(--serif-en);font-weight:600;text-transform:uppercase;color:var(--navy);
  font-size:clamp(2.3rem,5.8vw,4.4rem);line-height:1.04;letter-spacing:.02em;}
.shd__ttl{font-weight:900;color:var(--ink);font-size:clamp(1.12rem,2.3vw,1.55rem);
  margin-top:.25em;letter-spacing:.04em;}
.shd__lead{margin-top:clamp(.8rem,2vw,1.2rem);color:var(--ink-2);max-width:44em;margin-inline:auto;
  font-size:clamp(.94rem,1.2vw,1.06rem);line-height:1.95;}

/* ============ ご支援の流れ（事業内容） ============
   FEATURE と同じアウトライン数字（Arial Black / 薄青stroke）を縦の導線に。 */
.flow{display:flex;flex-direction:column;gap:clamp(2.6rem,6vw,4.6rem);}
.flow__step{display:grid;grid-template-columns:minmax(200px,25%) 1fr;gap:clamp(1.4rem,3.6vw,3rem);align-items:start;}
.flow__side{position:relative;padding-right:clamp(.6rem,2vw,1.4rem);}
.flow__side::after{content:"";position:absolute;right:0;top:.4em;bottom:-.6em;width:1px;background:var(--line);}
.flow__step:last-child .flow__side::after{display:none;}
.flow__no{font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;line-height:.88;
  font-size:clamp(3.2rem,7.6vw,6rem);color:transparent;-webkit-text-stroke:1.5px #9db8f0;}
.flow__catch{margin-top:.75em;font-weight:900;color:var(--navy);line-height:1.75;
  font-size:clamp(.98rem,1.45vw,1.16rem);}
.flow__catch span{display:block;}
.flow__label{display:block;font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;
  letter-spacing:.12em;font-size:clamp(.68rem,.95vw,.8rem);color:var(--blue);}
.flow__ttl{font-weight:900;color:var(--ink);font-size:clamp(1.32rem,2.8vw,2rem);line-height:1.45;margin:.28em 0 .5em;}
.flow__lead{color:var(--ink-2);font-size:clamp(.94rem,1.15vw,1.04rem);line-height:2;}
.flow__pts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(1.4rem,3vw,2.2rem);}
.flow__pt{background:var(--bg-2);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(20,30,60,.45);}
.flow__pt figure{margin:0;aspect-ratio:16/10;background:#111;}
.flow__pt figure img{width:100%;height:100%;object-fit:cover;}
.flow__ptb{padding:clamp(1.05rem,2.4vw,1.5rem) clamp(1.05rem,2.4vw,1.5rem) clamp(1.25rem,2.6vw,1.8rem);}
.flow__pten{font-family:Arial,"Helvetica Neue",sans-serif;font-weight:700;letter-spacing:.12em;
  font-size:.68rem;color:var(--blue);}
.flow__pth{font-weight:900;color:var(--ink);font-size:clamp(1rem,1.4vw,1.14rem);margin:.35em 0 .5em;}
.flow__ptp{color:var(--ink-2);font-size:.9rem;line-height:1.95;}

/* ============ 汎用カードグリッド（3ステップ / おすすめ業種） ============ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,3vw,2.2rem);}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.6vw,2rem);}
.ucard{display:flex;flex-direction:column;background:var(--bg-2);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(20,30,60,.45);transition:transform .5s var(--ease),box-shadow .5s;}
.ucard:hover{transform:translateY(-5px);box-shadow:0 40px 70px -40px rgba(20,30,60,.5);}
.ucard__img{aspect-ratio:4/3;background:#111;overflow:hidden;}
.ucard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.ucard:hover .ucard__img img{transform:scale(1.05);}
.ucard__b{padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.15rem,2.4vw,1.6rem) clamp(1.5rem,2.8vw,2rem);}
.ucard__no{font-family:var(--en);font-weight:600;letter-spacing:.16em;font-size:.76rem;color:var(--blue);}
.ucard__h{font-weight:900;color:var(--navy);font-size:clamp(1.1rem,1.8vw,1.36rem);line-height:1.5;margin:.4em 0 .55em;}
.ucard__p{color:var(--ink-2);font-size:.93rem;line-height:2;}

/* ============ リリース記念キャンペーン（ホームページ制作） ============ */
.acamp{position:relative;overflow:hidden;background:var(--dark);color:#fff;border-radius:24px;text-align:center;
  padding:clamp(2.6rem,6vw,4.4rem) clamp(1.3rem,5vw,3.4rem);}
/* 透かしはトップの .camp__ghost と同じく右上へ逃がす（中央だとタブと重なる） */
.acamp__ghost{position:absolute;top:clamp(.2rem,1.6vw,.8rem);right:clamp(1rem,3vw,2.4rem);z-index:0;
  font-family:var(--en);font-weight:700;font-size:clamp(3rem,8vw,7rem);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);pointer-events:none;}
.acamp__tab{position:relative;z-index:2;display:inline-block;background:var(--grad-d);color:#fff;
  font-weight:800;letter-spacing:.08em;font-size:clamp(.8rem,1.3vw,.98rem);
  padding:.55em 1.7em;border-radius:999px;margin-bottom:clamp(1.2rem,2.6vw,1.8rem);}
.acamp__top{position:relative;z-index:2;font-weight:700;font-size:clamp(.98rem,1.6vw,1.24rem);color:#c6cfe0;}
.acamp__top b{color:#fff;font-size:1.24em;margin-inline:.2em;
  text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#ef6b6b;}
.acamp__row{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(.8rem,2.6vw,2rem);flex-wrap:wrap;margin-top:clamp(.6rem,1.6vw,1rem);}
.acamp__limit{display:inline-flex;align-items:center;gap:.5em;font-weight:800;letter-spacing:.04em;
  font-size:clamp(.9rem,1.5vw,1.1rem);color:#8ab4f8;
  border:1px solid rgba(138,180,248,.5);border-radius:999px;padding:.6em 1.4em;}
.acamp__limit b{font-family:var(--en);font-size:1.5em;line-height:1;font-weight:700;color:#fff;}
.acamp__zero{display:inline-flex;align-items:baseline;gap:.08em;font-family:var(--en);font-weight:700;color:#fff;
  font-size:clamp(4rem,13vw,8.4rem);line-height:1;}
.acamp__zero span{font-family:var(--jp);font-weight:900;font-size:.24em;}
.acamp__free{font-weight:900;font-size:clamp(1rem,1.8vw,1.35rem);line-height:1.5;color:#fff;}
.acamp__free span{display:block;font-size:.62em;font-weight:700;color:#8ab4f8;letter-spacing:.1em;
  margin-bottom:.2em;}
.acamp__foot{position:relative;z-index:2;margin-top:clamp(1.2rem,2.6vw,1.8rem);
  font-weight:700;font-size:clamp(.96rem,1.5vw,1.18rem);color:#e7ecf6;}

/* ============ 注目事例カルーセル（導入実例） ============
   scroll-snap ベース。JSは矢印/ドットの補助のみで、無効でも横スワイプで機能する。 */
.cx{position:relative;max-width:var(--maxw);margin-inline:auto;}
.cx__track{display:flex;gap:clamp(1rem,2.4vw,1.8rem);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
.cx__track::-webkit-scrollbar{display:none;}
.cx__slide{flex:0 0 100%;scroll-snap-align:center;}
.cxc{display:grid;grid-template-columns:.86fr 1.14fr;align-items:stretch;background:var(--bg-2);
  border-radius:6px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(20,30,60,.35);height:100%;}
/* 縦長の写真でもカードが伸びないよう、写真枠のアスペクト比を固定してから引き伸ばす */
.cxc__img{background:#111;overflow:hidden;aspect-ratio:4/3;}
.cxc__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);}
.cxc:hover .cxc__img img{transform:scale(1.04);}
.cxc__b{padding:clamp(1.8rem,3.6vw,3.2rem) clamp(1.7rem,3.6vw,3.4rem);
  display:flex;flex-direction:column;justify-content:center;}
.cxc__badge{align-self:flex-start;font-family:var(--en);font-weight:600;letter-spacing:.14em;font-size:.74rem;
  background:var(--blue);color:#fff;border-radius:999px;padding:.45em 1.15em;margin-bottom:1.1em;}
.cxc__ttl{font-weight:900;color:var(--ink);font-size:clamp(1.2rem,2.3vw,1.75rem);line-height:1.6;}
.cxc__cust{display:flex;align-items:center;gap:.8em;margin-top:1.3em;}
.cxc__logo{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;
  background:var(--grad-d);color:#fff;font-family:var(--en);font-weight:700;font-size:1rem;}
.cxc__name{font-weight:800;color:var(--ink);font-size:clamp(.98rem,1.3vw,1.1rem);}
.cxc__meta{display:flex;flex-wrap:wrap;gap:.6em;margin-top:1.1em;}
.cxc__meta span{font-size:.8rem;font-weight:700;color:var(--ink-2);
  background:var(--bg);border-radius:999px;padding:.4em 1em;}
.cx__nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:clamp(1.4rem,3vw,2.2rem);}
.cx__arrow{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--bg-2);color:var(--ink);
  transition:background .3s,color .3s,border-color .3s;}
.cx__arrow:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);}
.cx__arrow:disabled{opacity:.35;cursor:default;}
.cx__dots{display:flex;gap:.55rem;}
.cx__dot{width:9px;height:9px;border-radius:50%;background:#c3cbdc;transition:background .3s,transform .3s;}
.cx__dot.on{background:var(--blue);transform:scale(1.25);}

/* ============ 事例一覧（2列） ============ */
.rc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,3.6vw,2.8rem);}
.rc__card{display:grid;gap:1rem;}
.rc__thumb{border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#111;}
.rc__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.rc__card:hover .rc__thumb img{transform:scale(1.05);}
.rc__name{display:block;font-weight:800;color:var(--blue);font-size:.92rem;letter-spacing:.03em;}
.rc__ttl{display:block;font-weight:700;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.7;margin-top:.3em;}

/* ============ 記事一覧（お役立ち情報） ============ */
.arts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2.6vw,2rem);}
.art{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;gap:clamp(.9rem,2vw,1.4rem);align-items:center;
  background:var(--bg-2);border-radius:18px;padding:clamp(.9rem,2vw,1.2rem);
  box-shadow:0 26px 50px -40px rgba(20,30,60,.45);transition:transform .45s var(--ease),box-shadow .45s;}
.art:hover{transform:translateY(-4px);box-shadow:0 36px 60px -40px rgba(20,30,60,.5);}
.art__thumb{border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#111;}
.art__thumb img{width:100%;height:100%;object-fit:cover;}
.art__meta{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;}
.art__date{font-family:var(--en);font-weight:500;letter-spacing:.06em;font-size:.8rem;color:var(--gray);}
.badge{font-size:.7rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:.3em .9em;
  border:1px solid var(--blue);color:var(--blue);}
.badge--solid{background:var(--blue);color:#fff;}
.art__ttl{display:block;font-weight:700;font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.65;margin:.5em 0 .35em;}
.art__ex{display:block;color:var(--gray);font-size:.86rem;line-height:1.85;}
.art__arw{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:50%;
  background:var(--bg);color:var(--blue);font-family:var(--en);
  transition:background .3s,color .3s,transform .3s;}
.art:hover .art__arw{background:var(--blue);color:#fff;transform:translateX(3px);}

/* ============ ピックアップ3枚（お役立ち情報） ============ */
.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.3rem,3vw,2.2rem);}
.pick__c{background:var(--bg-2);border-radius:20px;padding:clamp(1.6rem,3.4vw,2.4rem);
  box-shadow:0 30px 60px -42px rgba(20,30,60,.45);
  display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;}
.pick__ic{display:grid;place-items:center;width:3.2em;height:3.2em;border-radius:50%;
  background:var(--grad-d);color:#fff;margin-bottom:.4rem;}
.pick__ic svg{width:46%;height:46%;}
.pick__h{font-weight:900;color:var(--navy);font-size:clamp(1.1rem,1.7vw,1.32rem);}
.pick__p{color:var(--ink-2);font-size:.93rem;line-height:2;}
.pick__c .textlink{margin-top:auto;padding-top:.6rem;color:var(--blue);}

/* ============ お問い合わせフォーム ============ */
.formcard{max-width:980px;margin-inline:auto;background:var(--bg-2);border-radius:24px;
  box-shadow:0 40px 80px -50px rgba(20,30,60,.4);padding:clamp(1.6rem,4vw,3.2rem);}
.formcard__head{text-align:center;margin-bottom:clamp(1.6rem,3.4vw,2.6rem);}
.formcard__head h2{font-weight:900;color:var(--navy);font-size:clamp(1.3rem,2.6vw,1.8rem);}
.formcard__head p{margin-top:.8em;color:var(--ink-2);font-size:.94rem;line-height:1.95;}
.frow{display:grid;grid-template-columns:minmax(170px,26%) 1fr;gap:clamp(.6rem,2vw,1.6rem);
  padding:clamp(1rem,2.2vw,1.4rem) 0;border-bottom:1px solid var(--line);align-items:start;}
.flabel{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;font-weight:700;font-size:.95rem;padding-top:.5em;}
.req,.opt{font-size:.66rem;font-weight:700;letter-spacing:.06em;border-radius:4px;padding:.3em .75em;line-height:1.4;}
.req{background:var(--blue);color:#fff;}
.opt{background:#e6eaf3;color:var(--ink-2);}
.ffield input[type=text],.ffield input[type=email],.ffield input[type=tel],
.ffield textarea,.ffield select{
  width:100%;font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:.85em 1em;transition:border-color .25s,box-shadow .25s;}
.ffield input:focus,.ffield textarea:focus,.ffield select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);}
.ffield textarea{min-height:9em;resize:vertical;line-height:1.9;}
.ffield__note{display:block;margin-top:.6em;color:var(--gray);font-size:.78rem;line-height:1.8;}
.ffile{display:flex;align-items:center;gap:.9em;flex-wrap:wrap;}
.ffile label{display:inline-block;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:.6em 1.4em;font-size:.88rem;font-weight:700;cursor:pointer;transition:background .25s,color .25s,border-color .25s;}
.ffile label:hover{background:var(--blue);color:#fff;border-color:var(--blue);}
.ffile > span{color:var(--gray);font-size:.84rem;}
.fcheck{display:flex;align-items:center;gap:.7em;padding-top:.5em;font-size:.94rem;cursor:pointer;}
.fcheck input{width:1.15em;height:1.15em;accent-color:var(--blue);}
.fcheck a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.fsubmit{text-align:center;margin-top:clamp(1.8rem,3.6vw,2.6rem);}

/* ============ 無料相談バンド ============ */
.cband{max-width:980px;margin:clamp(2rem,4vw,3rem) auto 0;display:grid;
  grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.6vw,2rem);align-items:center;
  background:var(--dark);color:#fff;border-radius:22px;
  padding:clamp(1.5rem,3.4vw,2.4rem) clamp(1.4rem,3.4vw,2.8rem);}
.cband__ic{display:grid;place-items:center;width:3.4em;height:3.4em;border-radius:50%;
  background:var(--grad-d);color:#fff;}
.cband__ic svg{width:46%;height:46%;}
.cband h3{font-weight:900;font-size:clamp(1.05rem,1.8vw,1.35rem);}
.cband p{color:#c6cfe0;font-size:.9rem;line-height:1.9;margin-top:.4em;}

/* ============ FAQ（details＝JS不要のアコーディオン） ============ */
.faq{max-width:980px;margin-inline:auto;display:flex;flex-direction:column;gap:.9rem;}
.faq details{background:var(--bg-2);border-radius:16px;overflow:hidden;
  box-shadow:0 24px 46px -40px rgba(20,30,60,.45);}
.faq summary{display:flex;align-items:center;gap:1em;cursor:pointer;list-style:none;font-weight:700;
  padding:clamp(1rem,2.2vw,1.35rem) clamp(1.2rem,2.6vw,1.8rem);font-size:clamp(.96rem,1.3vw,1.08rem);}
.faq summary::-webkit-details-marker{display:none;}
.faq .qi,.faq .ai{display:grid;place-items:center;flex:0 0 auto;width:2em;height:2em;border-radius:50%;
  font-family:var(--en);font-weight:600;font-size:.92em;}
.faq .qi{background:var(--grad-d);color:#fff;}
.faq .ai{background:var(--bg);color:var(--blue);}
.faq .chev{margin-left:auto;flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);}
.faq details[open] .chev{transform:rotate(-135deg) translate(-2px,-2px);}
.faq__a{display:flex;gap:1em;color:var(--ink-2);line-height:2;font-size:.94rem;
  padding:0 clamp(1.2rem,2.6vw,1.8rem) clamp(1.2rem,2.6vw,1.8rem);}

/* ============ レスポンシブ ============ */
@media (max-width:1000px){
  .grid4{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .flow__step{grid-template-columns:1fr;gap:clamp(1rem,3vw,1.6rem);}
  .flow__side{display:flex;align-items:center;gap:1.2em;padding-right:0;}
  .flow__side::after{display:none;}
  .flow__catch{margin-top:0;}
  .grid3,.pk{grid-template-columns:1fr;}
  .cxc{grid-template-columns:1fr;}
  .cxc__img{aspect-ratio:16/10;}
  .rc,.arts{grid-template-columns:1fr;}
  .frow{grid-template-columns:1fr;gap:.5rem;}
  .flabel{padding-top:0;}
  .cband{grid-template-columns:auto 1fr;row-gap:1.2rem;}
  .cband .btn{grid-column:1/-1;justify-content:center;}
}
@media (max-width:600px){
  .flow__pts,.grid4{grid-template-columns:1fr;}
  .art{grid-template-columns:minmax(96px,34%) 1fr;}
  .art__arw{display:none;}
  .phero__en{font-size:clamp(2.6rem,13vw,4rem);}
}

/* ============================================================================
   事業内容ページ専用（business.html だけで使う。他の下層ページの .phero 等には触れない）
   ── ヒーロー：asianagency.co.jp/web/ の下層ヒーロー(.l-sub-img)を実測して再現
      実測(vw1280)：セクション padding 40/0/32、内側 幅1200(左右余白40)・左padding60・
      flex・align-items:center・gap60／見出し58px・700・行高63.8(1.1)・字間1.74(.03em)／
      カテゴリ 18px・700・行高23.4・字間0.9(.05em)・下margin10／写真 542x272(2:1)・角丸20px／
      写真の上辺に linear-gradient(195deg, 差し色 0%, 半透明 4.92%, 透明 9.46%) の帯／
      背景は45度の縞（実測：横周期140px・帯104px＝画像1920px基準、傾き dx/dy=1）を左上に。
      実測(vw390)：padding 100/0/62、縦積み、見出し28px、カテゴリ16px、写真350x175・角丸10px。
   ── 本文：greenculture.co.jp/business/ を実測して再現（本文カラム880px基準）
   配色のみ S-passo の青に置き換え（緑#8ec22f→--blue／濃緑#0a7c24→--blue／文字#2a2220→--ink）
   ========================================================================== */
/* ヘッダーは mix-blend-difference で浮いているので、その高さぶん下げてから参考の padding40 を足す */
.bhero{position:relative;padding:calc(clamp(92px,8.6vw,124px) + 40px) 0 32px;background:var(--bg-2);overflow:hidden;}
/* 45度の縞。左上を濃く、右下へ向けてマスクで消す（参考画像も左上の帯だけ不透明） */
.bhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,
    rgba(37,99,235,.075) 0 49px, rgba(37,99,235,0) 49px 66px);
  -webkit-mask:linear-gradient(135deg,#000 0 16%,rgba(0,0,0,0) 44%);
          mask:linear-gradient(135deg,#000 0 16%,rgba(0,0,0,0) 44%);}
.bhero__in{position:relative;z-index:1;width:min(1200px,100% - 80px);margin-inline:auto;
  padding-left:60px;display:flex;align-items:center;gap:60px;}
.bhero__head{flex:1 1 auto;min-width:0;margin:0;font-size:58px;font-weight:700;line-height:1.1;
  letter-spacing:.03em;color:var(--ink);}
.bhero__cat{display:block;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:.05em;
  color:var(--blue);margin-bottom:10px;}
.bhero__photo{position:relative;flex:0 0 47.6%;aspect-ratio:847/424;border-radius:20px;overflow:hidden;}
.bhero__photo img{width:100%;height:100%;object-fit:cover;display:block;}
/* 写真上辺の差し色グラデ（参考は195degのオレンジ。角度と止め位置はそのまま） */
.bhero__photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(195deg,rgba(79,134,247,.95) 0%,rgba(79,134,247,.5) 4.92%,rgba(79,134,247,0) 9.46%);}
.bhero__crumb{position:relative;z-index:1;width:min(1200px,100% - 80px);margin:32px auto 0;
  padding-left:60px;font-size:15px;color:var(--ink-2);}
.bhero__crumb a{color:inherit;text-decoration:none;}
.bhero__crumb a:hover{text-decoration:underline;}
.bhero__crumb .sep{margin:0 .8em;color:#c3cbdb;}
.bhero__crumb .cur{font-weight:700;color:var(--ink);}
/* ホームページ制作のみ、見出しの下にアプリCTAを置く（左カラムを縦積みにする） */
.bhero__txt{flex:1 1 auto;min-width:0;}
.bhero__txt .bhero__head{flex:none;}
.bhero__btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:26px;}
.bhero__btns .btn--out{color:var(--ink);border-color:#c3cbdb;}
.bhero__btns .btn--out:hover{background:var(--ink);color:#fff;}
/* .bhero は明るい下層ヒーロー。濃紺フォトヒーロー用の曲線せり上がりは打ち消す */
.bhero + .stage{margin-top:0;border-radius:0;box-shadow:none;}

.bzmain{background:var(--bg-2);}
/* ---- 本文の共通枠（参考の本文カラム=880px） ---- */
.bz{width:min(880px,100% - clamp(2.4rem,8vw,4rem));margin:0 auto;padding-bottom:clamp(3rem,7vw,5rem);}
.bz__chap{padding-top:60px;}
/* 見出し：41px/700・行高54・左padding40 に 24px の角丸四角アイコン */
.bz__h{position:relative;margin:0 0 46px;padding-left:40px;
  font-size:41px;font-weight:700;line-height:54px;letter-spacing:.024em;color:var(--ink);}
.bz__h::before{content:"";position:absolute;left:0;top:15px;width:24px;height:24px;
  border-radius:7px;background:#c2c8d4;}
.bz__h::after{content:"";position:absolute;left:7px;top:22px;width:10px;height:10px;
  border-radius:2px;background:#fff;}
/* 事業概要：写真→2カラム（左見出し422 / 右本文458）→ 中央ボタン */
.bz__eye{border-radius:20px;overflow:hidden;aspect-ratio:880/495;}
.bz__eye img{width:100%;height:100%;object-fit:cover;display:block;}
.bz__det{display:grid;grid-template-columns:422fr 458fr;margin-top:72px;}
.bz__det-t{margin:0;font-size:32px;font-weight:700;line-height:1.5;letter-spacing:.03em;color:var(--ink);}
.bz__det-t--blue{color:var(--blue);}
/* 導入実例は「見出しが上・補足が下」の縦積み（2カラムにしない） */
.bz__det--stack{display:block;}
.bz__det--stack .bz__det-t{margin-bottom:26px;}
.bz__det-x p{margin:0;font-size:16px;line-height:1.75;letter-spacing:.06em;color:var(--ink);}
.bz__btnrow{display:flex;justify-content:center;margin-top:56px;}
/* 導入実例スライダー：SOLUTIONカードの下余白（72px）が効くのでナビ側の余白は持たせない */
.bz__sld .sld__nav{margin-top:0;}
.bz__sld .sld__slide{display:flex;flex-direction:column;}
.bz__sld .bz__client{margin-top:auto;}
/* お客様の声：スライダーを枠で囲う（枠線と角の付け方は .bz__card / .bz__client と揃える） */
.bz__sldbox{padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,3.4vw,2.4rem);
  border:2px solid #f0f0f0;border-radius:34px 0;background:var(--bg-2);}
.bz__sldbox .bz__det{margin-top:clamp(2rem,5vw,3.2rem);}
.bz__sldbox .bz__client{margin-bottom:0;}
.bz__sldbox .bz__btnrow{margin-top:clamp(1.8rem,4vw,2.8rem);}
.bz__sldbox .sld__nav{margin-top:clamp(1.4rem,3vw,2.2rem);}
/* ボタン：304x68・2px枠・角丸は「左上と右下だけ」＝このサイトの角の付け方 */
.bz__btn{position:relative;display:grid;place-items:center;width:304px;max-width:100%;height:68px;
  border:2px solid var(--blue);border-radius:14px 0;background:var(--bg-2);
  font-size:16px;font-weight:700;line-height:30px;letter-spacing:.06em;color:var(--blue);
  text-decoration:none;transition:background .25s,color .25s;}
.bz__btn:hover{background:var(--blue);color:#fff;}
.bz__btn-ic{position:absolute;right:30px;top:50%;width:16px;height:12px;transform:translateY(-50%);}
.bz__btn-ic::before{content:"";position:absolute;left:0;top:50%;width:16px;height:1.8px;
  background:currentColor;transform:translateY(-50%);}
.bz__btn-ic::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border:1.8px solid currentColor;border-left:0;border-bottom:0;transform:translateY(-50%) rotate(45deg);}
/* 3つの事業：2px枠のボックス＋薄グレーの角丸カード3枚（番号はカードの上に出る） */
.bz__three{border:2px solid #f0f0f0;padding:30px 52px 52px;margin-top:60px;}
.bz__three-h{margin:0 0 33px;font-size:26px;font-weight:700;line-height:54px;letter-spacing:.02em;
  text-align:center;color:var(--ink);}
/* 参考は3枚並び。こちらは4事業なので同じ間隔(26px)のまま4列にする */
.bz__three-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.bz__three-list li{position:relative;margin-top:34px;padding:32px 12px 24px;text-align:center;
  background:#f0f0f0;border-radius:34px 0;}
.bz__three-no{position:absolute;left:0;right:0;top:-36px;margin:0;font-family:var(--en);
  font-size:26px;font-weight:600;line-height:1;letter-spacing:.06em;color:var(--blue);}
.bz__three-t{margin:0 0 15px;font-size:17px;font-weight:700;line-height:1.4;letter-spacing:.03em;color:var(--blue);}
.bz__three-ic{display:grid;place-items:center;width:min(160px,100%);aspect-ratio:1;margin:0 auto;
  background:#fff;border-radius:50%;}
.bz__three-ic svg{width:92px;height:92px;}
/* イラストは縦横比がまちまちなので、円のなかに収まる範囲でできるだけ大きく */
.bz__three-ic img{width:auto;height:auto;max-width:84%;max-height:84%;display:block;}
/* 01 は白抜きのイラストなので、円の地色を絵と同じ青にして白が見えるようにする */
.bz__three-ic--sky{background:#49a5cc;}
/* 青パネル：880x400・角丸は左上と右下だけ35px・padding 59/72/38 */
.bz__fig{position:relative;min-height:400px;margin:0 0 70px;padding:59px 72px 38px;
  background:var(--blue);border-radius:35px 0;overflow:hidden;}
.bz__fig-txt{position:relative;width:368px;max-width:100%;padding-bottom:81px;}
.bz__fig-txt p{margin:0;font-size:16px;line-height:28px;letter-spacing:.06em;color:#fff;}
.bz__fig-txt strong{display:block;margin-bottom:28px;font-size:19.2px;font-weight:700;line-height:33.6px;}
/* 大きな英字ラベル：パネルより濃い同系色で、パネル下端に敷く */
.bz__fig-en{position:absolute;left:0;bottom:0;font-size:28px;font-weight:700;line-height:31px;
  letter-spacing:.04em;text-transform:uppercase;color:#1a4bc4;}
/* 図版は本文の右側（左padding 72＋本文 368＋余白 24 ＝ 464px から右端まで）に置き、
   その枠のなかで天地左右とも中央。絵ごとに縦横比が違うので、幅と高さの両方に上限を
   置いて見た目の大きさを揃える。 */
.bz__fig-img{position:absolute;left:464px;right:34px;top:50%;transform:translateY(-50%);
  display:flex;justify-content:center;align-items:center;}
.bz__fig-img img{width:auto;height:auto;max-width:100%;max-height:288px;display:block;}
/* 導入業種（参考の OUR CLIENT ボックス） */
/* 本文のすぐ下に枠付きボックスが来る場合は間隔を空ける（参考の .p-fig 下marginと同じ70px相当） */
.bz__det + .bz__client{margin-top:60px;}
.bz__client{position:relative;margin-bottom:72px;padding:40px 50px;border:2px solid #f0f0f0;overflow:hidden;}
.bz__client-mark{position:absolute;right:2px;top:2px;width:144px;opacity:.05;pointer-events:none;}
.bz__client-h{display:flex;align-items:baseline;margin-bottom:30px;}
.bz__client-en{font-size:30px;font-weight:700;line-height:1;letter-spacing:.03em;color:var(--ink);}
.bz__client-ja{margin-left:17px;font-size:15px;font-weight:700;line-height:1;color:#999;}
.bz__client-t{margin:0;font-size:15px;line-height:26px;letter-spacing:.04em;color:var(--ink);}
.bz__client-t small{display:block;margin-top:2px;font-size:13px;line-height:1.4;}

/* 章番号（参考の3事業ボックスと同じ番号の見せ方を、各章の見出し上に置く） */
.bz__no{margin:0 0 6px;padding-left:40px;font-family:var(--en);font-size:26px;font-weight:600;
  line-height:1;letter-spacing:.1em;color:var(--blue);}
/* ご利用の流れ：3事業カードと同じ「左上と右下だけ角丸」のグレーカード */
.bz__flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.bz__flow li{position:relative;margin-top:34px;padding:34px 24px 30px;
  background:#f0f0f0;border-radius:34px 0;}
.bz__flow-no{position:absolute;left:0;right:0;top:-36px;margin:0;text-align:center;
  font-family:var(--en);font-size:26px;font-weight:600;line-height:1;letter-spacing:.06em;color:var(--blue);}
.bz__flow-t{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.4;letter-spacing:.04em;
  text-align:center;color:var(--blue);}
.bz__flow-d{margin:0;font-size:15px;line-height:1.75;letter-spacing:.04em;color:var(--ink);}
/* CONTACT：青パネルと同じ角の付け方で締める */
.bz__cta{position:relative;padding:56px 72px 60px;background:var(--blue);border-radius:35px 0;
  text-align:center;color:#fff;}
.bz__cta-en{margin:0 0 14px;font-family:var(--en);font-size:15px;font-weight:600;line-height:1;
  letter-spacing:.28em;color:rgba(255,255,255,.72);}
.bz__cta-t{margin:0 0 18px;font-size:clamp(1.3rem,2.6vw,30px);font-weight:700;line-height:1.5;
  letter-spacing:.03em;}
.bz__cta-d{margin:0 0 36px;font-size:16px;line-height:28px;letter-spacing:.06em;color:rgba(255,255,255,.9);}
.bz__cta-btn{position:relative;display:grid;place-items:center;width:304px;max-width:100%;height:68px;
  margin-inline:auto;background:#fff;border-radius:14px 0;
  font-size:16px;font-weight:700;line-height:30px;letter-spacing:.06em;color:var(--blue);
  text-decoration:none;transition:transform .25s;}
.bz__cta-btn:hover{transform:translateY(-3px);}

@media (max-width:900px){
  .bhero{padding:calc(clamp(64px,15vw,88px) + clamp(1.6rem,5vw,2.6rem)) 0 clamp(1.6rem,4vw,2rem);}
  .bz__no{padding-left:32px;font-size:20px;}
  .bz__flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.4rem,6vw,3rem) clamp(1rem,3vw,1.6rem);}
  .bz__flow li{margin-top:30px;padding:30px clamp(1rem,3vw,1.4rem) 24px;}
  .bz__cta{padding:clamp(2.2rem,6vw,3.4rem) clamp(1.4rem,5vw,3rem) clamp(2.4rem,6vw,3.6rem);border-radius:24px 0;}
  .bz__cta-d{margin-bottom:clamp(1.6rem,4vw,2.2rem);font-size:15px;line-height:1.8;}
  .bhero__in{width:min(100% - 2.4rem,700px);padding-left:0;display:block;}
  .bhero__head{font-size:clamp(1.75rem,4.4vw,2.6rem);}
  .bhero__cat{font-size:clamp(.95rem,1.9vw,1.05rem);}
  .bhero__btns{margin-top:clamp(1.2rem,3.2vw,1.7rem);}
  .bhero__photo{margin-top:clamp(1.6rem,4vw,3.1rem);border-radius:10px;}
  .bhero__crumb{width:min(100% - 2.4rem,700px);padding-left:0;margin-top:20px;font-size:13px;}
  .bz__chap{padding-top:clamp(2.4rem,6vw,3.75rem);}
  .bz__h{margin-bottom:clamp(1.4rem,3.5vw,2.9rem);padding-left:32px;
    font-size:clamp(1.5rem,4.2vw,2.2rem);line-height:1.35;}
  .bz__h::before{top:.18em;width:20px;height:20px;border-radius:6px;}
  .bz__h::after{left:6px;top:calc(.18em + 6px);width:8px;height:8px;}
  .bz__det{grid-template-columns:1fr;gap:clamp(1rem,3vw,1.6rem);margin-top:clamp(1.8rem,4.5vw,2.6rem);}
  .bz__det-t{font-size:clamp(1.3rem,3.4vw,1.75rem);}
  .bz__btnrow{margin-top:clamp(1.8rem,4vw,2.6rem);}
  .bz__three{margin-top:clamp(2rem,5vw,3rem);padding:24px clamp(1rem,3vw,2rem) 32px;}
  .bz__three-h{margin-bottom:clamp(1.6rem,4vw,2rem);font-size:clamp(1.15rem,2.8vw,1.5rem);line-height:1.5;}
  /* minmax(0,1fr)＝中の丸アイコン（最小110px）に列幅を押し広げられないようにする。
     1fr のままだと 320px 幅で列が枠からはみ出す。 */
  .bz__three-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.4rem,6vw,3rem) clamp(1rem,3vw,1.6rem);}
  .bz__three-list li{margin-top:30px;}
  .bz__three-ic{width:min(clamp(110px,30vw,150px),100%);}
  .bz__fig{margin-bottom:clamp(2.4rem,6vw,4rem);padding:clamp(1.8rem,5vw,3rem);border-radius:24px 0;}
  .bz__fig-txt{width:auto;padding-bottom:clamp(3.4rem,9vw,5rem);}
  .bz__fig-txt strong{margin-bottom:1em;font-size:clamp(1.02rem,2.4vw,1.2rem);line-height:1.6;}
  .bz__fig-en{font-size:clamp(1.15rem,3.2vw,1.65rem);line-height:1.15;}
  /* イラストは文字の下に回して重ならないようにする（横は中央） */
  .bz__fig-img{position:static;transform:none;width:min(340px,80%);max-width:none;
    margin:clamp(1rem,3vw,1.6rem) auto 0;}
  .bz__fig-img img{max-height:none;}
  .bz__client{margin-bottom:clamp(2rem,5vw,3.6rem);padding:clamp(1.4rem,4vw,2.2rem);}
  .bz__client-h{margin-bottom:clamp(1rem,2.6vw,1.6rem);}
  .bz__client-en{font-size:clamp(1.3rem,3.2vw,1.75rem);}
  .bz__point{margin-bottom:clamp(1rem,2.6vw,1.6rem);font-size:clamp(1.25rem,3.2vw,1.75rem);line-height:1.5;}
  .bz__prod{gap:clamp(1rem,3vw,2rem);margin-bottom:clamp(2.4rem,6vw,3.4rem);}
  .bz__prod figcaption{font-size:13px;}
}
@media (max-width:600px){
  .bz__btn,.bz__cta-btn{width:100%;height:60px;font-size:15px;}
  .bz__prod{grid-template-columns:1fr;gap:1.4rem;}
  .bz__three-list li,.bz__flow li{border-radius:26px 0;}
  .bz__flow{grid-template-columns:1fr;}
}

/* =========================================================
   Pickup（導入実例ページ上部の大型カルーセル）
   freedom-x.co.jp/case_study の FV を実CSSから実測して再現。
   実測は表示幅1900pxで採取。参考サイトは設計1520px基準の可変スケール
   （実測値÷1.25＝設計値）なので、以下は設計値で記載する。
     背景 #ededf0 ／ ラベル "Pickup" 10px bold
     スライダー可視幅 1320 ／ アクティブカード 750x437・角丸16
     トラック左右padding 285（＝カード幅の38%が左右に覗く）
     スライド margin-right -37.5（＝カード幅の-5%）
     非アクティブ scale .8 / transition .3s cubic-bezier(.55,.05,.22,.99)
     写真の暗幕 linear-gradient(transparent 27%,#000 76%) を opacity .6
     文字は下40・左右43／社名 14 bold／見出し 30・行高42 bold
     見出しの下線は background-image の2px帯を calc(100% - 5px) に敷く
     カテゴリピル 1px #fff・半径900・padding 5/7.5/4・14 bold
     タグ 14／タグのul全体に opacity .7
     サムネ 80x53・角丸8・右マージン15・非アクティブ opacity .6
   カード幅に比例させたいので、寸法は --pick-w（アクティブカード幅）比で書く。
   フォントは参考サイトが LINE Seed JP（Web配布なし）のため、
   サイト標準の Zen Kaku Gothic New で再現する。
   ========================================================= */
.pick{--pick-w:min(880px,56vw);
  background:#ededf0;padding:clamp(2rem,4.4vw,3.4rem) 0 clamp(2.6rem,5.4vw,4.2rem);}
.pick__in{width:min(1548px,100% - 5vw);margin-inline:auto;}
.pick__label{margin:0 0 clamp(.9rem,1.8vw,1.5rem);font-size:12px;font-weight:700;
  letter-spacing:.12em;line-height:1;color:var(--ink);}

.pick__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-inline:calc((100% - var(--pick-w)) / 2);}
.pick__track::-webkit-scrollbar{display:none;}
.pick__slide{flex:0 0 var(--pick-w);min-width:0;scroll-snap-align:center;}
.pick__slide + .pick__slide{margin-left:calc(var(--pick-w) * -.05);}

.pick__card{position:relative;display:block;aspect-ratio:750/437;border-radius:16px;overflow:hidden;
  color:#fff !important;text-decoration:none !important;
  scale:.8;transition:scale .3s cubic-bezier(.55,.05,.22,.99);}
.pick__slide.is-current .pick__card{scale:1;}
.pick__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
/* 参考サイトと同じ暗幕（下ほど濃い）。白文字の可読性はこれで確保している */
.pick__card::after{content:"";position:absolute;inset:0;z-index:1;opacity:.6;
  background:linear-gradient(rgba(0,0,0,0) 27%,#000 76%);}

.pick__body{position:absolute;left:0;right:0;z-index:2;
  bottom:calc(var(--pick-w) * .0533);padding-inline:calc(var(--pick-w) * .0573);}
.pick__client{margin:0 0 calc(var(--pick-w) * .0133);line-height:1.4;
  font-size:clamp(11px,calc(var(--pick-w) * .0187),15px);font-weight:700;}
.pick__ttl{margin:0 0 calc(var(--pick-w) * .0133);line-height:1.4;
  font-size:clamp(17px,calc(var(--pick-w) * .04),30px);font-weight:700;}
/* 各行の下に2pxの白帯（＝参考サイトの下線）。行ごとに引くため clone を付ける */
.pick__ttl span{background-image:linear-gradient(90deg,#fff,#fff);
  background-size:100% 2px;background-position:100% calc(100% - 5px);background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.pick__aside{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--pick-w) * .0133);}
.pick__cat{display:inline-block;border:1px solid #fff;border-radius:900px;
  padding:.36em .54em .29em;line-height:1;font-weight:700;
  font-size:clamp(10px,calc(var(--pick-w) * .0187),14px);}
.pick__tags{display:flex;flex-wrap:wrap;gap:calc(var(--pick-w) * .0133);
  list-style:none;margin:0;padding:0;opacity:.7;line-height:1;
  font-size:clamp(10px,calc(var(--pick-w) * .0187),14px);}

.pick__thumbs{display:flex;justify-content:center;flex-wrap:wrap;
  gap:calc(var(--pick-w) * .02);margin-top:calc(var(--pick-w) * .04);}
.pick__thumb{display:block;padding:0;border:0;background:none;cursor:pointer;
  width:clamp(56px,calc(var(--pick-w) * .1067),100px);
  border-radius:8px;overflow:hidden;opacity:.6;transition:opacity .3s;}
.pick__thumb:hover,.pick__thumb.on{opacity:1;}
.pick__thumb img{display:block;width:100%;aspect-ratio:80/53;object-fit:cover;}

/* スマホは横長のままだと文字が入りきらないので、カードを縦に伸ばして
   文字まわりの余白はカード幅比ではなく固定値にする。 */
@media (max-width:767px){
  .pick{--pick-w:min(560px,84vw);}
  .pick__in{width:100%;}
  .pick__label{padding-inline:8vw;}
  .pick__card{aspect-ratio:4/3;}
  .pick__body{bottom:18px;padding-inline:18px;}
  /* 社名は320px幅でも1行のまま（「合同会社フットボールクラブ相模原（FC相模）」対策で幅連動） */
  .pick__client{margin-bottom:6px;font-size:min(11px,3vw);}
  .pick__ttl{margin-bottom:10px;font-size:17px;line-height:1.45;}
  .pick__aside{gap:8px;}
  .pick__cat,.pick__tags{font-size:11px;}
  .pick__tags{gap:8px;}
  .pick__thumbs{gap:10px;margin-top:18px;}
}

/* =========================================================
   下層ページ共通パーツ（事業内容と同じ設計を他のセクションページにも使う）
   角の付け方（左上と右下だけ）・2px #f0f0f0 の枠・青#2563eb のアクセントは
   事業内容の .bz__three / .bz__client / .bz__fig と揃える。
   ========================================================= */
/* 見出し直下のリード文（見出しと同じ左インデントに揃える） */
.bz__lead{margin:-26px 0 42px;padding-left:40px;font-size:16px;line-height:1.9;
  letter-spacing:.06em;color:var(--ink);}
/* お客様名など、本文の上に置く小さな肩書き行 */
.bz__who{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.06em;color:#8a91a0;}

/* ---- カードグリッド（3ステップ／おすすめ業種／事例一覧／注目の事例） ---- */
.bz__grid{list-style:none;margin:0;padding:0;display:grid;gap:26px;}
/* li は行の高さまで伸びるが、その中のカードは伸びないので高さが揃わない。カード側も伸ばす */
.bz__grid>li{display:flex;min-width:0;}
.bz__grid>li>.bz__card{flex:1 1 auto;min-width:0;}
.bz__grid--2{grid-template-columns:repeat(2,1fr);}
.bz__grid--3{grid-template-columns:repeat(3,1fr);}
.bz__grid--4{grid-template-columns:repeat(4,1fr);}
.bz__card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:2px solid #f0f0f0;border-radius:34px 0;background:var(--bg-2);
  color:inherit;text-decoration:none;transition:border-color .25s,transform .35s var(--ease);}
a.bz__card:hover{border-color:var(--blue);transform:translateY(-4px);}
.bz__card-img{aspect-ratio:16/10;overflow:hidden;background:#eef2f8;}
.bz__card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease);}
a.bz__card:hover .bz__card-img img{transform:scale(1.04);}
.bz__card-b{padding:24px 26px 28px;}
.bz__card-no{margin:0 0 8px;font-family:var(--en);font-size:14px;font-weight:600;line-height:1;
  letter-spacing:.14em;color:var(--blue);}
.bz__card-t{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:.03em;color:var(--blue);}
.bz__card-d{margin:0;font-size:15px;line-height:1.75;letter-spacing:.04em;color:var(--ink);}
.bz__card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.bz__card-meta span{padding:.25em .9em;border:1px solid #dfe4ee;border-radius:999px;
  font-size:12px;line-height:1.7;color:#8a91a0;}
/* 写真のかわりに丸アイコンを載せる版（お役立ち情報のピックアップ） */
.bz__card--ic{text-align:center;}
.bz__card-ic{display:grid;place-items:center;width:76px;height:76px;margin:30px auto 0;
  border-radius:50%;background:#eef3fd;color:var(--blue);}
.bz__card-ic svg{width:34px;height:34px;}
.bz__card-link{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;
  color:var(--blue);text-decoration:underline;text-underline-offset:4px;}

/* ---- 記事リスト（お役立ち情報） ---- */
.bz__arts{list-style:none;margin:0;padding:0;border-top:2px solid #f0f0f0;}
.bz__arts li{border-bottom:2px solid #f0f0f0;}
.bz__art{position:relative;display:grid;grid-template-columns:200px 1fr 26px;align-items:center;
  gap:28px;padding:24px 10px;color:inherit;text-decoration:none;transition:background .25s;}
.bz__art:hover{background:#f7f9fc;}
.bz__art-thumb{aspect-ratio:16/10;overflow:hidden;border-radius:20px 0;background:#eef2f8;}
.bz__art-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.bz__art-meta{display:flex;align-items:center;gap:12px;margin:0 0 10px;}
.bz__art-date{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.08em;color:#8a91a0;}
.bz__art-cat{padding:.25em 1em;border:1px solid var(--blue);border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.7;color:var(--blue);}
.bz__art-cat--solid{background:var(--blue);color:#fff;}
.bz__art-t{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.5;letter-spacing:.03em;
  color:var(--ink);transition:color .25s;}
.bz__art:hover .bz__art-t{color:var(--blue);}
.bz__art-d{margin:0;font-size:14px;line-height:1.8;letter-spacing:.04em;color:#6b7280;}
.bz__art-arw{justify-self:end;width:12px;height:12px;border:2px solid var(--blue);
  border-left:0;border-bottom:0;transform:rotate(45deg);transition:transform .25s;}
.bz__art:hover .bz__art-arw{transform:rotate(45deg) translate(3px,-3px);}

/* ---- キャンペーン（青パネル。角の付け方は .bz__fig と同じ） ---- */
.bz__camp{position:relative;overflow:hidden;padding:48px 56px 52px;background:var(--blue);
  border-radius:35px 0;text-align:center;color:#fff;}
.bz__camp-ghost{position:absolute;right:22px;top:6px;font-family:var(--en);font-weight:700;
  font-size:clamp(2.4rem,7vw,5.4rem);line-height:1;white-space:nowrap;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.18);pointer-events:none;}
.bz__camp-tab{position:relative;display:inline-block;margin-bottom:24px;padding:.5em 1.8em;
  background:#fff;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--blue);}
.bz__camp-top{position:relative;margin:0 0 12px;font-size:17px;font-weight:700;letter-spacing:.05em;}
.bz__camp-top b{font-size:23px;}
.bz__camp-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px;margin-bottom:16px;}
.bz__camp-limit{padding:.42em 1.1em;border:2px solid #fff;border-radius:999px;font-size:15px;font-weight:700;}
.bz__camp-limit b{font-size:22px;}
.bz__camp-zero{font-family:var(--en);font-size:clamp(3.2rem,10vw,88px);font-weight:700;line-height:1;}
.bz__camp-zero span{font-size:.32em;margin-left:.12em;}
.bz__camp-free{font-size:16px;font-weight:700;letter-spacing:.04em;}
.bz__camp-free span{display:block;font-size:13px;color:rgba(255,255,255,.82);}
.bz__camp-foot{position:relative;margin:0;font-size:16px;line-height:1.8;letter-spacing:.05em;
  color:rgba(255,255,255,.92);}
/* ボタンを2つ横に並べる行 */
/* 2つ並べる行は文字数が多くなりがちなので、矢印と文字が詰まらないよう少し広げる */
.bz__btnrow--pair{gap:20px;flex-wrap:wrap;}
.bz__btnrow--pair .bz__btn{width:min(340px,100%);}
.bz__btn--fill{background:var(--blue);color:#fff;}
.bz__btn--fill:hover{background:var(--ink);border-color:var(--ink);}

/* ---- 無料相談バンド ---- */
.bz__band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
  margin-top:44px;padding:32px 40px;background:#eef3fd;border-radius:34px 0;}
.bz__band-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--blue);color:#fff;}
.bz__band-ic svg{width:26px;height:26px;}
.bz__band h3{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.bz__band p{margin:0;font-size:14px;line-height:1.8;letter-spacing:.04em;color:#6b7280;}

/* ---- フォーム ---- */
.bz__form{border:2px solid #f0f0f0;padding:44px 50px 50px;}
.bz__form-h{margin:0 0 8px;font-size:26px;font-weight:700;line-height:1.5;letter-spacing:.03em;color:var(--ink);}
.bz__form-d{margin:0 0 34px;font-size:15px;line-height:1.9;letter-spacing:.04em;color:#6b7280;}
.bz__frow{display:grid;grid-template-columns:236px 1fr;gap:14px 28px;padding:22px 0;
  border-top:1px solid #f0f0f0;}
/* 項目名は入力欄の1行目に揃える（テキストエリアのときに上下中央だと浮いて見える） */
.bz__flabel{display:flex;align-items:flex-start;gap:10px;padding-top:14px;
  font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--ink);}
.bz__req,.bz__opt{padding:.25em .8em;border-radius:3px;font-size:11px;font-weight:700;line-height:1.6;}
.bz__req{background:var(--blue);color:#fff;}
.bz__opt{background:#f0f0f0;color:#8a91a0;}
.bz__form input[type=text],.bz__form input[type=email],.bz__form input[type=tel],
.bz__form textarea,.bz__form select{width:100%;padding:14px 16px;border:2px solid #e7ebf2;
  border-radius:6px;background:#fff;font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .25s;}
.bz__form input:focus,.bz__form textarea:focus,.bz__form select:focus{border-color:var(--blue);outline:none;}
.bz__form textarea{min-height:150px;resize:vertical;line-height:1.8;}
.bz__fnote{display:block;margin-top:10px;font-size:12px;line-height:1.7;color:#8a91a0;}
.bz__ffile{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.bz__ffile label{padding:.7em 1.5em;border:2px solid var(--blue);border-radius:6px;
  font-size:14px;font-weight:700;color:var(--blue);cursor:pointer;transition:background .25s,color .25s;}
.bz__ffile label:hover{background:var(--blue);color:#fff;}
.bz__ffile span{font-size:13px;color:#8a91a0;}
.bz__fcheck{display:flex;align-items:flex-start;gap:10px;padding-top:12px;font-size:15px;color:var(--ink);}
.bz__fcheck input{margin-top:.28em;width:18px;height:18px;accent-color:var(--blue);}
.bz__fcheck a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.bz__fsubmit{display:flex;justify-content:center;margin-top:36px;}
/* 送信ボタンはアイコンと文字が横に並ぶので grid ではなく flex にする */
.bz__fsubmit .bz__btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  cursor:pointer;font-family:inherit;}

/* ---- FAQ ---- */
.bz__faq{border-top:2px solid #f0f0f0;}
.bz__faq details{border-bottom:2px solid #f0f0f0;}
.bz__faq summary{position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:24px 44px 24px 0;cursor:pointer;list-style:none;
  font-size:17px;font-weight:700;line-height:1.6;letter-spacing:.03em;color:var(--ink);}
.bz__faq summary::-webkit-details-marker{display:none;}
.bz__faq-q,.bz__faq-ai{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:6px 0;font-family:var(--en);font-size:15px;font-weight:700;}
.bz__faq-q{background:var(--blue);color:#fff;}
.bz__faq-ai{background:#f0f0f0;color:var(--blue);}
.bz__faq-chev{position:absolute;right:10px;top:30px;width:11px;height:11px;
  border:2px solid var(--blue);border-left:0;border-top:0;transform:rotate(45deg);transition:transform .3s;}
.bz__faq details[open] .bz__faq-chev{transform:rotate(-135deg);}
.bz__faq-a{display:flex;gap:16px;padding:0 10px 28px 0;}
.bz__faq-a p{margin:0;padding-top:4px;font-size:15px;line-height:1.9;letter-spacing:.04em;color:var(--ink);}

@media (max-width:900px){
  .bz__lead{margin:-18px 0 30px;padding-left:32px;font-size:15px;line-height:1.85;}
  .bz__grid{gap:clamp(1rem,3vw,1.6rem);}
  .bz__grid--3,.bz__grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bz__card-b{padding:18px 18px 22px;}
  /* 社名カード見出しは320px幅でも「合同会社フットボールクラブ相模原」が1行のまま（幅連動） */
  .bz__card-t{font-size:min(16px,4.5vw);}
  .bz__card-d{font-size:14px;}
  .bz__art{grid-template-columns:140px 1fr;gap:18px;padding:18px 4px;}
  .bz__art-arw{display:none;}
  .bz__art-t{font-size:16px;}
  .bz__camp{padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,2.4rem) clamp(2.2rem,5vw,3.2rem);border-radius:24px 0;}
  .bz__band{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;
    padding:clamp(1.6rem,4vw,2.2rem) clamp(1.2rem,4vw,2rem);border-radius:24px 0;}
  .bz__form{padding:clamp(1.6rem,4vw,2.4rem) clamp(1.2rem,4vw,2rem) clamp(2rem,5vw,2.6rem);}
  .bz__form-h{font-size:clamp(1.2rem,3.2vw,1.6rem);}
  .bz__frow{grid-template-columns:1fr;gap:10px;padding:18px 0;}
  .bz__flabel{padding-top:0;}
  .bz__fcheck{padding-top:0;}
  .bz__faq summary{padding:20px 36px 20px 0;font-size:16px;}
  .bz__faq-chev{top:26px;}
}
@media (max-width:600px){
  /* minmax(0,…)＝カード内の最小幅（タグ列など）に列を押し広げられないようにする */
  .bz__grid--2,.bz__grid--3,.bz__grid--4{grid-template-columns:minmax(0,1fr);}
  .bz__card{border-radius:26px 0;}
  .bz__art{grid-template-columns:1fr;gap:14px;}
  .bz__art-thumb{max-width:100%;}
  .bz__btnrow--pair .bz__btn{width:100%;}

  /* 導入実例スライドの補足本文はスマホでは出さない。
     写真・青の要点見出し・SOLUTION（導入した仕組み）・詳細ボタンは残すので、
     何をしたのかは読み取れる。長文は「詳細はこちら」の先で読ませる。
     ※事業概要（.bz__sld の外）の短い補足はそのまま出す。 */
  .bz__sld .bz__det-x{display:none;}
  .bz__sld .bz__det--stack .bz__det-t{margin-bottom:0;}

  /* 見出しのアイコンぶんの左インデントは、狭い幅では効きすぎるので詰める */
  .bz__h,.bz__no,.bz__lead{padding-left:28px;}

  /* 短いラベル系は文節の切れ目が無く auto-phrase が効かないので、
     style.css の見出しと同じく行の長さを均す方に倒す。 */
  .bz__camp-tab,.bz__three-t,.bz__flow-t,.bz__card-t,.bz__art-t,.bz__client-t,
  .bsoon__t,.bhero__cat{word-break:normal;text-wrap:balance;}

  .bsoon{border-radius:24px 0;}
}

/* ============ お役立ち情報：準備中（近々開始） ============
   2026-07-30 に記事6本を撤去した際に追加。枠は .bz__sldbox と同じ「2px枠＋角丸34px/0」、
   バッジは .badge--solid と同じ青ベタで、このサイトの作法に揃えてある。
   本文は auto-phrase に任せるので <br> は入れない（見出しだけ上のmediaでbalanceに倒す）。 */
.bsoon{border:2px solid #f0f0f0;border-radius:34px 0;background:var(--bg-2);
  padding:clamp(2.2rem,5vw,3.4rem) clamp(1.4rem,3.4vw,2.6rem);text-align:center;}
.bsoon__badge{display:inline-block;background:var(--blue);color:#fff;border-radius:999px;
  padding:.5em 1.4em;font-size:clamp(.8rem,1.1vw,.9rem);font-weight:700;letter-spacing:.08em;}
.bsoon__t{margin:clamp(1.1rem,2.6vw,1.6rem) 0 0;color:var(--ink);
  font-size:clamp(1.25rem,2.6vw,1.75rem);font-weight:700;line-height:1.6;letter-spacing:.03em;}
.bsoon__d{margin:1.15em auto 0;max-width:34em;color:var(--ink-2);
  font-size:clamp(.94rem,1.15vw,1rem);line-height:2;letter-spacing:.04em;}