@charset "UTF-8";
/*
 * PULL-NET リニューアル 新デザイン用スタイル
 * 対象：共通ヘッダー・共通フッター（全ページ共通）
 * Figma: PULL-NET_ECサイト (fileKey ESLPtaetNAYeAEKry21qFn)
 *   - ヘッダー: node 289:4104
 *   - フッター: node 366:1495
 *
 * 既存の css/style.css には手を加えず、新規クラス（pn- 接頭辞）のみで
 * 完結させることで、既存ページのスタイルに影響を与えないようにしている。
 */

/* ==========================================================================
   共通トークン（Figma Variablesより）
   共通ヘッダー・フッターだけでなく新規4ページ(pn-top/pn-ec/pn-corp等)からも
   参照するため、各ページCSSでの重複定義を避けて:rootに定義を一本化している。
   （以前は.pn-header/.pn-header-mobile/.pn-footerのみにスコープしていたため、
   兄弟要素にあたる各ページのルートクラス側で同じ値を再定義する必要があった） */
:root {
  --pn-brand-primary: #c7221b;
  --pn-text-primary: #333333;
  --pn-text-muted: #999999;
  --pn-text-inverse: #ffffff;
  --pn-bg-default: #ffffff;
  --pn-bg-gray: #f8f8f8;
  --pn-bg-subtle: #f5f5f5;
  --pn-border-default: #e5e5e5;
  --pn-container: 1280px;
}
.pn-header,
.pn-header-mobile,
.pn-footer {
  box-sizing: border-box;
}
.pn-header *,
.pn-header-mobile *,
.pn-footer * {
  box-sizing: border-box;
}

/* css/style.css 側に a:link, a:visited { text-decoration: underline; } という
   全ページ共通のデフォルトリンク下線スタイルがあり、通常状態・ホバー状態のどちらでも
   詳細度(0,0,1,1)がクラス単体(0,0,1,0)より高いため、そのままだと下線が出てしまう。
   ここで :link/:visited/:hover/:focus すべての状態を明示的に打ち消す。
   （フッターのサービス一覧等、意図的にホバーで下線を出す箇所は個別ルールの方が詳細度が高いため維持される） */
.pn-header a,
.pn-header a:link,
.pn-header a:visited,
.pn-header a:hover,
.pn-header a:focus,
.pn-header-mobile a,
.pn-header-mobile a:link,
.pn-header-mobile a:visited,
.pn-header-mobile a:hover,
.pn-header-mobile a:focus,
.pn-footer a:link,
.pn-footer a:visited,
.pn-footer a:hover,
.pn-footer a:focus {
  text-decoration: none;
}

/* 上と同じ理由(a:link/a:visited/a:hover/a:activeの詳細度 0,0,1,1)で、
   文字色(color)もクラス単体の指定(0,0,1,0)だと負けて #333 や #C6221B に
   置き換わってしまう。色が異なる要素ごとに :link/:visited/:hover/:active を
   明示して詳細度を確保する。 */
.pn-header__nav-link:link,
.pn-header__nav-link:visited {
  color: var(--pn-text-primary);
}

.pn-header__cta-btn:link,
.pn-header__cta-btn:visited {
  color: var(--pn-text-inverse);
}

.pn-footer__contact-phone:link,
.pn-footer__contact-phone:visited,
.pn-footer__contact-phone:hover,
.pn-footer__contact-phone:active,
.pn-footer__contact-link:link,
.pn-footer__contact-link:visited,
.pn-footer__contact-link:hover,
.pn-footer__contact-link:active,
.pn-footer__address a:link,
.pn-footer__address a:visited,
.pn-footer__address a:hover,
.pn-footer__address a:active,
.pn-footer__bottom a:link,
.pn-footer__bottom a:visited,
.pn-footer__bottom a:hover,
.pn-footer__bottom a:active {
  color: var(--pn-text-inverse);
}

/* ==========================================================================
   ヘッダー（デスクトップ）
   ========================================================================== */
/* display は .onlypc/.onlysp (css/style.css) と競合しないよう、下部で
   .pn-header.onlypc のように結合セレクタで明示的に制御する（読み込み順に依存させない） */
