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

/* ==========================================================================
   フォント（YakuHanJP）
   和文フォントの前に配置し、句読点等の半角相当グリフに差し替えることで
   字間の間延びを抑える「アキ詰め」用フォント。ヒーロー見出し(太字48px)
   でのみ使用しているため、実際に使用しているBold(700)のみを読み込む。
   ファイルは pullnet/fonts/YakuHanJP/ 配下（このタスクで新規配置）。
   ========================================================================== */
@font-face {
  font-family: "YakuHanJP";
  src:
    url("../fonts/YakuHanJP/YakuHanJP-Bold.woff2") format("woff2"),
    url("../fonts/YakuHanJP/YakuHanJP-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   ブレークポイント一覧
   @mediaの条件式には変数が使えないため、このファイルで使用する数値をここに
   一覧化しておく。
     1270px … ヒーロー見出しバッジのフォントサイズ縮小開始（993px〜1270pxの間、
              横並びレイアウトのまま.pn-top__hero-heading spanがはみ出すのを
              防ぐための暫定調整、Figma未確定・要確認）
     992px  … ヒーロービジュアルのデスクトップ/タブレット切り替え（レイアウト自体の変更）
     768px  … スマホ用（Figma「smp-design」ページ基準）
   ========================================================================== */

/* ==========================================================================
   レスポンシブ用トークン（font-size/line-height/padding/gapなど「値」のみが
   ブレークポイントで変わるもの）
   フォントサイズ・余白等の単純な値の切り替えは、セレクタごとに@mediaを
   書くのではなく、ここで変数の値を768px以下用に一括で上書きする方式にする。
   レイアウト自体が変わるもの（display/flex-direction/position/grid列数の
   変更など、変数の値だけでは表現できないもの）は、対象セレクタ側の
   @media (max-width: 768px) に個別に書く（下部の該当箇所を参照）。
   ========================================================================== */
.pn-top {
  --pn-hero-pad-t: 130px;
  --pn-hero-pad-b: 230px;
  --pn-hero-inner-pad-l: 80px;
  --pn-hero-inner-pad-r: 0px;
  --pn-hero-copy-gap: 24px;
  --pn-hero-copy-maxw: 590px;
  --pn-hero-heading-gap: 16px;
  --pn-hero-badge-pad-y: 10px;
  --pn-hero-badge-pad-x: 16px;
  --pn-hero-badge-fs: 48px;
  --pn-hero-badge-lh: 54px;
  --pn-hero-lead-fs: 18px;
  --pn-hero-lead-lh: 32px;
  --pn-scrollline-h: 100px;

  --pn-sectionhead-fs: 32px;
  --pn-sectionhead-lh: 1.6;
  --pn-sectionhead-sub-fs: 16px;
  --pn-sectionhead-h2-mb: 0px;
  --pn-sectionhead-mb: 56px;

  --pn-works-pad-y: 100px;
  --pn-works-thumb-ar: 400 / 260;
  --pn-workstitle-fw: 700;
  --pn-workstitle-fs: 16px;
  --pn-workstitle-lh: 28px;
  --pn-workstags-gap: 16px;
  --pn-tag-pad-y: 8px;
  --pn-tag-pad-x: 16px;
  --pn-tag-fs: 12px;

  --pn-servicecard-pad-t: 80px;
  --pn-servicecard-pad-b: 80px;
  --pn-servicecard-pad-x: 24px;
  --pn-servicename-fs: 24px;
  --pn-servicedesc-fs: 14px;

  --pn-about-pad-y: 100px;
  --pn-about-copy-maxw: 560px;
  --pn-about-copy-gap: 32px;
  --pn-eyebrow-fs: 16px;
  --pn-abouth2-fs: 40px;
  --pn-abouth2-lh: 54px;
  --pn-abouttext-fs: 18px;
  --pn-abouttext-lh: 32px;
  --pn-abouttext-mb: 16px;
  --pn-about-node-size: 140px;
  --pn-about-node-gap: 190px;
  --pn-about-node-fs: 16px;
  --pn-about-node-lh: 24px;
  --pn-about-center-gap: 24px;
  --pn-about-center-img-w: 220px;
  --pn-about-center-p-fs: 16px;
  --pn-about-center-p-lh: 26px;

  --pn-special-pad-y: 80px;
  --pn-specialtitle-fw: 700;
  --pn-specialtitle-lh: 1.6;
  --pn-specialmore-fs: 12px;

  --pn-news-pad-y: 100px;
  --pn-newshead-gap: 104px;
  --pn-newsheadh2-fs: 32px;
  --pn-newsheadp-fs: 16px;
  --pn-newsmore-span-fs: 24px;
  --pn-newsitem-gap: 32px;
  --pn-newsdate-fs: 16px;
  --pn-newsdate-ls: 0.8px;
  --pn-newstitle-fw: 400;
  --pn-newstitle-fs: 16px;
  --pn-newstitle-lh: normal;
}

/* 993px〜1270pxは.pn-top__hero-innerがまだ横並びのままのため、ヒーロー
   見出しバッジ（.pn-top__hero-heading span）の文字が幅に収まりきらず
   はみ出す。font-sizeを縮小して回避する（992px以下は縦並びに切り替わり
   幅に余裕ができるため対象外。Figmaにこの中間幅のデザインは無いため暫定値） */
@media (min-width: 993px) and (max-width: 1270px) {
  .pn-top {
    --pn-hero-badge-fs: 36px;
  }
}

@media (max-width: 992px) {
  .pn-top {
    --pn-hero-pad-t: 80px;
    --pn-hero-pad-b: 0px;
  }
}

/* ABOUT USの円環図（.pn-top__about-diagram、490px固定）はセクションが
   縦積みに切り替わる768px以下では可変サイズに縮小されるが、769px〜899px
   （コピー文がFigmaの最小幅まで縮んでもなお490px固定の図と収まりきらず、
   画面からはみ出す幅。実測で確認）ではデスクトップと同じ490px固定の
   ままだったため、この幅専用に縮小する（Figmaにこの中間幅のデザインは
   無いため暫定値） */
@media (min-width: 769px) and (max-width: 899px) {
  .pn-top {
    --pn-about-node-size: 97px;
    --pn-about-node-gap: 146px;
    /* ノードの円自体を縮小した分、文字サイズも比率(97/140≈0.69)を保って
       縮小する（768px以下のモバイル値11px/16pxと同程度のため、そのまま
       流用） */
    --pn-about-node-fs: 11px;
    --pn-about-node-lh: 16px;
  }
}

@media (max-width: 768px) {
  .pn-top {
    --pn-hero-pad-t: 50px;
    --pn-hero-pad-b: 0px;
    --pn-hero-inner-pad-l: 20px;
    --pn-hero-inner-pad-r: 20px;
    --pn-hero-copy-gap: 16px;
    --pn-hero-copy-maxw: none;
    --pn-hero-heading-gap: 9px;
    --pn-hero-badge-pad-y: 6px;
    --pn-hero-badge-pad-x: 9px;
    --pn-hero-badge-fs: 30px;
    --pn-hero-badge-lh: 30px;
    --pn-hero-lead-fs: 15px;
    --pn-hero-lead-lh: 24px;
    --pn-scrollline-h: 40px;

    --pn-sectionhead-fs: 24px;
    --pn-sectionhead-lh: 32px;
    --pn-sectionhead-sub-fs: 14px;
    --pn-sectionhead-h2-mb: 0px;
    --pn-sectionhead-mb: 32px;

    --pn-works-pad-y: 60px;
    --pn-works-thumb-ar: 165 / 107;
    --pn-workstitle-fw: 500;
    --pn-workstitle-fs: 14px;
    --pn-workstitle-lh: 24px;
    --pn-workstags-gap: 8px;
    --pn-tag-pad-y: 4px;
    --pn-tag-pad-x: 8px;
    --pn-tag-fs: 8px;

    --pn-servicecard-pad-t: 20px;
    --pn-servicecard-pad-b: 40px;
    --pn-servicecard-pad-x: 8px;
    --pn-servicename-fs: 18px;
    --pn-servicedesc-fs: 12px;

    --pn-about-pad-y: 60px;
    --pn-about-copy-maxw: none;
    --pn-about-copy-gap: 16px;
    --pn-eyebrow-fs: 14px;
    --pn-abouth2-fs: 32px;
    --pn-abouth2-lh: 42px;
    --pn-abouttext-fs: 16px;
    --pn-abouttext-lh: 29px;
    --pn-abouttext-mb: 8px;
    --pn-about-node-size: 95px;
    --pn-about-node-gap: 130px;
    --pn-about-node-fs: 11px;
    --pn-about-node-lh: 16px;
    --pn-about-center-gap: 16px;
    --pn-about-center-img-w: 178px;
    --pn-about-center-p-fs: 11px;
    --pn-about-center-p-lh: 18px;

    --pn-special-pad-y: 60px;
    --pn-specialtitle-fw: 500;
    --pn-specialtitle-lh: 24px;
    --pn-specialmore-fs: 14px;

    --pn-news-pad-y: 60px;
    --pn-newshead-gap: 24px;
    --pn-newsheadh2-fs: 24px;
    --pn-newsheadp-fs: 14px;
    --pn-newsmore-span-fs: 16px;
    --pn-newsitem-gap: 12px;
    --pn-newsdate-fs: 14px;
    --pn-newsdate-ls: 0.7px;
    --pn-newstitle-fw: 500;
    --pn-newstitle-fs: 14px;
    --pn-newstitle-lh: 24px;
  }
}

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

/* css/style.css に a:link, a:visited { text-decoration: underline; color:#333; }
   a:hover, a:active { text-decoration: none; color:#c6221b; } という全ページ共通の
   デフォルトリンクスタイルがあり、詳細度(0,0,1,1)がクラス単体の指定(0,0,1,0)より
   高いため、そのままだと下線や色が意図しない見た目になる。ここでカード系リンクの
   :link/:visited/:hover/:active をまとめて明示的に打ち消す
   （.pn-top__special-more・.pn-top__btn 等、個別に指定済みのものは除く） */
.pn-top__works-card:link,
.pn-top__works-card:visited,
.pn-top__works-card:hover,
.pn-top__works-card:active,
.pn-top__service-card:link,
.pn-top__service-card:visited,
.pn-top__service-card:hover,
.pn-top__service-card:active,
.pn-top__special-card:link,
.pn-top__special-card:visited,
.pn-top__special-card:hover,
.pn-top__special-card:active,
.pn-top__news-more:link,
.pn-top__news-more:visited,
.pn-top__news-more:hover,
.pn-top__news-more:active {
  text-decoration: none;
  color: inherit;
}

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

.pn-top__section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--pn-sectionhead-mb);
}

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

