@charset "UTF-8";
/*
 * PULL-NET リニューアル ECサイト制作ページ(page-ec.php)専用スタイル
 * Figma: PULL-NET_ECサイト (fileKey ESLPtaetNAYeAEKry21qFn) node 1:195 "ECサイト制作"
 *
 * css/style.css・css/renewal.css には手を加えず、新規クラス（pn-ec__ 接頭辞）のみで
 * 完結させることで、既存ページ・既存ヘッダー/フッターに影響を与えないようにしている。
 * is_page_template('page-ec.php') のときだけ header.php から読み込まれる。
 */

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

/* レスポンシブ用CSS変数（デスクトップ値）。フォントサイズ・余白など「値」だけが
   ブレークポイントで変わるものはここに集約し、@media (max-width: 768px) 内で
   まとめて上書きする（top.cssと同じ方式）。レイアウト自体が変わるもの
   （grid-template-columns・flex-directionなど）は各コンポーネント側に直接
   @mediaを書く。ブレークポイントはサイト全体の慣例（768px）に合わせる。
   値の根拠：Figma「PULL-NET_ECサイト」smp-designページ node 582:1648
   （"ECサイト制作"、390px幅） */
.pn-ec {
  --pn-ec-head-fs: 32px;
  --pn-ec-head-lh: 44px;
  --pn-ec-head-mb: 48px;
  --pn-ec-breadcrumbs-fs: 14px;
  --pn-ec-pain-pt: 80px;
  --pn-ec-pain-pb: 48px;
  --pn-ec-pain-card-pad: 48px 64px;
  --pn-ec-pain-icon-size: 40px;
  --pn-ec-pain-icon-pad: 10px;
  --pn-ec-pain-label-fs: 20px;
  --pn-ec-pain-label-lh: 32px;
  --pn-ec-pain-title-fs: 24px;
  --pn-ec-pain-title-lh: 36px;
  --pn-ec-pain-text-fs: 16px;
  --pn-ec-pain-text-lh: 28px;
  --pn-ec-solve-pb: 80px;
  --pn-ec-solve-lead-fs: 24px;
  --pn-ec-solve-lead-lh: 36px;
  --pn-ec-solve-title-fs: 44px;
  --pn-ec-solve-title-lh: 72px;
  --pn-ec-solve-stamp-w: 146px;
  --pn-ec-solve-stamp-h: 64px;
  --pn-ec-solve-stamp-border: 2px;
  --pn-ec-solve-stamp-img-h: 53px;
  --pn-ec-reasons-pb: 48px;
  --pn-ec-reason-row-gap: 80px;
  --pn-ec-reason-title-fs: 24px;
  --pn-ec-reason-title-lh: 36px;
  --pn-ec-reason-text-fs: 18px;
  --pn-ec-reason-text-lh: 32px;
  --pn-ec-methods-pb: 48px;
  --pn-ec-methods-card-pad: 48px;
  --pn-ec-methods-title-fs: 24px;
  --pn-ec-methods-title-lh: 36px;
  --pn-ec-methods-text-fs: 18px;
  --pn-ec-methods-text-lh: 32px;
  --pn-ec-pricing-pt: 80px;
  --pn-ec-pricing-pb: 48px;
  --pn-ec-pricing-col1-w: 240px;
  --pn-ec-pricing-cell-pad: 16px 24px;
  --pn-ec-pricing-table-w: 1040px;
  --pn-ec-malls-pt: 80px;
  --pn-ec-malls-pb: 48px;
  --pn-ec-malls-lead-fs: 16px;
  --pn-ec-malls-lead-lh: 28px;
  --pn-ec-malls-lead-mb: 48px;
  --pn-ec-malls-grid-gap: 24px;
  --pn-ec-mall-item-size: 160px;
  --pn-ec-works-pt: 80px;
  --pn-ec-works-pb: 48px;
  --pn-ec-works-grid-gap: 60px 40px;
  --pn-ec-works-title-fs: 16px;
  --pn-ec-works-title-lh: 28px;
  --pn-ec-works-title-fw: 700;
  --pn-ec-works-tag-pad: 8px 16px;
  --pn-ec-works-tag-fs: 12px;
  --pn-ec-works-tags-gap: 16px;
  --pn-ec-works-grid-mb: 48px;
  --pn-ec-works-more-fs: 24px;
}