.pn-header {
  align-items: center;
  justify-content: space-between;
  height: 100px;
  width: 100%;
  padding-left: 30px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.pn-header.onlypc {
  display: flex;
}

.pn-header-mobile.onlysp {
  display: none;
}

/* ヘッダーのPC⇔モバイル切り替えは、他の要素と異なり768pxではなく1280pxを
   使う。.pn-header__nav（flex-shrink不可の.pn-header__brand/.pn-header__cta
   に挟まれ、.pn-header__navだけがflex:1 0 0/min-width:0で伸縮する）は、
   実測でbrand(303px)+nav本来の幅(625px)+cta(299px)+ヘッダー左padding(30px)
   = 1257px を下回るとnavの文字が折り返せず(white-space:nowrap)、
   brand/ctaとかぶり始める。1257pxをやや上回り、かつ既存の
   --pn-container(1280px)と揃う1280pxを閾値にした。
   このためハンバーガーメニュー本体(#menu-box/#menu)側の@media
   (下記参照)も同じ1280pxで揃えている（そちらだけ768pxのままだと、
   768px〜1280pxの間でハンバーガーボタンは出るのに開いた中身が
   旧デザインのまま、という不整合が起きるため）。 */
@media (max-width: 1280px) {
  .pn-header.onlypc {
    display: none;
  }
  .pn-header-mobile.onlysp {
    display: flex;
  }
  /* css/style.css側の#main{padding-top}は、旧デザインの2段階（PC:100px/
     モバイル:50px、モバイルはさらに旧768px基準）のままなので、ヘッダーの
     新しい高さ・切り替え幅に合わせてここで上書きする。
     PC(1280px超)は既存の100px指定のままで変更不要 */
  #main {
    padding-top: 65px;
  }
}

/* align-items:stretchにすることで、.pn-header__logoの幅が
   .pn-header__catch（テキスト幅で自然に決まる）と揃うようにする */
.pn-header__brand {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

.pn-header__catch {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--pn-text-primary);
  white-space: nowrap;
}

.pn-header__logo {
  display: block;
  line-height: 0;
}

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

.pn-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 0 0;
  min-width: 0;
  gap: 40px;
  padding: 0 48px;
  height: 100%;
}

.pn-header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.pn-header__nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--pn-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.pn-header__nav-link:hover {
  color: var(--pn-brand-primary);
}

/* Figma確定：「navi-hover2」コンポーネント(node 3:644)のicon=▽は、
   hover=off(node 18:1730)で#333、hover=on(node 18:1734)で#c7221bに塗り替わる仕様。
   デフォルト/ホバーそれぞれの色で書き出した2枚のSVGを重ね、displayの切り替えで色替えする */
.pn-header__chevron {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.pn-header__chevron-default,
.pn-header__chevron-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
}

.pn-header__chevron-hover {
  display: none;
}

.pn-header__nav-item:hover .pn-header__chevron {
  transform: rotate(180deg);
}

.pn-header__nav-item:hover .pn-header__chevron-default {
  display: none;
}

.pn-header__nav-item:hover .pn-header__chevron-hover {
  display: block;
}

/* サービス ドロップダウン（Figmaは閉じた状態のみ確定のため、
   既存サイトの #main_gnavi:hover > #sub_navi と同じ「ホバーで開く」挙動のみ踏襲。
   パネルの見た目は暫定実装 — 要確認） */
.pn-header__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  background: var(--pn-bg-default);
  border: 1px solid var(--pn-border-default);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  padding: 16px 0;
  margin: 0;
  list-style: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  z-index: 10;
}

.pn-header__nav-item:hover .pn-header__dropdown,
.pn-header__nav-item:focus-within .pn-header__dropdown {
  visibility: visible;
  opacity: 1;
}

.pn-header__dropdown li a {
  display: block;
  padding: 8px 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--pn-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.pn-header__dropdown li a:hover {
  color: var(--pn-brand-primary);
  background: var(--pn-bg-subtle);
}

.pn-header__cta {
  display: flex;
  align-items: stretch;
  height: 100%;
  flex-shrink: 0;
}

.pn-header__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 28px;
  color: var(--pn-text-inverse);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

/* Figma確定：「問合せボタン」コンポーネント(node 5:567)のhover=on(node 5:570)は
   背景色を変えず、ボタン全体がopacity:50%になる仕様 */
.pn-header__cta-btn:hover {
  color: var(--pn-text-inverse);
  opacity: 0.5;
}

.pn-header__cta-btn--estimate {
  background: var(--pn-text-primary);
}

.pn-header__cta-btn--contact {
  background: var(--pn-brand-primary);
}

/* ==========================================================================
   ヘッダー（モバイル / 768px以下）
   Figma「smp-design」ページ node 582:2694 実測に基づく実装。
   ハンバーガーボタン(#toggle)はcss/style.css側の開閉JS(common.js)・
   #menu(メニュー本体)の仕組みをそのまま流用し、見た目だけこちらで
   新デザインに上書きする（#toggle自体のCSSはstyle.css側にレガシー定義が
   あるため、同等以上の詳細度(IDセレクタ)で明示的に上書きする） */
.pn-header-mobile {
  align-items: stretch;
  justify-content: space-between;
  height: 65px;
  padding: 0 0 0 16px;
  background: var(--pn-bg-default);
}

.pn-header-mobile__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.pn-header-mobile__catch {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 8px;
  color: var(--pn-text-primary);
  white-space: nowrap;
}

.pn-header-mobile__logo {
  display: block;
  line-height: 0;
}

.pn-header-mobile__logo img {
  width: 214px;
  max-width: 100%;
  height: auto;
  display: block;
}

#toggle.pn-header-mobile__menu-btn {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: auto;
  flex-shrink: 0;
  background: var(--pn-brand-primary);
}

