@charset "UTF-8";
/*
 * PULL-NET リニューアル HubSpot導入支援ページ(page-hubspot.php)専用スタイル
 * Figma: PULL-NET_ECサイト (fileKey ESLPtaetNAYeAEKry21qFn) node 1:420 "hubSpot導入支援"
 *
 * css/style.css・css/renewal.css には手を加えず、新規クラス（pn-hubspot__ 接頭辞）
 * のみで完結させることで、既存ページ・既存ヘッダー/フッターに影響を与えないように
 * している。is_page_template('page-hubspot.php') のときだけ header.php から読み込まれる。
 *
 * 「制作の流れ」「よくあるご質問」の構造・共通スタイルはEC/コーポレートページと
 * 同一コンポーネントのためrenewal.css側に統合済み（.pn-ec__flow, .pn-corp__flow,
 * .pn-hubspot__flow 等の結合セレクタ）。本ファイルではページ固有の幅と、
 * このページだけbrand/hubspot(オレンジ)を使うアクセントカラーの上書きのみ行う。
 *
 * このページ全体を通じて、Figma上「brand/hubspot」(#f54d09、オレンジ)が見出し・
 * ボタン・番号丸・アイコン背景などに一貫して使われている（EC/コーポレートページの
 * brand/primary(赤)とは異なる、このページ固有のアクセントカラー）。
 *
 * よくあるご質問セクションはFigma上ダミーテキスト（"質問が入ります"等）のままで
 * 実内容が未入稿のため、今回は実データ差し替えを行っていない（安井さんに確認済みの
 * コーポレートページと同じ扱い。要確認・要差し替え）。
 *
 * モバイル値はFigma smp-designページのHubSpotフレームが未完成・一部破損しており
 * 参考にできなかったため、コーポレートページと同様にECページの確定モバイル
 * パターンを参考にした調整値（推測）。Figma確定ではない点に注意。
 */

/* 色・Container(1280px)等の共通トークンはrenewal.cssの:rootで一元定義済みのため、
   ここでは再定義しない。brand/hubspot・background/gray・background/orange・
   Content(1040px)・Text(800px)はこのページ固有の新規トークンのためここで定義する */
.pn-hubspot {
  background: var(--pn-bg-default);
  box-sizing: border-box;
  /* background/gray(#f8f8f8)はrenewal.cssの--pn-bg-grayと同値のため
     再定義せず既存トークンを使う。background/orangeはこのページ固有 */
  --pn-hubspot-accent: #f54d09;
  --pn-hubspot-bg-orange: #fff3e7;
  --pn-hubspot-head-fs: 32px;
  --pn-hubspot-head-lh: 34px;
  --pn-hubspot-breadcrumbs-fs: 12px;
  --pn-hubspot-hero-title-fs: 36px;
  --pn-hubspot-hero-title-lh: 47px;
  --pn-hubspot-hero-lead-fs: 20px;
  --pn-hubspot-hero-lead-lh: 36px;
  --pn-hubspot-scrollcue-title-fs: 44px;
  --pn-hubspot-scrollcue-title-lh: 58px;
  --pn-hubspot-pain-pt: 80px;
  --pn-hubspot-pain-pb: 48px;
  --pn-hubspot-pain-card-pad: 48px 64px;
  --pn-hubspot-about-lead-fs: 16px;
  --pn-hubspot-about-lead-lh: 29px;
  --pn-hubspot-info-title-fs: 54px;
  --pn-hubspot-info-panel-pad: 80px;
  --pn-hubspot-breeze-pad: 64px 80px;
  --pn-hubspot-breeze-title-fs: 24px;
  --pn-hubspot-breeze-title-lh: 34px;
  --pn-hubspot-support-pad-v: 100px;
  --pn-hubspot-support-gap: 80px;
  --pn-hubspot-support-title-fs: 20px;
  --pn-hubspot-support-title-lh: 30px;
  --pn-hubspot-support-desc-fs: 16px;
  --pn-hubspot-support-desc-lh: 29px;
  --pn-hubspot-works-pt: 80px;
  --pn-hubspot-works-pb: 48px;
  --pn-hubspot-link-title-fs: 24px;
  --pn-hubspot-link-title-lh: 34px;
  --pn-hubspot-link-desc-fs: 20px;
  --pn-hubspot-link-desc-lh: 36px;
}
.pn-hubspot * {
  box-sizing: border-box;
}