.pn-top__section-head p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-sectionhead-sub-fs);
  color: var(--pn-text-muted);
}

/* 共通の「詳しくはこちら」ボタン(Figma共通コンポーネント「共通ボタン-赤枠」) */
.pn-top__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 100px;
  background: var(--pn-bg-default, #fff);
  border: 1px solid var(--pn-brand-primary);
  border-radius: 0;
  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-color 0.2s ease,
    color 0.2s ease,
    border-radius 0.2s ease,
    padding 0.2s ease;
}

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

/* ABOUT USは背景が濃色のため、通常時の枠線のみ白にする（:hoverより先に書き、
   :hoverの方が詳細度が同じでも後勝ちでborder-colorを上書きできるようにする） */
.pn-top__about .pn-top__btn {
  border-color: #fff;
}

/* .pn-top__about-btn--bottom は768px以下でのみ表示する複製ボタン
   （詳細は@media (max-width: 768px)側のコメント参照） */
.pn-top__about-btn--bottom {
  display: none;
}

/* Figma確定：バリアント2（ホバー状態、node 5:188） */
.pn-top__btn:hover {
  /* padding: 12px 40px; */
  background: var(--pn-brand-primary);
  border-color: var(--pn-brand-primary);
  /* border-radius: 100px; */
  color: #fff;
  text-decoration: none;
}