#toggle.pn-header-mobile__menu-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
}

.pn-header-mobile__menu-icon {
  width: 24px;
  height: auto;
  display: block;
}

.pn-header-mobile__menu-icon--close {
  display: none;
}

#toggle.pn-header-mobile__menu-btn a.close .pn-header-mobile__menu-icon--open {
  display: none;
}

#toggle.pn-header-mobile__menu-btn a.close .pn-header-mobile__menu-icon--close {
  display: block;
}

/* ==========================================================================
   ハンバーガーメニュー（開閉オーバーレイ）
   Figma「smp-design」ページ node 620:2966「TOP-Menu」実測に基づく実装。
   開閉自体はcss/style.css側の#menu-box/#menu/common.jsの仕組み
   （$("#toggle")クリックで#menuをfadeToggle）をそのまま流用し、
   ここでは中身だけ新デザインに上書きする。
   css/style.css側に#menu ul li a等のレガシー定義（背景黒・白文字・
   ボーダー等）があるため、詳細度で確実に上書きできるよう#menuを前置した
   セレクタで明示的に指定している。ハンバーガーボタン自体が1280px以下
   でしか表示されない（上記ヘッダーPC⇔モバイル切り替え参照）ため、
   このメニューの中身も同じ1280pxに揃える。 */
@media (max-width: 1280px) {
  /* ドロワーメニューを開いている間、背後のメインコンテンツが
     スクロールしないようにする（common.jsの#toggleクリックハンドラで
     bodyにpn-menu-openクラスを付け外ししている）。overflow:hiddenだけでは
     iOS Safariで背後がラバーバンドスクロールしてしまうことがあるため
     position:fixedで確実に固定する（topのオフセットはJS側で設定） */
  body.pn-menu-open {
    position: fixed;
    overflow: hidden;
    width: 100%;
  }

  /* 画面幅が広い場合はメニューを画面いっぱいに広げず、右端に幅400pxの
     ドロワーとして表示する（left:0のレガシー値を打ち消し、right:0で
     右寄せにする）。
     position:fixedはcss/style.css側の@media(max-width:768px)にしか
     定義が無く、768px〜1280pxの間ではposition指定が無い（＝static）状態に
     なり、#menuが通常のドキュメントフロー内に流れ込んで左寄せ・高さ制御
     無しで崩れる不具合があった（画面幅1200px前後で発生）。position:fixedを
     ここで明示することで768px未満に依存せず自己完結させる */
  #menu {
    position: fixed;
    top: 65px;
    left: auto;
    right: 0;
    width: 100%;
    max-width: 400px;
    /* iPhone SafariはURLバー等のツールバー分だけ実際に見えている高さが
       100vhより小さくなる場合があり、100vhのまま計算すると#menuの実際の
       高さが見えている画面より大きくなり、内部スクロール(.pn-menu__scroll)
       がその分の高さを持ちきれず一番下までスクロールできない不具合が発生
       していた。100dvh（動的ビューポート高さ、ツールバーの表示状態に応じて
       変化）に対応しているブラウザではこちらを優先させる。非対応ブラウザ用に
       100vhを先に書いてフォールバックとする */
    height: calc(100vh - 65px);
    height: calc(100dvh - 65px);
    background: var(--pn-bg-default, #fff);
    box-shadow: none;
    overflow: hidden;
    z-index: 10000;
  }

  #menu .pn-menu__scroll {
    height: 100%;
    overflow-y: auto;
    /* iOS Safariで、position:fixedな祖先要素の内側にあるスクロール領域が
       慣性スクロールに対応せず、一番下まで指でスクロールしきれないことが
       あるための対策 */
    -webkit-overflow-scrolling: touch;
    padding: 24px 20px 150px;
  }

  #menu .pn-menu__banner {
    display: block;
    margin-bottom: 32px;
  }

  #menu .pn-menu__banner img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
    border: 1px solid #fee8da;
  }

  #menu .pn-menu__list {
    min-width: 0;
    width: auto;
    padding: 0;
    border-top: none;
    list-style: none;
  }

  #menu .pn-menu__flat-item,
  #menu .pn-menu__accordion {
    width: auto;
    padding: 0;
    border-bottom: 1px solid var(--pn-border-default, #e5e5e5);
  }

  #menu .pn-menu__flat-item a {
    display: block;
    padding: 16px 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pn-text-primary, #333);
    background: none;
    opacity: 1;
    white-space: normal;
    text-align: left;
    text-decoration: none;
  }

  /* サービス一覧の開閉ラベル。レガシーの▽疑似要素(#menu ul li label:after)は
     打ち消し、代わりに.pn-menu__chevronで+/-アイコンを自前描画する */
  #menu .pn-menu__accordion-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pn-text-primary, #333);
    background: none;
    opacity: 1;
    cursor: pointer;
  }

  /* css/style.cssに汎用の input[type=checkbox] + label::before/::after という
     カスタムチェックボックス描画ルールがあり、意図しない四角いチェック
     ボックス風の見た目がラベル文字の手前に表示されてしまうため、
     ::before/::afterともに打ち消す（#menu ul li label:afterの▽矢印も
     この::afterで一緒に打ち消される） */
  #menu .pn-menu__accordion-check + .pn-menu__accordion-label::before,
  #menu .pn-menu__accordion-check + .pn-menu__accordion-label::after {
    content: none;
  }

  #menu .pn-menu__chevron {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  #menu .pn-menu__chevron::before,
  #menu .pn-menu__chevron::after {
    content: "";
    position: absolute;
    background: var(--pn-brand-primary);
  }

  #menu .pn-menu__chevron::before {
    top: 50%;
    left: 0;
    width: 16px;
    height: 1px;
    transform: translateY(-50%);
  }

  #menu .pn-menu__chevron::after {
    top: 0;
    left: 50%;
    width: 1px;
    height: 16px;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
  }

  #menu .pn-menu__accordion-check:checked + .pn-menu__accordion-label .pn-menu__chevron::after {
    opacity: 0;
  }

  #menu .pn-menu__accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  #menu .pn-menu__accordion-check:checked + .pn-menu__accordion-label + .pn-menu__accordion-panel {
    max-height: 500px;
  }

  #menu .pn-menu__sublist {
    width: auto;
    min-width: 0;
    padding: 0 0 16px 16px;
    border-top: none;
    list-style: none;
  }

  #menu .pn-menu__sublist li {
    width: auto;
    border-bottom: none;
  }

  #menu .pn-menu__sublist li a {
    display: block;
    padding: 8px 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--pn-text-primary, #333);
    background: none;
    opacity: 1;
    white-space: normal;
  }

  /* Figma実測(node 620:3370)：下部固定の2分割CTA。#menu自体は
     display:none/blockでJSから開閉されるため、position:fixedを使えば
     #menuの表示状態と連動しつつ画面下端に固定できる */
  #menu .pn-menu__cta {
    position: fixed;
    left: auto;
    right: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    max-width: 400px;
  }

  #menu .pn-menu__cta-btn {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
  }

  #menu .pn-menu__cta-btn--estimate {
    background: var(--pn-text-primary, #333);
  }

  #menu .pn-menu__cta-btn--contact {
    background: var(--pn-brand-primary);
  }
}

