@charset "UTF-8";
/*
 * PULL-NET リニューアル コーポレートサイト作成ページ(page-corporate.php)専用スタイル
 * Figma: PULL-NET_ECサイト (fileKey ESLPtaetNAYeAEKry21qFn) node 1:333 "ホームページ制作"
 *
 * css/style.css・css/renewal.css には手を加えず、新規クラス（pn-corp__ 接頭辞）のみで
 * 完結させることで、既存ページ・既存ヘッダー/フッターに影響を与えないようにしている。
 * is_page_template('page-corporate.php') のときだけ header.php から読み込まれる。
 *
 * よくあるご質問セクションはFigma上ダミーテキスト（"質問が入ります"等）のままで
 * 実内容が未入稿のため、今回は実装していない（安井さんに確認済み・別途対応）。
 */

/* 色・サイズトークン(--pn-*)はrenewal.cssの:rootで一元定義済みのため、
   ここでは再定義しない */
.pn-corp {
  background: var(--pn-bg-default);
  box-sizing: border-box;
}

/* レスポンシブ用CSS変数（デスクトップ値）。ec.cssと同じ方式で、
   フォントサイズ・余白など「値」だけがブレークポイントで変わるものは
   ここに集約し、@media (max-width: 768px) 内でまとめて上書きする。
   レイアウト自体が変わるもの（flex-direction・grid列数など）は
   各コンポーネント側に直接@mediaを書く。
   ※このページはFigma上にスマホ用デザインが存在しないため、下記の
   モバイル値はECサイト制作ページ（page-ec.php）のFigma確定値・スケール比を
   参考にした調整値（推測）である。Figma確定ではない点に注意 */
.pn-corp {
  --pn-corp-head-fs: 32px;
  --pn-corp-head-lh: 44px;
  --pn-corp-head-mb: 48px;
  --pn-corp-breadcrumbs-fs: 14px;
  --pn-corp-pain-pt: 80px;
  --pn-corp-pain-pb: 48px;
  --pn-corp-pain-item-fs: 20px;
  --pn-corp-pain-item-lh: 36px;
  --pn-corp-solve-pb: 80px;
  --pn-corp-solve-gap: 48px;
  --pn-corp-solve-lead-fs: 24px;
  --pn-corp-solve-lead-lh: 36px;
  --pn-corp-solve-title-fs: 44px;
  --pn-corp-solve-title-lh: 58px;
  --pn-corp-solve-text-fs: 18px;
  --pn-corp-solve-text-lh: 32px;
  --pn-corp-showcase-img-w: 240px;
  --pn-corp-showcase-img-h: 300px;
  --pn-corp-showcase-gap: 38px;
  --pn-corp-reasons-pt: 80px;
  --pn-corp-reasons-pb: 80px;
  --pn-corp-reasons-gap: 40px;
  --pn-corp-reason-title-fs: 24px;
  --pn-corp-reason-title-lh: 36px;
  --pn-corp-reason-text-fs: 18px;
  --pn-corp-reason-text-lh: 32px;
  --pn-corp-plans-pb: 48px;
  --pn-corp-plan-card-pad: 48px 64px;
  --pn-corp-plan-title-fs: 24px;
  --pn-corp-plan-title-lh: 36px;
  --pn-corp-plan-desc-fs: 16px;
  --pn-corp-plan-desc-lh: 28px;
  --pn-corp-plan-h4-fs: 18px;
  --pn-corp-plan-h4-lh: 32px;
  --pn-corp-plan-ul-fs: 16px;
  --pn-corp-plan-ul-lh: 28px;
  --pn-corp-plan-recommend-fs: 16px;
  --pn-corp-plan-recommend-lh: 30px;
  --pn-corp-plan-btn-h: 60px;
  --pn-corp-plans-note-pad: 48px 64px;
  --pn-corp-plans-note-title-fs: 24px;
  --pn-corp-plans-note-title-lh: 36px;
  --pn-corp-plans-note-text-fs: 16px;
  --pn-corp-plans-note-text-lh: 28px;
  --pn-corp-template-pb: 48px;
  --pn-corp-template-lead-fs: 18px;
  --pn-corp-template-lead-lh: 32px;
  --pn-corp-template-lead-mb: 48px;
  --pn-corp-template-thumb-size: 80px;
  --pn-corp-template-viewport-h: 600px;
  --pn-corp-pricing-pad: 56px 80px 80px;
  --pn-corp-pricing-gap: 34px;
  --pn-corp-pricing-card-pad: 64px;
  --pn-corp-pricing-head-title-fs: 24px;
  --pn-corp-pricing-head-title-lh: 36px;
  --pn-corp-pricing-price-fs: 32px;
  --pn-corp-pricing-price-lh: 44px;
  --pn-corp-options-pad-v: 48px;
  --pn-corp-option-card-pad: 48px;
  --pn-corp-option-title-fs: 24px;
  --pn-corp-option-title-lh: 36px;
  --pn-corp-options-lead-fs: 18px;
  --pn-corp-options-lead-lh: 32px;
  --pn-corp-works-pt: 80px;
  --pn-corp-works-pb: 48px;
  --pn-corp-works-grid-gap: 60px 40px;
  --pn-corp-works-grid-mb: 48px;
  --pn-corp-works-title-fs: 16px;
  --pn-corp-works-title-lh: 28px;
  --pn-corp-works-title-fw: 700;
  --pn-corp-works-tag-pad: 8px 16px;
  --pn-corp-works-tag-fs: 12px;
  --pn-corp-works-tags-gap: 16px;
  --pn-corp-works-more-fs: 24px;
}
.pn-corp * {
  box-sizing: border-box;
}

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