/* css/style.css の a:link,a:visited{text-decoration:underline;color:#333}
   a:hover,a:active{...} が単一クラス指定より詳細度で勝ってしまうため、
   カード系リンクの:link/:visited/:hover/:activeをまとめて明示的に打ち消す */
.pn-ec__works-card:link,
.pn-ec__works-card:visited,
.pn-ec__works-card:hover,
.pn-ec__works-card:active,
.pn-ec__more-btn:link,
.pn-ec__more-btn:visited,
.pn-ec__more-btn:hover,
.pn-ec__more-btn:active {
  text-decoration: none;
  color: inherit;
}

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

/* パンくずリストのリンクは赤文字・下線付き（css/style.cssのa:hover,a:activeの
   下線なし指定より詳細度で勝つよう:link/:visited/:hover/:activeを明示） */
.pn-ec__breadcrumbs a:link,
.pn-ec__breadcrumbs a:visited,
.pn-ec__breadcrumbs a:hover,
.pn-ec__breadcrumbs a:active {
  color: var(--pn-brand-primary);
  text-decoration: underline;
}

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

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

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

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

/* 共通ボタン（赤枠、Figma「共通ボタン-赤枠」node 5:185） */
.pn-ec__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 100px;
  background: var(--pn-bg-default);
  border: 1px solid var(--pn-brand-primary);
  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,
    color 0.2s ease;
}

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

/* Figma確定：hover=on（node 5:188）は赤地塗り＋白文字になる仕様 */
.pn-ec__btn:hover {
  background: var(--pn-brand-primary);
  color: #fff;
}

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

/* 下層ページ(EC/コーポレート/HubSpot)のhero高さをPCで500pxに統一
   （2026-09-15、仙波さん指示）。
   Figma実測：node 452:1290のフレーム自体が高さ500px固定。内訳は
   breadcrumbs(56px)+gap(6px)+visual(24px+329px+24px)+pb(61px)=500pxと
   ぴったり収まる設計だが、min-height指定だと「最小値」にしかならず、
   実コンテンツがそれを超える場合に高さが揃わない（EC自体はぴったり
   収まるため実害はなかったが、コーポレート・HubSpotは超えてしまい
   3ページの高さが不一致になっていた）。height固定+overflow:hiddenで
   Figmaの「はみ出した分は非表示になる」実際の挙動を再現する */
/* 1280px以上のみ厳密に500px固定にする。769px〜1279pxの間は画像2枚が
   横並びを維持できず縦積みに折り返るため（.pn-ec__hero-visual参照）、
   overflow:hiddenで固定すると画像がちぎれて見えてしまう。この帯だけは
   高さが多少ばらついてもクリップされないmin-heightのフォールバックを維持する */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-ec__hero {
    min-height: 500px;
  }
}

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

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

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

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

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

.pn-ec__hero-visual {
  display: flex;
  gap: 35px;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  flex-wrap: wrap;
}

.pn-ec__hero-visual img:first-child {
  width: 587px;
  max-width: 100%;
  height: auto;
}

.pn-ec__hero-visual img:last-child {
  width: 351px;
  max-width: 100%;
  height: auto;
}

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

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

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

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

.pn-ec__pain-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pn-ec-pain-icon-size);
  height: var(--pn-ec-pain-icon-size);
  padding: var(--pn-ec-pain-icon-pad);
  border-radius: 50px;
  background: var(--pn-brand-primary);
  flex-shrink: 0;
}

.pn-ec__pain-card-icon img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pn-ec__pain-card-label {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-ec-pain-label-fs);
  line-height: var(--pn-ec-pain-label-lh);
  color: var(--pn-text-primary);
}

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

.pn-ec__pain-card-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--pn-ec-pain-text-fs);
  line-height: var(--pn-ec-pain-text-lh);
  color: var(--pn-text-primary);
}