/* ==========================================================================
   フッター
   font-size/gap/paddingなど「値」のみがブレークポイントで変わるものは、
   top.cssと同じ方針でここに変数として定義し、768px以下用の値を
   @media (max-width: 768px)側で一括上書きする（css/top.cssのレスポンシブ
   実装と同じ方針）。レイアウト自体が変わるもの（flex-direction/grid列数/
   表示順序の変更など）のみ、対象セレクタ側の@mediaに個別に書く。
   ========================================================================== */
.pn-footer {
  --pn-footer-contact-pad-y: 100px;
  --pn-footer-contact-pad-x: 20px;
  --pn-footer-contact-gap: 56px;
  --pn-footer-label-fs: 16px;
  --pn-footer-label-strong-fs: 60px;
  --pn-footer-lead-fs: 20px;
  --pn-footer-lead-lh: 1.6;
  --pn-footer-phone-fs: 40px;
  --pn-footer-link-fs: 28px;
  --pn-footer-link-icon-fs: 28px;
  --pn-footer-partners-pad-y: 24px;
  --pn-footer-partners-row-pad-y: 56px;
  --pn-footer-partners-gap: 24px;
  --pn-footer-partner-w: 380px;
  --pn-footer-partner-h: 100px;
  --pn-footer-navgrid-fw: 700;
  --pn-footer-navgrid-pb: 0px;
  --pn-footer-navgrid-pl: 0px;
  --pn-footer-navlist-gap: 16px;
  --pn-footer-bottom-gap: 16px;
  --pn-footer-main-pad-y: 80px;
  --pn-footer-main-pad-x: 20px;
}

@media (max-width: 768px) {
  .pn-footer {
    --pn-footer-contact-pad-y: 80px;
    --pn-footer-contact-pad-x: 32px;
    --pn-footer-contact-gap: 40px;
    --pn-footer-label-fs: 15px;
    --pn-footer-label-strong-fs: 48px;
    --pn-footer-lead-fs: 16px;
    --pn-footer-lead-lh: 1.5;
    --pn-footer-phone-fs: 24px;
    --pn-footer-link-fs: 20px;
    --pn-footer-link-icon-fs: 20px;
    --pn-footer-partners-pad-y: 40px;
    --pn-footer-partners-row-pad-y: 0px;
    --pn-footer-partners-gap: 32px;
    --pn-footer-partner-w: 262.5px;
    --pn-footer-partner-h: 69.08px;
    --pn-footer-navgrid-fw: 500;
    --pn-footer-navgrid-pb: 24px;
    --pn-footer-navgrid-pl: 16px;
    --pn-footer-navlist-gap: 24px;
    --pn-footer-bottom-gap: 24px;
    --pn-footer-main-pad-y: 48px;
    --pn-footer-main-pad-x: 32px;
  }
}