.pn-hubspot__container {
  width: calc(var(--pn-container) + 40px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.pn-hubspot a {
  text-decoration: none;
  color: inherit;
}

.pn-hubspot__works-card:link,
.pn-hubspot__works-card:visited,
.pn-hubspot__works-card:hover,
.pn-hubspot__works-card:active,
.pn-hubspot__more-btn:link,
.pn-hubspot__more-btn:visited,
.pn-hubspot__more-btn:hover,
.pn-hubspot__more-btn:active {
  text-decoration: none;
  color: inherit;
}

/* style.css の a:link/a:visited/a:hover/a:active（詳細度 0,0,1,1）が
   .pn-hubspot__hero-btn 単体（詳細度 0,0,1,0）より勝ってしまうため、
   EC/コーポレートのCTAボタンと同じ方式で:link/:visited/:hover/:activeを
   明示して詳細度を揃える */
.pn-hubspot__hero-btn:link,
.pn-hubspot__hero-btn:visited,
.pn-hubspot__hero-btn:hover,
.pn-hubspot__hero-btn:active {
  text-decoration: none;
  color: var(--pn-text-inverse);
}

/* 共通の見出し（h2 + グラデーション下線バー、EC/コーポレートと同一パターン） */
.pn-hubspot__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: 56px;
}

.pn-hubspot__head h2 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-head-fs);
  line-height: var(--pn-hubspot-head-lh);
  color: var(--pn-text-primary);
}

.pn-hubspot__head-bar {
  width: 32px;
  height: 4px;
  border-radius: 50px;
  background: linear-gradient(156deg, #efab67 0%, #f54d09 43.441%);
}

.pn-hubspot__accent-text {
  color: var(--pn-hubspot-accent);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.pn-hubspot__hero {
  position: relative;
  z-index: 0;
  padding-bottom: 48px;
}

/* 下層ページ(EC/コーポレート/HubSpot)のhero高さをPCで500pxに統一
   （2026-09-15、仙波さん指示）。
   Figma実測：node 452:1319はEC/コーポレートと構造が異なり、
   pb-61pxのような固定余白ではなく、breadcrumbsの下にある残り領域を
   flex:1 0 0/min-h-pxで埋め、その中でhero-copy＋画像をjustify/align
   centerで縦中央寄せする構成（＝コンテンツの実サイズに関わらず、常に
   フレーム全体がぴったり500pxになる作り）。min-height指定だと
   「最小値」にしかならず、実コンテンツ（見出し3行＋リード文3行＋
   ボタン＋450px角の画像）がそれを超えるため、EC/コーポレートとも
   高さが揃わなくなっていた。height固定+hero-innerをflex:1で残り領域に
   フィットさせ縦中央寄せする構成に変更し、Figmaの実際の作りを再現する */
/* hero-copy(638px)+gap(40px)+hero-visual(450px)+左右padding(40px)=
   1168px以上必要で、それ未満だとhero-innerが縦積みに折り返る
   （.pn-hubspot__hero-inner参照）。769px〜1279pxの間はheight固定+
   overflow:hiddenにすると折り返った内容がちぎれて見えるため、
   この帯だけはクリップされないmin-heightのフォールバックを維持する */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-hubspot__hero {
    min-height: 500px;
  }

  /* hero-copy(638px)+gap(40px)+hero-visual(450px)+左右padding(40px)=
     1168px以上必要なため、この帯では元々flex-wrapで縦積みになって
     いたが、縦積みにせず横並びのまま見出し・リード文のfont-sizeと
     hero-copy/hero-visualの幅を縮小して収める（Figmaにこの中間幅の
     デザインは無いため暫定値。769px時：380+40+280=700 ≤ 729(内側幅)。
     .pn-hubspot__hero-inner/-copy/-visual自体の上書きは、ベースルール
     より後（カスケード順で確実に勝つ位置）にまとめて記載している） */
  .pn-hubspot {
    --pn-hubspot-hero-title-fs: 32px;
    --pn-hubspot-hero-title-lh: 42px;
    --pn-hubspot-hero-lead-fs: 18px;
    --pn-hubspot-hero-lead-lh: 32px;
  }
}

@media (min-width: 1280px) {
  .pn-hubspot__hero {
    height: 500px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .pn-hubspot__breadcrumbs {
    flex-shrink: 0;
  }

  .pn-hubspot__hero-inner {
    flex: 1 0 0;
    min-height: 0;
  }
}

/* 背景画像はHERO内に収め、通常通りページと一緒にスクロールさせる
   （固定表示でスクロール追従させるのはTOPページのみの仕様のため、EC/コーポレート
   ページと同様、HubSpotページもposition:absoluteでHERO要素内に閉じ込める） */
.pn-hubspot__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/top/hero-bg.png");
  background-size: cover;
  background-position: center top;
}

.pn-hubspot__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 16px 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--pn-hubspot-breadcrumbs-fs);
  color: var(--pn-text-primary);
}

.pn-hubspot__breadcrumbs a {
  color: var(--pn-brand-primary);
  text-decoration: underline;
}

.pn-hubspot__breadcrumbs-current {
  color: var(--pn-text-primary);
}

.pn-hubspot__breadcrumbs-chevron {
  width: 20px;
  height: 20px;
}

.pn-hubspot__hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 0 20px;
}

.pn-hubspot__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 638px;
  max-width: 100%;
}

.pn-hubspot__hero-copy h1 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-hero-title-fs);
  line-height: var(--pn-hubspot-hero-title-lh);
  color: var(--pn-text-primary);
}

.pn-hubspot__hero-lead p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-hubspot-hero-lead-fs);
  line-height: var(--pn-hubspot-hero-lead-lh);
  color: var(--pn-text-primary);
}

.pn-hubspot__hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 24px;
}