/* お問い合わせCTAボタンの文字色・hover挙動はrenewal.css（EC・コーポレート共通）へ移動 */

.pn-corp__plan-btn:link,
.pn-corp__plan-btn:visited,
.pn-corp__plan-btn:hover,
.pn-corp__plan-btn:active {
  text-decoration: none;
  color: #fff;
}

.pn-corp__breadcrumbs a:link,
.pn-corp__breadcrumbs a:visited,
.pn-corp__breadcrumbs a:hover,
.pn-corp__breadcrumbs a:active {
  color: var(--pn-brand-primary);
  text-decoration: underline;
}

/* コンテンツ幅はFigma確定の1280pxを維持したいので、左右padding分(20px×2)を
   width側に足しておく（そのままvar(--pn-container)を幅にすると、paddingの
   分だけ実際のコンテンツ幅が1240pxに縮んでしまう） */
.pn-corp__container {
  width: calc(var(--pn-container) + 40px);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

/* 共通の見出し（h2 + グラデーション下線バー） */
.pn-corp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin-bottom: var(--pn-corp-head-mb);
}

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

.pn-corp__head-bar {
  width: 32px;
  height: 4px;
  border-radius: 50px;
  background: linear-gradient(90deg, #f36352 0%, #d92f1a 99.951%);
}

/* 共通ボタン（白地・赤枠、Frame533の「制作事例一覧はこちら」等。
   Figma「共通ボタン-赤枠」node 5:185/5:188と同じ単色塗り） */
.pn-corp__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  height: 52px;
  background: var(--pn-bg-default);
  border: 1px solid var(--pn-brand-primary);
  border-radius: 100px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: var(--pn-brand-primary);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.pn-corp__btn:link,
.pn-corp__btn:visited,
.pn-corp__btn:active,
.pn-corp__btn:focus {
  color: var(--pn-brand-primary);
  text-decoration: none;
}

/* Figma確定：「共通ボタン-赤枠」node 5:188と同じ単色塗り（赤地・白文字）のhover */
.pn-corp__btn:hover {
  background: var(--pn-brand-primary);
  border-color: var(--pn-brand-primary);
  color: #fff;
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* z-index:0でこの要素自身にスタッキングコンテキストを確立させないと、
   ::beforeのz-index:-1がルートレベルまで突き抜けてしまい、背景画像が
   見えなくなる（position:relativeのみ・z-index:autoの場合、要素自体は
   通常のフローの兄弟要素と同列に扱われるため、負のz-indexの子はその
   スコープに閉じ込められない） */
.pn-corp__hero {
  position: relative;
  z-index: 0;
  padding-bottom: 61px;
}

/* 下層ページ(EC/コーポレート/HubSpot)のhero高さをPCで500pxに統一
   （2026-09-15、仙波さん指示）。
   Figma実測：node 452:1304のフレーム自体が高さ500px固定。内訳は
   breadcrumbs(56px)+gap(6px)+image(400px)+pb(61px)=523pxとなり、実際は
   フレームの500px制限で末尾の余白(pb-61pxの一部)が非表示になる構造。
   min-height指定だと逆に「最小値」にしかならず、この523px分そのまま
   表示されてEC(500pxでぴったり収まる)と高さが揃わなくなっていた。
   height固定+overflow:hiddenでFigmaの実際の挙動（はみ出した末尾の余白が
   非表示になる）を再現する */
/* コーポレートのhero画像は1枚(max-width:100%でそのまま縮小)なので折り返り
   自体は発生しないが、EC/HubSpotと閾値を揃えるため同じ2段構成にする */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-corp__hero {
    min-height: 500px;
  }
}

@media (min-width: 1280px) {
  .pn-corp__hero {
    height: 500px;
    overflow: hidden;
  }
}

/* 背景画像はHERO内に収め、通常通りページと一緒にスクロールさせる
   （固定表示でスクロール追従させるのはTOPページのみの仕様のため、
   コーポレートページはposition:absoluteでHERO要素内に閉じ込める） */
.pn-corp__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-corp__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 16px 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--pn-corp-breadcrumbs-fs);
  color: var(--pn-text-primary);
}

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

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