.pn-footer {
  width: 100%;
  overflow: hidden;
}

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

.pn-footer__inner {
  width: var(--pn-container);
  max-width: 100%;
  margin: 0 auto;
}

/* CONTACT セクション */
.pn-footer__contact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pn-footer-contact-gap);
  padding: var(--pn-footer-contact-pad-y) var(--pn-footer-contact-pad-x);
  background: var(--pn-brand-primary);
  overflow: hidden;
}

/* Figma確定値(node 289:4901)通りの入れ子構造で再現：
   外枠(697.979px正方形、縦方向のみ中央揃え) > 45deg回転 > 実サイズ500x487.092pxの画像 */
.pn-footer__contact-bg {
  position: absolute;
  left: -0.43px;
  top: 50%;
  transform: translateY(-50%);
  width: 697.979px;
  height: 697.979px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.pn-footer__contact-bg-rotate {
  transform: rotate(45deg);
}

.pn-footer__contact-bg-inner {
  position: relative;
  width: 500px;
  height: 487.092px;
}

.pn-footer__contact-bg-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.pn-footer__contact-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 80px;
}

.pn-footer__contact-label {
  display: flex;
  flex-direction: column;
}

.pn-footer__contact-label span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-footer-label-fs);
  color: var(--pn-text-inverse);
}

.pn-footer__contact-label strong {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-footer-label-strong-fs);
  color: var(--pn-bg-subtle);
  line-height: 1.2;
}

.pn-footer__contact-lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-footer-lead-fs);
  line-height: var(--pn-footer-lead-lh);
  color: var(--pn-text-inverse);
  text-align: left;
}

.pn-footer__contact-lead .pn-footer__brandname {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}

.pn-footer__contact-items {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 64px;
}

.pn-footer__contact-phone {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-footer-phone-fs);
  color: var(--pn-text-inverse);
}

.pn-footer__contact-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
}

.pn-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-footer-link-fs);
  color: var(--pn-text-inverse);
}

.pn-footer__contact-link .pn-footer__icon {
  width: auto;
  height: var(--pn-footer-link-icon-fs);
  flex-shrink: 0;
  fill: currentColor;
}

.pn-footer__contact-link i {
  font-size: var(--pn-footer-link-icon-fs);
}

/* パートナーバナー */
.pn-footer__partners {
  display: flex;
  justify-content: center;
  padding: var(--pn-footer-partners-pad-y) 20px;
  background: var(--pn-bg-subtle);
}

.pn-footer__partners-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--pn-footer-partners-gap);
  padding: var(--pn-footer-partners-row-pad-y) 0;
}

.pn-footer__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pn-footer-partner-w);
  height: var(--pn-footer-partner-h);
  background: var(--pn-bg-default);
}

.pn-footer__partner img {
  max-width: 80%;
  max-height: 70%;
}

/* HubSpotバナーはFigma上でnode(366:1298)をそのまま380x100pxで書き出した画像のため、
   他2枠と違い余白を作らずボックス全体を埋める */
.pn-footer__partner--hubspot img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* メインリンクエリア */
.pn-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: var(--pn-footer-main-pad-y) var(--pn-footer-main-pad-x);
  background: #333333;
}

.pn-footer__main-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
}

.pn-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 260px;
}

.pn-footer__brand img {
  width: 250px;
  max-width: 100%;
  height: auto;
}

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

.pn-footer__nav-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
}

.pn-footer__nav-group-title {
  margin: 0 0 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--pn-text-inverse);
}

.pn-footer__nav-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* モバイルでは制作事例/会社紹介等の2グループを見た目上1本の連続したリストに
   見せるため、サービス一覧グループの下だけpadding-bottomを追加し、
   .pn-footer__nav-groups側のgapと合わせて他グループと同じ間隔になるようにする
   （Figma実測(node 582:2695)：サービス一覧グループの下だけpb-24px、
   .pn-footer__nav-groups自体のgapも24pxで統一） */
.pn-footer__nav-group--grid {
  padding-bottom: var(--pn-footer-navgrid-pb);
}

.pn-footer__nav-group--grid ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 16px 32px;
  padding-left: var(--pn-footer-navgrid-pl);
}

.pn-footer__nav-group:not(.pn-footer__nav-group--grid) ul {
  display: flex;
  flex-direction: column;
  gap: var(--pn-footer-navlist-gap);
}

.pn-footer__nav-group ul li a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--pn-text-inverse);
  white-space: nowrap;
}

.pn-footer__nav-group--grid ul li a {
  font-weight: var(--pn-footer-navgrid-fw);
  font-size: 14px;
}

.pn-footer__nav-group ul li a:hover {
  text-decoration: underline;
}

/* コピーライト */
.pn-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pn-footer-bottom-gap);
  padding-top: 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--pn-text-inverse);
}