.pn-hubspot__hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  color: var(--pn-text-inverse);
  text-align: center;
  transition: opacity 0.2s ease;
}

.pn-hubspot__hero-btn:hover {
  opacity: 0.5;
}

.pn-hubspot__hero-btn--dark {
  background: var(--pn-text-primary);
}

.pn-hubspot__hero-btn--accent {
  background: var(--pn-hubspot-accent);
}

.pn-hubspot__hero-visual {
  flex-shrink: 0;
  width: 450px;
  max-width: 100%;
}

/* 769px〜1279px：hero-copy(638px)+gap(40px)+hero-visual(450px)+左右
   padding(40px)=1168px以上必要で、それ未満だとflex-wrapにより縦積みに
   なってしまう。縦積みにせず横並びのまま収める（font-size側の縮小は
   上部の.pn-hubspot変数、--pn-hubspot-hero-title-fs等の1279px側の
   上書きを参照。Figmaにこの中間幅のデザインは無いため暫定値）。
   hero-copyは420px固定（flex-shrink:0、これ以上縮めない）、
   hero-visualはflex-shrink:1で残り幅に合わせて連続的に縮小する
   （画面を縮めるほど徐々に小さくなる。max-width:450pxはデスクトップの
   基準サイズを超えて大きくならないための上限。769px時：420+40+
   269(残り幅) = 729(内側幅)で収まる） */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-hubspot__hero-inner {
    flex-wrap: nowrap;
  }

  .pn-hubspot__hero-copy {
    flex-shrink: 0;
    width: 420px;
  }

  .pn-hubspot__hero-visual {
    flex: 1 1 450px;
    max-width: 450px;
    min-width: 0;
  }
}

.pn-hubspot__hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   こんなお悩みや課題を抱えてはいませんか？
   ========================================================================== */
.pn-hubspot__pain {
  padding: var(--pn-hubspot-pain-pt) 0 var(--pn-hubspot-pain-pb);
}

.pn-hubspot__pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pn-hubspot__pain-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--pn-hubspot-pain-card-pad);
  border-radius: 20px;
  background: var(--pn-bg-gray);
}

.pn-hubspot__pain-card-head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.pn-hubspot__pain-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: var(--pn-hubspot-accent);
}

.pn-hubspot__pain-card-icon img {
  width: 20px;
  height: 20px;
}

.pn-hubspot__pain-card-label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: var(--pn-text-primary);
}

.pn-hubspot__pain-card-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: var(--pn-hubspot-accent);
}

.pn-hubspot__pain-card-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--pn-text-primary);
}

/* ==========================================================================
   スクロール誘導（HubSpotの導入・活用を、もっとスムーズに。）
   Figma上、クリック機能の有無が判断できなかったため装飾のみで実装（要確認）
   ========================================================================== */
.pn-hubspot__scrollcue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 20px 48px;
  text-align: center;
}

/* Figma上はSVGの線（60幅のviewBoxに対し1px幅、img要素側で2px幅指定すると
   横方向に極端に圧縮され事実上見えなくなっていたため）、CSSの単色バーで
   代替表示する */
.pn-hubspot__scrollcue-line {
  display: block;
  width: 2px;
  height: 50px;
  background: var(--pn-hubspot-accent);
}

.pn-hubspot__scrollcue-lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--pn-text-primary);
}

.pn-hubspot__scrollcue-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-scrollcue-title-fs);
  line-height: var(--pn-hubspot-scrollcue-title-lh);
  color: var(--pn-hubspot-accent);
}

.pn-hubspot__scrollcue-arrow {
  width: 30px;
  height: auto;
}

/* ==========================================================================
   HubSpotとは？ ＋ hubspot-info ＋ Breeze AI紹介
   ========================================================================== */
.pn-hubspot__about {
  padding: 48px 0 80px;
}

.pn-hubspot__about-lead {
  max-width: 1040px;
  margin: 0 auto 56px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-hubspot-about-lead-fs);
  line-height: var(--pn-hubspot-about-lead-lh);
  color: var(--pn-text-primary);
  text-align: center;
}

.pn-hubspot__info {
  margin-bottom: 56px;
}

/* .pn-hubspot__info-tabs自体にはこれまで明示的な高さ指定が無く、
   flexの auto sizing（子要素のうち最も高いものに合わせる）に任せていた。
   タブ切り替え時は「選択が外れるタブ（padding縮小）」と「新しく選択
   されるタブ（padding拡大）」が同時に反対方向へtransitionするため、
   遷移の中間地点では両方とも最大値未満になり、一瞬だけこのauto
   sizingの結果（＝行全体の高さ）が縮んでからまた戻る「がたつき」が
   発生していた。
   min-heightで行の高さを選択中タブの高さ（後述）に固定し、子要素の
   transition中の高さに行全体の高さが左右されないようにする */
.pn-hubspot__info-tabs {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border-bottom: 6px solid var(--pn-hubspot-accent);
  /* .pn-hubspot * { box-sizing: border-box; } のため、min-heightには
     このborder-bottom(6px)分も含める必要がある。選択中タブの高さ
     （line-height 1.3×16px=20.8px + padding-block 16px×2 = 52.8px）+
     border-bottom 6px = 58.8px、切り上げて59pxで固定 */
  min-height: 59px;
}