.pn-corp__hero-visual {
  display: flex;
  justify-content: center;
  padding: 24px 20px;
}

.pn-corp__hero-visual img {
  width: 1000px;
  max-width: 100%;
  height: auto;
}

/* スマホ幅専用画像（Figma smp-design node 582:1644）。デフォルトは非表示、
   @media(max-width:768px)側で表示を切り替える */
.pn-corp__hero-visual-img--sp {
  display: none;
}

/* ==========================================================================
   こんなお悩みの企業様におすすめ！
   ========================================================================== */
.pn-corp__pain {
  padding: var(--pn-corp-pain-pt) 20px var(--pn-corp-pain-pb);
}

.pn-corp__pain-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin: 0 auto;
  width: fit-content;
  max-width: 100%;
}

.pn-corp__pain-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pn-corp__pain-item img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.pn-corp__pain-item p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-corp-pain-item-fs);
  line-height: var(--pn-corp-pain-item-lh);
  color: var(--pn-text-primary);
  white-space: nowrap;
}

/* ==========================================================================
   ネットショップ作成で培った経験を活かして... + 制作実績ショーケース
   ========================================================================== */
.pn-corp__solve {
  padding-bottom: var(--pn-corp-solve-pb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pn-corp-solve-gap);
}

.pn-corp__solve-arrow {
  width: 60px;
  height: 50px;
}

.pn-corp__solve-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: 0 20px;
}

.pn-corp__solve-lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-solve-lead-fs);
  line-height: var(--pn-corp-solve-lead-lh);
  color: var(--pn-text-primary);
}

.pn-corp__solve-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-solve-title-fs);
  line-height: var(--pn-corp-solve-title-lh);
  color: var(--pn-brand-primary);
}

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

/* Figma実測(node 79:1298)：親コンテナがheight:300px + overflow-y:clipで、
   各画像(392〜698px)はこの高さでトリミングされる仕様。
   あわせて「左にゆっくり自動スライダー」化のため、画像列を複製して
   継続的にtranslateXでループさせる（純CSSのマーキー方式） */
.pn-corp__showcase {
  overflow: hidden;
  width: 100%;
  padding: 24px 0;
}

.pn-corp__showcase-track {
  display: flex;
  gap: var(--pn-corp-showcase-gap);
  width: max-content;
  animation: pn-corp-showcase-scroll 45s linear infinite;
}

.pn-corp__showcase img {
  width: var(--pn-corp-showcase-img-w);
  height: var(--pn-corp-showcase-img-h);
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
  box-shadow: 13px 4px 8.3px 0px rgba(0, 0, 0, 0.05);
}

@keyframes pn-corp-showcase-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-corp__showcase-track {
    animation: none;
  }
}

/* ==========================================================================
   PULL-NETが選ばれる理由
   ========================================================================== */