/* ==========================================================================
   こうした課題を、EC専門20年...PULL-NETがまとめて解決します。
   ========================================================================== */
.pn-ec__solve {
  padding-bottom: var(--pn-ec-solve-pb);
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

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

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

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

.pn-ec__solve-check {
  width: 30px;
  height: 52px;
}

.pn-ec__solve-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 3px 6px;
  width: var(--pn-ec-solve-stamp-w);
  height: var(--pn-ec-solve-stamp-h);
  background: #fff;
  border: var(--pn-ec-solve-stamp-border) solid var(--pn-brand-primary);
}

.pn-ec__solve-stamp img {
  height: var(--pn-ec-solve-stamp-img-h);
  width: auto;
}

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

.pn-ec__reasons-list {
  display: flex;
  flex-direction: column;
}

.pn-ec__reason-row {
  display: flex;
  gap: var(--pn-ec-reason-row-gap);
  align-items: center;
  padding: 12.5px 0;
}

.pn-ec__reason-row--reverse {
  flex-direction: row-reverse;
}

/* flex-shrink:0(縮小しない)+flex:1(basis:0%)のbodyの組み合わせだと、
   コンテナが狭まった際にphotoは500px固定のまま、body側だけが縮んで
   いってしまう（flexの縮小計算はbasis×shrink-factorに比例するため、
   basisが0だと縮小の重みも0になり、実際は「残りスペースを埋める」
   形で見た目上縮んでいるだけ）。photo/bodyともにshrink可能にし、
   flex-basisを実際のデスクトップ幅（500px/700px、コンテナ幅1280px-
   gap80pxの残り）で揃えることで、縮小時に両者が同じ比率で縮むように
   する（flex-shrinkが同じ係数の場合、縮小量はbasisに比例するため、
   基準サイズに対する相対的な縮小率は両者で一致する）。
   imgなどreplace要素はflexアイテムとしてmin-width:autoの初期値が
   「コンテンツの最小サイズ」＝自身の指定サイズ(500px)に解釈され、
   flex-shrinkを指定しても実際には縮小されない挙動になるため、
   明示的にmin-width:0を指定して縮小を許可する */