/* Figma実測：非選択タブはpadding-block 12px、選択中タブのみ16pxで
   他タブより一段高くなる（タブ行はitems-end揃えのため下端は全タブ共通）。
   この上下差はmargin-topではなく実測通りpaddingの差のまま維持する
   （items-end揃えの下では、全タブ同じ高さのままmargin-topだけを
   タブ側に付けても、margin分だけ行の高さが伸びるだけで見た目の
   段差は生まれない。段差自体は上の.pn-hubspot__info-tabsのmin-height
   固定で個別に解消済み）。
   ラベルが折り返さない画面幅ではFigma通りpadding依存の高さのまま表示し、
   折り返しが発生する幅（実測：889px以上では折り返さず、888px以下で
   "Marketing Hub"が2行になる）でのみ、下記の@media内でmin-heightにより
   「2行分の高さ」を全タブ共通の下限にして上端のガタつきを防ぐ。 */
.pn-hubspot__info-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 4px 4px 0 0;
  background: #e2e2e2;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--pn-text-muted);
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding 0.2s ease;
}

.pn-hubspot__info-tab--active {
  padding: 16px 24px;
  background: var(--pn-hubspot-accent);
  color: var(--pn-text-inverse);
}

@media (max-width: 888px) {
  .pn-hubspot__info-tabs {
    /* この幅では選択中タブが2行分の高さ(padding 16px×2 + line-height
       1.3×16px×2行=41.6px = 73.6px)まで伸びるため、border-bottom 6px分を
       足して切り上げた80pxで固定する */
    min-height: 80px;
  }

  .pn-hubspot__info-tab {
    /* 非選択タブの2行分の高さ：padding 12px×2 + line-height 1.3×16px×2行 */
    min-height: 66px;
  }

  .pn-hubspot__info-tab--active {
    min-height: 74px;
  }
}

/* タブ切り替え時にスライドアニメーションさせるため、複数の.pn-hubspot__
   info-panelをslick.js（既にfooter.php側でサイト全体に読み込み済み）で
   1枚ずつ表示するスライダーに変更。
   スライダー全体（トラック）は画面幅いっぱいのままにしたいが、見える
   カード自体は左右に余白を持たせたいため、実際にスライドで動く
   .pn-hubspot__info-panel（=slick-slide）自体は全幅の透明なラッパーに
   とどめ、枠線・背景・角丸・左右の余白は内側の新規.pn-hubspot__
   info-panel-innerに持たせる（枠はpanel-innerと一緒に、panelの中を
   移動するのでスライド時は問題なく枠ごと動く）。
   隣のスライドの見切れ防止はslick自体が生成する.slick-list側の
   overflow:hidden（slick.css側で定義済み）に任せる。ここでも同じ
   overflow:hiddenを重ねて指定すると、adaptiveHeight使用時の高さ計算の
   誤差（1px未満のサブピクセル）でpanel下端のborder-bottomがわずかに
   欠けて見える不具合があったため、外側では指定しない */
.pn-hubspot__info-panels {
  width: 100%;
}

/* slick標準のadaptiveHeight（.slick-listの高さをjQueryの.animate()で
   フレームごとに書き換える実装）はレイアウトの再計算が毎フレーム走るため
   がたつきが出やすい。そのため.slick()初期化時はadaptiveHeightを無効化し、
   代わりにこのtransitionでCSS側から高さの変化を滑らかにし、実際の高さ
   計算・指定はpage-hubspot.php側のJS（beforeChangeイベント）で行う
   （speedは.slick()呼び出し側のspeedオプションと合わせている） */
.pn-hubspot__info-panels .slick-list {
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* このpanel自体はslickのスライド要素そのもの（全幅の透明なラッパー）。
   見た目（枠線・背景・角丸・左右の余白）は内側の.pn-hubspot__
   info-panel-innerが持つ */
.pn-hubspot__info-panel {
  display: block;
}

.pn-hubspot__info-panel-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--pn-bg-default);
  border: 1px solid var(--pn-hubspot-accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: var(--pn-hubspot-info-panel-pad);
  min-height: 550px;
}

.pn-hubspot__info-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pn-hubspot__info-title {
  display: flex;
  align-items: center;
  gap: 32px;
}

.pn-hubspot__info-title img {
  width: auto;
  height: 52px;
  max-width: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.pn-hubspot__info-title p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--pn-hubspot-info-title-fs);
  color: var(--pn-text-primary);
}

.pn-hubspot__info-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--pn-text-primary);
}

.pn-hubspot__info-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--pn-border-default);
}

.pn-hubspot__info-features-label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: var(--pn-hubspot-accent);
}

.pn-hubspot__info-features-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: var(--pn-text-primary);
}

.pn-hubspot__info-image {
  flex: 1;
  min-width: 0;
  height: 360px;
  border-radius: 8px;
  overflow: hidden;
}