.pn-corp__reasons {
  background: var(--pn-bg-gray);
  padding: var(--pn-corp-reasons-pt) 0 var(--pn-corp-reasons-pb);
}

.pn-corp__reasons-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pn-corp-reasons-gap);
  max-width: calc(var(--pn-container) + 160px);
  margin: 0 auto;
  padding: 0 80px;
}

.pn-corp__reason-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 300px;
}

.pn-corp__reason-item img {
  width: 100%;
  max-width: 229px;
  height: auto;
}

.pn-corp__reason-title {
  margin: 0;
  padding-top: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-reason-title-fs);
  line-height: var(--pn-corp-reason-title-lh);
  color: var(--pn-text-primary);
  width: 100%;
}

.pn-corp__reason-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-corp-reason-text-fs);
  line-height: var(--pn-corp-reason-text-lh);
  color: var(--pn-text-primary);
  width: 100%;
}

/* ==========================================================================
   制作プランのご紹介
   ========================================================================== */
.pn-corp__plans {
  background: var(--pn-bg-default);
  border-radius: 40px 40px 0 0;
  padding: 80px 0 var(--pn-corp-plans-pb);
}

.pn-corp__plans-grid {
  display: flex;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 40px;
}

.pn-corp__plan-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: var(--pn-corp-plan-card-pad);
  background: var(--pn-bg-default);
  border: 5px solid var(--pn-border-default);
}

.pn-corp__plan-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pn-corp__plan-head img {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}

.pn-corp__plan-head h3 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-plan-title-fs);
  line-height: var(--pn-corp-plan-title-lh);
  color: var(--pn-text-primary);
  white-space: nowrap;
}

/* タブレット幅（769px〜1279px、EC/HubSpotと揃えた閾値）用の調整。
   Figmaにこの幅のデザインは無いため暫定値 */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-corp {
    /* 左右の余白のみ30pxに縮小（上下は据え置き） */
    --pn-corp-plan-card-pad: 48px 30px;
  }

  /* PULL-NETが選ばれる理由：横並び4項目のままだと画面幅から
     はみ出すため、2列のグリッドに変更 */
  .pn-corp__reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: 40px;
  }

  .pn-corp__reason-item {
    width: 100%;
    max-width: 300px;
  }

  /* プランカードの幅が狭まりnowrapのプラン名が画面幅からはみ出すため解除 */
  .pn-corp__plan-head h3 {
    white-space: normal;
  }

  /* 料金プラン：3カード横並びのままだと各カード内の文字が画面幅から
     はみ出すため、768px以下と同様に1列に */
  .pn-corp__pricing-grid {
    flex-direction: column;
  }
}

.pn-corp__plan-desc {
  margin: 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--pn-border-default);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--pn-corp-plan-desc-fs);
  line-height: var(--pn-corp-plan-desc-lh);
  color: var(--pn-text-primary);
  width: 100%;
}

.pn-corp__plan-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.pn-corp__plan-block h4 {
  margin: 0 0 8px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-plan-h4-fs);
  line-height: var(--pn-corp-plan-h4-lh);
  color: var(--pn-text-primary);
}

.pn-corp__plan-block ul {
  margin: 0;
  padding-left: 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--pn-corp-plan-ul-fs);
  line-height: var(--pn-corp-plan-ul-lh);
  color: var(--pn-text-primary);
}

/* css/style.cssの汎用リセット(ul,li{list-style-type:none})がliに直接
   指定されているため、liの継承元(ul)側でlist-style:discを指定しても
   勝てない。liに直接指定する */
.pn-corp__plan-block ul li {
  list-style: disc;
}

.pn-corp__plan-recommend {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pn-corp__plan-recommend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pn-corp__plan-recommend-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pn-corp__plan-recommend-item p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--pn-corp-plan-recommend-fs);
  line-height: var(--pn-corp-plan-recommend-lh);
  color: var(--pn-text-primary);
  white-space: nowrap;
}

.pn-corp__plan-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.pn-corp__plan-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  background: var(--pn-bg-subtle);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: var(--pn-brand-primary);
  white-space: nowrap;
}

.pn-corp__plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pn-corp-plan-btn-h);
  padding: 16px 40px;
  border-radius: 100px;
  background: var(--pn-brand-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s ease;
}