/* ==========================================================================
   フッター（モバイル / 768px以下・レイアウト自体が変わるもののみ）
   フォントサイズ・余白等の「値」だけの変更は上記の.pn-footer変数側で
   対応済み。ここではdisplay/flex-direction/grid列数/表示順序の変更など、
   変数だけでは表現できないものだけを書く。
   このブロックは対象セレクタの基本ルールより後ろに置く必要がある
   （同じ詳細度の場合、CSSは@mediaの有無に関係なくソース順で後勝ちになる
   ため、先頭付近に置くと後ろにある基本ルールに上書きされてしまう）。
   ========================================================================== */
@media (max-width: 768px) {
  /* ---------- CONTACT ----------
     Figma実測(node 582:2695)では電話番号・お問い合わせ・お見積もりの3つが
     区切り線で並ぶ横並びリンクではなく、白枠で囲った縦積みの全幅ピル型
     ボタンに変わる。区切り線(.pn-footer__contact-divider)はもう使わないため
     非表示にする */
  .pn-footer__contact-items {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .pn-footer__contact-phone,
  .pn-footer__contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    border: 2px solid #fff;
    border-radius: 60px;
  }
  .pn-footer__contact-divider {
    display: none;
  }

  /* ---------- パートナーバナー ----------
     Figma実測(node 582:2695)では3枚横並び→縦積みに変わる
     （バナー自体の縮小サイズはvar(--pn-footer-partner-w/h)で対応済み） */
  .pn-footer__partners-row {
    flex-direction: column;
    align-items: center;
  }

  /* ---------- メインリンクエリア ----------
     Figma実測(node 582:2695)ではブランド情報より先にナビゲーションが
     表示される（DOM順はブランドが先のまま、orderで表示順だけ入れ替える）。
     また制作事例/会社紹介等の2グループが見た目上1本の連続したリストに
     見えるよう、.pn-footer__nav-groups自体もgapを24pxに統一する
     （各グループ内のgap・サービス一覧グループのpadding-bottomと合わせて
     どのグループ境界も同じ間隔になるようにしている） */
  .pn-footer__main-row {
    flex-direction: column;
    gap: 72px;
  }
  .pn-footer__brand {
    order: 2;
    max-width: none;
  }
  .pn-footer__nav-group--grid ul {
    grid-template-columns: 1fr;
  }
  .pn-footer__nav-groups {
    order: 1;
    flex-direction: column;
    gap: 24px;
  }

  /* ---------- コピーライト ---------- */
  .pn-footer__bottom {
    padding-top: 0;
    flex-direction: column;
  }
}

/* ==========================================================================
   EC・コーポレート共通コンポーネント
   （page-ec.php / page-corporate.php で同一デザインの箇所をここに集約。
   Figma実測で両ページ完全に同一と確認済み。ページ固有の値（幅など）のみ
   各ページのCSS(ec.css/corporate.css)側で上書きする）
   ========================================================================== */

/* 制作の流れ（HubSpotページも含めて3ページ共通。番号丸の色だけ
   HubSpotページはbrand/hubspot(オレンジ)にページ側CSSで上書きする） */
.pn-ec__flow,
.pn-corp__flow,
.pn-hubspot__flow {
  padding: 48px 0 80px;
}

.pn-ec__flow-steps,
.pn-corp__flow-steps,
.pn-hubspot__flow-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
}

.pn-ec__flow-step,
.pn-corp__flow-step,
.pn-hubspot__flow-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pn-ec__flow-step-num,
.pn-corp__flow-step-num,
.pn-hubspot__flow-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: var(--pn-brand-primary);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}

.pn-ec__flow-step-label,
.pn-corp__flow-step-label,
.pn-hubspot__flow-step-label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: var(--pn-text-primary);
  text-align: center;
  writing-mode: vertical-rl;
}

.pn-ec__flow-connector,
.pn-corp__flow-connector,
.pn-hubspot__flow-connector {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}

.pn-ec__flow-connector img,
.pn-corp__flow-connector img,
.pn-hubspot__flow-connector img {
  display: block;
  width: 100%;
  height: auto;
}

/* お問い合わせはこちらから */
.pn-ec__cta-btn:link,
.pn-ec__cta-btn:visited,
.pn-ec__cta-btn:hover,
.pn-ec__cta-btn:active,
.pn-corp__cta-btn:link,
.pn-corp__cta-btn:visited,
.pn-corp__cta-btn:hover,
.pn-corp__cta-btn:active {
  text-decoration: none;
  color: #fff;
}

.pn-ec__cta-btn:hover,
.pn-corp__cta-btn:hover {
  opacity: 0.5;
}

/* Figma実測(node 451:1245「コーポレート」/449:904「EC」)：内側フレームの
   上下余白はいずれも89pxで完全に同一（四捨五入して90px指定） */