.pn-top__more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.pn-top__hero {
  position: relative;
  padding: var(--pn-hero-pad-t) 0 var(--pn-hero-pad-b);
}

/* 背景画像はページ全体の背景として画面いっぱいに固定表示し、スクロールしても
   追従させる。position:fixedにすることで.pn-top__hero自身のoverflow:hiddenの
   クリッピングからも外れ、ビューポート基準で画面全体を覆う（以前の
   「次のWORKSセクションの下に潜り込ませるブリード演出」用のz-index:-1は
   そのまま踏襲。背景専用の擬似要素に分離しているため、hero配下の
   .pn-top__promo（クリック可能なバナー）は通常のスタッキングのまま維持される） */
.pn-top__hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--pn-bg-subtle);
  background-image: url("../images/top/hero-bg.png");
  background-size: cover;
  background-position: center top;
}

/* .pn-top__heroを全幅にし、コピーは画面左端寄せ・画像は残りの幅いっぱいに
   表示する構成のため、コンテナで幅を制限せず.pn-top__hero-innerに
   直接左paddingを持たせる（Figma実測(node 289:4161)でコピーの左端は
   1440px基準フレームでx:80） */
.pn-top__hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-left: var(--pn-hero-inner-pad-l);
  padding-right: var(--pn-hero-inner-pad-r);
}

.pn-top__hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pn-hero-copy-gap);
  max-width: var(--pn-hero-copy-maxw);
  flex-shrink: 0;
}

.pn-top__hero-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pn-hero-heading-gap);
}

/* 参考サイト(https://shopify-design.info/)のFVアニメーションを実機で確認したところ、
   単純な下からのフェードインではなく、①明るいグラデーションのバーが左から右に
   伸びて表示→②その上をブランドカラー(赤)が同じく左から右に伸びて覆う→
   ③テキストがフェードで出現、という3段階の見出しバッジ演出だった（見出し行ごとに
   このシーケンスをstaggerさせる）。::before/::afterで2枚の色レイヤーを
   transform:scaleX(0→1)で左起点に伸長させ、内側テキストは別要素に分離して
   最後にopacityでフェードインさせる形で再現している。
   グラデーションの配色はFigma上に定義が無いため、ブランドカラー(赤)に自然に
   つながる暖色系（オレンジ〜赤）で独自に決定（要確認）。 */
