/* ==========================================================================
   下層ページ 共通：ヘッダーの背景色を白に上書き（aboutと同じ仕組み）
   ========================================================================== */
   body.subpage .fv-header{
    background: var(--color-next-bg);
  }
  
  /* ==========================================================================
     Works page - タイトルエリア
     ========================================================================== */
  .works-page{
    position: relative;
    background: var(--color-next-bg);
    padding-top: var(--header-h); /* 固定ヘッダー分のオフセット */
    container-type: inline-size;
  }
  
  .works-page__inner{
    max-width: 1536px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6.51cqw, 100px);
    /* ②：ヘッダー→(works) の余白160px */
    padding-top: 160px;
  }
  
  .works-page__eyebrow{
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ④：(works) → 制作実績 の余白16px */
  .works-page__heading{
    margin-top: 16px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .1em;
    color: #493c33;
  }
  
  /* ⑤：見出し → メニューバー の余白80px */
  .works-page__filter{
    margin-top: 80px;
    display: flex;
    flex-wrap: wrap;
    /* ⑥：メニュー同士の余白20px */
    gap: 20px;
  }
  
  .works-page__filter-btn{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left; /* buttonのブラウザ標準の中央揃えを打ち消す（SPのGridで縦のラインを揃えるため） */
    font-family: var(--font-jp);
    font-size: 14px;
    font-weight: 500; /* medium */
    letter-spacing: .1em;
    color: var(--color-text-soft);
    transition: color .3s ease;
  }
  .works-page__filter-btn::before{
    content: "・";
  }
  .works-page__filter-btn.is-active{
    font-weight: 700; /* All はBold */
    color: var(--color-teal);
  }
  .works-page__filter-btn:hover{
    color: var(--color-teal);
  }
  
  /* ⑦：メニューバー → 実績画像 の余白100px */
  .works-page__grid{
    margin: 100px auto 0; /* 箱(1134px)自体を常に画面中央に配置 */
    /* 510px×2 + 114px(gap) = 1134px */
    max-width: 1134px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 箱の中で、左列は左揃え、右列は右揃え */
    /* ⑬：縦並び同士の余白80px */
    row-gap: 80px;
  }
  
  .works-page__card{
    display: block;
    width: 510px;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
  }
  
  .works-page__card[hidden]{
    display: none;
  }
  
  /* ⑧：実績画像 510×426px、角丸30px */
  .works-page__image-wrap{
    display: block;
    width: 100%;
    max-width: 510px;
    height: 426px;
    border-radius: 30px;
    overflow: hidden;
  }
  
  .works-page__image{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
  }
  
  /* ③：カードにカーソルを当てると、写真が少しアップになる */
  .works-page__card:hover .works-page__image{
    transform: scale(1.08);
  }
  
  /* ⑨：画像 → タグ の余白24px */
  .works-page__tag{
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 83px;
    height: 22px;
    border-radius: 11px;
    background: var(--color-orange);
    color: #ffffff;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
  }
  
  /* ⑩：タグ → タイトル の余白24px */
  .works-page__title{
    display: block;
    margin-top: 24px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ⑪：タイトル → 英字 の余白18px */
  .works-page__role{
    display: block;
    margin-top: 18px;
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .15em;
    color: #b2b1b1;
  }
  
  /* ⑫：画面幅が1200px前後になったら、実績同士がぶつかりそうになる前に縦積みに切り替える。
     このとき、実績のかたまり全体（.works-page__inner）の横幅をカード1枚ぶん(510px)+
     左右の余白に制限して中央寄せすることで、
     ・実績は常に画面中央に来る
     ・(works)・制作実績のタイトルも、実績と同じ箱の中にあるため、
       結果的にカードの左端とタイトルの左端が自動的に揃う
     という2つを同時に満たす */
  @container (max-width: 1200px){
    .works-page__inner{
      max-width: 558px; /* 510px(カード) + 24px×2(左右の余白) */
      padding-inline: 24px;
    }
    .works-page__grid{
      flex-direction: column;
      align-items: stretch;
    }
  }
  
  /* ⑭：一番下の実績 → view moreボタン の余白80px */
  .works-page__viewmore-wrap{
    position: relative;
    width: fit-content;
    margin: 80px auto 0;
  }
  
  /* ==========================================================================
     Works page - flow（ご依頼の流れ）セクション
     ========================================================================== */
  .works-flow{
    position: relative;
    background: var(--color-next-bg);
    margin-top: 180px; /* view moreボタン → (flow) の余白 */
    container-type: inline-size;
  }
  
  .works-flow__inner{
    max-width: 1536px;
    margin: 0 auto;
    padding-inline: clamp(24px, 6.51cqw, 100px);
  }
  
  .works-flow__eyebrow{
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .1em;
    color: var(--color-text);
  }
  
  /* ⑯：(flow) → ご依頼の流れ の余白80px */
  .works-flow__heading{
    margin-top: 16px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 24px;
    letter-spacing: .1em;
    color: #493c33;
  }
  
  /* ⑰：見出し → 1つ目のブロック の余白86px */
  .works-flow__list{
    margin-top: 86px;
  }
  
  .flow-step-wrap{
    max-width: 1136px;
    margin: 0 auto;
  }
  .flow-step-wrap + .flow-step-wrap{
    margin-top: 0; /* ブロックと矢印の間隔は矢印側のmarginで管理 */
  }
  
  /* ⑰：ブロック本体。1536px基準で1136×170px、角丸30px。
     画面幅が縮んだら横幅を縮め、必要に応じて縦に伸びる。
     ⑱：内側の余白は上下50px・左右60px */
  .flow-step{
    display: flex;
    align-items: center;
    min-height: 170px;
    border-radius: 30px;
    padding: 50px 60px;
    color: #ffffff;
  }
  
  /* ⑰：0F8F88 → 0C635E で交互に配色 */
  .flow-step--a{ background: #0F8F88; }
  .flow-step--b{ background: #0C635E; }
  
  .flow-step__left{
    flex: 0 0 180px;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .flow-step__label{
    font-family: var(--font-en);
    font-weight: 500; /* medium */
    font-size: 15px;
    letter-spacing: .1em;
    line-height: 15px;
  }
  
  /* ⑱：step → 01(番号) の余白10px */
  .flow-step__num{
    margin-top: 10px;
    font-family: var(--font-en);
    font-weight: 500; /* medium */
    font-size: 24px;
    letter-spacing: .1em;
    line-height: 24px;
  }
  
  /* ⑳：左ブロック → 縦棒 の余白60px（画面幅に応じて縮小） */
  .flow-step__bar{
    flex: 0 0 auto;
    width: 2px;
    height: 97px;
    background: #ffffff;
    margin-left: clamp(24px, 3.906cqw, 60px);
  }
  
  /* ㉑：棒 → テキストの塊 の余白60px（画面幅に応じて縮小） */
  .flow-step__body{
    flex: 1 1 auto;
    margin-left: clamp(24px, 3.906cqw, 60px);
    text-align: left;
  }
  
  /* ⑲：お問い合わせ（ステップタイトル） */
  .flow-step__title{
    margin-top: 10px;
    font-family: var(--font-jp);
    font-weight: 500; /* medium */
    font-size: 18px;
    letter-spacing: .1em;
    text-align: center;
  }
  
  .flow-step__desc{
    margin-top: 8px;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 30px;
    text-align: left;
  }
  
  /* ㉒：ブロックの下の矢印（36×36の円の中に15×24pxの矢印）。上下14pxの余白。
     Step5の下には出さない（HTML側で最後の矢印を出力しない） */
  .flow-step__arrow-wrap{
    display: flex;
    justify-content: center;
    margin: 14px 0;
  }
  
  .flow-step__arrow-circle{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-orange);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .flow-step__arrow-circle svg{
    width: 15px;
    height: 24px;
    display: block;
  }
  
  /* 900px前後で、ブロック内の要素を縦積みに切り替え、縦棒→横棒に変更 */
  @container (max-width: 900px){
    .flow-step{
      flex-direction: column;
      align-items: center; /* ②：ブロック内で中央に来るように */
    }
    .flow-step__left{
      flex: 0 0 auto;
      width: auto;
      align-items: center;
      text-align: center;
    }
    .flow-step__title{
      text-align: center;
    }
    .flow-step__bar{
      align-self: stretch; /* ③：ブロックの横幅いっぱい(パディングを除く)に */
      width: auto;
      height: 2px;
      margin-left: 0;
      margin-top: 24px;
    }
    .flow-step__body{
      margin-left: 0;
      margin-top: 24px;
      text-align: center;
    }
  }
  
  /* ㉓：Step5のブロック → 【ご依頼にあたって】 の余白80px */
  .works-flow__notes{
    margin-top: 80px;
    max-width: 1136px;
    margin-inline: auto;
    text-align: left;
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .1em;
    line-height: 30px;
    color: var(--color-text);
  }
  
  .works-flow__notes-line + .works-flow__notes-line{
    margin-top: 10px;
  }
  
  .works-flow__notes strong{
    font-weight: 500; /* 【ご依頼にあたって】だけmedium */
  }
  
  /* ==========================================================================
     SP（スマホ）— Works page
     ========================================================================== */
  @media (max-width: 600px){
    /* ②：ヘッダー→(works) */
    .works-page__inner{
      padding-top: 38.8647px;
      max-width: 343px; /* 295px(カード) + 24px×2 */
      padding-inline: 24px;
    }
  
    .works-page__eyebrow{
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* ④：(works)→制作実績 */
    .works-page__heading{
      margin-top: 16px;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* ⑤：見出し→フィルターメニュー。2列×2段のグリッドに変更。
       ⑥：DOM順は変えず、orderでAll/グラフィック/バナー/Webサイトの配置にする。
       グリッドなので、グラフィックとWebサイトの列は自動的に揃う */
    .works-page__filter{
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(2, auto);
      justify-items: start; /* 各列を左揃えにして、縦のラインを揃える */
      column-gap: 40px;
      row-gap: 16px;
    }
    .works-page__filter-btn{
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .1em;
    }
    .works-page__filter-btn[data-filter="all"]{ order: 1; }
    .works-page__filter-btn[data-filter="graphic"]{ order: 2; }
    .works-page__filter-btn[data-filter="banner"]{ order: 3; }
    .works-page__filter-btn[data-filter="website"]{ order: 4; }
    .works-page__filter-btn.is-active{
      font-weight: 700;
    }
  
    /* ⑦：メニューバー→実績画像 */
    .works-page__grid{
      margin-top: 60px;
      flex-direction: column;
      align-items: stretch;
      row-gap: 40px; /* ⑫ */
    }
  
    /* ⑧：実績画像 295×246px */
    .works-page__card{
      width: 295px;
      max-width: 100%;
    }
    .works-page__image-wrap{
      width: 295px;
      max-width: 100%;
      height: 246px;
    }
    .works-page__image{
      height: 246px;
    }
  
    /* ⑨：画像→タグ */
    .works-page__tag{
      margin-top: 16px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .05em;
    }
  
    /* ⑩：タグ→タイトル。画面幅が狭ければ改行される（display:blockのため自動対応） */
    .works-page__title{
      margin-top: 12px;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* ⑪：タイトル→英字 */
    .works-page__role{
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .15em;
    }
  
    /* ⑭：一番下の実績→view moreボタン */
    .works-page__viewmore-wrap{
      margin-top: 50px;
    }
  }
  
  /* ==========================================================================
     SP（スマホ）— Works flow section
     ========================================================================== */
  @media (max-width: 600px){
    .works-flow{
      /* ⑮：view moreボタン→(flow) */
      margin-top: 80px;
    }
  
    .works-flow__inner{
      padding-inline: 24px;
    }
  
    /* ⑮：(flow)・ご依頼の流れ は、(works)・制作実績 と同じ関係 */
    .works-flow__eyebrow{
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .1em;
    }
    .works-flow__heading{
      margin-top: 16px;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: .1em;
    }
  
    /* ⑯：見出し→flowブロック */
    .works-flow__list{
      margin-top: 60px;
    }
  
    .flow-step-wrap{
      max-width: none; /* ブロックは画面幅いっぱい（paddingを除く） */
    }
  
    .flow-step{
      border-radius: 30px;
      /* ⑰：内側の余白 上下40px・左右30px */
      padding: 40px 30px;
    }
  
    .flow-step__label{
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .1em;
      line-height: 13px;
    }
  
    .flow-step__num{
      margin-top: 5px; /* stepラベル→01 */
      font-size: 21px;
      font-weight: 500;
      letter-spacing: .1em;
      line-height: 21px;
    }
  
    /* ⑲：01→お問い合わせ(タイトル) */
    .flow-step__title{
      margin-top: 20px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: .1em;
    }
  
    /* ⑳：タイトル→棒線 */
    .flow-step__bar{
      height: 2px;
      margin-top: 30px;
    }
  
    /* ㉑：棒線→説明文 */
    .flow-step__body{
      margin-top: 30px;
    }
    .flow-step__desc{
      font-size: 14px;
      font-weight: 400;
      letter-spacing: .1em;
      line-height: 28px;
    }
  
    /* ㉒：Step5のブロック→【ご依頼にあたって】 */
    .works-flow__notes{
      margin-top: 50px;
      max-width: none;
      font-size: 13px;
      letter-spacing: .1em;
      line-height: 21px;
    }
  }