/* Figma確定：「各ページ共通ボタン-ベタ＞半透明」node 120:852、page=デフォルトの
   hover=on（node 120:855）は背景色を変えず、ボタン全体がopacity:50%になる仕様 */
.pn-corp__plan-btn:hover {
  opacity: 0.5;
}

.pn-corp__plans-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  padding: var(--pn-corp-plans-note-pad);
  background: var(--pn-bg-subtle);
}

.pn-corp__plans-note-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-plans-note-title-fs);
  line-height: var(--pn-corp-plans-note-title-lh);
  color: var(--pn-brand-primary);
}

.pn-corp__plans-note-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--pn-corp-plans-note-text-fs);
  line-height: var(--pn-corp-plans-note-text-lh);
  color: var(--pn-text-primary);
}

/* ==========================================================================
   成果につながるサイトづくりを効果的に！テンプレートプランのご紹介
   ========================================================================== */
.pn-corp__template {
  background: var(--pn-bg-default);
  padding: 80px 20px var(--pn-corp-template-pb);
}

.pn-corp__template-lead {
  margin: 0 0 var(--pn-corp-template-lead-mb);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-corp-template-lead-fs);
  line-height: var(--pn-corp-template-lead-lh);
  color: var(--pn-text-primary);
  text-align: center;
}

.pn-corp__template-gallery {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: center;
}

.pn-corp__template-thumbs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
}

.pn-corp__template-thumb {
  display: block;
  padding: 0;
  border: 3px solid transparent;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.pn-corp__template-thumb img {
  width: var(--pn-corp-template-thumb-size);
  height: var(--pn-corp-template-thumb-size);
  object-fit: cover;
  display: block;
}

.pn-corp__template-thumb.is-active {
  border-color: #0e84b8;
}

.pn-corp__template-viewport {
  flex: 1;
  min-width: 0;
  max-width: 1152px;
  height: var(--pn-corp-template-viewport-h);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--pn-border-default);
  padding: 16px;
}

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

/* ==========================================================================
   料金プラン
   ========================================================================== */
.pn-corp__pricing {
  background: var(--pn-bg-default);
  padding: var(--pn-corp-pricing-pad);
}

/* pricing-cardのborder(2px)分を差し引き、線幅を含めた見た目の間隔が
   Figma実測と合うようgapを34pxに調整 */
.pn-corp__pricing-grid {
  display: flex;
  gap: var(--pn-corp-pricing-gap);
  align-items: stretch;
  width: var(--pn-container);
  max-width: 100%;
  margin: 0 auto;
}

.pn-corp__pricing-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: var(--pn-corp-pricing-card-pad);
  background: var(--pn-bg-default);
  border: 2px solid var(--pn-brand-primary);
  border-radius: 8px;
}

.pn-corp__pricing-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--pn-border-default);
  width: 100%;
}

.pn-corp__pricing-head h3 {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: var(--pn-corp-pricing-head-title-fs);
  line-height: var(--pn-corp-pricing-head-title-lh);
  letter-spacing: 0.02em;
  color: var(--pn-brand-primary);
}

.pn-corp__pricing-head p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: var(--pn-text-muted);
}

/* 値段部分はデフォルト非表示。トグルボタン(aria-expanded)クリックで
   表示/非表示を切り替える（2026-09-15、仙波さん指示） */
.pn-corp__pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  margin-bottom: 8px;
  background: none;
  border: 1px solid var(--pn-brand-primary);
  border-radius: 4px;
  color: var(--pn-brand-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.pn-corp__pricing-toggle-chevron {
  width: 10px;
  height: 5px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pn-corp__pricing-toggle[aria-expanded="true"] .pn-corp__pricing-toggle-chevron {
  transform: rotate(180deg);
}

.pn-corp__pricing-price {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
  width: 100%;
}

.pn-corp__pricing-toggle[aria-expanded="true"] + .pn-corp__pricing-price {
  display: flex;
}

.pn-corp__pricing-price strong {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: var(--pn-corp-pricing-price-fs);
  line-height: var(--pn-corp-pricing-price-lh);
  letter-spacing: 0.02em;
  color: var(--pn-text-primary);
}

.pn-corp__pricing-price span {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  color: var(--pn-text-primary);
}

.pn-corp__pricing-suited {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.pn-corp__pricing-suited-label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 30px;
  color: var(--pn-text-muted);
}

.pn-corp__pricing-suited-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pn-corp__pricing-suited-item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pn-corp__pricing-suited-item p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--pn-text-primary);
  white-space: nowrap;
}