.pn-ec__cta,
.pn-corp__cta {
  position: relative;
  overflow: hidden;
  background: var(--pn-bg-subtle);
  border-radius: 8px;
  width: calc(100% - 40px);
  max-width: var(--pn-container);
  margin: 0 auto 48px;
  padding: 90px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pn-ec__cta-bg,
.pn-corp__cta-bg {
  position: absolute;
  left: 0;
  top: auto;
  bottom: 0;
  width: 305px;
  height: 298px;
  z-index: 0;
  pointer-events: none;
}

.pn-ec__cta-inner,
.pn-corp__cta-inner {
  position: relative;
  z-index: 1;
  width: 1040px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.pn-ec__cta-head,
.pn-corp__cta-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.pn-ec__cta-head h2,
.pn-corp__cta-head h2 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  color: var(--pn-text-primary);
}

.pn-ec__cta-lead,
.pn-corp__cta-lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 32px;
  color: var(--pn-text-primary);
}

.pn-ec__cta-buttons,
.pn-corp__cta-buttons {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

.pn-ec__cta-btn,
.pn-corp__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 450px;
  max-width: 100%;
  height: 80px;
  padding: 12px 40px;
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

.pn-ec__cta-icon,
.pn-corp__cta-icon {
  width: auto;
  height: 28px;
  flex-shrink: 0;
  fill: currentColor;
}

.pn-ec__cta-btn i,
.pn-corp__cta-btn i {
  font-size: 28px;
}

.pn-ec__cta-btn--estimate,
.pn-corp__cta-btn--estimate {
  background: var(--pn-text-primary);
}

.pn-ec__cta-btn--contact,
.pn-corp__cta-btn--contact {
  background: var(--pn-brand-primary);
}

/* よくあるご質問（Figma実測でEC/コーポレート/HubSpotとも幅1040pxのFAQ-card
   コンポーネントが完全に同一のため統合。コンテナ幅・「Q.」の色の上書きのみ
   各ページのCSS側に残す。HubSpotページは「Q.」がbrand/hubspot(オレンジ)） */
.pn-ec__faq,
.pn-corp__faq,
.pn-hubspot__faq {
  background: var(--pn-bg-default);
  padding: 80px 0 100px;
}

.pn-ec__faq-list,
.pn-corp__faq-list,
.pn-hubspot__faq-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pn-ec__faq-item,
.pn-corp__faq-item,
.pn-hubspot__faq-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pn-ec__faq-card,
.pn-corp__faq-card,
.pn-hubspot__faq-card {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.pn-ec__faq-question,
.pn-corp__faq-question,
.pn-hubspot__faq-question {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 30px;
  background: var(--pn-bg-subtle);
}

.pn-ec__faq-q-label,
.pn-corp__faq-q-label,
.pn-hubspot__faq-q-label {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: var(--pn-brand-primary);
  flex-shrink: 0;
}

.pn-ec__faq-q-text,
.pn-corp__faq-q-text,
.pn-hubspot__faq-q-text {
  margin: 0;
  flex: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  color: var(--pn-text-primary);
  text-align: left;
}

.pn-ec__faq-chevron,
.pn-corp__faq-chevron,
.pn-hubspot__faq-chevron {
  width: 10px;
  height: 5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pn-ec__faq-card[aria-expanded="true"] .pn-ec__faq-chevron,
.pn-corp__faq-card[aria-expanded="true"] .pn-corp__faq-chevron,
.pn-hubspot__faq-card[aria-expanded="true"] .pn-hubspot__faq-chevron {
  transform: rotate(180deg);
}

.pn-ec__faq-answer,
.pn-corp__faq-answer,
.pn-hubspot__faq-answer {
  margin: 0;
  padding: 0 30px 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: var(--pn-text-primary);
  text-align: left;
  display: none;
}

.pn-ec__faq-answer a,
.pn-corp__faq-answer a,
.pn-hubspot__faq-answer a {
  color: var(--pn-text-primary);
  text-decoration: underline;
}

.pn-ec__faq-card[aria-expanded="true"] + .pn-ec__faq-answer,
.pn-corp__faq-card[aria-expanded="true"] + .pn-corp__faq-answer,
.pn-hubspot__faq-card[aria-expanded="true"] + .pn-hubspot__faq-answer {
  display: block;
}

/* モバイル(768px以下)のみ表示する改行（全ページ共通）。TOP/EC/コーポレート/
   HubSpotの各ページで.pn-top__br-sp・pn-ec__break--mobile・
   pn-hubspot__br-sp等、同一の仕組み（display:none→768px以下でinline）を
   ページごとに別名で重複定義していたため、1つの共通クラスに統合した。
   （2026-09-14、page-corporate.phpに誤って別ページ用のクラス名
   〈pn-hubspot__br-sp〉が紛れ込んだことをきっかけに整理） */
.pn-br-sp {
  display: none;
}

/* PC(769px以上)のみ表示する改行（全ページ共通）。.pn-br-spの逆パターン */
.pn-br-pc {
  display: inline;
}

/* ==========================================================================
   モバイル調整（768px以下）
   ========================================================================== */
@media (max-width: 768px) {
  .pn-br-sp {
    display: inline;
  }

  .pn-br-pc {
    display: none;
  }

  .pn-footer__contact-bg {
    left: -250px;
  }
  .pn-footer__contact-head,
  .pn-footer__contact-items {
    flex-direction: column;
    gap: 32px;
  }
  .pn-footer__contact-head {
    align-items: flex-start;
  }
  .pn-footer__contact-divider {
    width: 40px;
    height: 1px;
  }

  .pn-footer__main-row {
    flex-direction: column;
  }

  .pn-footer__nav-groups {
    gap: 32px;
  }

  /* 制作の流れ / お問い合わせはこちらから / よくあるご質問（EC・コーポレート共通）
     値の根拠：Figma「PULL-NET_ECサイト」smp-designページ node 582:1648
     （EC側で確定済み）。コーポレートページはFigma上にスマホデザインが
     存在しないため、EC側と完全に共通のデザインであることを踏まえ、
     同じ値をそのまま適用している */
  .pn-ec__flow,
  .pn-corp__flow,
  .pn-hubspot__flow {
    padding: 40px 40px 80px;
  }

  .pn-ec__flow-steps,
  .pn-corp__flow-steps,
  .pn-hubspot__flow-steps {
    width: 100%;
    max-width: 350px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .pn-ec__flow-step,
  .pn-corp__flow-step,
  .pn-hubspot__flow-step {
    flex-direction: row;
    justify-content: flex-start;
  }

  .pn-ec__flow-step-label,
  .pn-corp__flow-step-label,
  .pn-hubspot__flow-step-label {
    writing-mode: horizontal-tb;
    font-size: 16px;
    line-height: 29px;
  }

  .pn-ec__flow-connector,
  .pn-corp__flow-connector,
  .pn-hubspot__flow-connector {
    flex: none;
    width: 40px;
    height: 30px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pn-ec__flow-connector img,
  .pn-corp__flow-connector img,
  .pn-hubspot__flow-connector img {
    width: 2px;
    height: 30px;
  }

  .pn-ec__cta,
  .pn-corp__cta {
    padding: 54px 20px;
  }

  .pn-ec__cta-inner,
  .pn-corp__cta-inner {
    gap: 32px;
  }

  .pn-ec__cta-head h2,
  .pn-corp__cta-head h2 {
    font-size: 24px;
    line-height: 34px;
  }

  .pn-ec__cta-lead,
  .pn-corp__cta-lead {
    font-size: 16px;
    line-height: 29px;
  }

  .pn-ec__cta-buttons,
  .pn-corp__cta-buttons {
    flex-direction: column;
    gap: 24px;
  }

  .pn-ec__cta-btn,
  .pn-corp__cta-btn {
    width: 285px;
    height: 64px;
  }

  .pn-ec__cta-bg,
  .pn-corp__cta-bg {
    width: 55%;
    max-width: 250px;
    height: auto;
    top: auto;
    bottom: 0;
  }

  /* ボタン内アイコンは隣接する文字サイズ(20px)に合わせる */
  .pn-ec__cta-icon,
  .pn-corp__cta-icon {
    height: 20px;
  }

  .pn-ec__cta-btn i,
  .pn-corp__cta-btn i {
    font-size: 20px;
  }

  .pn-ec__faq,
  .pn-corp__faq,
  .pn-hubspot__faq {
    padding-bottom: 80px;
  }

  .pn-ec__faq-question,
  .pn-corp__faq-question,
  .pn-hubspot__faq-question {
    padding: 16px 20px;
  }

  .pn-ec__faq-q-text,
  .pn-corp__faq-q-text,
  .pn-hubspot__faq-q-text {
    font-size: 16px;
    line-height: 29px;
  }

  .pn-ec__faq-answer,
  .pn-corp__faq-answer,
  .pn-hubspot__faq-answer {
    padding: 0 30px;
    font-size: 14px;
    line-height: 24px;
  }
}

/* ==========================================================================
   スクロール表示アニメーション（EC・コーポレート・HubSpotページ共通）
   TOPページ（front-page.php/top.css の .pn-top__reveal）で実装済みの
   「IntersectionObserverでビューポートに入ったら.is-inviewを付与し、
   フェード＋スライドインする」演出を、新規4ページ全体に展開したもの。
   TOP自体は既存の.pn-top__reveal（top.css）をそのまま使い続けており、
   ここでは触れていない（動作中の実装への影響を避けるため）。
   IntersectionObserver自体はfooter.php末尾のスクリプトで一括制御し、
   前述4クラスすべてを監視する。各ページ固有のグリッド内での
   transition-delay（段階的な表示ずらし）は、各ページのCSS
   （ec.css/corporate.css/hubspot.css）側にグリッドクラスごとに定義する。 */
.pn-ec__reveal,
.pn-corp__reveal,
.pn-hubspot__reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pn-ec__reveal.is-inview,
.pn-corp__reveal.is-inview,
.pn-hubspot__reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pn-ec__reveal,
  .pn-corp__reveal,
  .pn-hubspot__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}