.pn-ec__reason-photo {
  flex: 0 1 500px;
  min-width: 0;
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.pn-ec__reason-body {
  flex: 1 1 700px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

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

/* ==========================================================================
   対応可能なECサイト制作方法
   ========================================================================== */
.pn-ec__methods {
  background: var(--pn-bg-default);
  padding: 80px 0 var(--pn-ec-methods-pb);
}

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

.pn-ec__method-card {
  background: var(--pn-bg-default);
  border: 1px solid var(--pn-brand-primary);
  border-radius: 12px;
  padding: var(--pn-ec-methods-card-pad);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

.pn-ec__method-card-head img {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

.pn-ec__method-card-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-ec-methods-title-fs);
  line-height: var(--pn-ec-methods-title-lh);
  color: var(--pn-brand-primary);
  white-space: nowrap;
}

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

/* ==========================================================================
   制作料金例
   ========================================================================== */
.pn-ec__pricing {
  background: var(--pn-bg-default);
  border-radius: 40px 40px 0 0;
  padding: var(--pn-ec-pricing-pt) 20px var(--pn-ec-pricing-pb);
}

/* テーブル自身にoverflow-xを付けても一部環境でスクロールが効かないため、
   専用のラッパー要素(.pn-ec__pricing-scroll)を横スクロールコンテナにする */
.pn-ec__pricing-scroll {
  width: 100%;
}

.pn-ec__pricing-table {
  width: var(--pn-ec-pricing-table-w);
  max-width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

.pn-ec__pricing-table th,
.pn-ec__pricing-table td {
  border: 1px solid var(--pn-text-muted);
  padding: var(--pn-ec-pricing-cell-pad);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 32px;
  color: var(--pn-text-primary);
  text-align: left;
  vertical-align: middle;
}

.pn-ec__pricing-table th {
  background: var(--pn-bg-gray);
  font-weight: 700;
  white-space: nowrap;
}

.pn-ec__pricing-table th:first-child {
  width: var(--pn-ec-pricing-col1-w);
}

.pn-ec__pricing-table thead th,
.pn-ec__pricing-table thead td {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

/* 「ECサイト構築」「ECサイトリニューアル」の列見出し（先頭の空セルを除く）は
   白背景・赤文字（Figma確定、左上の空セルのみ.pn-ec__pricing-table thの
   グレー背景のまま） */
.pn-ec__pricing-table thead th:not(:first-child) {
  background: var(--pn-bg-default);
  color: var(--pn-brand-primary);
}

.pn-ec__pricing-table .pn-ec__pricing-price strong {
  font-weight: 700;
  font-size: 20px;
  color: var(--pn-brand-primary);
}

.pn-ec__pricing-table .pn-ec__pricing-price {
  font-size: 14px;
}

/* 横スクロールのヒント表示（アイコン・示唆シャドウ）はscroll-hintライブラリ
   （css/scroll-hint.css・js/scroll-hint.min.js）が担う。
   .js-scrollableを付与した.pn-ec__pricing-scrollに対しoverflow:autoの付与も
   ライブラリ側がJSで行うため、ここではoverflow指定は行わない */

/* ==========================================================================
   主要ECモールの制作・運営にも対応
   ========================================================================== */
.pn-ec__malls {
  background: var(--pn-bg-default);
  padding: var(--pn-ec-malls-pt) 0 var(--pn-ec-malls-pb);
}

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

.pn-ec__malls-grid {
  display: flex;
  justify-content: center;
  gap: var(--pn-ec-malls-grid-gap);
  flex-wrap: wrap;
}

.pn-ec__mall-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pn-ec-mall-item-size);
  height: var(--pn-ec-mall-item-size);
  padding: 24px 8px;
  border: 1px solid var(--pn-brand-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--pn-brand-primary);
  text-align: center;
}

/* ==========================================================================
   制作実績
   ========================================================================== */
.pn-ec__works {
  background: var(--pn-bg-default);
  border-radius: 40px 40px 0 0;
  padding: var(--pn-ec-works-pt) 0 var(--pn-ec-works-pb);
}

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

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

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

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

.pn-ec__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-ec-works-title-fw);
  font-size: var(--pn-ec-works-title-fs);
  line-height: var(--pn-ec-works-title-lh);
  color: var(--pn-text-primary);
}

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

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

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

.pn-ec__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-ec__more-btn:hover {
  opacity: 0.5;
}

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

.pn-ec__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-ec__more-btn-circle img {
  width: 16px;
  height: auto;
  transition: transform 0.2s ease;
}

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

/* ==========================================================================
   制作の流れ / お問い合わせはこちらから / よくあるご質問
   共通スタイル（padding・配色・フォント等の大半）はrenewal.css（EC・コーポレート
   共通）で定義済み。ここではEC固有の幅のみ上書きしている（デスクトップ値）。
   モバイル(768px以下)のレスポンシブ上書きは、renewal.css側の.pn-corp__*には
   一切影響させたくない（コーポレートページはまだレスポンシブ未着手のため）
   ため、renewal.cssを直接編集せず、.pn-ec__*だけをここec.css側で上書きする
   （ec.cssはheader.php内でrenewal.cssの後に読み込まれるため、詳細度が同じでも
   後勝ちで確実に上書きできる） */
.pn-ec__flow {
  background: var(--pn-bg-default);
  padding-left: 20px;
  padding-right: 20px;
}

.pn-ec__flow-steps {
  width: 900px;
}

.pn-ec__faq .pn-ec__container {
  width: calc(1040px + 40px);
}

/* ==========================================================================
   レスポンシブ（768px以下）
   Figma「PULL-NET_ECサイト」smp-designページ node 582:1648
   （"ECサイト制作"、390px幅）で実測。ブレークポイントはヘッダー/フッター・
   TOPページと同じ768pxに統一。
   ========================================================================== */