/* ==========================================================================
   豊富なオプションメニューで理想のサイト制作をサポート！
   ========================================================================== */
.pn-corp__options {
  padding: var(--pn-corp-options-pad-v) 0;
}

/* Figma実測(node 74:1878)：親フレーム幅1440pxに対しコンテンツ幅は1280px
   （x=80で中央揃え）。他セクション同様、全幅ではなくコンテンツ幅に収める。
   親.pn-corp__pricingが既に左右padding(--pn-corp-pricing-pad)を持って
   いるため、ここではpaddingは付けず幅の指定のみにする（.pn-corp__pricing-
   gridと同じ方式。付けると左右の余白が二重になってしまう） */
.pn-corp__options-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: var(--pn-container);
  max-width: 100%;
  margin: 0 auto 48px;
  text-align: center;
}

.pn-corp__options-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 50px;
  background: var(--pn-brand-primary);
}

.pn-corp__options-plus img {
  width: 20px;
  height: 20px;
}

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

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

/* 親.pn-corp__pricingが既に左右paddingを持っているため、ここではpaddingは
   付けず幅の指定のみにする（.pn-corp__options-headと同様） */
/* grid-template-columnsの1frは既定でminmax(auto, 1fr)相当になり、
   セル内のコンテンツ（.pn-corp__option-card）の最小コンテンツ幅が
   列ごとに異なると、その分だけ列の実際の幅も不揃いになってしまう。
   minmax(0, 1fr)にして列の最小幅を0にし、常に2列が均等幅になるように
   する */
.pn-corp__options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  width: var(--pn-container);
  max-width: 100%;
  margin: 0 auto;
}

.pn-corp__option-card {
  background: var(--pn-bg-subtle);
  border-radius: 12px;
  padding: var(--pn-corp-option-card-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pn-corp__option-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pn-corp__option-head img {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}

.pn-corp__option-head p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-option-title-fs);
  line-height: var(--pn-corp-option-title-lh);
  color: var(--pn-brand-primary);
  white-space: nowrap;
}

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

/* ==========================================================================
   制作実績
   ========================================================================== */
.pn-corp__works {
  padding: var(--pn-corp-works-pt) 0 var(--pn-corp-works-pb);
}

.pn-corp__works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pn-corp-works-grid-gap);
  margin-bottom: var(--pn-corp-works-grid-mb);
}

.pn-corp__works-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
}

.pn-corp__works-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 384 / 250;
  overflow: hidden;
  background: var(--pn-bg-gray);
}

.pn-corp__works-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pn-corp__works-title {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--pn-corp-works-title-fw);
  font-size: var(--pn-corp-works-title-fs);
  line-height: var(--pn-corp-works-title-lh);
  color: var(--pn-text-primary);
}

.pn-corp__works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pn-corp-works-tags-gap);
}

.pn-corp__works-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--pn-corp-works-tag-pad);
  border-radius: 100px;
  background: var(--pn-bg-subtle);
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: var(--pn-corp-works-tag-fs);
  color: var(--pn-text-primary);
}

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

.pn-corp__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--pn-text-primary);
  opacity: 1;
  transition: opacity 0.2s ease;
}

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

.pn-corp__more-btn span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--pn-corp-works-more-fs);
}

.pn-corp__more-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pn-brand-primary);
  overflow: hidden;
}

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

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

/* ==========================================================================
   制作の流れ / お問い合わせはこちらから
   共通スタイルはrenewal.css（EC・コーポレート共通）へ移動。
   幅のみFigma実測値(node 411:2651、800px)がページ固有のため個別指定
   （従来1040px指定だったのは実測と食い違う誤りだったため修正） */
.pn-corp__flow-steps {
  width: 800px;
}

/* ==========================================================================
   よくあるご質問
   共通スタイルはrenewal.css（EC・コーポレート共通）へ移動。
   FAQセクションのみFigma実測(node 79:2171)で幅1040px（他セクションの
   .pn-corp__containerは1280px）のため、この中でだけ幅を上書きする */