.pn-top__hero-heading span {
  --pn-top-hero-badge-delay: 0s;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--pn-hero-badge-pad-y) var(--pn-hero-badge-pad-x);
  overflow: hidden;
  font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-hero-badge-fs);
  line-height: var(--pn-hero-badge-lh);
  color: #fff;
  white-space: nowrap;
}

.pn-top__hero-heading span::before,
.pn-top__hero-heading span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  animation: pn-top-hero-badge-grow 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.pn-top__hero-heading span::before {
  background: linear-gradient(90deg, #ffb199 0%, #ff6a3d 100%);
  animation-delay: var(--pn-top-hero-badge-delay);
}

.pn-top__hero-heading span::after {
  background: var(--pn-brand-primary);
  animation-delay: calc(var(--pn-top-hero-badge-delay) + 0.3s);
}

.pn-top__hero-heading span:nth-child(2) {
  --pn-top-hero-badge-delay: 0.2s;
}

.pn-top__hero-heading-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-style: normal;
  opacity: 0;
  animation: pn-top-hero-text-in 0.4s ease-out forwards;
  animation-delay: calc(var(--pn-top-hero-badge-delay) + 0.55s);
}

/* アニメーションなし。最初から表示（安井さん指示） */
.pn-top__hero-lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-hero-lead-fs);
  line-height: var(--pn-hero-lead-lh);
  color: var(--pn-text-primary);
}

@keyframes pn-top-hero-badge-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes pn-top-hero-text-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pn-top__hero-heading span::before,
  .pn-top__hero-heading span::after {
    animation: none;
    transform: scaleX(1);
  }
  .pn-top__hero-heading-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Figma実測(node 301:5356)ではヒーロービジュアルは画面右端まで、
   ヘッダー直下からセクション下端まで余白なく配置されているため、
   通常フローから外し.pn-top__heroを基準に絶対配置で右・上下いっぱいに
   表示する。左端はコピー側の確保幅（padding-left 80px + max-width 590px +
   gap 40px = 710px）に固定し、残りの幅いっぱいに広がるようにする */
.pn-top__hero-visual {
  position: absolute;
  top: 0;
  left: 730px;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* 993px〜1270px幅は見出しバッジのfont-sizeを36pxに縮小済み(上部の
   .pn-top変数、--pn-hero-badge-fsの1270px側の上書きを参照)。コピー側の
   実際に必要な幅（実測：2行の見出しのうち長い方が約420px）がhero-copyの
   max-width(590px)より狭くなり、上のleft(730px = padding-left 80px +
   max-width 590px + gap 40px)との間に大きな余白ができてしまうため、
   実測の文字幅に合わせてleftを詰め、その分画像を広く見せる
   （padding-left 80px + 実測コピー幅約440px(安全マージン込み) +
   gap 40px = 560px。Figmaにこの中間幅のデザインは無いため暫定値） */
@media (min-width: 993px) and (max-width: 1270px) {
  .pn-top__hero-visual {
    left: 560px;
  }
}

.pn-top__hero-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.pn-top__scroll {
  position: absolute;
  left: 80px;
  bottom: -110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.pn-top__scroll span {
  writing-mode: vertical-rl;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  letter-spacing: 0.7px;
  color: var(--pn-text-primary);
}

/* 横向きの線SVGをtransform:rotateで縦向きにしていたが、回転後もレイアウト上の
   ボックスサイズ(100x1px)が変わらず、実際の見た目(1x100px)とズレて上のテキストと
   重なっていたため、CSSのみの縦線に変更。あわせて下方向へのスクロール演出として
   線の中を光が流れるアニメーションを追加 */
.pn-top__scroll-line {
  position: relative;
  width: 1px;
  height: var(--pn-scrollline-h);
  overflow: hidden;
  background: rgba(51, 51, 51, 0.2);
}

.pn-top__scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--pn-text-primary);
  animation: pn-top-scroll-move 1.8s ease-in-out infinite;
}

@keyframes pn-top-scroll-move {
  0% {
    top: -40%;
  }
  100% {
    top: 100%;
  }
}

/* ヒーロー右下の告知バナー（Figma node 289:4448「Group 78」）
   Figma実測値(1440px幅フレーム)：x:927 y:692 w:490 h:178。
   right/bottomの数値は元々.pn-top__hero起点で算出した値
   （right = 1440-927-490-0(=23px)、bottom = 1025 - (692-100) - 178 = 255px）
   をそのまま踏襲しているが、スクロールしても追従するようposition:fixedに
   変更したため、実際の基準はビューポートになる */
.pn-top__promo {
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 490px;
  max-width: calc(100% - 40px);
  z-index: 100;
}