@media (max-width: 768px) {
  .pn-ec {
    --pn-ec-head-fs: 24px;
    --pn-ec-head-lh: 34px;
    --pn-ec-head-mb: 32px;
    --pn-ec-breadcrumbs-fs: 12px;
    --pn-ec-pain-pt: 40px;
    --pn-ec-pain-pb: 40px;
    --pn-ec-pain-card-pad: 32px;
    --pn-ec-pain-icon-size: 30px;
    --pn-ec-pain-icon-pad: 5px;
    --pn-ec-pain-label-fs: 18px;
    --pn-ec-pain-label-lh: 27px;
    --pn-ec-pain-title-fs: 20px;
    --pn-ec-pain-title-lh: 30px;
    --pn-ec-pain-text-fs: 14px;
    --pn-ec-pain-text-lh: 24px;
    --pn-ec-solve-pb: 40px;
    --pn-ec-solve-lead-fs: 20px;
    --pn-ec-solve-lead-lh: 30px;
    --pn-ec-solve-title-fs: 32px;
    --pn-ec-solve-title-lh: 54px;
    --pn-ec-solve-stamp-w: 105px;
    --pn-ec-solve-stamp-h: 46px;
    --pn-ec-solve-stamp-border: 1.5px;
    --pn-ec-solve-stamp-img-h: 38px;
    --pn-ec-reasons-pb: 80px;
    --pn-ec-reason-row-gap: 24px;
    --pn-ec-reason-title-fs: 20px;
    --pn-ec-reason-title-lh: 30px;
    --pn-ec-reason-text-fs: 16px;
    --pn-ec-reason-text-lh: 29px;
    --pn-ec-methods-pb: 40px;
    --pn-ec-methods-card-pad: 32px;
    --pn-ec-methods-title-fs: 20px;
    --pn-ec-methods-title-lh: 30px;
    --pn-ec-methods-text-fs: 16px;
    --pn-ec-methods-text-lh: 29px;
    --pn-ec-pricing-pt: 40px;
    --pn-ec-pricing-pb: 40px;
    --pn-ec-pricing-col1-w: 150px;
    --pn-ec-pricing-cell-pad: 16px;
    --pn-ec-pricing-table-w: 731px;
    --pn-ec-malls-pt: 40px;
    --pn-ec-malls-pb: 40px;
    --pn-ec-malls-lead-fs: 14px;
    --pn-ec-malls-lead-lh: 24px;
    --pn-ec-malls-lead-mb: 32px;
    --pn-ec-malls-grid-gap: 10px;
    --pn-ec-mall-item-size: 165px;
    --pn-ec-works-pt: 48px;
    --pn-ec-works-pb: 40px;
    --pn-ec-works-grid-gap: 20px;
    --pn-ec-works-title-fs: 14px;
    --pn-ec-works-title-lh: 24px;
    --pn-ec-works-title-fw: 500;
    --pn-ec-works-tag-pad: 4px 8px;
    --pn-ec-works-tag-fs: 8px;
    --pn-ec-works-tags-gap: 8px;
    --pn-ec-works-grid-mb: 32px;
    --pn-ec-works-more-fs: 20px;
  }

  /* HERO：パンくずはそのまま、mainvisualは横並び→縦積みに */
  .pn-ec__hero-visual {
    flex-direction: column;
    gap: 20px;
  }

  .pn-ec__hero-visual img:first-child {
    width: 100%;
  }

  .pn-ec__hero-visual img:last-child {
    width: 240px;
  }

  /* こんなお悩みや課題を抱えてはいませんか？：1カラムに */
  .pn-ec__pain-grid {
    grid-template-columns: 1fr;
  }

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

  /* PULL-NETが選ばれる理由：写真上・テキスト下の縦積みに（行間はrows自体の
     paddingではなくreasons-list側のgapで確保、Figma実測64px） */
  .pn-ec__reasons-list {
    gap: 64px;
  }

  .pn-ec__reason-row,
  .pn-ec__reason-row--reverse {
    flex-direction: column;
    padding: 0;
  }

  /* flex-direction:columnで主軸が縦になるため、flex-basis:500px
     (photo)/700px(body)が高さの基準値として解釈されてしまう
     （特にbodyは実際のテキスト量より大幅に大きい700pxの空白ボックスに
     なってしまう）。両方とも基準値をリセットする */
  .pn-ec__reason-photo {
    flex-basis: auto;
    width: 100%;
  }

  .pn-ec__reason-body {
    flex-basis: auto;
  }

  /* 対応可能なECサイト制作方法：1カラムに */
  .pn-ec__methods-grid {
    grid-template-columns: 1fr;
  }

  /* 制作料金例：列幅を縮小（横スクロール自体はscroll-hintライブラリが
     .js-scrollable(=.pn-ec__pricing-scroll)に付与するoverflow:autoで行う）。
     max-width:100%のままだと1040px→731pxへ縮んでも画面幅350pxには収まらず
     文字が潰れるため、テーブル側はmax-widthを解除し実測幅731pxを維持する */
  .pn-ec__pricing-table {
    max-width: none;
  }

  /* .pn-ec__pricing-scrollを画面幅いっぱいにし、同じ20pxをpaddingとして
     持たせ直す（横スクロール時に左右の余白がその都度きちんと見えるように
     するため）。負のmarginは、scroll-hintライブラリがJSで.pn-ec__pricing-
     scrollの外側に自動挿入する.scroll-hint-shadow-wrap側に付ける必要が
     ある（スクロールヒントの影(::before/::after)はscroll-hint-shadow-wrap
     基準でright:0/left:0に配置されるため、内側の.pn-ec__pricing-scroll側に
     負のmarginを付けると、影の位置と実際の画面端がズレてしまう） */
  .pn-ec__pricing-scroll {
    width: auto;
    padding: 0 20px;
  }

  .pn-ec__pricing .scroll-hint-shadow-wrap {
    margin: 0 -20px;
  }

  /* 主要ECモールの制作・運営にも対応：固定px幅のflex-wrapだと画面幅が
     狭くなった際に列数を維持できず1列になってしまうため、gridで3列を
     固定し、各セルの幅は可変（aspect-ratioで正方形を維持）にする */
  .pn-ec__malls-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .pn-ec__mall-item {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    line-height: 1.3;
  }

  /* 「・」で3行に改行する項目（特集ページ・LP制作／商品撮影・動画撮影）は
     行間を詰めて中央のドット行が目立ちすぎないようにする */
  .pn-ec__mall-item--tight {
    line-height: 1;
  }

  /* 制作実績：2カラムに */
  .pn-ec__works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 制作の流れ / お問い合わせはこちらから / よくあるご質問は
     コーポレートページと共通デザインのため、renewal.css側
     （.pn-ec__*, .pn-corp__*共通のモバイル調整）にまとめて移動した */
}

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