.pn-hubspot__info-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-hubspot__breeze {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: var(--pn-hubspot-breeze-pad);
  border-radius: 8px;
  background: var(--pn-hubspot-bg-orange);
}

.pn-hubspot__breeze-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pn-hubspot__breeze-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-breeze-title-fs);
  line-height: var(--pn-hubspot-breeze-title-lh);
  color: var(--pn-text-primary);
}

.pn-hubspot__breeze-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 29px;
  color: var(--pn-text-primary);
}

/* flex-shrink:0だとコンテナが狭まってもロゴは400px（またはmax-width:40%
   の下限）まで縮まず、.pn-hubspot__breeze-text側だけが縮んで見た目が
   崩れていた。flex-shrinkを許可し、imgはflexアイテムとして
   min-width:autoが「コンテンツの最小サイズ」＝自身の指定サイズに
   解釈され実際には縮小されない仕様のため、min-width:0も明示する */
.pn-hubspot__breeze-logo {
  flex: 0 1 400px;
  min-width: 0;
  width: 400px;
  max-width: 40%;
  height: auto;
}

/* ==========================================================================
   PULL-NETの導入支援でできること
   ========================================================================== */
.pn-hubspot__support {
  padding: var(--pn-hubspot-support-pad-v) 0;
  background: var(--pn-bg-gray);
}

.pn-hubspot__support-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pn-hubspot__support-item {
  display: flex;
  align-items: center;
  gap: var(--pn-hubspot-support-gap);
}

.pn-hubspot__support-image {
  flex-shrink: 0;
  width: 500px;
  max-width: 42%;
}

/* width:100%（height:autoも含め）は指定せず、style.cssの共通ルール
   （img { max-width: 100%; height: auto; } ）に任せる。このページの
   挿絵は実サイズ(574〜682px)がこのラッパーの幅(500px)を上回るため、
   共通ルールのmax-width:100%だけで同じ表示幅（500px）に収まる。
   width:100%は「常にラッパー幅に一致させる」指定のため、将来的に実
   サイズがラッパー幅を下回るケースが生まれた場合に不要な拡大表示を
   招く。max-width:100%（縮小のみ）に委ねる方が安全。
   ただし769px以下（.pn-hubspot__support-imageがwidth:100%になる幅）
   では、ラッパー自体が画面幅に合わせて広がる一方、画像はmax-width:100%
   により実サイズ(574px)以上には拡大されないため、ラッパーの方が広い
   場合に画像が左に寄って右側に余白ができてしまう（実測で確認：700px
   〜768px幅で発生）。margin:0 autoで中央寄せにする */
.pn-hubspot__support-image img {
  display: block;
  margin: 0 auto;
}

.pn-hubspot__support-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pn-hubspot__support-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-support-title-fs);
  line-height: var(--pn-hubspot-support-title-lh);
  color: var(--pn-hubspot-accent);
}

.pn-hubspot__support-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-hubspot-support-desc-fs);
  line-height: var(--pn-hubspot-support-desc-lh);
  color: var(--pn-text-primary);
}

/* ==========================================================================
   制作実績（EC/コーポレートと同じworks-cardパターン。絞り込みtermは
   ファイル冒頭コメントの通り仮slug 'case_hubspot' を暫定使用・要確認）
   ========================================================================== */
.pn-hubspot__works {
  padding: var(--pn-hubspot-works-pt) 0 var(--pn-hubspot-works-pb);
}

.pn-hubspot__works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
  margin-bottom: 48px;
}

.pn-hubspot__works-card {
  display: flex;
  flex-direction: column;
}

.pn-hubspot__works-thumb {
  width: 100%;
  aspect-ratio: 400 / 260;
  overflow: hidden;
}

.pn-hubspot__works-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-hubspot__works-title {
  margin: 12px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: var(--pn-text-primary);
}

.pn-hubspot__works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.pn-hubspot__works-tag {
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--pn-bg-subtle);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: var(--pn-text-primary);
}

.pn-hubspot__empty {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: var(--pn-text-muted);
  text-align: center;
}

.pn-hubspot__works-more {
  display: flex;
  justify-content: flex-end;
}

.pn-hubspot__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--pn-text-primary);
  transition: opacity 0.2s ease;
}

.pn-hubspot__more-btn:hover {
  opacity: 0.5;
}

.pn-hubspot__more-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pn-hubspot-accent);
  overflow: hidden;
}

.pn-hubspot__more-btn-circle img {
  width: 16px;
  height: auto;
  transition: transform 0.2s ease;
}

.pn-hubspot__more-btn:hover .pn-hubspot__more-btn-circle img {
  transform: translateX(4px);
}

/* ==========================================================================
   制作の流れ（renewal.cssの共通スタイルに、ページ固有の幅と
   brand/hubspotアクセントカラーを上書き）
   ========================================================================== */
.pn-hubspot__flow-steps {
  width: 800px;
}

.pn-hubspot__flow-step-num {
  background: var(--pn-hubspot-accent);
}