.pn-top__promo-link {
  display: block;
  margin-top: 10px;
  line-height: 0;
}

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

.pn-top__promo-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #333333;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

/* Figmaの配置(x:927 y:692)はDesktop(1440px)専用で、モバイル/タブレット時の
   デザインは確定していないため、ヒーローがスタックする幅では非表示にする — 要確認 */
@media (max-width: 992px) {
  .pn-top__promo {
    display: none;
  }
}

/* ==========================================================================
   スクロール表示アニメーション（HERO以外の全セクション共通）
   IntersectionObserverで要素がビューポートに入ったら.is-inviewを付与する
   （front-page.php末尾のスクリプト参照）。付与前はopacity:0 + 下に少し
   ずらした状態で待機し、付与されたらフェード＋スライドインする。
   グリッド内のカードは:nth-childでtransition-delayを段階的にずらし、
   1枚ずつ順番に表示されるようにしている。 */
.pn-top__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-top__reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* .pn-top__service-cardは独自にtransition（background-color/outline-color/
   box-shadow、hover用）を持っており、.pn-top__revealと同じ詳細度
   （クラス1つ）かつ後に定義されているため、そのままだと
   .pn-top__service-cardのtransition-propertyがreveal用のopacity/transform
   を上書きしてしまい、①reveal自体がフェードせず一瞬で表示される
   ②reveal用のtransition-delay（下記:nth-childの段階ずらし）がhoverの
   transitionに乗ってしまい、1回目のhoverだけ変化が遅れて見える
   （その後、hoverのtransitionend発火時にJS側でtransition-delayを0に
   リセットするため2回目以降は正常に見える）不具合があった。
   両クラスを併せ持つ要素専用に、reveal用・hover用のtransition-property
   を1つのtransitionにまとめて指定し（詳細度がクラス2つで両方の単体
   ルールより高いため確実に効く）、下のtransition-delayの上書きが
   opacity/transformの2つだけに効くようにする（hover用の3つは常に0の
   まま） */
.pn-top__service-card.pn-top__reveal {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    outline-color 0.2s ease,
    box-shadow 0.2s ease;
}

.pn-top__works-grid .pn-top__reveal:nth-child(2),
.pn-top__special-grid .pn-top__reveal:nth-child(2),
.pn-top__news-list .pn-top__reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.pn-top__works-grid .pn-top__reveal:nth-child(3),
.pn-top__special-grid .pn-top__reveal:nth-child(3),
.pn-top__news-list .pn-top__reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.pn-top__works-grid .pn-top__reveal:nth-child(4),
.pn-top__special-grid .pn-top__reveal:nth-child(4),
.pn-top__news-list .pn-top__reveal:nth-child(4) {
  transition-delay: 0.24s;
}

.pn-top__works-grid .pn-top__reveal:nth-child(5) {
  transition-delay: 0.32s;
}

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

.pn-top__works-grid .pn-top__reveal:nth-child(7) {
  transition-delay: 0.48s;
}

.pn-top__works-grid .pn-top__reveal:nth-child(8) {
  transition-delay: 0.56s;
}

.pn-top__works-grid .pn-top__reveal:nth-child(9) {
  transition-delay: 0.64s;
}

/* .pn-top__service-grid内のカードは.pn-top__service-card.pn-top__reveal
   （transition-propertyが5つ：opacity, transform, background-color,
   outline-color, box-shadow）に対する上書きのため、値も5つ指定し
   opacity/transformの2つだけに段階ずらしのdelayを適用、hover用の3つは
   常に0にする（1値のみ指定すると全プロパティに同じ値が回り込み、
   hoverのtransitionまで遅延してしまうため） */
.pn-top__service-grid .pn-top__reveal:nth-child(2) {
  transition-delay: 0.08s, 0.08s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(3) {
  transition-delay: 0.16s, 0.16s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(4) {
  transition-delay: 0.24s, 0.24s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(5) {
  transition-delay: 0.32s, 0.32s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(6) {
  transition-delay: 0.4s, 0.4s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(7) {
  transition-delay: 0.48s, 0.48s, 0s, 0s, 0s;
}

.pn-top__service-grid .pn-top__reveal:nth-child(8) {
  transition-delay: 0.56s, 0.56s, 0s, 0s, 0s;
}

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

/* ==========================================================================
   WORKS（制作事例）
   ========================================================================== */
.pn-top__works {
  padding: var(--pn-works-pad-y) 0;
}

.pn-top__works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 54px 40px;
}

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

.pn-top__works-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--pn-works-thumb-ar);
  overflow: hidden;
  background: var(--pn-bg-subtle);
}

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

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

.pn-top__works-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pn-workstags-gap);
}

.pn-top__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--pn-tag-pad-y) var(--pn-tag-pad-x);
  background: #f0f0f0;
  border-radius: 100px;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: var(--pn-tag-fs);
  line-height: 1;
  color: var(--pn-text-primary);
  white-space: nowrap;
}