.pn-ec__pain-grid .pn-ec__reveal:nth-child(3),
.pn-ec__methods-grid .pn-ec__reveal:nth-child(3),
.pn-ec__malls-grid .pn-ec__reveal:nth-child(3),
.pn-ec__works-grid .pn-ec__reveal:nth-child(3),
.pn-ec__faq-list .pn-ec__reveal:nth-child(3),
.pn-ec__reasons-list .pn-ec__reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.pn-ec__pain-grid .pn-ec__reveal:nth-child(4),
.pn-ec__methods-grid .pn-ec__reveal:nth-child(4),
.pn-ec__malls-grid .pn-ec__reveal:nth-child(4),
.pn-ec__works-grid .pn-ec__reveal:nth-child(4),
.pn-ec__faq-list .pn-ec__reveal:nth-child(4),
.pn-ec__reasons-list .pn-ec__reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.pn-ec__malls-grid .pn-ec__reveal:nth-child(5),
.pn-ec__works-grid .pn-ec__reveal:nth-child(5),
.pn-ec__faq-list .pn-ec__reveal:nth-child(5) {
  transition-delay: 0.32s;
}

.pn-ec__malls-grid .pn-ec__reveal:nth-child(6),
.pn-ec__works-grid .pn-ec__reveal:nth-child(6) {
  transition-delay: 0.4s;
}