/* ==========================================================================
   hubspot-link CTAバナー（リンク先URL未確定のためhref="#"のTODO、
   ファイル冒頭コメント参照）
   ========================================================================== */
.pn-hubspot__link {
  padding: 0 20px 48px;
}

/* Figma実測：カード自体はpaddingではなくheight:400px固定＋中央揃えで
   余白を表現し、その中に幅1040pxのコンテンツ列(.pn-hubspot__link-inner)が
   中央寄せで入る（さらにその列の中でテキスト+矢印が右詰め）二重構造。
   単純なpadding値ではこの余白感を再現できないため構造ごと合わせた。 */
.pn-hubspot__link-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: var(--pn-container);
  max-width: 100%;
  min-height: 400px;
  margin: 0 auto;
  border-radius: 8px;
  background: linear-gradient(132deg, #efab67 0%, #f54d09 43.441%);
  transition: opacity 0.2s ease;
}

/* Figmaのバリアント2（ホバー）はopacity:0.8になるだけで、それ以外の
   見た目（文字色・背景等）は変化しない。style.cssのa:hover,a:active
   {color:#c6221b}（詳細度0,0,1,1）が.pn-hubspot__link-text単体
   （詳細度0,0,1,0）に勝ってしまい、ホバー時に文字が赤く変色する
   既知のバグ（ヘッダー/フッター・TOP・ヒーローボタン実装時にも発生した
   詳細度バグと同根）が起きるため、:link/:visited/:hover/:activeを
   明示して詳細度を揃え、文字色を白に固定する */
.pn-hubspot__link-card:link,
.pn-hubspot__link-card:visited,
.pn-hubspot__link-card:hover,
.pn-hubspot__link-card:active {
  color: var(--pn-text-inverse);
  text-decoration: none;
}

.pn-hubspot__link-card:hover {
  opacity: 0.8;
}

/* style.cssのa:hover img{opacity:0.6}（詳細度0,0,1,2）が、カード内の
   背景ベクター画像・矢印アイコンにも重ねて適用されてしまい、カード全体の
   opacity:0.8と掛け合わさって画像だけ余分に暗く見える不具合があった。
   Figmaのバリアント2はカード全体が一様にopacity:0.8になるだけ（画像だけ
   さらに暗くなる仕様ではない）ため、カード内画像のopacityを明示的に
   1に固定して打ち消す */
.pn-hubspot__link-card:hover img {
  opacity: 1;
}

/* .pn-ec__cta-bg/.pn-corp__cta-bg（renewal.css）と同じサイズ・位置 */
.pn-hubspot__link-bg {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 305px;
  height: 298px;
  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.pn-hubspot__link-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 1080px;
  max-width: 100%;
  padding: 40px 20px;
}

.pn-hubspot__link-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--pn-text-inverse);
}

.pn-hubspot__link-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hubspot-link-title-fs);
  line-height: var(--pn-hubspot-link-title-lh);
}

.pn-hubspot__link-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-hubspot-link-desc-fs);
  line-height: var(--pn-hubspot-link-desc-lh);
}

/* Figma実測（node 452:2833 デフォルト／452:2844 ホバー）：円の枠(rect)は
   ホバーでも座標が変化せず固定、矢印グリフ(path)のx座標だけ+10される
   （＝円は動かず、中の矢印だけが右に10px移動する）。そのため円と矢印を
   別々のimg要素に分けて重ね、矢印画像だけをtranslateXさせる */