.pn-top__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--pn-text-muted);
}

/* ==========================================================================
   SERVICE（サービス一覧）
   ========================================================================== */
.pn-top__service {
  padding: 100px 0;
}

/* Figma確定のDesktopフレーム幅(1440px)を最大幅にし、それ以上のワイド画面では
   全幅ではなく1440pxで中央寄せにする */
.pn-top__service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: var(--pn-bg-default, #fff);
}

/* 枠線はFigma上はカードの外側にはみ出すデザインのため、レイアウトに影響する
   borderではなくoutlineで表現する（outlineはbox-sizingや周囲の要素の
   位置に影響しない） */
.pn-top__service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: var(--pn-servicecard-pad-t) var(--pn-servicecard-pad-x) var(--pn-servicecard-pad-b);
  background: var(--pn-bg-default, #fff);
  outline: 10px solid transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  color: inherit;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    outline-color 0.2s ease,
    box-shadow 0.2s ease;
}

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

/* Figma確定：「top-service」コンポーネント(node 301:5645)のhoverバリアント
   （node 301:5637「ECサイト制作」カード）は、背景・枠線ともブランドカラー(赤)、
   ドロップシャドウが5px 5px 5px、見出し・説明文が白文字になり、説明文のみ
   font-weightがMedium(500)からBold(700)に変わる仕様 */
.pn-top__service-card:hover {
  background: var(--pn-brand-primary);
  /* css/style.css の a:hover { outline: 0; } がoutline-width/styleにも
     競合するため、outline-colorだけでなくshorthandで明示的に指定する
     （指定しないとhover時にoutlineの幅が0になってしまう） */
  outline: 10px solid var(--pn-brand-primary);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.pn-top__service-card:hover .pn-top__service-name,
.pn-top__service-card:hover .pn-top__service-desc {
  color: var(--pn-text-inverse, #fff);
}

.pn-top__service-card:hover .pn-top__service-desc {
  font-weight: 700;
}

.pn-top__service-icon {
  width: 130px;
  height: 130px;
  object-fit: contain;
}

/* css/style.css の a:hover img { opacity: 0.6; } がこのアイコンにも
   適用され、hover時に薄くなってしまう不具合対策。Figma上はhoverしても
   アイコンの見た目は変化しない仕様のため、opacity:1で明示的に打ち消す */
.pn-top__service-card:hover .pn-top__service-icon {
  opacity: 1;
}

.pn-top__service-name {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-servicename-fs);
  line-height: 24px;
  color: var(--pn-text-primary);
  text-align: center;
  transition: color 0.2s ease;
}

.pn-top__service-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-servicedesc-fs);
  line-height: 22px;
  color: var(--pn-text-primary);
  text-align: center;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
}

/* ==========================================================================
   ABOUT US
   ========================================================================== */
.pn-top__about {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pn-about-pad-y) 20px;
  background-color: #1a1a1a;
  background-image: url(../images/top/about-bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.pn-top__about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.pn-top__about-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: var(--pn-container);
  max-width: 100%;
}

.pn-top__about-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pn-about-copy-gap);
  max-width: var(--pn-about-copy-maxw);
}

.pn-top__about-copy .pn-top__eyebrow {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-eyebrow-fs);
  color: var(--pn-text-muted);
}

.pn-top__about-copy h2 {
  margin: 0;
  font-family: "YakuHanJP", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-abouth2-fs);
  line-height: var(--pn-abouth2-lh);
  color: #fff;
}

.pn-top__about-copy .pn-top__about-text p {
  margin: 0 0 var(--pn-abouttext-mb);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-abouttext-fs);
  line-height: var(--pn-abouttext-lh);
  color: #fff;
}

.pn-top__about-copy .pn-top__about-text p:last-child {
  margin-bottom: 0;
}

.pn-top__about-diagram {
  position: relative;
  flex-shrink: 0;
  width: 490px;
  height: 490px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 769px〜899px：円環図を340pxに縮小（内側の.pn-top__about-nodesは上部の
   .pn-top変数、--pn-about-node-size/--pn-about-node-gapの上書きで対応
   済み、2*97+146=340で一致）。490px固定のままだとコピー文が最小幅まで
   縮んでも画面からはみ出すため */
@media (min-width: 769px) and (max-width: 899px) {
  .pn-top__about-diagram {
    width: 340px;
    height: 340px;
  }
}

.pn-top__about-diagram img.pn-top__about-ellipse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pn-top__about-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pn-about-center-gap);
}

.pn-top__about-center img {
  width: var(--pn-about-center-img-w);
  height: auto;
}

.pn-top__about-center p {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-about-center-p-fs);
  line-height: var(--pn-about-center-p-lh);
  color: #fff;
  text-align: center;
}

