/* PC: 上の余白が広すぎるのを潰す（SPとは別で効かせる） */
.work-section{
  padding-top: 40px; /* 0〜32pxで好み調整 */
}

/* Worksタイトル自体の上余白を潰す（PCでも効かせる） */
.work-section .section-title,
.work-section h1,
.work-section h2{
  margin-top: 0;
}

/* もし .section-inner 側に上paddingがあるなら潰す（PCでも） */
.work-section .section-inner{
  padding-top: 0;
}

/* ===============================
   SP: 上の余白をもっと詰める
   （広い原因は padding-top だけじゃなく
    見出しの margin でも増えるので両方潰す）
=============================== */
@media (max-width: 700px){
  .work-section{
    padding-top: 30px; /* ← SPはさらに詰める（0〜20pxで調整） */
  }

  /* Worksタイトル自体の上余白を詰める */
  .work-section .section-title,
  .work-section h1,
  .work-section h2{
    margin-top: 0;
  }

  /* もし .section-inner 側に上paddingがあるなら潰す */
  .work-section .section-inner{
    padding-top: 0;
  }
}

/* ===============================
   SP: Hamburger menu (homeと同じ見た目に寄せる)
   ※PCは今まで通り（右上のリンク）
=============================== */

/* デフォは非表示（PC） */
.sp-menu-btn,
.sp-menu-overlay{
  display: none;
}

@media (max-width: 700px){
  /* SPはヘッダー内の通常リンクは隠す */
  .nav .nav-links{
    display: none;
  }

  /* 赤丸ハンバーガー */
  .sp-menu-btn{
    display: grid;
    place-items: center;

    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;

    width: 54px;
    height: 54px;
    border-radius: 999px;

    background: #ee5752;
    border: none;

    box-shadow:
      0 10px 24px rgba(0,0,0,0.22),
      0 4px 10px rgba(0,0,0,0.14);

    -webkit-tap-highlight-color: transparent;
  }

  .sp-menu-btn span{
    width: 22px;
    height: 2px;
    background: #fff;
    display: block;
    border-radius: 999px;
    position: relative;
  }
  .sp-menu-btn span::before,
  .sp-menu-btn span::after{
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
  }
  .sp-menu-btn span::before{ top: -7px; }
  .sp-menu-btn span::after{ top: 7px; }

  /* オーバーレイ（全画面） */
  .sp-menu-overlay{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9998;

    background: rgba(238, 87, 82, 0.96);

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  .sp-menu-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }

  /* 右上 × */
  .sp-menu-close{
    position: absolute;
    top: 16px;
    right: 16px;

    width: 54px;
    height: 54px;
    border-radius: 999px;

    background: #ee5752;
    border: none;

    box-shadow:
      0 10px 24px rgba(0,0,0,0.22),
      0 4px 10px rgba(0,0,0,0.14);

    display: grid;
    place-items: center;
  }

  .sp-menu-close::before,
  .sp-menu-close::after{
    content: "";
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 999px;
    position: absolute;
  }
  .sp-menu-close::before{ transform: rotate(45deg); }
  .sp-menu-close::after{ transform: rotate(-45deg); }

  /* メニュー中身 */
  .sp-menu-nav{
    height: 100%;
    display: grid;
    place-items: center;
    padding: 90px 24px 40px;
  }

  .sp-menu-list{
    list-style: none;
    padding: 0;
    margin: 0;

    display: grid;
    gap: 18px;
    text-align: center;
  }

  .sp-menu-list a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .12em;
    font-size: 22px;
  }
}