.pn-hubspot__link-arrow {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.pn-hubspot__link-arrow-circle,
.pn-hubspot__link-arrow-glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pn-hubspot__link-arrow-glyph {
  transition: transform 0.2s ease;
}

/* 10px/120px(円のサイズ)の比率で指定し、モバイル(60px)で円を縮小表示
   しても移動量が相対的に同じ見た目になるようにする */
.pn-hubspot__link-card:hover .pn-hubspot__link-arrow-glyph {
  transform: translateX(8.333%);
}

/* ==========================================================================
   よくあるご質問（renewal.cssの共通スタイルに、ページ固有の幅と
   「Q.」のbrand/hubspotアクセントカラーを上書き）
   ========================================================================== */
.pn-hubspot__faq .pn-hubspot__container {
  width: calc(1040px + 40px);
}

.pn-hubspot__faq-q-label {
  color: var(--pn-hubspot-accent);
}

/* ==========================================================================
   レスポンシブ（768px以下）
   このページはFigma上のスマホデザイン(smp-design)が未完成・一部破損して
   おり参考にできなかったため、コーポレートページ同様、ECサイト制作ページ
   （page-ec.php、Figma smp-design確定）のスケール比・パターンを参考にした
   調整値（推測）。Figma確定ではない点に注意。
   ブレークポイントはヘッダー/フッター・TOP/EC/コーポレートページと同じ768px。
   ========================================================================== */
@media (max-width: 768px) {
  .pn-hubspot__container {
    padding: 0 20px;
  }

  .pn-hubspot__head-bar {
    margin-bottom: 0;
  }

  /* 他の下層ページ(EC/コーポレート)の見出しと同じサイズに統一 */
  .pn-hubspot__head h2 {
    font-size: 24px;
  }

  /* Figma実測(node 582:1051、smp-design 390px幅)：見出し→画像→
     リード文＋ボタンの順で縦積みになる。見出し(h1)・リード文・ボタン群は
     マークアップ上.pn-hubspot__hero-copyの子だが、Figma上は画像がその間に
     挟まる構成のため、.hero-copyをdisplay:contentsで解体し、兄弟になった
     .hero-visualと合わせてorderで並び替える */
  .pn-hubspot__hero-inner {
    flex-direction: column;
    align-items: center;
    padding: 32px 0 0;
    gap: 0;
  }

  .pn-hubspot__hero-copy {
    display: contents;
  }

  .pn-hubspot__hero-copy h1 {
    order: -2;
    width: 100%;
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
  }

  /* 画像は見出しの直下・リード文の直上（Figma実測：画像自体はw-full・
     アスペクト比1:1で正方形。実ファイルも900x900のためaspect-ratio指定は
     不要） */
  .pn-hubspot__hero-visual {
    order: -1;
    width: 100%;
    margin: 0 0 6px;
  }

  /* リード文・ボタン群はFigma上、見出し・画像より狭い幅(344px/390px幅
     フレーム中央寄せ)の専用ブロックにまとまっており、左揃え
     （Figma実測：items-start） */
  .pn-hubspot__hero-lead {
    order: 0;
    width: 344px;
    max-width: calc(100% - 46px);
    margin: 0 auto 24px;
    text-align: left;
  }

  .pn-hubspot__hero-lead p {
    font-size: 16px;
    line-height: 29px;
  }

  /* ボタン群はさらに内側に左右24pxのpaddingを持ち、縦積み・各ボタン全幅
     （Figma実測：flex-col, px-24, 各ボタンw-full） */
  .pn-hubspot__hero-buttons {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    width: 344px;
    max-width: calc(100% - 46px);
    margin: 0 auto;
    padding: 0 24px;
  }

  .pn-hubspot__hero-btn {
    width: 100%;
  }

  .pn-hubspot__pain-grid {
    grid-template-columns: 1fr;
  }

  .pn-hubspot__pain-card {
    padding: 32px 24px;
  }

  .pn-hubspot__scrollcue-lead {
    font-size: 18px;
  }

  .pn-hubspot__scrollcue-title {
    font-size: 28px;
    line-height: 42px;
  }

  .pn-hubspot__about-lead {
    text-align: left;
  }

  /* スマホ幅ではタブを折り返さず横並びのまま画面幅からはみ出させ、
     横スクロールで選べるようにする
     （参考：https://now-village.jp/service/hubspot-implementation の
     .p-newService__main__product__nav__wrapper。overflow-x:autoの
     スクロールコンテナ＋子要素はflex-shrinkさせずnowrapで内容幅を保つ）
     Figma実測(node 740:2017)：タブ行の可視領域自体がフレーム全幅(390px)
     まで達しており、.pn-hubspot__container の左右padding(20px)の内側に
     収まらない。.pn-hubspot__container のpaddingを打ち消す負のmarginで
     画面幅いっぱいまで広げ、内側に同じ20pxのpaddingを入れて最初のタブの
     開始位置は変えずに、右側は画面端までスクロールできるようにする */
  .pn-hubspot__info-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* Figma実測(node 740:2018)では選択中タブ(padding:12px)と非選択タブ
       (padding:8px 12px)で高さが異なる仕様のため、.pn-hubspot__info-tabs
       のmin-heightで固定し、切り替え時にがたつかないようにする
       （PC/タブレット幅と同じ考え方）。選択中タブの高さ
       （line-height 1.3×13px=16.9px + padding-block 12px×2=24px =
       40.9px）+ border-bottom 6px = 46.9px、切り上げて47pxで固定 */
    min-height: 47px;
  }

  .pn-hubspot__info-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Figma実測(node 740:2018)：非選択タブはpadding 8px 12px、選択中タブ
     のみpadding 12px（全辺）で一段高くなる（PC/タブレット幅と同じ）。
     以前は両者とも同じpadding/line-heightになっていたため要修正。
     line-heightはベースルール(line-height:1.3、相対値)をそのまま
     引き継ぐため、ここでは指定しない（font-sizeに応じて自動的に
     ちょうどいい高さになる）。
     min-height:0で、769px〜888px幅用の.pn-hubspot__info-tab(--active)の
     min-height(88px/96px、2行折り返し用)を打ち消す（768px以下では
     white-space:nowrapで折り返さないため不要。指定したままだと
     padding基準の高さより大きいまま残ってしまう） */
  .pn-hubspot__info-tab,
  .pn-hubspot__info-tab--active {
    flex: 0 0 auto;
    min-height: 0;
    font-size: 13px;
    white-space: nowrap;
  }

  .pn-hubspot__info-tab {
    padding: 8px 12px;
  }

  .pn-hubspot__info-tab--active {
    padding: 12px;
  }

  /* タブと同じく.pn-hubspot__containerのpaddingを打ち消して画面幅
     いっぱいに広げる（タブ行との横幅の不揃いを解消）。タブ直下に
     隙間なく接続する構成から、上に20pxの余白を空ける構成に変更 */
  .pn-hubspot__info-panels {
    /* ベースルールのwidth:100%が残っていると、負のmarginを指定しても
       widthが明示値のままなので実際には広がらず、右側だけ余白が残って
       しまう（負のmarginでの拡張はwidth:autoの要素にのみ効く）。
       widthをautoに戻すことで負のmargin分だけ実際に広がるようにする */
    width: auto;
    margin: 20px -20px 0;
  }

  /* スライダー全体（トラック）は画面幅いっぱいのままにし、見えるカード
     自体（info-panel-inner）は左右20pxの余白を持たせる */
  .pn-hubspot__info-panel-inner {
    flex-direction: column;
    margin: 0 20px;
    padding: 32px 24px;
    min-height: 0;
    border-top: 1px solid var(--pn-hubspot-accent);
    border-radius: 0 0 8px 8px;
  }

  .pn-hubspot__info-title p {
    font-size: 32px;
  }

  .pn-hubspot__info-image {
    width: 100%;
    height: 240px;
  }

  .pn-hubspot__breeze {
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    text-align: center;
    align-items: center;
  }

  /* flex-direction:columnで主軸が縦になるため、flex-basis:400px
     (デスクトップ側)が高さの基準値として解釈されてしまうのを防ぐ */
  .pn-hubspot__breeze-logo {
    flex-basis: auto;
    max-width: 240px;
  }

  /* スマホ幅では、デスクトップのDOM順（画像→文字／文字→画像が交互）に
     関わらず全項目とも画像→文字の順で表示する */
  .pn-hubspot__support-item {
    flex-direction: column !important;
    gap: 24px;
  }

  .pn-hubspot__support-image {
    order: -1;
    width: 100%;
    max-width: 100%;
  }

  .pn-hubspot__support-text {
    order: 2;
  }

  .pn-hubspot__works-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pn-hubspot__works-more {
    justify-content: center;
  }

  .pn-hubspot__link {
    padding: 0 20px 40px;
  }

  .pn-hubspot__link-card {
    min-height: 0;
  }

  /* .pn-ec__cta-bg/.pn-corp__cta-bgのモバイル用ルール（renewal.css）と同じ */
  .pn-hubspot__link-bg {
    width: 55%;
    max-width: 250px;
    height: auto;
    top: auto;
    bottom: 0;
  }

  .pn-hubspot__link-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 24px;
    gap: 24px;
  }

  .pn-hubspot__link-title {
    font-size: 20px;
    line-height: 30px;
  }

  .pn-hubspot__link-desc {
    font-size: 16px;
    line-height: 29px;
  }

  /* モバイル限定改行は共通クラス.pn-br-sp（renewal.css）に統合済み */

  .pn-hubspot__link-arrow {
    width: 60px;
    height: 60px;
    align-self: flex-end;
  }
}