/* Figma確定(node 289:4336)：2x2グリッド、gap 190px、left:0/top:0起点。
   以前は各ノードをtop/left/right/bottomで近似配置していたため、円の縁取り線が
   交差する位置がFigmaとズレ、文字にかぶって見えていた。グリッドで正確に再現する */
.pn-top__about-nodes {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, var(--pn-about-node-size));
  grid-template-rows: repeat(2, var(--pn-about-node-size));
  gap: var(--pn-about-node-gap);
}

.pn-top__about-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pn-about-node-size);
  height: var(--pn-about-node-size);
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--pn-about-node-fs);
  line-height: var(--pn-about-node-lh);
  color: #fff;
  text-align: center;
}

/* ==========================================================================
   SPECIAL（ブログ）
   ========================================================================== */
.pn-top__special {
  padding: var(--pn-special-pad-y) 0;
  background: var(--pn-bg-default, #fff);
}

.pn-top__special-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 27px;
  margin-bottom: 48px;
}

.pn-top__special-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

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

.pn-top__special-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 193;
  overflow: hidden;
  background: var(--pn-bg-subtle);
}

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

.pn-top__special-date {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: #666;
}

.pn-top__special-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-specialtitle-fw);
  font-size: 14px;
  line-height: var(--pn-specialtitle-lh);
  color: var(--pn-text-primary);
}

.pn-top__special-more {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: var(--pn-specialmore-fs);
  line-height: 1.6;
  color: var(--pn-text-primary);
  text-decoration: underline;
}

/* ==========================================================================
   NEWS（お知らせ）
   ========================================================================== */
.pn-top__news {
  padding: var(--pn-news-pad-y) 0;
  background: var(--pn-bg-default, #fff);
}

.pn-top__news-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.pn-top__news-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 344px;
  gap: var(--pn-newshead-gap);
}

/* タブレット幅（769px〜1279px、EC/HubSpot/コーポレートと揃えた閾値）
   では344px固定だと隣接する.pn-top__news-listの幅を圧迫するため縮小
   （Figmaにこの幅のデザインは無いため暫定値） */
@media (min-width: 769px) and (max-width: 1279px) {
  .pn-top__news-head {
    width: 240px;
  }
}

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

.pn-top__news-head > p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-newsheadp-fs);
  color: var(--pn-text-muted);
}

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

/* .pn-top__news-more--bottom は768px以下でのみ表示する複製リンク
   （詳細は@media (max-width: 768px)側のコメント参照） */
.pn-top__news-more--bottom {
  display: none;
}

/* Figma確定：node 18:1602（hover状態）は全体がopacity:50%になる仕様 */
.pn-top__news-more:hover {
  opacity: 0.5;
}

.pn-top__news-more span {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--pn-newsmore-span-fs);
}

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

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

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

.pn-top__news-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 1 auto;
  min-width: 0;
}

.pn-top__news-item {
  display: flex;
  align-items: center;
  gap: var(--pn-newsitem-gap);
}

.pn-top__news-date {
  flex-shrink: 0;
  width: 100px;
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--pn-newsdate-fs);
  letter-spacing: var(--pn-newsdate-ls);
  color: var(--pn-text-primary);
}

.pn-top__news-cat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 24px;
  border: 1px solid var(--pn-brand-primary);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  color: var(--pn-brand-primary);
  white-space: nowrap;
}