.pn-corp__faq .pn-corp__container {
  width: calc(1040px + 40px);
}

/* ==========================================================================
   レスポンシブ（768px以下）
   このページはFigma上にスマホ用デザインが存在しないため、値・レイアウトとも
   ECサイト制作ページ（page-ec.php、Figma smp-design確定）のスケール比・
   パターンを参考にした調整値（推測）。Figma確定ではない点に注意。
   ブレークポイントはヘッダー/フッター・TOP/ECページと同じ768pxに統一
   （旧実装の未確認1024px/640pxから置き換え）。
   .pn-corp__flow/.pn-corp__cta/.pn-corp__faqのモバイル対応は、EC側と
   完全に共通のデザインのためrenewal.css側（.pn-ec__*と共通）にまとめた。
   ========================================================================== */
@media (max-width: 768px) {
  .pn-corp {
    --pn-corp-head-fs: 24px;
    --pn-corp-head-lh: 34px;
    --pn-corp-head-mb: 32px;
    --pn-corp-breadcrumbs-fs: 12px;
    --pn-corp-pain-pt: 40px;
    --pn-corp-pain-pb: 40px;
    --pn-corp-pain-item-fs: 16px;
    --pn-corp-pain-item-lh: 28px;
    --pn-corp-solve-pb: 40px;
    --pn-corp-solve-gap: 32px;
    --pn-corp-solve-lead-fs: 18px;
    --pn-corp-solve-lead-lh: 28px;
    --pn-corp-solve-title-fs: 28px;
    --pn-corp-solve-title-lh: 42px;
    --pn-corp-solve-text-fs: 14px;
    --pn-corp-solve-text-lh: 24px;
    --pn-corp-showcase-img-w: 160px;
    --pn-corp-showcase-img-h: 200px;
    --pn-corp-showcase-gap: 20px;
    --pn-corp-reasons-pt: 40px;
    --pn-corp-reasons-pb: 40px;
    --pn-corp-reasons-gap: 32px;
    --pn-corp-reason-title-fs: 20px;
    --pn-corp-reason-title-lh: 30px;
    --pn-corp-reason-text-fs: 16px;
    --pn-corp-reason-text-lh: 29px;
    --pn-corp-plans-pb: 40px;
    --pn-corp-plan-card-pad: 32px 20px;
    --pn-corp-plan-title-fs: 20px;
    --pn-corp-plan-title-lh: 30px;
    --pn-corp-plan-desc-fs: 14px;
    --pn-corp-plan-desc-lh: 24px;
    --pn-corp-plan-h4-fs: 16px;
    --pn-corp-plan-h4-lh: 28px;
    --pn-corp-plan-ul-fs: 14px;
    --pn-corp-plan-ul-lh: 24px;
    --pn-corp-plan-recommend-fs: 14px;
    --pn-corp-plan-recommend-lh: 26px;
    --pn-corp-plan-btn-h: 52px;
    --pn-corp-plans-note-pad: 32px 20px;
    --pn-corp-plans-note-title-fs: 20px;
    --pn-corp-plans-note-title-lh: 30px;
    --pn-corp-plans-note-text-fs: 14px;
    --pn-corp-plans-note-text-lh: 24px;
    --pn-corp-template-pb: 40px;
    --pn-corp-template-lead-fs: 14px;
    --pn-corp-template-lead-lh: 24px;
    --pn-corp-template-lead-mb: 32px;
    --pn-corp-template-thumb-size: 56px;
    --pn-corp-template-viewport-h: 400px;
    --pn-corp-pricing-pad: 40px 20px;
    --pn-corp-pricing-gap: 24px;
    --pn-corp-pricing-card-pad: 32px;
    --pn-corp-pricing-head-title-fs: 20px;
    --pn-corp-pricing-head-title-lh: 30px;
    --pn-corp-pricing-price-fs: 24px;
    --pn-corp-pricing-price-lh: 34px;
    --pn-corp-options-pad-v: 40px;
    --pn-corp-option-card-pad: 32px;
    --pn-corp-option-title-fs: 20px;
    --pn-corp-option-title-lh: 30px;
    --pn-corp-options-lead-fs: 14px;
    --pn-corp-options-lead-lh: 24px;
    --pn-corp-works-pt: 48px;
    --pn-corp-works-pb: 40px;
    --pn-corp-works-grid-gap: 20px;
    --pn-corp-works-grid-mb: 32px;
    --pn-corp-works-title-fs: 14px;
    --pn-corp-works-title-lh: 24px;
    --pn-corp-works-title-fw: 500;
    --pn-corp-works-tag-pad: 4px 8px;
    --pn-corp-works-tag-fs: 8px;
    --pn-corp-works-tags-gap: 8px;
    --pn-corp-works-more-fs: 20px;
  }

  /* HERO：スマホ幅ではFigma smp-design（node 582:1644）に合わせて専用画像に
     切り替える（PC用画像は横長構成のため、そのまま縮小すると文字が小さく
     読みにくくなるため）。Figma実測：ブレッドクラム直下の余白は6pxのみで、
     画像自体の左右マージンもFigma実測をそのまま書き出し済みのため、
     PC用のpadding:24px 20pxは打ち消す */
  .pn-corp__hero-visual {
    padding: 6px 0 0;
  }

  /* ベースルールのwidth:1000pxはmax-width:100%で見た目上は縮小されるが、
     display:flexの子要素としては指定した1000pxがそのまま最小コンテンツ
     幅の計算に使われてしまう（flexアイテムのデフォルトmin-width:autoは
     指定widthを考慮するため）。画面幅からはみ出す原因になるため、
     スマホ幅ではwidth指定自体を解除する */
  .pn-corp__hero-visual img {
    width: auto;
  }

  .pn-corp__hero-visual-img--pc {
    display: none;
  }

  .pn-corp__hero-visual-img--sp {
    display: block;
  }

  /* こんなお悩みの企業様におすすめ！：固定幅・nowrapだと画面幅に収まらないため解除 */
  .pn-corp__pain-item p {
    white-space: normal;
  }

  /* ネットショップ作成で培った経験を活かして...：左右に余白を追加 */
  .pn-corp__solve-copy {
    padding: 0 20px;
  }

  /* PULL-NETが選ばれる理由：横並び4項目→縦積みに */
  .pn-corp__reasons-grid {
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }

  .pn-corp__reason-item {
    width: 100%;
    max-width: 320px;
  }

  /* 制作プランのご紹介：2カード→縦積みに */
  .pn-corp__plans-grid {
    flex-direction: column;
  }

  /* 制作プランのご紹介：プラン名がnowrapだと画面幅に収まらないため解除 */
  .pn-corp__plan-head h3 {
    white-space: normal;
  }

  .pn-corp__plan-tags {
    gap: 8px;
  }

  /* 成果につながるサイトづくりを効果的に！：サムネイル縦列→横並びに */
  .pn-corp__template-gallery {
    flex-direction: column;
    align-items: center;
  }

  .pn-corp__template-thumbs {
    flex-direction: row;
  }

  /* 料金プラン：3カード→縦積みに */
  .pn-corp__pricing-grid {
    flex-direction: column;
  }

  /* 豊富なオプションメニュー：2カラム→1カラムに */
  .pn-corp__options-grid {
    grid-template-columns: 1fr;
  }

  /* 制作実績：3カラム→2カラムに（EC側と共通のデザインパターン） */
  .pn-corp__works-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.pn-corp__pain-list .pn-corp__reveal:nth-child(3),
.pn-corp__reasons-grid .pn-corp__reveal:nth-child(3),
.pn-corp__pricing-grid .pn-corp__reveal:nth-child(3),
.pn-corp__options-grid .pn-corp__reveal:nth-child(3),
.pn-corp__works-grid .pn-corp__reveal:nth-child(3),
.pn-corp__faq-list .pn-corp__reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.pn-corp__pain-list .pn-corp__reveal:nth-child(4),
.pn-corp__reasons-grid .pn-corp__reveal:nth-child(4),
.pn-corp__options-grid .pn-corp__reveal:nth-child(4),
.pn-corp__works-grid .pn-corp__reveal:nth-child(4),
.pn-corp__faq-list .pn-corp__reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.pn-corp__works-grid .pn-corp__reveal:nth-child(5),
.pn-corp__faq-list .pn-corp__reveal:nth-child(5) {
  transition-delay: 0.32s;
}

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