/* ==========================================================================
   レスポンシブ（769px〜1024px、iPad想定）
   Figmaにこの幅のデザインは存在しないため、769px以下(モバイル)の
   flex-direction:columnパターンを流用し、画像がテキストと横並びのまま
   収まりきらなくなるのを防ぐための実装判断（安井さん確認済み・2026-09-14）。
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .pn-hubspot__info-panel-inner {
    flex-direction: column;
    min-height: 0;
  }

  .pn-hubspot__info-image {
    width: 100%;
  }
}

/* ==========================================================================
   スクロール表示アニメーション（TOPページと同様の演出をこのページにも展開）
   基本のフェード＋スライドイン自体はrenewal.css（.pn-hubspot__reveal）で
   共通定義済み。ここではグリッド内カードの段階的な表示ずらし
   （transition-delay）のみ、このページ固有のグリッドクラスに対して定義する。
   ========================================================================== */
.pn-hubspot__pain-grid .pn-hubspot__reveal:nth-child(2),
.pn-hubspot__support-list .pn-hubspot__reveal:nth-child(2),
.pn-hubspot__works-grid .pn-hubspot__reveal:nth-child(2),
.pn-hubspot__faq-list .pn-hubspot__reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.pn-hubspot__pain-grid .pn-hubspot__reveal:nth-child(3),
.pn-hubspot__support-list .pn-hubspot__reveal:nth-child(3),
.pn-hubspot__works-grid .pn-hubspot__reveal:nth-child(3),
.pn-hubspot__faq-list .pn-hubspot__reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.pn-hubspot__pain-grid .pn-hubspot__reveal:nth-child(4),
.pn-hubspot__support-list .pn-hubspot__reveal:nth-child(4),
.pn-hubspot__works-grid .pn-hubspot__reveal:nth-child(4),
.pn-hubspot__faq-list .pn-hubspot__reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.pn-hubspot__works-grid .pn-hubspot__reveal:nth-child(5),
.pn-hubspot__faq-list .pn-hubspot__reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.pn-hubspot__works-grid .pn-hubspot__reveal:nth-child(6) {
  transition-delay: 0.4s;
}