.pn-top__news-title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--pn-newstitle-fw);
  font-size: var(--pn-newstitle-fs);
  line-height: var(--pn-newstitle-lh);
  color: var(--pn-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pn-top__news-title:link,
.pn-top__news-title:visited,
.pn-top__news-title:hover,
.pn-top__news-title:active {
  color: var(--pn-text-primary);
  text-decoration: none;
}

/* ヒーロービジュアルは画面右端に絶対配置しているため、コピー文とビジュアルの間隔が
   狭くなるタブレット幅では重なってしまう。992px以下では768px以下のスタック
   レイアウトに切り替わる前に、同じスタック表示へ早めに倒しておく
   （992px〜1270pxは横並びのまま、見出しバッジのfont-size縮小
   （上部の.pn-top変数、--pn-hero-badge-fsの1270px側の上書きを参照）で対応する） */
@media (max-width: 992px) {
  .pn-top__hero-inner {
    flex-direction: column;
    padding-left: 20px;
    padding-right: 20px;
  }
  .pn-top__hero-visual {
    position: static;
    width: 100vw;
    margin: 0 calc(-50vw + 50%);
    /* max-width: 100%; */
    aspect-ratio: 750 / 650;
    max-height: 500px;
  }
  .pn-top__hero-visual img {
    position: static;
    inset: auto;
    width: 100%;
    height: 100%;
  }
  /* .pn-top__hero-innerがcolumnになりスマホ同様の縦積みレイアウトに
     なるため、.pn-top__scrollの位置もスマホ(768px以下)と同じにする */
  .pn-top__scroll {
    left: auto;
    right: 10px;
    top: 175px;
    bottom: auto;
    gap: 10px;
  }
}

/* ==========================================================================
   モバイル調整（768px以下）
   Figma「smp-design」ページのTOPフレーム(node 582:2492、390px幅)を実測値の
   基準として実装。デザインは390px基準だが、ブレークポイント自体は既存サイト
   全体の慣例(ヘッダーのonlypc/onlysp切り替え等)に合わせ768pxのまま統一している。
   ========================================================================== */
/* ここから先はレイアウト自体が変わるもの（display/flex-direction/position/
   grid列数の変更など）のみ。フォントサイズ・余白等の単純な値の切り替えは
   すべて上部の.pn-top変数（768px以下の上書き）側で対応済み。 */
@media (max-width: 768px) {
  /* ---------- HERO ---------- */
  /* Figma実測(node 582:2692)ではヒーロービジュアルは390px基準幅に対し520px
     （133.33%）と右側に画面外まではみ出す配置。.pn-top__hero自体に
     overflow:hiddenが既にあるため、幅を広げるだけで正しくクリップされる */
  .pn-top__hero-visual {
    position: relative;
    inset: auto;
    margin-top: 0px;
    width: 133.33%;
    max-width: 133.33%;
    aspect-ratio: 520 / 260;
  }
  /* Figma実測(node 582:2496)ではscrollインジケーターは非表示にはならず、
     ヒーロービジュアルの右上あたりに位置が変わる（左のコピー横ではない） */
  .pn-top__scroll {
    left: auto;
    right: 10px;
    top: 175px;
    bottom: auto;
    gap: 10px;
  }

  .pn-top__scroll span {
    font-size: 11px;
  }

  /* ---------- WORKS（制作事例） ---------- */
  .pn-top__works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  /* デスクトップは3列×3行で9件だが、2列だと最後の9件目だけ単独で
     余ってしまうため、モバイルでは9件目を非表示にして8件(4行×2列)にする */
  .pn-top__works-grid .pn-top__reveal:nth-child(9) {
    display: none;
  }

  /* ---------- SERVICE（サービス一覧） ---------- */
  .pn-top__service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---------- ABOUT US ---------- */
  .pn-top__about-inner {
    flex-direction: column;
  }
  /* 親(.pn-top__about-inner)がalign-items:centerのままのため、コピー内の
     テキストが中央寄せに引きずられないよう明示的に左揃えにする */
  .pn-top__about-copy {
    text-align: left;
  }
  /* モバイル限定改行は共通クラス.pn-br-sp（renewal.css）に統合済み */
  /* Figma実測(node 582:2594)ではデスクトップの490x490に対し320px基準の
     可変サイズに変わる（円ノード自体の縮小はvar(--pn-about-node-size)等で対応済み） */
  .pn-top__about-diagram {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* Figma実測(node 582:2594)ではボタンはコピー文の直後ではなく、円環図の
     下に配置される。.pn-top__about-btn--copyは.pn-top__about-copyの子要素
     でorderだけでは.pn-top__about-diagramより後ろに動かせないため、
     複製した.pn-top__about-btn--bottom側で表示する */
  .pn-top__about-btn--copy {
    display: none;
  }
  .pn-top__about-btn--bottom {
    display: inline-flex;
  }

  /* ---------- SPECIAL（ブログ） ---------- */
  .pn-top__special-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .pn-top__special-card {
    gap: 4px;
  }

  /* ---------- NEWS（お知らせ） ---------- */
  .pn-top__news-inner {
    flex-direction: column;
  }
  .pn-top__news-head {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  .pn-top__news-head p {
    margin: 0;
  }
  /* Figma実測(node 582:2637)ではMoreリンクはデスクトップと同じ丸アイコン+
     テキストのリンクのまま、位置だけ一覧の下・右寄せに変わる。
     .pn-top__news-more は .pn-top__news-head の子要素でorderだけでは
     .pn-top__news-list より後ろに動かせないため、front-page.php側で
     一覧の下にもう1つ複製（.pn-top__news-more--bottom）を用意し、
     デスクトップ/モバイルで表示を出し分ける方式にした */
  .pn-top__news-more--head {
    display: none;
  }
  .pn-top__news-more--bottom {
    display: inline-flex;
    align-self: flex-end;
  }
  .pn-top__news-list {
    gap: 24px;
  }
  .pn-top__news-item {
    flex-wrap: wrap;
  }
  .pn-top__news-date {
    width: 80px;
  }
  .pn-top__news-cat {
    padding: 6px 16px;
  }
  .pn-top__news-title {
    white-space: normal;
    width: 100%;
  }
}